2023年JavaScript学习笔记.doc

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