[计算机软件及应用]jaascript学习笔记讲解版.doc

《[计算机软件及应用]jaascript学习笔记讲解版.doc》由会员分享，可在线阅读，更多相关《[计算机软件及应用]jaascript学习笔记讲解版.doc（31页珍藏版）》请在三一文库上搜索。

1、javascript 学习笔记 第 I 页 JavaScript 学习笔记学习笔记 javascript 学习笔记 第 II 页 目 录 第第 1 1 章章JAVASCRIPTJAVASCRIPT 的语法的语法.1 1.1什么是脚本程序和JAVASCRIPT1 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.3JAVASCRI

2、PT的保留关键字3 1.4JAVASCRIPT的基本语法3 1.4.1基本数据类型和常量.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对象与

3、对象实例.9 1.7.2Math 对象.10 1.7.3Date 对象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 javascript 学习笔记 第 III 页 2.4WINDOW对象常用方法.17 2.4.1alert 方法17 2.4.2confirm 方法 17 2.4.3prompt 方法18 2.4.4navigate 方法18 2.4.5setinte

4、rval 方法 18 2.4.6setTimeout 方法.18 2.4.7clearinterval 方法.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.

5、7.2event 对象 23 2.7.3screen 对象.23 2.7.4history 对象23 2.7.5navigator 对象23 2.7.6document 对象.23 2.8FORMS对象(DOCUMENT的对象属性) 27 2.8.1form 对象.27 2.8.2form 表单字段元素的应用案例.27 javascript 学习笔记 第 1 页 第 1 章 javascript 的语法 1.1什么是脚本程序和 javascript 1.1.1什么是脚本程序 alert(new Date(); -就是在浏览器中跳出一个对话框 顺平你好! 问题: 什么时候执行,在哪里执行的?(注

6、意顺平你好是什么时候显示的?) 1.1.2Javascrpit 的简介 最早是 livescript,是一种基于对象和事件驱动，并具备安全性的脚本语言,是有 netscapce 公司提供的，后和 sun 公司合作，将 livescript 更名为 javascript microsoft jscirpt 1.1.2.1Java 与 javascript 的关系 由两个公司提供的. 作用与用途不一样. 两个公司合作，这样他们的语法有相识之处 javascript 不是 java 的子集 1.1.2.2javacript、Jscript 与 ECMAscript javascript 学习笔记 第

7、 2 页 jscript 是由微软提供的,由于得不到 netscape 公司的技术支持，自己编写的.它和 javascript 就非常相似的. 他们在不停的发展,你可以去网站了解最新的标准. Javascript : http:/ Jscript: http:/msdn.microsoft/scripting 1.2脚本代码的位置 var sp=“中国”; 这是一个 html 段落 alert(sp); 它等同与将 这是一个 html 段落 var sp=“中国”; alert(sp); 为了防止浏览器将 javascript 的内容与 html 相互混淆，你可以在之间加入 1.2.1也可将

8、javascript 放入到单独的一个文件 js 文件，在需 要使用的时候引入: 比如 ： javascript 学习笔记 第 3 页 你的一个 js 文件 var sp=“中国“; alert(sp); 在某个网页文件中引入 顺平! 这个效果如同将 my.js 的所有内容都引入到标签之间 1.2.2在超连接中使用 javascript 顺平! 1.2.3在 button 中也可使用 javascript 其实就是对 html 控件的事件进行处理 1.3javascript 的保留关键字 查看 javascript 帮助文档 1.4javascript 的基本语法 不要使用 javascrip

9、t 的保留字 javascript 大小写敏感 sp , Sp 是不同的 中，英文的分号、引号要注意. Javascript 的注释： / 单行注释 /* */多行注释 javascript 学习笔记 第 4 页 1.4.1基本数据类型和常量 1.4.1.1整形常量 比如: 1 ，45， 567 1.4.1.2实数常量 比如: 34.5 ， 67.89 1.4.1.3布尔常量 true,false 1.4.1.4字符串常量 没有字符常量，即使是一个字符，也被当作字符串 “a girl”, abcde,”a”,”“ 注意: 1 如果有特殊字符串，要有 转义 2 在 js 中不能把一个长的字符串简

10、单的分成多行显示，要有+来分行 1.4.1.5null 常量 1.4.1.6undefine 常量 1.4.2变量: js 中 是弱数据类型的，在定义变量时，不需要指明该变量的类型(由 js 引擎来决 定) var name=“shunping”; /name 是字符串 var kk=2 /kk 是数 var yy /yy 是 undefined 如果 name=234;/这时 name 自动变成数. 不声明变量直接使用 javascript 学习笔记 第 5 页 x=345; /亦可, 但是这应该是一个字符串 1.4.3运算符号 1.4.3.1算术运算符号 加号运算符 注意：可以用于数的加运

11、算，也可以用于字符串的拼结。 减法运算符 - 乘法运算符 * 除法运算符 / 9/4 会保留小数部分，而不是 2，这和 java 是不一样的。 求模运算符 % +运算符 有前+,和后+。他们的规则和 java 是一样的。 -运算符 1.4.3.2赋值运算符 =就是赋值运算符，就是将值赋值给某个变量。 如：var x=3、x+=6、x-=7、x*=9、x/=6 、x%=5 等等 1.4.3.3比较运算符号 大于运算符 。 小于运算符= 。 小于等于 32 位左移 /定义一个类(对象)，这和定义一个函数没有区别 function Cat() javascript 学习笔记 第 10 页 var m

12、yCat =new Cat();/创建一个实例 myCat.age=20;/给 myCat 这个实例增加一个属性 age(第一次使用时) myCat.name=“顺平“;/同上，这里 js 中的类可以无限制的增加属性 function print() alert(myCat.name+“:“+myCat.age); myCat.show=print;/给实例增加一个方法，注意这里不要写成 print();否则要被 执行的。 myCat.show();/使用方法 说明：属性和方法的增加是针对对象实例而不是对象的 在访问属性时，也可以时使用 myCat“age”这种方式，这样访问属性时可以动态 的

13、变化。 案例扩展: alert(myCat.name+“:“+myCat.age); 改为 alert(myCat“name”+“:“+myCat.age); 改为： var k=“name” alert(myCatx+“:“+myCat.age); 这样更加灵活。 1.7.2Math 对象 是一个静态对象，不能用 new 来创建对象实例。 应当使用 对象名.成员 的 格式来访问其属性和方法，例如，var num=Math.random(); 它常用的方法有： abs 方法，返回数的绝对值。 sin、cos 方法，分别返回数的正旋和余旋值 asin、acos random 方法 01 的随机数

14、 javascript 学习笔记 第 11 页 1.7.3Date 对象 构造函数: Date()、Date(dateVal)、Date(year,moth,date)详细请查看 msdn 的 js 帮助文档。 parse 方法,它返回一个表示时间的字符串。 getYear、getMohth(特别说明月份是从 0 开始编号的)、getDate 等方法。 。 。 案例： var nowTime=new Date(); var test=“; test=test+nowTime.getYeay(); test=test+nowTime.getMonth(); var dateVal=Date.pa

15、rse(“满足一定条件的字符串”);/ November 30, 2006 10:15 AM var secTime=new Date(dateVal); alert(secTime.getYear(); 1.7.4toString 的方法 toString 方法是 JS 中所有内部对象的一个成员方法，它的主要作用就是将对象的 数据转换成某种格式的字符串来表示。具体的转换方式取决于对象的类型。 var x=456; alert(“hex=“+x.toString(16); /表示把 x 转成 16 进制的一个字符串. 1.8数组 1.8.1数组列表 用于表示一组数据的集合，它由一对方括号包围，

16、列表的每个元素用逗号分隔， 数组元素可以是任意类型的数据。 Comment h1: for(int i=0;i function Cat(name,age) funciton test(x) x=5; var x=3; test(x); alert(x); javascript 学习笔记 第 14 页 this.age=age; this.name=name; function change(x) x.name=“小明“; var my=new Cat(“晓鸿“,34); change(my); window.alert(my.name); javascript 学习笔记 第 15 页 第 2

17、 章dom 编程 window 对象 document 对象 body 对象 form 对象 form 表单字段元素对象 2.1dom 简介 js 将浏览器本身，网页文档，网页文档中的 html 元素等都用相应的内置对象来表 示，这些对象和对象之间的层次关系统称为 DOM (Document Object Model,文档对象模 型)。 用户通过鼠标或是键盘在浏览器窗口或是网页元素上执行的操作，对 DOM 对象 来说，就是事件(Event)。 比如，用户用鼠标点击了网页上的某个按钮，就在这个按钮 上发生了鼠标单击事件，这个按钮就是事件源。 如果将一段代码与某个事件源上发生的某种事件相关联，当该

18、事件源上发生该事 件时，浏览器就会执行与之相关联的程序代码，从而引发一连串的程序动作，这个过 程被称为事件驱动。对事件进行处理的程序或是函数，被称为事件处理程序。 javascript 学习笔记 第 16 页 2.2如何编写事件处理程序 在事件源对象所对应的 html 标签上增加一个要处理的事件属性，让事件属性值等 于处理该事件的函数名或是程序代码。 比如如下的代码: function proMenu() window.event.returnValue=false; 上边的代码是用来干什么的呢?禁用鼠标右键。 javascript 学习笔记 第 17 页 上边的代码你也可以这样写，会更加的简

19、单。 function proMenu() return false; 看下面代码片段：如果要让超连接失效可以这样简写 新浪 2.3window 对象 window 对象代表浏览器的整个窗口，编程人员可以利用 window 对象控制浏览器 窗口的各个方面，如改变状态栏上的文字、弹出对话框、移动窗口位置等。 对 window 对象的属性和方法的引用，可以省”window.”这个前缀，比如 window.alert(“ok”); 可以写成 alert(“ok”); 2.4window 对象常用方法 案例 1: 点击某个超链接，跳出一个对话框，显示当前日期. 2: 把鼠标移动到某个按钮上，弹出对话框

20、，显示 Hello,world javascript 学习笔记 第 18 页 参考 w3school 的的 html dom 编程部分文档编程部分文档 2.4.1alert 方法 window.alert(“你好”); 2.4.2confirm 方法 window.confirm(“你好”); /删除确认的按钮或是超链接 案例: if (window.confirm(“你好”) window.alert(“好”); else window.alert(“不好”); alert()-返回 true; confirm()-可以返回 true,或是 false; 注意这两个窗口的不一样 2.4.3p

21、rompt 方法 alert(prompt(“年龄”,”34”);一个可以输入的框，并返回输入的值。 2.4.4navigate 方法 2.4.5setinterval 方法 2.4.6setTimeout 方法 2.4.7clearinterval 方法 2.4.8clearTimeout 方法 2.4.9moveTo 方法 javascript 学习笔记 第 19 页 2.4.10resizeTo 方法 2.4.11open 方法 案例案例 1： my.html 文件 window.open(“my2.html”,”_blank”,”top=0,left=0,width=200,heigh

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

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

24、用的属性有: closed javascript 学习笔记 第 21 页 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(); /请大家思

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

26、事件 onmouseout 事件 onmousedown 事件 onmouseup 事件 onkeydown 事件 onkeyup 事件 javascript 学习笔记 第 23 页 onkeypress 事件（按下和弹起） 2.7window 对象-对象属性 2.7.1location 对象 在网页载入一个新的页面 window.location.href=“http:/“; 等于： window.navigate(“http:/”); ?请思考如何在页面停留两秒后，在定位到 http:/ 去 window.setTimeout(window.location.href=“http:/“,2

27、000); ?请思考如何动态的现实页面还剩多少时间就跳转的效果 location 对象的 reload 方法用于重新载入(刷新)窗口中的当前网页 ?请大家思考如何实现论坛列表的自动刷新功能(就是子窗口去刷新父窗口的问题) window.opener.location.reload(); ?思考如何在子窗口关闭时给父窗口一个消息，比如文字等等 2.7.2event 对象 举例说明 event 对象的使用: ?如何实现在 一个在输入框中，不能输入非数字的功能. 2.7.3screen 对象 2.7.4history 对象 2.7.5navigator 对象 javascript 学习笔记 第 24

28、 页 2.7.6document 对象 write 方法-动态的向 html 文档输入文本内容. writeln 方法-在 write 方法的基础上多输出一个换行符号. open 方法(用于打开一个新的页面和 window.open 类似) close 方法(关闭文档流，一般在使用 write 方法后，应当使用该方法关闭文档流) clear 方法(清空文档内容，此方法没有得到完全的支持，建议使用 write(“);和 close();方法来替代) getElementById 方法(通过 html 控件的 id 得到 html 控件) getElementsByName 方法(通过 html

29、控件的 name 得到 html 控件,因为 html 不同的 控件可以有相同的名字，因此它将返回一个数组) getElementsByTagName 方法 createElement 方法 这里有一个案例来测试 document 对象的常用方法的使用情况: 这是最初的内容 document.write(“hello“); function updatedoc() document.writeln(“abc“); document.writeln(“def“); document.close(); var newIt = window.open(“,“_blank“); newIt.docum

30、ent.writeln(“我是新窗口“); newIt.document.close();/这里就是关闭了文件流，下面有继续打开一个新的窗口 newIt.document.writeln(“我是新窗口 2“); javascript 学习笔记 第 25 页 newIt.document.close(); 2.7.6.1document 对象的常用属性 alinkColor 属性 linkColor 属性 vlinkColor 属性 bgColor 属性 fgColor 属性 上面这些属性是和标签相关的属性。 案例说明： function changeDoc() document.bgColor

31、=“blue“; document.fgColor=“red“; document.alinkColor=“yellow“; document.vlinkColor=“0x00ff00“; document.linkColor=“gray“; 这是普通文本 这是一个超连接 javascript 学习笔记 第 26 页 下面是描述网页文档信息的属性： charset 属性 defaultCharset 属性 fileSize 属性 URL 属性/返回该网页的 URL 值. URLUnencoded 属性 referrer 属性 2.7.6.2document 的 body 对象 下面是 docu

32、ment 的 body 对象的常用的方法： appendChild 方法： 比如动态的创建超连接： function createA() var ov=document.createElement(“A“); ov.href=“http:/“; ov.innerText=“连接到 sohu 网“; document.body.appendChild(ov); 这是动态产生的超连接 hehe body 对象的一些专用属性： background 属性 bgProperties 属性 text 属性 topMargin 属性 bottomMargin 属性 leftMargin 属性 rightM

33、argin 属性 通用属性： id 属性 name 属性 举出一个案例说明一下. javascript 学习笔记 第 27 页 className 属性 innerText 属性 innerHTML 属性 -举出一个案例说明一下 这里说说 innerText 和 innerHTML 的区别吧: ov.innerHTML=“连接到 sohu 网“; ov.innerText=“连接到 sohu 网“; 第一种将字体变大，第二种将作为文本输出来。 document 的 body 对象的事件 常用的事件有： onselectstart 事件 和 onscroll 事件 应用案例：如何做一个可以随着滚

34、动条，漂移的超连接。(利用 来制作) document 的 body 对象的对象属性 我们重点讲解两个： all 数组 和 style 对象 案例应用：可以进行树状展开和关闭的案例(利用 来制作) 2.8forms 对象(document 的对象属性) 概述：form 对象的主要功能就是能够直接访问 html 文档的 form 表单。一个 web 网页上可以有多个 Form 表单，使用 document.forms 数组对象可以访问到各个 form 表 单。并可以将标签中嵌入的表单字段元素的名称作为 from 对象的属性，来访问 该表单字段元素所对应的内容。 2.8.1form 对象 form 对象是比较重要的一个对象，我们看看它一些常用的案例: 2.8.2form 表单字段元素的应用案例 案例 1: 写一个用户注册界面，如下,当用户输入的信息不满足需求的时候，则给出相应的提示 信息: javascript 学习笔记 第 28 页 案例 2： 使用 js 实现购物车的功能(简易功能) 案例 3： 动态的生成选择下拉框，并能够在另外一个文本框中显示用户选择的内容