JAVASCRIPT教学文档

1、.*1. javascript简介html是我们做网页时所用的语言。能够做出很多漂亮的页面。但是页面上的东西都是静止不动的，这跟我们平时上网的时候看到的，网上的页面有点不同。上网时，我们可以看到，有些页面当我们鼠标在页面上滑动的时候，鼠标的指针会变成其它形状；有些页面两边还挂有广告。不管我们怎么滚动页面，广告都会在上边。等等这些效果，我们用单用html是实现不了的。但是如果有了javascrpit的帮助却可以做到。JavaScript定义JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。JavaScript

2、通常被直接嵌入 HTML 页面。JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）。所有的人无需购买许可证均可使用 JavaScript。JavaScript作用1、处理页面控件动态效果；2、处理数据以及输入数据时或提交数据前的数据验证JavaScript特点JavaScript是一种脚本编写语言基于对象的语言简单性安全性：不允许访问本地资源动态性的: 可以直接对用户或客户输入做出响应，无须经过Web服务程序跨平台性: 与操作环境无关，只需运行，并支持JavaScript的浏览器就可正确执行。JavaScript运行环境JavaScript的运行需要JavaScript解释

3、器的支持，而与具体的操作系统无关。目前支持JavaScript的Web浏览器有Internet Explorer、Firefox、Opera和Maxthon等。另外，各种HTML、JavaScript的IDE工具也属于JavaScript运行的软件环境。JavaScript与java区别在概念和设计方面，Java 和 JavaScript 是两种完全不同的语言2.javascript中的输出语句window.alert();document.write();*1.javascript书写规范大小写敏感 注释: /单行 /* 多行 */语句行: 以;分隔，也可以以自然行分隔。变量定义: 无论什么

4、类型都用var来定义变量，也可以不定义直接使用变量可以直接使用。变量命名: 数字、字母、下划线、$符号。不能以数字开头。2.数据类型1.数值：包括整型与浮点型。如12、12.3、-90 2.字符串：用单引号或双引号括起来的。如abc、”abc”3.布尔型：只有两个值：true、false 4.空类型（null）只有一个值null，其代表的意思“空”，代表没有值，什么数据类型都不是。 5. 未定义(undefined )只有一个值：undefined。也是一个很特殊的数据类型，使用了一个未赋值的变量或者是使用了一个不存在的对象的属性时，才返回undefined6.复合数据类型(引用类型)：对象(

5、window、document)、 数组（可以是任意类型数据）7.用typeof（）可以判断数据的类型（特殊情况：用typeof判断null时，返回值为object，目的是向下兼容）作业：1.定义变量a，并为a赋值为各种数据类型。并打印出此时a的数据类型 3.数组1.定义数组：var arr=1,2,32.数组中的值可以是任意类型3.数组的长度可变作业：1.定义数组arr并赋值。遍历数组。*4.运算符与表达式1.算术 + - * / % + - 2.逻辑 & | !3.关系 = = = != = (全等于)4.赋值 = += -= 5.条件 ? :作业：1.定义一个变量a值为“123”变量b值

6、为123，输出a与b相加，减，乘，除后的结果。2.定义一个变量a值为“123”变量b值为123，分别用=与=判断a与b是否相等，并输出结果。*流程控制1.选择结构if-elseswitch: 可以匹配任意类型注意，在布尔环境中，非布尔类型的值会自动转换为布尔： 数值0为假，非0为真 字符串“”为假，非”为真 null和undefined为假 所有对象为真2.循环forfor-in : 遍历一个对象的每个属性，或一个数组的每个元素。语法：for(var 变量名 in 对象名或数组名)/语句whiledo-while3.跳转continue、break作业：1.夫妻工资总和如果超过一万五，输出夫妻

7、各自工资，小康水平；低于五千输出夫妻各自工资,革命尚未成功，同志仍需努力，否则输出夫妻各自工资,一小般吧2.定义一个一维数组输出所有奇数值的和; （for-in）3.循环输出window对象的属性名称，与document对象的属性名称4.10-30+50-70.1010=? for5.竹竿320米 每天截取十二米 多少天后 竹竿长度少于40米 while*1.函数1.函数的定义格式function 函数名（ 参数1, 参数2）语句注意事项1）函数由关键字function定义；2）函数必须先定义后使用，否则将出错；3）函数名是调用函数时引用的名称，区分大小写；3. 函数的参数 参数表示传递给函数

8、使用或操作的值，它可以是常量，也可以是变量，不用var定义4.函数的返回值return语句用于返回表达式的值，也可以没有。5. 函数的调用调用函数时是由window对象来调用的，而javascript里默认的对象就是window。所以可以省略前缀”window.”,直接调用。window.funcName(参数列表)eg.1.定义一个函数，实现打印角形功能。2.定义一个函数，算BMI(身体健康指数)：算法:体重KG/身高(米)的平方，如果指数在19-25之间体重正常，25偏胖 3. 定义一个函数，输入两个数字，返回两个数相加的和。2.引入外部js文件通常，我们把写好的函数，放在一个单独的文件中

