资源描述
第一章JavaScript基础
1. 如何实现JavaScript 4
(1) 如何把JavaScript代码放到HTML页面里 4
l 使用<script>标签,直接在HTML代码里加入JavaScript代码 4
l 使用<script stc=”XXX.js”>调用外部的JavaScript(.js文献) 4
l 如何与老浏览器打交道 4
(2) 把JavaScript代码放到HTML页面不同的位置 4
l 把JavaScript代码放到HTML<body>部分 4
l 把JavaScript代码放到HTML<head>部分 4
l 示例代码 4
2. JavaScript语句与注释 5
(1) JavaScript语句结束符 5
(2) JavaScript代码块 5
(3) JavaScript注释 5
(4) JavaScript变量 5
l 变量命名规则 5
l 申明或创建变量 5
l 重新申明变量 5
3. JavaScript运算符 5
(1) 基本运算符 5
(2) 位运算符(~(非运算)、&(与运算)、|(或运算)、^(异或运算)) 5
(3) Boolean运算(!(求反运算)、&&(与运算)、||(或运算)) 6
(4) 关系运算(<、>、<=、>=、==、!=) 6
(5) 等性运算符(==、===、!=、!==) 6
(6) 条件运算符 7
(7) 其他运算符 7
l 赋值运算符 7
l 逗号运算符 7
l typeof运算符 7
l delete运算符 7
l instanceof运算符 7
4. with语句 8
(1) 语法及作用 8
(2) 示例 8
5. 分支语句 8
(1) if...else...语句 8
(2) switch语句 8
6. 消息框 8
(1) 警告框 8
(2) 确认框 8
(3) 提醒框 9
7. 函数(一般定义到<head>标签之间) 9
(1) 定义函数 9
(2) 关于函数的arguments对象 9
l 在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。 9
l 使用arguments.length检测参数个数 9
l 模拟函数重载 10
(3) Function对象(类) 10
l Function对象的使用 10
l 使用Function类的length属性 11
l 使用Function类的valueOf()方法和toString()方法 11
(4) 闭包 11
8. 循环语句 11
(1) for循环 12
l for循环的使用格式 12
l 例子 12
(2) while循环 12
l While循环的使用格式 12
l 例子 12
(3) 使用break和continue退出循环 12
9. JavaScript事件 12
(1) 事件句柄 12
(2) onload和onUnload 13
(3) onFocus, onBlur 和 onChange 13
(4) onSubmit 13
(5) onMouseOver 和 onMouseOut 13
(6) JavaScript 计时事件 13
10. 异常解决Try...Catch 语句 14
(1) 异常解决格式 14
(2) 例子 14
(3) Throw声明 14
l Throw语法 14
l 例子 14
(4) onerror事件 14
l onerror事件功能 14
l 语法 14
l 例子 14
11. 特殊字符与注意点 15
(1) 特殊字符 15
(2) 注意点 15
l JavaScript 对大小写敏感 15
l 空格 15
l 换行 15
第二章JavaScript对象
1. JavaScript对象简介 15
(1) JavaScript对象也是有属性和方法的 15
l 对象属性的使用 15
l 对象方法的使用 15
(2) 对象的定义与实例化 15
(3) 对象的作用域 16
l JavaScript对象只有公用作用域 16
l JavaScript对象没有静态作用域 16
l 关键字this 16
(4) 定义类或对象的方法 16
l 工厂方式 16
l 构造函数方式和原型方式 17
l 混合的构造函数/原型方式(常用方式) 18
l 动态原型方法(常用方式) 18
l 总结(使用哪种方式好) 18
2. 修改对象 18
(1) 创建新方法 18
(2) 重命名已有方法 19
(3) 添加与已有方法无关的方法 19
(4) 为本地对象添加新方法 19
3. 对象类型转换 19
(1) 转换成字符串 19
(2) 转换成数字 20
l parseInt() 20
l parseFloat() 20
(3) 强制类型转换 20
l Boolean() 函数 20
l Number()函数 20
l String() 函数 21
4. JavaScript常用对象 21
(1) 对象类型说明 21
l 本地对象 21
l 内置对象 21
l 宿主对象 21
(2) Object对象 21
l Object对象的属性 21
l Object对象的方法 21
(3) JavaScript对象参考(略) 21
(4) Browser(浏览器)对象参考(略) 21
(5) HTML DOM 对象参考(略) 22
第三章JavaScript 高级
1. Cookie 23
(1) cookie的作用 23
(2) 示例 23
2. 访问HTML DOM节点 24
(1) 查找并访问节点(得到节点对象) 24
l 使用getElementById()得到某个节点对象 24
l 使用getElementsByTagName()得到某些节点对象 24
l 使用getElementsByName()得到某些节点对象 25
l parentNode、firstChild以及lastChild属性 25
(2) 访问节点的内容 26
l innerText(IE)、textContent(FF)、innerHTML 26
l outerText、outerHTML(少用) 26
l value属性获取表单节点内容 26
(3) 访问节点的样式 27
l 使用节点对象的style属性对象改变样式 27
l 使用className设立样式 27
3. 继承机制实现 27
(1) 继承的方式 27
(2) 继承方式1—对象冒充 27
(3) 继承方式2—call()方法与apply()方法 28
l call()方法 28
l apply()方法 28
(4) 继承方式3—原型链（prototype chaining） 29
(5) 继承方式4—混合方式 29
附：ECMAScript关键字与保存字
1. 关键字 30
2. 保存字 30
作者：李志伟
编写完毕时间：2023-11-12
一、 JavaScript基础
1. 如何实现JavaScript
(1) 如何把JavaScript代码放到HTML页面里
l 使用<script>标签,直接在HTML代码里加入JavaScript代码
<html>
<body>
<script language="javascript" type="text/javascript">
alert("消息");
</script>
</body>
</html>
l 使用<script stc=”XXX.js”>调用外部的JavaScript(.js文献)
JavaScript.html文献：
<html>
<body>
<script language="javascript" type="text/javascript" src="JavaScript.js">
</script>
</body>
</html>
JavaScript.js文献：
document.write("外部的JavaScript文献");
alert("消息");
l 如何与老浏览器打交道
那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的 HTML 注释标签：
<html>
<body>
<script language="javascript" type="text/javascript">
<!--//HTML注释
document.write("Hello World!");//JavaScript代码
//-->//JavaScript注释
</script>
</body>
</html>
注释行末尾的两个正斜杠是 JavaScript 的注释符号，它会阻止 JavaScript 编译器对这一行的编译。
(2) 把JavaScript代码放到HTML页面不同的位置
页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时，我们希望当页面载入时执行脚本，而此外的时候，我们则希望当用户触发事件时才执行脚本。
l 把JavaScript代码放到HTML<body>部分
把页面载入时就需要执行的JavaScript代码放到<body>标签之间。这是一种规范，建议这样做。
l 把JavaScript代码放到HTML<head>部分
把当脚本被调用时，或当事件被触发时才会执行的JavaScript代码放到<head>标签之中，这样就可以保证在调用JavaScript之前就载入了它。这是一种规范，建议这样做。
l 示例代码
<html>
<head>
<script type="text/javascript">
function message()
{
document.write("head之间的JavaScript！");
}
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
document.write("body之间的JavaScript！");
</script>
<button onclick="message()">head</button><!-- 调用head之间的JavaScript -->
</body>
</html>
2. JavaScript语句与注释
(1) JavaScript语句结束符
通常要在每行语句结尾加上一个分号(;)，但是根据JavaScript标准语句结尾的分号是可选的，浏览器会把行末作为语句的结尾。
<script language="javascript" type="text/javascript">
document.write("语句1<br>")
document.write("语句2<br>")
</script>
(2) JavaScript代码块
JavaScript可以分批的组合起来，使用“{”“}”把多条语句括起来组成代码块。代码块的作用是一并的执行语句序列。
<script language="javascript" type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>
(3) JavaScript注释
<script language="javascript" type="text/javascript">
document.write("JavaScript注释！");//双斜杠表达行注释（第一种）
/*
第二种，块注释
*/
</script>
(4) JavaScript变量
l 变量命名规则
JavaScript变量对大小写敏感，变量必须是以字母或下划线开头
l 申明或创建变量
<script language="javascript" type="text/javascript">
var i=123;//使用var关键字申明变量
var s="李志伟";
temp="直接赋值使用变量";//假如您所赋值的变量尚未进行过声明，该变量会自动声明。
document.write(i+" "+s+" "+temp);
</script>
l 重新申明变量
<script language="javascript" type="text/javascript">
var i=123;//使用var关键字申明变量
var i;//在重新声明该变量后，变量的值不会被重置或清除。
document.write("i的值是:"+i);//i的值还是123
</script>
3. JavaScript运算符
(1) 基本运算符
基本运算符有+、-、*、%、++、--、=、类似+=的运算符，其使用方式与编程语言(Java、C、C#等)基本同样。下面重要演示+运算符。
<script language="javascript" type="text/javascript">
i=5+5;
document.write("i的值是:"+i+"<br>");//10
i="5"+"5";
document.write("i的值是:"+i+"<br>");//55
i=5+"5";
document.write("i的值是:"+i+"<br>");//55
</script>
(2) 位运算符(~(非运算)、&(与运算)、|(或运算)、^(异或运算))
<script language="javascript" type="text/javascript">
var iNum1 = 25; //25 等于 00011001
var iNum2 = ~iNum1; // 转换为11100110
document.write(iNum2+"<br>");//输出 "-26"
var iResult = 25 & 3;
/*
25 = 0000 0000 0000 0000 0000 0000 0001 1001
3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
AND = 0000 0000 0000 0000 0000 0000 0000 0001
*/
document.write(iResult+"<br>");//输出 "1"
var iResult = 25 | 3;
/*
25 = 0000 0000 0000 0000 0000 0000 0001 1001
3 = 0000 0000 0000 0000 0000 0000 0000 0011
--------------------------------------------
OR = 0000 0000 0000 0000 0000 0000 0001 1011
*/
document.write(iResult+"<br>");//输出 "27"
var iResult = 25 ^ 3;
/*
25 = 0000 0000 0000 0000 0000 0000 0001 1001
3 = 0000 0000 0000 0000 0000 0000 0000 0011
---------------------------------------------
XOR = 0000 0000 0000 0000 0000 0000 0001 1010
*/
document.write(iResult+"<br>");//输出 "26"
</script>
(3) Boolean运算(!(求反运算)、&&(与运算)、||(或运算))
对boolean值进行的运算，与编程语言的运算方式基本一致。
(4) 关系运算(<、>、<=、>=、==、!=)
<script language="javascript" type="text/javascript">
var bool = 2<1;
document.write(bool+"<br>");//输出false
var bool = "a"<"b";//字母 a的字符代码是 97,字母b的字符代码是 98
document.write(bool+"<br>");//输出ture
var bool = "98"<97;//字符串 "98"将被转换成数字 98
document.write(bool+"<br>");//输出false
var bool = "a"<9999;//这样比较总是返回false，不管是<、>、<=、>=
document.write(bool+"<br>");//输出false
</script>
(5) 等性运算符(==、===、!=、!==)
下表是一些特殊情况的值：
表达式
值
表达式
值
表达式
值
null==undefined
true
“NaN”==NaN
false
5==NaN
false
NaN==NaN
false
NaN!=NaN
true
false==0
true
true==1
true
true==2
false
undefined==0
false
null==0
fale
“5”==5
true
全等号由三个等号表达（===），只有在无需类型转换运算数就相等的情况下，才返回 true。
<script language="javascript" type="text/javascript">
var i = "66";
var j = 66;
document.write((i == j)+"<br>");//输出 "true"
document.write((i === j)+"<br>");//输出 "false"
document.write((i != j)+"<br>");//输出 "fale"
document.write((i !== j)+"<br>");//输出 "true"
</script>
(6) 条件运算符
variable = boolean_expression ? true_value : false_value;条件运算符与编程语言的使用方式基本一致。
<script language="javascript" type="text/javascript">
var num1=25,num2=565;
var max = (num1>num2) ? num1 : num2;//取最大值
document.write(max+"<br>");//输出 "true"
</script>
(7) 其他运算符
l 赋值运算符
每种重要的算术运算以及其他几个运算都有复合赋值运算符：
· 乘法/赋值（*=）
· 除法/赋值（/=）
· 取模/赋值（%=）
· 加法/赋值（+=）
· 减法/赋值（-=）
· 左移/赋值（<<=）
· 有符号右移/赋值（>>=）
· 无符号右移/赋值（>>>=）
l 逗号运算符
用逗号运算符可以在一条语句中执行多个运算。
例如：var iNum1 = 1, iNum = 2, iNum3 = 3;
l typeof运算符
typeof 运算符有一个参数，即要检查的变量或值，对变量或值调用 typeof 运算符将返回下列值之一：Undefined：假如变量是 Undefined 类型的；Boolean：假如变量是 Boolean 类型的；Number：假如变量是 Number 类型的；String：假如变量是 String 类型的；Object：假如变量是一种引用类型或 Null 类型的。
<script type="text/javascript">
var temp1="李志伟";
var temp2;//Undefined类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
document.write((typeof temp1)+"<br>");//string
document.write((typeof temp2)+"<br>");//undefined
document.write((typeof 86)+"<br>");//number
document.write((typeof null)+"<br>");//object
</script>
Undefined：Undefined类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
null：另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 事实上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。alert(null == undefined); //输出 "true"。
l delete运算符
delete 运算符删除对以前定义的对象属性或方法的引用。例如：
<script type="text/javascript">
var o = new Object;
o.name = "李志伟";
document.write(o.name+"<br>"); //输出 "David"
delete o.name;
document.write(o.name+"<br>"); //输出 "undefined"
</script>
l instanceof运算符
能用 instanceof 运算符检查给定变量指向的对象的类型。例如：
<script type="text/javascript">
function Car()//使用原型方式(或混合的构造函数/原型方式)申明instanceof才有用
{}
var car=new Car();
document.write((car instanceof Car)+"<br>");//输出 true
</script>
使用instanceof 运算符会出现很多意想不到的结果，建议不用。使用原型方式(或混合的构造函数/原型方式)申明instanceof才有用
4. with语句
(1) 语法及作用
作用：with 语句用于设立代码在特定对象中的作用域。
语法：with (对象) { 对象使用范围 }
(2) 示例
<script type="text/javascript">
var s = "李志伟";
with(s)
{
document.write(toString()+"<br>"); //输出 "李志伟",等效于s.toString()
}
</script>
提醒：with 语句是运营缓慢的代码块，特别是在已设立了属性值时。大多数情况下，假如也许，最佳避免使用它。
5. 分支语句
(1) if...else...语句
<script language="javascript" type="text/javascript">
var i=50;
if(i==0)
{
document.write("i等于0");
}
else
{
document.write("i不等于0");
}
</script>
(2) switch语句
<script language="javascript" type="text/javascript">
var i=2;
switch(i)
{
case 1:
document.write("i等于1")
break
case 2:
document.write("i等于2")
break
case 3:
document.write("i等于3")
break
default:
document.write("错误")
}
</script>
6. 消息框
(1) 警告框
语法：alert(“文本”);
<script language="javascript" type="text/javascript">
alert("我是警告框！！");
</script>
(2) 确认框
语法：confirm(“文本”);
<script language="javascript" type="text/javascript">
var r=confirm("点击确认!");//确认对话框
if (r==true)
{
alert("你点击了确认！");
}
else
{
alert("你点击了取消！");
}
</script>
(3) 提醒框
语法：prompt(“文本”,“默认值”);
<script language="javascript" type="text/javascript">
var name=prompt("请输入您的名字","李志伟");
if (name!=null && name!="")
{
document.write("你好！" + name + " 今天过得怎么样？");
}
</script>
7. 函数(一般定义到<head>标签之间)
(1) 定义函数
function 函数名(var1,var2,...,varX)
{
代码．．．(return)
}
在函数内申明的变量，只能在函数中访问(其生存期就在整个函数中)。在函数外申明的变量，在整个HTML页面内都有效(生存期在整个HTML页面)。
(2) 关于函数的arguments对象
l 在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。
例如，在函数 sayHi() 中，第一个参数是 message。用 arguments[0] 也可以访问这个值，即第一 个参数的值（第一个参数位于位置 0，第二个参数位于位置 1，依此类推）。
<html>
<head>
<script type="text/javascript" language="javascript">
function sayHi(message)//注意直接写参数名，不要写var申明
{
document.write(message+"<br>");
document.write(arguments[0]);//使用arguments对象获得参数
}
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
sayHi("李志伟");//调用函数
</script>
</body>
</html>
l 使用arguments.length检测参数个数
<html>
<head>
<script type="text/javascript" language="javascript">
function num()
{
document.write("参数个数"+arguments.length+"<br>");//获取参数个数
}
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
num();//调用函数
num(1,2);
num(1,2,3,5,"李志伟");
</script>
</body>
</html>
l 模拟函数重载
<html>
<head>
<script type="text/javascript" language="javascript">
function num()
{
var i=arguments.length;
switch(i)
{
case 1:
document.write("参数："+arguments[0]+"<br>");
break;
case 2:
document.write("相加："+(arguments[0]+arguments[1])+"<br>");
break;
default:
document.write("参数个数犯错！！");
break;
}
}
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
num("李志伟");//调用函数
num(55,2);
num(1,2,3,5,"李志伟");
</script>
</body>
</html>
(3) Function对象(类)
l Function对象的使用
函数事实上是功能完整的对象。Function 类可以表达开发者定义的任何函数。用 Function 类直接创建函数的语法如下：var function_name = new function(arg1, arg2, ..., argN, function_body)。
<html>
<head>
<script type="text/javascript" language="javascript">
var sayHi = new Function("name","document.write(name+\"你好！！\");");
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
sayHi("李志伟");//调用函数
</script>
</body>
</html>
尽管可以使用 Function 构造函数创建函数，但最佳不要使用它，由于用它定义函数比用传统方式要慢得多。但是，所有函数都应看作 Function 类的实例。
l 使用Function类的length属性
<html>
<head>
<script type="text/javascript" language="javascript">
function fun1(){}
function fun2(a1,a2){}
function fun3(a1,a2,a3,a4,a5,a6,a7){}
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
document.write(fun1.length+" "+fun2.length+" "+fun3.length);
</script>
</body>
</html>
使用Function的length属性可以得到函数的形参个数
l 使用Function类的valueOf()方法和toString()方法
<html>
<head>
<script type="text/javascript" language="javascript">
function fun()
{
document.write("李志伟");
}
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
document.write(fun.toString());//输出函数的源代码
</script>
</body>
</html>
这两个方法返回的都是函数的源代码，在调试时特别有用。
(4) 闭包
闭包就是：函数可以使用函数之外定义的变量。
<html>
<head>
<script type="text/javascript" language="javascript">
var iBaseNum=100;
function fun(iNum1, iNum2)
{
function doAdd()
{
return iNum1 + iNum2 + iBaseNum;//使用函数外的变量
}
return doAdd();
}
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
document.write(fun(10,30));
</script>
</body>
</html>
就像使用任何高级函数同样，使用闭包要小心，由于它们也许会变得非常复杂。
8. 循环语句
(1) for循环
l for循环的使用格式
格式1：
for (变量=开始值;变量<=结束值;变量=变量+步进值)
{
需执行的代码
}
格式2：
for (property in expression)
{
需执行的代码
}
l 例子
<script type="text/javascript" language="javascript">
for (sProp in window)
{
document.write(sProp+"<br>");//显示 window 对象的所有属性。
}
</script>
<script type="text/javascript" language="javascript">
var array=new Array(1,2,3,4,5,6,7,8,9,0,-3);
for (i in array)
{
document.write(array[i]+"<br>");//显示数组内容
}
</script>
(2
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
