javascript学习笔记讲解版

1、JavaScript 学习笔记学习笔记 目 录 第第 1 1 章章JAVASCRIPTJAVASCRIPT 的语法的语法.1 1.1什么是脚本程序和JAVASCRIPT.1 1.1.1什么是脚本程序.1 1.1.2Javascrpit 的简介.1 1.2脚本代码的位置.2 1.2.1也可将 javascript 放入到单独的一个文件 js 文件，在需要使用的时候引入:.2 1.2.2在超连接中使用 javascript.3 1.2.3在 button 中也可使用 javascript .3 1.3JAVASCRIPT的保留关键字.3 1.4JAVASCRIPT的基本语法.3 1.4.1基本数据

2、类型和常量.3 1.4.2变量:.4 1.4.3运算符号.5 1.5JS的控制语句.6 1.5.1switch 选择语句.6 1.5.2While 循环语句.7 1.5.3do while 语句.7 1.5.4for 循环语句 .8 1.6JS中的系统函数（它们都属于 GLOBAL对象的方法，可以直接使用） .8 1.6.1parseInt(numString,radix)方法.9 1.6.2parseFloat 方法 .9 1.6.3isNaN 方法.9 1.6.4eval 方法,用处不小呀!.9 1.7对象.9 1.7.1对象与对象实例.9 1.7.2Math 对象.10 1.7.3Dat

3、e 对象.10 1.7.4toString 的方法.11 1.8数组.11 1.8.1数组列表.11 1.9ARRAY对象 .12 1.10在函数中修改参数值的问题.13 第第 2 章章DOM 编程编程.15 2.1DOM简介.15 2.2如何编写事件处理程序.16 2.3WINDOW对象.17 2.4WINDOW对象常用方法.17 2.4.1alert 方法.17 2.4.2confirm 方法 .17 2.4.3prompt 方法.18 2.4.4navigate 方法.18 2.4.5setinterval 方法 .18 2.4.6setTimeout 方法.18 2.4.7cleari

4、nterval 方法.18 2.4.8clearTimeout 方法.18 2.4.9moveTo 方法.18 2.4.10resizeTo 方法 .18 2.4.11open 方法 .18 2.5WINDOW对象属性.20 2.6WINDOW对象-事件.21 2.6.1onload 事件.21 2.6.2onunload 事件.21 2.6.3onbeforeunload 事件.21 2.6.4通用事件(针对 html 元素而言).22 2.7WINDOW对象-对象属性.22 2.7.1location 对象.22 2.7.2event 对象 .23 2.7.3screen 对象.23 2.

