目录
一、JavaScript
1.JS 的组成
①ECMAScript
ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript:ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。
②DOM ——文档对象模型
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
③BOM ——浏览器对象模型
BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
2.写法
①行内式 JS
<input type="button" value="点我试试" οnclick="alert('Hello World')" />
②内嵌 JS
<script>
alert('Hello World~!');
</script>
③外部 JS文件
<script src="my.js"></script>
3.JavaScript 注释
①单行注释
// 用来注释单行文字( 快捷键 ctrl + / )
②多行注释
/* */ 用来注释多行文字( 默认快捷键 alt + shift + a )
3.JavaScript 输入输出语句
二、变量
1.概述
变量是用于存放数据的容器。
本质:变量是程序在内存中申请的一块用来存放数据的空间。
①声明变量
var age; // 声明一个 名称为age 的变量
②赋值
age = 10; // 给 age 这个变量赋值为 10
③变量的初始化
var age = 18; // 声明变量同时赋值为 18
2.使用
①弹出一个输入框,提示用户输入姓名。
②弹出一个对话框,输出用户刚才输入的姓名。
<script>
// 1. 用户输入姓名 存储到一个 myname的变量里面
var myname = prompt('请输入您的名字');
// 2. 输出这个用户名
alert(myname);
</script>
3.语法扩展
①更新变量:一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
var age = 18;
age = 81; // 最后的结果就是81因为18 被覆盖掉了
②同时声明多个变量:同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。
var age = 10, name = 'zs', sex = 2;
③声明变量特殊情况
4.命名规范
由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能 以数字开头。 18age 是错误的
不能 是关键字、保留字。例如:var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
5.交换变量案例
要求:交换两个变量的值 ( 实现思路:使用一个 临时变量 用来做中间存储 )
var temp; // 声明了一个临时变量为空
var apple1 = '青苹果';
var apple2 = '红苹果';
temp = apple1; // 把右边给左边
apple1 = apple2;
apple2 = temp;
console.log(apple1);
console.log(apple2);
6.小结
三、数据类型
①JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型:
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
①JS 把数据类型分为两类:
简单数据类型 (Number,String,Boolean,Undefined,Null)
复杂数据类型 (object)
2.简单数据类型
①数字型 Number
var age = 21; // 整数
var Age = 21.3747; // 小数
②数字型进制
// 1.八进制数字序列范围:0~7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
// 2.十六进制数字序列范围:0~9以及A~F
var num = 0xA;
③数字型范围
alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308
最小值:Number.MIN_VALUE,这个值为:5e-32
④数字型三个特殊值
alert(Infinity); // Infinity ,代表无穷大,大于任何数值
alert(-Infinity); // -Infinity ,代表无穷小,小于任何数值
alert(NaN); // NaN,Not a number,代表一个非数值
⑤ isNaN()
用来判断一个变量是否为非数字的类型,返回 true 或者 false
var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ,21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); // true ,"andy"是一个非数字
①字符串型 String
字符串引号嵌套:JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)
var strMsg = '我是"高帅富"程序猿'; // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错,不能 单双引号搭配
②字符串转义符
③字符串长度
var strMsg = "我是帅气多金的程序猿!";
alert(strMsg.length); // 显示 11
④字符串拼接
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112
①布尔型 Boolean
布尔类型有两个值:true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。
console.log(true + 1); // 2
console.log(false + 1); // 1
②Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)
一个声明变量给 null 值,里面存的值为空
3.获取变量数据类型
①typeof 可用来获取检测变量的数据类型
var num = 18;
console.log(typeof num) // 结果 number
②字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
数字字面量:8, 9, 10
字符串字面量:'程序员', "前端"
布尔字面量:true,false
4.数据类型转换
①转换为字符串
②转换为数字型
③转换为布尔型
代表空、否定的值会被转换为 false ,如 ''、0、NaN、null、undefined
其余值都会被转换为 true
四、案例
1.计算年龄
在页面中弹出一个输入框,我们输入出生年份后, 能计算出我们的年龄。
<script>
var year = prompt('请您输入您的出生年份');
var age = 2018 - year; // year 取过来的是字符串型 但是这里用的减法 有隐式转换
alert('您今年已经' + age + '岁了');
</script>
2.简单加法器
计算两个数的值, 用户输入第一个值后,继续弹出第二个输入框并输入第二个值,最后通过弹出窗口显示出两次输入值相加的结果。
var num1 = prompt('请您输入第一个值:');
var num2 = prompt('请您输入第二个值:');
var result = parseFloat(num1) + parseFloat(num2);
alert('您的结果是:' + result);