JavaScript基础
1 JavaScript入门
1.1 JavaScript简介
JavaScript是一种基于对象的脚本语言，它是解释执行的。代码以纯文本的形式存储在文件中，可以使用任何一种文本编辑器来编辑JavaScript程序。它是一种宽松类型的语言。不必显示定义变量的数据类型，实际上也无法明确地定义其数据类型。在大多数情况下，数据类型会根据需要进行自动转换。JavaScript是赋予网页活力与交互性的主要手段之一。Netscape公司和Sun公司联手完成。因为js是脚本语言，所以代码也称为js脚本。
1.2 JavaScript功能
- 表单确认
- 页面修饰以及特殊效果
- 导航系统
- 基本数学运算
- 动态文档生成
总而言之，JavaScript的功能就是数据验证和网页特效
1.3 JavaScript特点
- 脚本编写：小程序段方式实现编程，是解释性语言
- 基于对象：把页面中的各个元素看作对象
- 简单：基本语句和控制简单，变量为弱类型
- 安全：不允许访问本地硬盘，只能实现信息浏览或动态交互
- 动态：可以直接对客户的输入做出响应，事件驱动
- 跨平台：依赖于浏览器本身，与操作环境无关
1.4 JavaScript相关概念
JavaScript
- ECMAScript：不与任何具体浏览器相绑定，只描述以下内容：语法、类型、语句、关键字、保留字、运算符、对象。
- DOM：文档对象模型，是HTML和XML的应用程序接口（API），DOM把整个页面规划成由节点层级构成的文档。DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松地删除、添加和替换节点。
- BOM：浏览器对象模型，可以对浏览器窗口进行访问和操作，由于没有相关的BOM标准，每种浏览器都有自己的BOM实现。
- 主要实现：弹出新的窗口；移动、关闭浏览器窗口以及调整大小；提供用户屏幕分辨详细信息的屏幕对象…….
1.5 HTML和JavaScript的结合方式
- 在HTML中嵌入JavaScript
- 在页面中嵌入JavaScript代码
- 可以嵌入到任何文职，建议嵌入到head标签中
- 在HTML中，<script>标签默认为JavaScript脚本，因此在实际开发中language、type属性都省略
- 在标签中嵌入JavaScript代码
- 响应标签标签的某个事件
- 在页面中嵌入JavaScript代码
内部嵌入
- 在HTML中引入外部JavaScript文档
- 多个页面使用相同的JavaScript代码
- 将共用代码保存在以.js为扩展名的文件中
- 在页面中使用src属性引入外部文件
外部引入
2 JavaScript基本语法
2.1 JavaScript语法
- 区分大小写：变量 myTest、myTEST是不同的变量
- 变量是弱类型：变量定义是只需加‘var’即可
- 行结尾加分号
- 括号表明代码块
- 注释通用简单：
- 单行注释：‘//’
- 多行注释：‘/*...*/’
- 反斜杠‘\’用来转义特殊字符
- 常量：JavaScript中没有常量概念，但是提供了几个默认系统常量供开发使用。这些系统常量只是数学和数值常量，方便数学运算和特殊值引用。
- Math.E:常量e
- Math.PI：常量PI
- Number.MAX_VALUE:可表示的最大的数
- Number.MIN_VALUE:可表示的最小的数
- Number.NaN:非数字值
- 在浏览器中逐条解释执行，如果某条语句出现错误，后面的语句将不能执行。
2.2 JavaScript变量
在程序中经常需要保存一些临时值，以便被后面的脚本所使用，需要提供一个空间来存储这些值，并可以在以后取出来使用或修改
- 变量声明
- 在使用变量前声明：var mytest;
- 可以声明的同时赋值：var mytest = 'This is a book';
- 同时声明多个变量（不建议）：var a,b = 1,c;
- 变量命名
- 以字母、下划线（_）或美元符号（$）开头
- 余下的字符可以是下划线、美元符号或任何的字母、数字
- 最长为255个字符
- 不能有空格，大小写敏感
- 不能使用JavaScript中的关键字或保留字命名
JavaScript关键字
JavaScript保留字
2.3 数据类型
JavaScript共有5种原始类型（简单类型）和1种复杂类型
- Undefined未定义类型:（变量值为undefined）
- 任何未被赋值的变量；
- 声明的变量未初始化时，该变量的初始值是undefined.
- 字符串类型:（用""或者''括起来的字符或数值）
- Boolean布尔类型:（变量值为true或false）
- Null空类型:（变量值为null）用于尚未存在的对象
- Number数字类型:（特殊值NaN非数）
- Infinity正无穷大
- -Infinity负无穷大
- NaN（Not a Number）
- 不能用于算术计算
- 它与自身不相等
- 函数isNaN()
- object：复杂类型
2.3.1 typeof操作符
typeof操作符可以操作变量，也可以操作字面量。虽然也可以这样使用：typeof(box)，但，typeof是操作符而非内置函数。PS：函数在ECMAScript中是对象，不是一种数据类型。所以，使用typeof来区分function和object是非常有必要的。
typeof结果
注意：typeof null的结果是object，这是JavaScript的一个bug[1]
2.3.2 undefined类型
在JavaScript中，声明了但是未被赋值的变量和未声明的变量用typeof的结果都是undefined，所以尽量避免只声明不赋值。
2.3.3 null类型
只有一个值的数据类型，即特殊的值null。它表示一个空对象引用(指针)，而typeof操作符检测null会返回object。如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null。这样，当检查null值就知道变量是否已经分配了对象引用了。
有个要说明的是：undefined是派生自null的，因此ECMA-262规定对它们的相等性测试返回true。由于undefined和null两个值的比较是相等的，所以，未初始化的变量和赋值为null的变量会相等。这时，可以采用typeof变量的类型进行比较。
2.3.4 number类型
包含两种数值：整型和浮点型
- 整型有十进制、八进制（0开头）、十六进制（0x开头）
- 浮点类型：当整数部分是0时可以省略。
- NaN：即非数值（Not a Number）是一个特殊的值，用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。
- 非数值型有一个判断函数isNaN()，用来判断值到底是不是NaN，isNaN()函数在接收到一个值后，会尝试将这个值转换为数值。
2.3.5 boolean类型
有两个值true和false。JavaScript是区分大小写的，True和False或者其他都不是Boolean类型的值。
2.3.6 string类型
表示由零个或多个16位unicode字符组成的字符序列，即字符串。字符串可以由双引号或者单引号表示。
转义字符
2.3.7 object类型
- 对象其实就是一组数据和功能的集合
- 使用new操作符，后跟要创建的对象类型的名称来创建对象
- object()里可以任意传参，可以传数值、字符串、布尔值等
- 还可以进行相应的计算
- 使用new object()来表示一个对象，也可以使用这种new操作符来创建其他类型的对象。
2.4 数据类型的转换
- JavaScript是弱类型语言，变量的类型对应于其值的类型
- 可以对不同类型的变量执行运算，解释器强制转换数据类型，然后进行处理
类型转换
2.4.1 to数值
- parseInt(var)
- parseFloat(var)
- Number(var)
注意：parseInt方法和parsefloat方法，只有对string类型调用这些方法，它们才能正确运行；对其他类型都返回NaN;parseInt方法首先检查位置0处的字符，判断它是否是个有效数字，若有效，再往下检查，直到发现非数字，并返回前面的检查结果。而Number是一个对象，Number()是这个对象的构造方法。parseInt是一个方法，能直接写parseInt是因为它是window对象的一个方法，window可以省略。Number()只有一个参数，可以是一个字符串，也可以是其他对象。window.parseInt()有两个参数，后一个可选，前一个是字符串，后一个是进制的位权。
2.4.2 to字符串
- 将任何类型的值转换为字符串
- 如果是null或者undefined，则返回"null"或者"undeinfed"
2.5 表达式
- 规则
- 区分大小写
- 语句由一个或多个表达式、关键字或运算符组成
- 多条语句可以写在同一行上，之间使用分号隔开
- 单独一行中只有一条语句，可以省略分号（不推荐省略）
- 概念
- 表达式是产生一个结果值的式子，JavaScript的表达式是由常量、变量和运算符等组成。
- 表达式可以作为参数传递给函数，或将表达式结果赋予给变量保存起来。
- 表达式的结果值有多种类型，比如布尔型、字符串型或数值型等，因此常有逻辑表达式、数值表达式和布尔表达式之说。
- 操作数
- 操作数是指表达式中的变量或常量，在javascript中也包含表达式的返回值（实际上就是一个常量）
- 操作数的数据类型由表达式的类型和运算符所支持的数据类型来决定的。
- 运算符
- 运算符是指程序设计语言中有运算意义的符号，类似于普通数学里运算符。
- 程序设计语言也一样，规定了其支持的数据类型以及数据可以进行的运算。JavaScript的运算符包含算术运算符、逻辑运算符和一些特殊的运算符。
- 运算符种类：算术运算符、关系运算符、赋值运算符、逻辑运算符、位运算符
赋值运算符
算术运算符
注意：除法运算符返回的是浮点数
关系运算符
注意：相等运算符（==）和等同运算符（===），相等运算符将两端的数据转换成同一类型后比较，相同就为true，是非严格的比较；而等同运算符（===）是严格的判断，要两个数据的数据类型也一样才返回true。
逻辑运算符
条件运算符
条件运算符语法：(condition) ? trueVal : falseVal
- 操作数的类型
- 表达式中的操作数要么是常量要么是变量，常量和变量都有其特定的数据类型
- 构成表达式的操作数的数据类型是由变量或常量的类型来确定
- 运算符优先级
- JavaScript中的运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。
- 具有较高优先级的运算符先于较低优先级的运算符得到执行。
- 同等级的运算符按左到右的顺序进行
运算符优先级
3 流程控制语句
JavaScript语言构成主要由控制语句、函数、对象、方法、属性等来实现
- 选择语句 ：if语句 、if-else语句 、if-else-if语句、switch语句
- 循环语句 ：for语句 、while语句 、do-while语句 、for-in语句、break和continue语句
- 异常处理语句：try-catch语句 、try-catch-finally语句 、throw语句
3.1 选择语句
- if语句：if语句用于单一条件
if语句
- if-else语句：实现双路选择
if-else语句
- if-else-if语句：实现多路选择
if-else-if语句
- switch语句：用if-else语句实现多路选择结构使程序看起来不清晰，可以选择switch语句代替之。switch实现多路选功能，在给定的多个选择中选择一个符合条件的分支来执行。
switch语句
3.2 循环语句
在编程中有些指令需要执行很多遍，这就要编写大量的代码。而计算机则是专门用来快速完成重复和繁琐的工作，因此编程语言也就提供循环语句来减少重复指令的编写 将重复执行的动作放在循环语句中，计算机将根据条件执行之 。
循环语句包括：for、while、do-while、for-in
- for循环：遇到需要执行指定次数的代码时，使用for循环比较合适。在执行for循环执行体中的语句前，有三个语句将得到执行，这三个语句的运行结果将决定是否要进入for循环体
for循环
- while循环：在执行循环体前测试一个条件，如果条件成立则进入循环体，否则跳到循环后的第一条语句。 一些重复执行动作的情形比较简单时就不需要用for循环，可以使用while循环代替。
while循环
- do-while循环：do-while语句先执行一遍循环体，循环体内的语句执行之后再测试一个条件表达式 。如果表达式成立则继续执行下一轮循环，否则跳到do-while代码段后的第一条语句。
do-while循环
- for-in循环：是for语句的一个变体，同样是for循环语句。for-in通常用于遍历某个集合的每个元素，比如数组由很多元素，其元素索引构成了一个集合，使用for-in语句可以遍历该集合，进而取得所有元素数据 。
for-in循环
3.3 跳转语句
- break语句：无条件跳出并结束当前的循环结构
- continue语句：忽略其后的语句并结束此轮循环，并开始新的下一轮循环
3.4 异常处理语句
程序运行过程中难免会出错，出错后的运行结果往往是不正确的，因此运行时出错的程序通常被强制中止。运行时的错误统称为异常。异常处理语句有：try-catch、try-catch-finally、throw
- try-catch语句：try-catch是一个异常捕捉和处理代码结构，当try块中的代码发生异常时，将由catch块捕捉以及处理。
- try-catch-finally语句：try-catch-finally语句作用与try-catch语句一样，唯一的区别就是当所有过程执行完毕之后前者的finally块无条件被执行。
- throw语句：当多个结构嵌套时，处于里层try-catch语句不打算自己处理异常则可以将其抛出，父级try-catch语句可以接收到子级抛出的异常。
4 函数
函数是完成特定任务的可重复调用的代码段，是JavaScript组织代码的单位。JavaScript的函数属于Function对象，因此可以使用Function对象的构造函数来创建一个函数 。可以使用function关键字以普通的形式来定义一个函数
函数的功能 ：函数的主要功能是将代码组织为可复用的单位，可以完成特定的任务并返回数据
4.1 定义函数
4.1.1 普通定义方式
普通定义方式使用关键字function，也是最常用的方式：
普通定义方式
- function：必选项，定义函数用的关键字。
- 函数名：必选项，合法的JavaScript标识符。
- 参数：可选项，合法的JavaScript标识符，外部的数据可以通过参数传送到函数内部。
- 语句组：可选项，JavaScript程序语句，当为空时函数没有任何动作
- return：可选项，遇到此指令函数执行结束并返回，当省略该项时函数将在右花括号处结束。
- 表达式：可选项，其值作为函数返回值。
4.1.2 函数变量定义方式
函数变量定义方式不够直观，可读性不强。函数变量定义方式是指以定义变量的方式定义函数。
JavaScript中所有函数都属于Function对象，于是可以使用Function对象的构造函数来创建一个函数 。变量定义方式实质上就是创建一个函数对象。
函数变量定义方式
- 函数变量名：必选项，代表函数名。是合法的JavaScript标识符。
- 参数：可选项，作为函数参数的字符串，必须是合法的JavaScript标识符，当函数没有参数时可以忽略此项。
- 函数体：可选项，一个字符串。相当于函数体内的程序语句序列，各语句使用分号格开，当忽略此项时函数不执行任何操作。
4.2 函数的参数
- 函数的参数是函数与外界交换数据的接口
- 外部的数据通过参数传入函数内部进行处理
- 函数内部的数据也可以通过参数传到外界。
- 函数定义时圆括号里的参数称为形式参数，调用函时传递的参数称为实际参数
4.2.1 arguments对象
与其他语言不同，ECMAScript不会验证传递给函数的参数的个数是否相等，函数可以接受任意个数的参数（Netscape的文档最多25个），而不会引发任何错误。而且使用特殊对象arguments，开发者无需指出参数名，就能访问它们。还可以在函数内使用argument.length属性检测参数个数。这样利用arguments对象判断传递给函数的参数个数，即可模拟函数重载。
- arguments对象代表正在执行的函数和调用它的参数
- 函数对象的length属性说明函数定义时指定的参数个数
- arguments对象的length属性说明调用函数时实际传递的参数个数
- arguments对象不能显式创建，函数在运行时被调用，由JavaScript运行时环境创建并设定各个属性值，其中包括各个参数的值 。
- 通常使用arguments对象来验证所传递的参数是否符合函数要求
4.3 函数的返回类型
- 值类型：值类型使用的是值传递方式，即传递数据的副本。一般情况下，函数返回的非对象数据都使用值返回方式。
- 引用类型：引用类型返回的是数据的地址，而不是数据本身 。引用传递的优点是速度快，但系统会为维护数据而付出额外的开销。通常返回复合类型数据时使用引用传递方式。
4.4 函数使用
- 普通调用
- 带参数调用
- 无参数调用
- 链接调用：在链接中调用函数（用户点击链接后，即调用该函数）
- 事件触发调用：由事件触发调用函数
4.5 函数嵌套
函数内部嵌套另外一个函数
4.6 函数的作用域
- 公有函数：是指定义在全局作用域中，每一个代码都可以调用的函数
- 私有函数：是指处于局部作用域中的函数 。
- 当函数嵌套定义时，子级函数就是父级函数的私有函数
- 外界不能调用私有函数，私有函数只能被拥有该函数的函数代码调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script lang="javascript">
var i = 999;
i = i - 2;
var b = null;
var c = 5.76;
var box = 10/0;
var box1 = true;
var box2 = new Object();
var box3;
console.log("hello world"+Math.PI+i);
console.log(typeof b);
console.log(c);
console.log(typeof c);
console.log(isNaN(NaN));
console.log(isNaN(25));
console.log(typeof box1);
console.log(typeof box2);
console.log(typeof f);
console.log(typeof box3);
console.log(b == box3);
console.log(typeof b == typeof box3);
console.log(typeof 'aaaa');
console.log(false == 0);
document.write("\n");
document.write(c);
document.write("\n");
document.write(box);
document.write(box2);
document.write("\\\\\\")
try{
console.log("aaaa1");
console.log("aaaa2");
console.log("aaaa3");
console.log("aaaa4");
var err = new Error("aaaa5");
throw err;
console.log("aaaa6");
}catch(err){
console.log("aaaa7"+err.name+":"+err.message);
console.log("aaaa8");
console.log("aaaa9");
}finally{
console.log("aaaa10");
}
function sum(arg1,arg2){
var realArgCount = arguments.length;
var frmArgCount = sum.length;
if(realArgCount<frmArgCount){
var e = new Error();
e.number = 100001;
e.message = "实际参数不符合要求！";
throw e;
}
}try{
document.write("<p><h1>arguments对象测试</h1></p>");
document.write("正确调用的结果："+sum(10,20));
document.write("<br>不符合规则的调用结果：");
document.write(sum(10));
}catch(e){
alert(e.number+"错误号："+e.message);
}
function GetType(obj){
return typeof(obj);
}
function fruit(name,price){
if(GetType(price) != 'number'){
var e = new Error();
e.message = "Price is not a number";
throw e;
}
}
var apple = new fruit("apple",2.0)
function a(){
function b(){
function c(){
document.write("<li>c");
}
document.write("<li>b");
}
document.write("<li>a");
b();
c();
}
a();
</script>
</head>
<body>
</body>
</html>
效果1
效果2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var v = new Function("a1","console.log('abcdefg'+a1)");
function aa1(a2,a3,a4){
console.log("aaaaaaaa"+arguments[0]+arguments[1]);
console.log("函数定义的参数个数："+aa1.length);
console.log("函数调用时的参数个数："+arguments.length);
}
function aa2(str1){
var w = eval(str1);
console.log(w);
}
function aa3(){
aa4();
function aa4(){
console.log("aaaaaaaaaaaaaa");
aa5();
function aa5(){
console.log("bbbbbbbbbbbbbbb");
}
}
}
function aa6(){
var va1 = document.getElementById("语文");
var va2 = document.getElementById("数学");
var va3 = document.getElementById("英语");
i1 = parseInt(va1.value);
i2 = parseInt(va2.value);
i3 = parseInt(va3.value);
document.getElementById("sum1").innerHTML=i1+i2+i3;
}
</script>
</head>
<body>
<p id="sum1">
</p>
<form action="GET">
<input type="button" onclick="return v(99)" value="点击">
<input type="button" onclick="return aa1(0,12)" value="点击">
<input type="button" onclick="return aa2('12+33')" value="点击">
<input type="button" onclick="return aa3()" value="点击">
<br>
请输入各科成绩：<br>
语文：<input type="number" name="a1" id="语文" >
数学：<input type="number" name="a2" id="数学" >
英语：<input type="number" name="a3" id="英语" ><br>
总分：<input type="button" value="求总分" onclick="return aa6()">
</form>
</body>
</html>
效果3