5、7.4history 对象.23 2.7.5navigator 对象.23 2.7.6document 对象.23 2.8FORMS对象(DOCUMENT的对象属性) .27 2.8.1form 对象.27 2.8.2form 表单字段元素的应用案例.27 第 1 章 javascript 的语法 1.1什么是脚本程序和 javascript 1.1.1什么是脚本程序 alert(new Date(); -就是在浏览器中跳出一个对话框 顺平你好! 问题: 什么时候执行,在哪里执行的?(注意顺平你好是什么时候显示的?) 1.1.2Javascrpit 的简介 最早是 livescript,是一种

6、基于对象和事件驱动，并具备安全性的脚本语言,是有 netscapce 公司提供的，后和 sun 公司合作，将 livescript 更名为 javascript microsoft jscirpt Java 与 javascript 的关系 由两个公司提供的. 作用与用途不一样. 两个公司合作，这样他们的语法有相识之处 javascript 不是 java 的子集 javacript、Jscript 与 ECMAscript jscript 是由微软提供的,由于得不到 netscape 公司的技术支持，自己编写的.它和 javascript 就非常相似的. 他们在不

7、停的发展,你可以去网站了解最新的标准. Javascript : Jscript: http:/msdn.microsoft/scripting 1.2脚本代码的位置 var sp=“中国”; 这是一个 html 段落 alert(sp); 它等同与将 这是一个 html 段落 var sp=“中国”; alert(sp); 为了防止浏览器将 javascript 的内容与 html 相互混淆，你可以在之间加入 1.2.1也可将 javascript 放入到单独的一个文件 js 文件，在需 要使用的时候引入: 比如 ： 你的一个 js 文件 var sp=中国; alert(sp); 在某个网

8、页文件中引入 顺平! 这个效果如同将 my.js 的所有内容都引入到标签之间 1.2.2在超连接中使用 javascript 顺平! 1.2.3在 button 中也可使用 javascript 其实就是对 html 控件的事件进行处理 1.3javascript 的保留关键字 查看 javascript 帮助文档 1.4javascript 的基本语法 不要使用 javascript 的保留字 javascript 大小写敏感 sp , Sp 是不同的 中，英文的分号、引号要注意. Javascript 的注释： / 单行注释 /* */多行注释 1.4.1基本数据类型和常量

9、整形常量 比如: 1 ，45， 567 实数常量 比如: 34.5 ， 67.89 布尔常量 true,false 字符串常量 没有字符常量，即使是一个字符，也被当作字符串 “a girl”, abcde,”a”,”“ 注意: 1 如果有特殊字符串，要有 转义 2 在 js 中不能把一个长的字符串简单的分成多行显示，要有+来分行 null 常量 undefine 常量 1.4.2变量: js 中 是弱数据类型的，在定义变量时，不需要指明该变量的类型(由 js 引擎来决 定) var name=“shunping”; /nam

10、e 是字符串 var kk=2 /kk 是数 var yy /yy 是 undefined 如果 name=234;/这时 name 自动变成数. 不声明变量直接使用 x=345; /亦可, 但是这应该是一个字符串 1.4.3运算符号 算术运算符号 加号运算符 注意：可以用于数的加运算，也可以用于字符串的拼结。 减法运算符 - 乘法运算符 * 除法运算符 / 9/4 会保留小数部分，而不是 2，这和 java 是不一样的。 求模运算符 % +运算符 有前+,和后+。他们的规则和 java 是一样的。 -运算符 赋值运算符 =就是赋值运算符，就是将值赋值给某个变量。

11、如：var x=3、x+=6、x-=7、x*=9、x/=6 、x%=5 等等 比较运算符号 大于运算符 。 小于运算符= 。 小于等于 32 位左移 31 1.5js 的控制语句 1.5.1switch 选择语句 switch(表达式) case 取值 1: 语句 break; case 取值 n: 语句快 break; default: 语句块 n+1 break; 它与它与 java 的的 switch 是一样的，同样要注意表达式可以是是一样的，同样要注意表达式可以是 js 支持的所有数据类型支持的所有数据类型! 1.5.2While 循环语句 While(条件表达式语句)

12、执行语句块 案例 var x=8; while(x10) alert(“x=“+x); x+; 一定要注意这种语句可能造成死循环，比如在 while() 后直接加入分号； 可以给 同学看看当运行该脚本时，浏览器中会给出怎样的提示。 1.5.3do while 语句 do 执行语句块 while(条件表达式); 注意不论条件表达式是否成立，执行语句快总会被执行一次. 案例: var x=3; 案例说明案例说明: 可以使用 1,2,3来判断和显示是星期几的对话框提示. while(x=0) alert(“你好”); x+; var x=3; do alert(“你好”); x+ while(x=0

13、); 1.5.4for 循环语句 for(初始化表达式;循环条件表达式;循环后一次操作表达式) 执行语句块 案例： 同学一般都会理解，但是仍然可以举一个例子加深对 for 循环运行原理的理解 var i=0; var result=“; for(x=1;x5;x+) result=result + “ x=“ + x; alert(result); 对案例修改： 将 x=1 提出 for 循环看看，再将 x+;放入到 for 循环体内看看，再将 x5 想办法 放入到 for 循环体。 这里是一种授课思路. 1.6Js 中的系统函数（它们都属于 Global 对象的方法，可以直 接使用） 1.6

14、.1parseInt(numString,radix)方法 将一个字符串转换成一个数字 如果没有指定radix,那么默认为十进制 案例：举一个表单有两个数,求他们的和，并把它们的和在结果文本框中输出. 1.6.2parseFloat 方法 将一个字符串转换成一个 float 数 1.6.3isNaN 方法 返回一个 Boolean 值，isNaN() 函数用于检查其参数是否是非数字值. 案例：isNaN(“hello”) ， isNaN(123); 1.6.4eval 方法,用处不小呀! 将其中的字符串作为一个 js 表达式来执行。 比如： alert(“ok”); eval(“alert(”

15、ok”)”); 当然也可 var k=“ok” ; eval(“alert(k)”); 1.7对象 1.7.1对象与对象实例 这个和 java 中的对象和对象实例的概念相同。 语法： var objectinstance=new ObjectName(参数); /定义一个类(对象)，这和定义一个函数没有区别 function Cat() var myCat =new Cat();/创建一个实例 myCat.age=20;/给 myCat 这个实例增加一个属性 age(第一次使用时) myC=顺平;/同上，这里 js 中的类可以无限制的增加属性 function print() a

16、lert(myC+:+myCat.age); myCat.show=print;/给实例增加一个方法，注意这里不要写成 print();否则要被 执行的。 myCat.show();/使用方法 说明：属性和方法的增加是针对对象实例而不是对象的 在访问属性时，也可以时使用 myCat“age”这种方式，这样访问属性时可以动态 的变化。 案例扩展: alert(myC+:+myCat.age); 改为 alert(myCat“name”+:+myCat.age); 改为： var k=“name” alert(myCatx+:+myCat.age); 这样更加灵活。 1

17、.7.2Math 对象 是一个静态对象，不能用 new 来创建对象实例。 应当使用 对象名.成员 的 格式来访问其属性和方法，例如，var num=Math.random(); 它常用的方法有： abs 方法，返回数的绝对值。 sin、cos 方法，分别返回数的正旋和余旋值 asin、acos random 方法 01 的随机数 1.7.3Date 对象 构造函数: Date()、Date(dateVal)、Date(year,moth,date).详细请查看 msdn 的 js 帮助文档。 parse 方法,它返回一个表示时间的字符串。 getYear、getMohth(特别说明月份是从 0

18、 开始编号的)、getDate 等方法。 。 。 案例： var nowTime=new Date(); var test=“; test=test+nowTime.getYeay(); test=test+nowTime.getMonth(); . var dateVal=Date.parse(“满足一定条件的字符串”);/ November 30, 2006 10:15 AM var secTime=new Date(dateVal); alert(secTime.getYear(); 1.7.4toString 的方法 toString 方法是 JS 中所有内部对象的一个成员方法，它的主

19、要作用就是将对象的 数据转换成某种格式的字符串来表示。具体的转换方式取决于对象的类型。 var x=456; alert(“hex=“+x.toString(16); /表示把 x 转成 16 进制的一个字符串. 1.8数组 1.8.1数组列表 用于表示一组数据的集合，它由一对方括号包围，列表的每个元素用逗号分隔， 数组元素可以是任意类型的数据。 Comment h1: for(int i=0;iarr.length;j+) for(int j=0;jarri.length;j+) alert(arrij; Comment h2: for(int i=0;iarr.length;j+) if(

20、arri.length) for(int j=0;jarri.length;j+) alert(arrij; else alert(arri); 比如：var arr=“shunping”,123,”1.1”,4.5, 可以通过 arr.length 求得数组的长度。 可以通过 arr0 ，arr1，. arrarr.length-1访问数组中的各个变量。 案例： 用 for 循环去访问 arr 数组的各个元素： for(int i=0;iarr.length,i+) 数组的元素可以是一个 js 的表达式 var arr=“shunping”,123,”1.1”,4.5,”f4”+2 数组的元

21、素还可以是一个数组 var arr=“shunping”,123,”1.1”,4.5,“a”,”b”,”c” 请大家思考如何访问到上面的这个数组中的所有元素。 var arr=“shunping”,123,”1.1”,4.5,“a”,”b”,”c”,abv 请思考上面的 arr 又如何访问 1.9Array 对象 这个比先前的自定义的数组更加方便： 第一中方法 var arr=new Array(); 增加新的元素 arr0=“abc”; 第二种方法 var arr=new Array(4) 第三中方法 var arr=new Array(“abc”,”rty”); 利用 Array 来创建数

22、组，就可以利用 Array 对象提供的一些方法比如 sort(); 比如 ： var arr=new Array(abc,rty,g); arr.sort(); for(var i=0;iarr.length;i+) alert(arri); 关于 sort()的详细用法，可以参考 W3School 的的 javascript 部分文档说明部分文档说明。 一起完成一个数组的小案例: 1.10 在函数中修改参数值的问题 请同学们思考下面代码执行结果是什么? 请同学们思考下一段代码执行的结果是什么? function Cat(name,age) funciton test(x) x=5; var

23、x=3; test(x); alert(x); this.age=age; =name; function change(x) =小明; var my=new Cat(晓鸿,34); change(my); window.alert(); 第 2 章dom 编程 window 对象 document 对象 body 对象 form 对象 form 表单字段元素对象 2.1dom 简介 js 将浏览器本身，网页文档，网页文档中的 html 元素等都用相应的内置对象来表 示，这些对象和对象之间的层次关系统称为 DOM (Document Object M

24、odel,文档对象模 型)。 用户通过鼠标或是键盘在浏览器窗口或是网页元素上执行的操作，对 DOM 对象 来说，就是事件(Event)。 比如，用户用鼠标点击了网页上的某个按钮，就在这个按钮 上发生了鼠标单击事件，这个按钮就是事件源。 如果将一段代码与某个事件源上发生的某种事件相关联，当该事件源上发生该事 件时，浏览器就会执行与之相关联的程序代码，从而引发一连串的程序动作，这个过 程被称为事件驱动。对事件进行处理的程序或是函数，被称为事件处理程序。 2.2如何编写事件处理程序 在事件源对象所对应的 html 标签上增加一个要处理的事件属性，让事件属性值等 于处理该事件的函数名或是程序代码。 比

25、如如下的代码: function proMenu() window.event.returnValue=false; 上边的代码是用来干什么的呢?禁用鼠标右键。 上边的代码你也可以这样写，会更加的简单。 function proMenu() return false; 看下面代码片段：如果要让超连接失效可以这样简写 新浪 2.3window 对象 window 对象代表浏览器的整个窗口，编程人员可以利用 window 对象控制浏览器 窗口的各个方面，如改变状态栏上的文字、弹出对话框、移动窗口位置等。 对 window 对象的属性和方法的引用，可以省”window.”这个前缀，比如 window

26、.alert(“ok”); 可以写成 alert(“ok”); 2.4window 对象常用方法 案例 1: 点击某个超链接，跳出一个对话框，显示当前日期. 2: 把鼠标移动到某个按钮上，弹出对话框，显示 Hello,world 参考 w3school 的的 html dom 编程部分文档编程部分文档 2.4.1alert 方法 window.alert(“你好”); 2.4.2confirm 方法 window.confirm(“你好”); /删除确认的按钮或是超链接 案例: if (window.confirm(“你好”) window.alert(“好”); else window.al

27、ert(“不好”); alert()-返回 true; confirm()-可以返回 true,或是 false; 注意这两个窗口的不一样 2.4.3prompt 方法 alert(prompt(“年龄”,”34”);一个可以输入的框，并返回输入的值。 2.4.4navigate 方法 2.4.5setinterval 方法 2.4.6setTimeout 方法 2.4.7clearinterval 方法 2.4.8clearTimeout 方法 2.4.9moveTo 方法 2.4.10resizeTo 方法 2.4.11open 方法 案例案例 1： my.html 文件 window.o

28、pen(“my2.html”,”_blank”,”top=0,left=0,width=200,height=200,toolbar=no”); my2.html window.setTimeout(“window.close()”,5000); 注意 五秒后关闭窗口 注意此案例运行要求浏览器支持脚本 案例案例 2 在请大家思考一个问题：如何显示一个不带任何工具栏，标题栏的全屏幕窗口: 其它具体的设置请参看 msdn 的帮助文档。 my.html 文件 window.open(“my2.html”,”_blank”,”fullscreen=yes”); 案例案例 3 如何让打开的 my2.ht

29、ml 逐渐的变大呢? window.setTimeout(“window.close()”,5000); window.setInterval(“grow()”,100); function grow() windw.resizeBy(5,5); 注意 五秒后关闭窗口 可以考虑扩展功能，让学员加强对知识点的认识：可以考虑扩展功能，让学员加强对知识点的认识： 这里可以展开讲解如何让子窗口又变小回去， 然后又变大.然后又变小. 然后又让该子窗口随机的闪动.呵呵，这里同学们会比较感兴趣 请同学们考虑如何让鼠标点不中我们的窗口. 2.5window 对象属性 window 对象的属性详情，可参考 w3

30、school 的的 html dom 编程部分文档编程部分文档 常用的属性有: closed opener defaultstatus status screenTop scrennLeft 继续举例: 如何在关闭父窗口时，同时关闭它的子窗口 对上面的代码进行改进即可说明这个问题 my.html 文件 var mychild=window.open(my2.html,_blank,top=0,left=0,width=200,height=200,toolbar=no ); function closeChild() if(!mychild.closed) mychild.close(); /

31、请大家思考如果去掉了 onunload 事件会发生什么? 在这个案例上继续开发：在这个案例上继续开发： 如何在子窗口关闭后，在父窗口给出一个子窗口关闭的信息! 2.6window 对象-事件 2.6.1onload 事件 2.6.2onunload 事件 2.6.3onbeforeunload 事件 举例: 这里特别要说明的时 onload 事件是在页面内容全部装载完毕后，才会去触发的。 请大家思考一下：跳出的对话框的顺序是怎样的? 2.6.4通用事件(针对 html 元素而言) onclick 事件 onmousemove 事件 onmouseover 事件 onmouseout 事件 on

32、mousedown 事件 onmouseup 事件 onkeydown 事件 onkeyup 事件 onkeypress 事件（按下和弹起） 2.7window 对象-对象属性 2.7.1location 对象 在网页载入一个新的页面 window.location.href=“; 等于： window.navigate(“”); ?请思考如何在页面停留两秒后，在定位到 去 window.setTimeout(window.location.href=“,2000); ?请思考如何动态的现实页面还剩多少时间就跳转的效果 location 对象的 reload 方法用于重新载入(刷新)窗口中的当

33、前网页 ?请大家思考如何实现论坛列表的自动刷新功能(就是子窗口去刷新父窗口的问题) window.opener.location.reload(); ?思考如何在子窗口关闭时给父窗口一个消息，比如文字等等 2.7.2event 对象 举例说明 event 对象的使用: ?如何实现在 一个在输入框中，不能输入非数字的功能. 2.7.3screen 对象 2.7.4history 对象 2.7.5navigator 对象 2.7.6document 对象 write 方法-动态的向 html 文档输入文本内容. writeln 方法-在 write 方法的基础上多输出一个换行符号. open 方法

34、(用于打开一个新的页面和 window.open 类似) close 方法(关闭文档流，一般在使用 write 方法后，应当使用该方法关闭文档流) clear 方法(清空文档内容，此方法没有得到完全的支持，建议使用 write(“);和 close();方法来替代) getElementById 方法(通过 html 控件的 id 得到 html 控件) getElementsByName 方法(通过 html 控件的 name 得到 html 控件,因为 html 不同的 控件可以有相同的名字，因此它将返回一个数组) getElementsByTagName 方法 createElement

35、 方法 这里有一个案例来测试 document 对象的常用方法的使用情况: 这是最初的内容 document.write(hello); function updatedoc() document.writeln(abc); document.writeln(def); document.close(); var newIt = window.open(,_blank); newIt.document.writeln(我是新窗口); newIt.document.close();/这里就是关闭了文件流，下面有继续打开一个新的窗口 newIt.document.writeln(我是新窗口 2); newIt.document.close(); document 对象的常用属性 alinkColor 属性 linkColor 属性 vlinkColor 属性 bgColor 属性 fgColor 属性 上面这些属性是和标签相关的属性。 案例说明： function changeDoc() document.bgColor=blue; document.fgColor=red; document.alinkColor=yellow; document.vlinkColor=0 x00ff00; document.