9、（扩展名为.js），用的时候引入到网页中来。引入外部js的语法： 作业：1.定义一个函数，输入一个数，返回这个数的阶乘 并测试2.设计一个函数，输入一个数，返回圆的面积 并测试3.定义一个函数，返回数组中的最大值的下标 并测试4.设计一个函数，一个菜5元 输入菜的个数 返回钱数 并测试5.设计函数 输入菜的价格和菜的个数 返回钱数 并测试6.设计函数 输入菜的价钱和菜的个数 如果钱数=100元打八折 如果80100之间打8.5折 如果5080之间 打9折 否则不打折 返回钱数 并测试*1.获得元素对象的方法document.getElementById(idvalue) ：找到页面中id值为i

10、dvalue的对象。返回object2.获得/设置元素对象值的方式 元素对象.value(value属性的值)3获得/设置元素对象文档内容的方式元素对象.innerHTML(元素中包含的html代码) 4.单击事件onclick：当点击鼠标左键的时候，会触发该事件的执行。【例】1.输入圆的半径，求圆的面积与周长。【例】2.定义一个函数，实现两个数相加功能【例】1.计算文本域中的字数【例】2.验证用户名密码作业：1.夫妻工资总和如果超过一万五，输出小康水平；低于五千输出革命尚未成功，同志仍需努力，否则输出一小般吧。 2.实现计算器功能可以实现加减乘除 3.用户注册验证不能为空(用户名，密码)。在

11、文本框后提示出错信息。4.计算BMI指数5.留言版功能*Global对象parseInt（）：返回由字符串转换得到的整数parseFloat（）：返回由字符串转换得到的浮点数isNaN（）：返回一个 Boolean 值如果返回为true,说明是NaN如果返回为falseNaN表示不是数字作业：1.验证数值的填写是否合法（年龄，价格等）*内置对象javascript中的对象：Array、String、Math、Date*1.一维数组的使用一维数组对象的定义(1)var arr = 元素0,元素1.;(2)var arr = new Array(元素0,元素1.);(3)var arr = new

12、 Array(length);eg:用javascript在文档中，实现一个城市下拉选择框。2.二维数组的使用二维数组的创建var arr=元素0,元素1.,元素0,元素1.,.var arr=数组0,数组1,.var arrr=new Array(数组0,数组1,.) eg:定义一个二维数组，计算其中所有能被3整除的奇数的和。3.数组的属性与方法数组对象的属性length数组对象的方法：concat: 将数组与其他数组或字符进行连接，返回一个更长的数组。join: 用一个字符将数组里的每一项连接起来，得到一个“长”的字符串 (数组变成字符串)pop: 移除数组中的最后一个元素并返回该元素。p

13、ush: 将新元素添加到一个数组中的尾部，并返回数组的新长度值。 作业：1.参考帮助文档，实现对一个数组中内容的反转。（如原来：1,5,3，转换后为3,5,1）(reverse)2.参考帮助文档，将一个长度为8的数组排序后输出。(sort)*Math数学对象的方法Math.floor() 向下取整Math.ceil() 向上取整 Math.round() 四舍五入 Math.abs () 取绝对值 Math.random() 取随机数【例】求3-10之间的随机数【例】已知有30名学生，根据学生的学号随机抽取6名不重复的学生进行晨迎。作业：模拟老虎机抽奖（图片方式）题库中有50道题号不连续的题目

14、，试做抽出5到不相同的题*1. 字符串对象的创建var str = abdfshfsiohof;var str = new String(haoifhaohfoah);2. 字符串对象的属性与方法属性：length方法：charAt()：返回指定索引位置处的字符。indexOf()：返回字符串内第一次出现子字符串的字符位置。substr()：返回一个从指定位置开始的指定长度的子字符串。substring()：返回位于字符串对象中指定位置的子字符串。replace()：返回根据正则表达式进行文字替换后的字符串的复制split()：将一个字符串分割为子字符串，然后将结果作为字符串数组返回作业：1.

