javascript学习笔记讲解版.doc

javascript 学习笔记 第 I 页 JavaScript 学习笔记学习笔记 javascript 学习笔记 第 II 页 目 录 第第 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基本数据类型和常量 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 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 5setinterval 方法 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 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 就是在浏览器中跳出一个对话框 顺平你好 问题 什么时候执行 在哪里执行的 注意顺平你好是什么时候显示的 1 1 2Javascrpit 的简介 最早是 livescript 是一种基于对象和事件驱动 并具备安全性的脚本语言 是有 netscapce 公司提供的 后和 sun 公司合作 将 livescript 更名为 javascript microsoft jscirpt 1 1 2 1Java 与 javascript 的关系 由两个公司提供的 作用与用途不一样 两个公司合作 这样他们的语法有相识之处 javascript 不是 java 的子集 1 1 2 2javacript Jscript 与 ECMAscript javascript 学习笔记 第 2 页 jscript 是由微软提供的 由于得不到 netscape 公司的技术支持 自己编写的 它和 javascript 就非常相似的 他们在不停的发展 你可以去网站了解最新的标准 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 文件 在需 要使用的时候引入 比如 javascript 学习笔记 第 3 页 你的一个 js 文件 var sp 中国 alert sp 在某个网页文件中引入 顺平 这个效果如同将 my js 的所有内容都引入到标签之间 1 2 2在超连接中使用 javascript 顺平 1 2 3在 button 中也可使用 javascript 其实就是对 html 控件的事件进行处理 1 3javascript 的保留关键字 查看 javascript 帮助文档 1 4javascript 的基本语法 不要使用 javascript 的保留字 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 中不能把一个长的字符串简单的分成多行显示 要有 来分行 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算术运算符号 加号运算符 注意 可以用于数的加运算 也可以用于字符串的拼结 减法运算符 乘法运算符 除法运算符 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比较运算符号 大于运算符 小于运算符 小于等于 3 2 位左移 3 1 1 5js 的控制语句 1 5 1switch 选择语句 switch 表达式 case 取值 1 语句 break case 取值 n 语句快 break default javascript 学习笔记 第 7 页 语句块 n 1 break 它与它与 java 的的 switch 是一样的 同样要注意表达式可以是是一样的 同样要注意表达式可以是 js 支持的所有数据类型支持的所有数据类型 1 5 2While 循环语句 While 条件表达式语句 执行语句块 案例 var x 8 while x 10 alert x x x 一定要注意这种语句可能造成死循环 比如在 while 后直接加入分号 可以给 同学看看当运行该脚本时 浏览器中会给出怎样的提示 1 5 3do while 语句 do 执行语句块 while 条件表达式 注意不论条件表达式是否成立 执行语句快总会被执行一次 案例 var x 3 案例说明案例说明 可以使用 1 2 3 来判断和显示是星期几的对话框提示 javascript 学习笔记 第 8 页 while x 0 alert 你好 x var x 3 do alert 你好 x while x 0 1 5 4for 循环语句 for 初始化表达式 循环条件表达式 循环后一次操作表达式 执行语句块 案例 同学一般都会理解 但是仍然可以举一个例子加深对 for 循环运行原理的理解 var i 0 var result for x 1 x 5 x result result x x alert result 对案例修改 将 x 1 提出 for 循环看看 再将 x 放入到 for 循环体内看看 再将 x 5 想办法 放入到 for 循环体 这里是一种授课思路 javascript 学习笔记 第 9 页 1 6Js 中的系统函数 它们都属于 Global 对象的方法 可以直 接使用 1 6 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 ok 当然也可 var k ok eval alert k 1 7对象 1 7 1对象与对象实例 这个和 java 中的对象和对象实例的概念相同 语法 var objectinstance new ObjectName 参数 定义一个类 对象 这和定义一个函数没有区别 function Cat javascript 学习笔记 第 10 页 var myCat 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 这种方式 这样访问属性时可以动态 的变化 案例扩展 alert myCat name myCat age 改为 alert myCat name myCat age 改为 var k name alert myCat x myCat age 这样更加灵活 1 7 2Math 对象 是一个静态对象 不能用 new 来创建对象实例 应当使用 对象名 成员 的 格式来访问其属性和方法 例如 var num Math random 它常用的方法有 abs 方法 返回数的绝对值 sin cos 方法 分别返回数的正旋和余旋值 asin acos random 方法 0 1 的随机数 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 parse 满足一定条件的字符串 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数组列表 用于表示一组数据的集合 它由一对方括号 包围 列表的每个元素用逗号分隔 数组元素可以是任意类型的数据 Comment h1 for int i 0 i arr length j for int j 0 j arr i length j alert arr i j Comment h2 for int i 0 i arr length j if arr i length for int j 0 j arr i length j alert arr i j else alert arr i javascript 学习笔记 第 12 页 比如 var arr shunping 123 1 1 4 5 可以通过 arr length 求得数组的长度 可以通过 arr 0 arr 1 arr arr length 1 访问数组中的各个变量 案例 用 for 循环去访问 arr 数组的各个元素 for int i 0 i arr length i 数组的元素可以是一个 js 的表达式 var arr shunping 123 1 1 4 5 f4 2 数组的元素还可以是一个数组 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 增加新的元素 arr 0 abc 第二种方法 var arr new Array 4 第三中方法 var arr new Array abc rty 利用 Array 来创建数组 就可以利用 Array 对象提供的一些方法比如 sort 比如 javascript 学习笔记 第 13 页 var arr new Array abc rty g arr sort for var i 0 i arr length i alert arr i 关于 sort 的详细用法 可以参考 W3School 的的 javascript 部分文档说明部分文档说明 一起完成一个数组的小案例 1 10 在函数中修改参数值的问题 请同学们思考下面代码执行结果是什么 请同学们思考下一段代码执行的结果是什么 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 章dom 编程 window 对象 document 对象 body 对象 form 对象 form 表单字段元素对象 2 1dom 简介 js 将浏览器本身 网页文档 网页文档中的 html 元素等都用相应的内置对象来表 示 这些对象和对象之间的层次关系统称为 DOM Document Object Model 文档对象模 型 用户通过鼠标或是键盘在浏览器窗口或是网页元素上执行的操作 对 DOM 对象 来说 就是事件 Event 比如 用户用鼠标点击了网页上的某个按钮 就在这个按钮 上发生了鼠标单击事件 这个按钮就是事件源 如果将一段代码与某个事件源上发生的某种事件相关联 当该事件源上发生该事 件时 浏览器就会执行与之相关联的程序代码 从而引发一连串的程序动作 这个过 程被称为事件驱动 对事件进行处理的程序或是函数 被称为事件处理程序 javascript 学习笔记 第 16 页 2 2如何编写事件处理程序 在事件源对象所对应的 html 标签上增加一个要处理的事件属性 让事件属性值等 于处理该事件的函数名或是程序代码 比如如下的代码 function proMenu window event returnValue false 上边的代码是用来干什么的呢 禁用鼠标右键 javascript 学习笔记 第 17 页 上边的代码你也可以这样写 会更加的简单 function proMenu return false 看下面代码片段 如果要让超连接失效可以这样简写 新浪 2 3window 对象 window 对象代表浏览器的整个窗口 编程人员可以利用 window 对象控制浏览器 窗口的各个方面 如改变状态栏上的文字 弹出对话框 移动窗口位置等 对 window 对象的属性和方法的引用 可以省 window 这个前缀 比如 window alert ok 可以写成 alert ok 2 4window 对象 常用方法 案例 1 点击某个超链接 跳出一个对话框 显示当前日期 2 把鼠标移动到某个按钮上 弹出对话框 显示 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 3prompt 方法 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 height 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 window close 5000 window setInterval grow 100 function grow windw resizeBy 5 5 注意 五秒后关闭窗口 可以考虑扩展功能 让学员加强对知识点的认识 可以考虑扩展功能 让学员加强对知识点的认识 这里可以展开讲解如何让子窗口又变小回去 然后又变大 然后又变小 然后又让该子窗口随机的闪动 呵呵 这里同学们会比较感兴趣 请同学们考虑如何让鼠标点不中我们的窗口 2 5window 对象 属性 window 对象的属性详情 可参考 w3school 的的 html dom 编程部分文档编程部分文档 常用的属性有 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 请大家思考如果去掉了 onunload 事件会发生什么 在这个案例上继续开发 在这个案例上继续开发 如何在子窗口关闭后 在父窗口给出一个子窗口关闭的信息 javascript 学习笔记 第 22 页 2 6window 对象 事件 2 6 1onload 事件 2 6 2onunload 事件 2 6 3onbeforeunload 事件 举例 这里特别要说明的时 onload 事件是在页面内容全部装载完毕后 才会去触发的 请大家思考一下 跳出的对话框的顺序是怎样的 2 6 4通用事件 针对 html 元素而言 onclick 事件 onmousemove 事件 onmouseover 事件 onmouseout 事件 onmousedown 事件 onmouseup 事件 onkeydown 事件 onkeyup 事件 javascript 学习笔记 第 23 页 onkeypress 事件 按下和弹起 2 7window 对象 对象属性 2 7 1location 对象 在网页载入一个新的页面 window location href 等于 window navigate 请思考如何在页面停留两秒后 在定位到 去 window setTimeout window location href 2000 请思考如何动态的现实页面还剩多少时间就跳转的效果 location 对象的 reload 方法用于重新载入 刷新 窗口中的当前网页 请大家思考如何实现论坛列表的自动刷新功能 就是子窗口去刷新父窗口的问题 window opener location reload 思考如何在子窗口关闭时给父窗口一个消息 比如文字等等 2 7 2event 对象 举例说明 event 对象的使用 如何实现在 一个在输入框中 不能输入非数字的功能 2 7 3screen 对象 2 7 4history 对象 2 7 5navigator 对象 javascript 学习笔记 第 24 页 2 7 6document 对象 write 方法 动态的向 html 文档输入文本内容 writeln 方法 在 write 方法的基础上多输出一个换行符号 open 方法 用于打开一个新的页面和 window open 类似 close 方法 关闭文档流 一般在使用 write 方法后 应当使用该方法关闭文档流 clear 方法 清空文档内容 此方法没有得到完全的支持 建议使用 write 和 close 方法来替代 getElementById 方法 通过 html 控件的 id 得到 html 控件 getElementsByName 方法 通过 html 控件的 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 document 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 blue document fgColor red document alinkColor yellow document vlinkColor 0 x00ff00 document linkColor gray 这是普通文本 这是一个超连接