JavaScript 的三种使用方式

1. 内部引入（常用）
2. 外部引入（一个 js 文件可以被多个页面共同使用）
3. 行内（少用）

区别：

• 内部引入只能够使用单页面
• 外部引入可以应用到多个页面
• 行内是直接在 HTML 标签内写（少用）

JavaScript 执行顺序

HTML 代码是按照从上到下进行解释的。如果 JS 获取到网页中还没有进行解释的内容，就会出现 JS DOM 堵塞。

解决 JS 堵塞的方式有两种：

1. 将 JS 代码写在网页的最下面
2. 使用 window.onload（网页加载完毕执行）

JS 错误处理：

• JS 代码一旦发生错误，错误后的代码将不会执行
• 但不会影响发生错误前的代码执行

常用输出方法

alert("111"); // 警告框
prompt("请输入你的名称", "王菲"); // 提示对话框
console.log(value); // 用来进行调试，只能够在浏览器中进行调试
document.write("内容可以是普通文字和html代码，css样式");

调试方法

1. 使用 alert() 去打印变量的值进行缩小范围调试
2. 在浏览器中点击 F12 看错误信息

变量与数据类型

• JS 中变量都是弱类型的，不管声明什么数据类型都使用 var 进行声明
• 使用 typeof 关键字可以查看变量类型

强类型 vs 弱类型：

• 声明的类型确定死就是强类型
• 声明的类型不确定就是弱类型

特殊值：

• 如果运算结果不是数字，也不是字符串，就得到 NaN（不是数字）

JS 中的 6 种数据类型

1. number：所有的数字都属于 number，不管小数还是整数
2. boolean：true 或 false
3. string：可以使用 "" 和 '' 进行声明，但不要混着用
4. null：代表空
5. undefined：声明了变量未赋值的空
6. Object：所有引用数据类型的统称，包含元素节点，其他类型

浏览器选择

推荐使用谷歌（调试方便）或火狐浏览器（调试提示是中文的）

函数（方法）

函数是将具有特定功能的代码块封装为一个函数。JS 的函数分为系统函数和自定义函数。

自定义函数

定义函数语法

function 函数名(参数列表) {
// 函数体
}

调用时直接使用函数名。

函数表达式语法

var 变量名 = function(参数列表) {
// 函数体
}

调用时使用变量名。

注意：

• 不管有没有声明返回值，都可以返回，也可以不返回
• 不管定义没有定义参数，都可以传参，也可以不传参

类型转换

Number(参数); // 转为数字类型
Boolean(参数); // 转为 Boolean 类型
需要转型的内容.toString(); // 转为字符串类型

参数

• 形参：只是声明，没有具体的值，值需要通过调用时传入
• 实参：具体传入的内容

实用函数

isNaN(内容); // 判断是不是非数值
arguments; // 参数过多时获取参数列表（返回数组形式）

数组

JS 中的数组创建使用 []，下标从 0 开始。由于 JS 是弱类型语言，数组可以放入任何类型。

创建数组的三种方式

1. 隐式方式创建数组

var b = ['11', 22, '你好', ['大家好', 11]];

2. 使用构造函数创建数组

var b = new Array('你好', 11, '快开学啦!');

3. 使用下标索引给数组赋值

var v = new Array(2); // 数组的默认长度为2
v[0] = '你好很好';
v[1] = 11;
v[2] = '快开学啦';

数组遍历

1. for 循环

for(var i = 0; i < v.length; i++) {
document.write(v[i] + "<br>");
}

2. for…in

for(var i in v) {
document.write(i + "<br>");
}

3. for…of

for(var i of v) {
document.write(i + "<br>");
}

二维数组

var v = [["张三","李四"], ["王五","马六"], ["秦叔宝","尉迟恭"]];// 遍历二维数组
for(var i of erwei) {
for(var j of i) {
document.write(j + "<br>");
}
}

对象

创建对象的两种方式

1. 直接创建

var v = {'bianhao':1, 'name':'香蕉', 'price':3, 'num':3};

2. 使用 new 创建

var v1 = new Object();
v1.bianhao = 2;
v1.name = '橘子';
v1.price = 4;
v1.num = 2;

对象方法

v1.gongneng = function() {
alert(内容);
}

访问对象属性和方法

对象名称['属性的键'] 或 对象名称.属性的键

修改对象属性

v["name"] = "王五"; 或 v.name = "王五";

删除对象属性

delete 对象的属性名;

遍历对象

for(var i in a) {
document.write(a[i]);
}

构造函数

JS 的构造函数和普通函数创建类似，主要的区别在于 JS 构造方法用于创建对象。

Math 对象

Math.abs(e); // 取 e 的绝对值
Math.ceil(e); // 向上取整
Math.floor(e); // 向下取整
Math.PI; // 圆周率
Math.pow(a, b); // 得到 a 的 b 次方
Math.sqrt(e); // 得到 e 的平方根
Math.random(); // 得到 0-1 之间的随机数

Date 对象

创建 Date 对象

var dt = new Date(); // 当前时间
var dt1 = new Date("1999-11-11"); // 指定时间
var dt2 = new Date("2003/08/22"); // 指定时间
var dt3 = new Date(2008, 7, 11); // 月份需要+1
var dt4 = Date.now(); // 当前时间的毫秒数

常用方法

getYear(); // 得到年份（需要加1900）
getFullYear(); // 直接得到年份
getMonth(); // 月份（记得+1）
getDate(); // 获取日
getDay(); // 周几（0-6，0代表周日）
getHours(); // 小时
getMinutes(); // 分钟
getSeconds(); // 秒
toDateString(); // 英文格式的日期
toLocalString(); // 数字格式的日期
toTimeString(); // 只有时间，没有年月日
valueOf(); // 将时间转为毫秒数
new Date(毫秒); // 将毫秒数转为时间

三目表达式

xiaoshi > 12 ? panduan = "下午" : panduan = "上午";
var month1 = month > 10 ? (month + 1) : "0" + (month + 1);

定时器

setInterval(code, millisec); // 周期性执行
clearInterval(); // 清除 setInterval
setTimeout(); // 只执行一次

String 对象

声明方式

1. 直接声明

var str = "123"; // string 类型

2. 构造器声明

var str1 = new String("你好"); // 引用类型

字符串特性

字符串具有不可变性：可以通过下标访问，但不能通过下标修改。

常用方法

length; // 字符串长度
charAt(a); // 下标为 a 的字符
concat(a, b, c...); // 连接字符串
indexOf(a); // 返回 a 的第一个位置（未找到返回-1）
lastIndexOf(a); // 从后往前找 a 的位置（未找到返回-1）
replace(a, b); // 用 b 替换 a
slice(a, b); // 截取 a 到 b 的位置
split("a"); // 以 "a" 分割字符串
substr(a, b); // 从 a 截取 b 个字符

事件

onclick; // 点击事件
onmouseover; // 鼠标移入
onmouseout; // 鼠标移出
onfocus(); // 获取焦点
onselect(); // 选中文本内容
onblur(); // 失去焦点
onchange(); // 内容改变
onload(); // 网页加载完毕
onunload(); // 网页刷新或关闭
(); // 网页刷新或关闭
onkeyup(); // 键盘松开

事件绑定方式

1. 直接在元素上写属性事件

<input type="button" value="计算结果" onclick="sure()" id="btn1" />

2. 使用 JS 代码动态赋值事件

var btn1 = document.getElementById("btn1");
btn1.onclick = function() {
alert("123");
}