15、将” Hello! Nice to meet you!”变成全大写后输出。2.将字符串反转3.请判断一个字符串是不是合法的电子邮件地址 规则：包含与.在.之前只有一个*保留2位小数toFixted()：返回一个字符串，代表一个以定点表示法表示的数字var a=3.4567;alert(a.toFixed(2);*1.Date对象的创建格式：var d1=new Date();/显示当前系统时间var d2=new Date(2000/4/13 13:13:24);/显示的是括号里面自定义的时间var d4=new Date(123456789);/括号里面的时间是毫秒数，这个数指的是从1970

16、年1月1日 0点0分0秒所经过的时间2.Date对象的方法getDay() 获取日期（一周中的日期）（0 - 6）（0为周日）getDate() 获取日期（月份中的日期）（1-31）getYear() 获取年份（1900-1999返回2位年份，其它为4位年份）getMonth() 获取月份（0-11）gettime() 获取时间的毫秒值(从1970 年 1 月 1 日开始计算到 Date 对象中的时间之间的毫秒数)getSeconds() 获取时间的秒数getMinutes() 获取分钟getHours() 获取时间的小时数toLocaleString（）将时间转换成本地格式的时间显示eg：1

17、.用户输入一个日期（年，月，日），请算出该天是星期几。2.计算来到八维学习一共经历了多少天作业：根据您的年龄计算您在这美好的世界生活了多少天？*窗口对象window1.窗口对象的属性name：名称，用来唯一标识一个窗口。sratus：状态栏。就是窗口最下边一栏。例如：=”w1”;window.status=”还未准备就绪”;2.窗方口对象的方法alert()：弹出一个只包含“确定”按钮的对话框。显示内容confirm()：弹出一个包含“确定”和“取消”按钮的对话框。按下“确定”，则返回 true值，如果按下“取消”，则返回 false 值prompt(, )：弹出一个包含

18、“确认”“取消”和一个文本框的对话框，要求用户在文本框输入一些数据open(url,新视窗名,规格)：打开新窗口setTimeout(“函数( )”,毫秒值)：隔参数中毫秒值时间，调用参数中函数( )。（只调用一次函数）clearTimeout()：取消setTimeout ()的设置setInterval(“函数( )”,毫秒值)：每隔参数中毫秒值时间，调用一次参数中函数( ) （调用多次函数）clearInterval()：取消setInterval ()的设置。作业 1.实现会走的时钟2.打开一个子窗口，包含菜单栏，工具栏，长600px,宽200px,不可以缩放。3.随机抽取学生，有开始

19、，结束。*其它窗口对象1. location对象href属性：设置或获取整个 URLreload()方法：重新载入目前的文件(刷新)replace()方法：以指定的文件取代目前的文件2. history对象 （用来储存客户端曾访视过的URL资料）back()方法：从历史列表中装入前一个 URLforward()方法：从历史列表中装入下一个 URLgo(n)方法：跳转到n值所对应的某一个URL3. navigator对象（包含关于 Web 浏览器的信息）常用来判断浏览器以写出适应不同浏览器的代码（浏览器兼容问题）appName属性：获取浏览器的名称appVersion属性：获取浏览器运行的平台和

20、版本4. screen对象 （包含关于显示器屏幕的信息）height属性：获取屏幕的垂直分辨率。width属性：获取屏幕的水平分辨率。*doucument对象1.write(“信息”)方法：向文档中写内容，可包含文本与其它标签2. getElementById(“id的值”)方法：按元素的ID名称来访问（返回一个值）3. getElementsByName(“name的值”)方法按元素的name名称来访问（返回数组）4. getElementsByTagName(“标签名称”)方法按标签来访问（返回数组）5. forms集合 （表示表单对象数组）document.forms.length：对应

21、页面上标签的个数document.forms0：第1个标签document.formsi.length：第i-1个中的控件数document.formsi.elementsj：第i-1个中第j-1个控件1）访问表单中元素（1）document.formsi.元素名（2）document.表单名.元素名2）访问表单的属性（1）document.formsi.属性名（2）document.表单名.属性名作业：1.全部选中，跟全部取消功能。2.验证表单。包含用户名，密码，年龄三项数据。并进行验证，用户名密码不能为空，并且需要在6-10个字符数之间。年龄必需为数值。 *event对象与事件1.常用事件

22、（1） 页面事件：载入页面事件：onload卸载页面事件：onunload（2） 鼠标事件：鼠标单击事件：onclick鼠标双击事件：ondblclick鼠标移动事件：onmousemove 鼠标按下事件：onmousedown鼠标抬起事件：onmouseup鼠标移入事件：onmouseover鼠标移出事件：onmouseout（3） 键盘事件：键按下事件：onkeydown键抬起事件：onkeyup（4） 表单事件：表单提交事件：onsubmit（5） 其他事件：获得焦点事件：onfocus失去焦点事件：onblur内容改变事件：onchange2. event对象属性1)Event 对象代

23、表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！2)x或clientX：返回当事件被触发时，鼠标指针的水平坐标。3)y或clientY：返回当事件被触发时，鼠标指针的垂直坐标。4)keyCode：获取键盘事件发生时键盘的按键值。为一个int型数据。比如字母A的keyCode值为65，回车键的 keyCode值为13。*正则表达式1.定义是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。如：13d9|15d9$、 1-9d4,8$2.预定义字符集（别人定义好的字符集）1）. 匹配除换行符以外的任何的单个字符 r.t匹配这些字符串rat,rot2）w 匹配字母或者数字或者下划线 a-zA-Z0-9_3）s 匹配任意的空白符4）d 匹配数字 0-95）b 匹配单词的开始或结束 bjavab匹配java 不匹配javasss bjavab6） 匹配字符串的开始 d 2sfsdf 不匹配sfds27）$ 匹配字符串的结束 end$ sfsdendW 匹配任意非字母、数字、下划线、汉字的字符S 匹配任意不是空白符的字符D 匹配任意非数字的字符B 匹配不是单词开头或结束的位置3. 定义字符集用来定义字符集1）abcde表示这五个字符其中的一个字符2