1、,HTML5基础教程,授课教师： 职务：,课程描述JavaScript简称js，是一种可以嵌入到HTML页面中的脚本语言，HTML5提供的很多API都可以在JavaScript程序中调用，因此学习JavaScript编程是基础。,本章知识点,2.1 在HTML中使用JavaScript语言 2.2 基本语法 2.3 常用语句 2.4 函数 2.5 面向对象程序设计 2.6 JavaScript事件处理,2.1 在HTML中使用JavaScript语言,2.1.1 在HTML中插入JavaScript代码 2.1.2 使用js文件,2.1.1 在HTML中插入JavaScript代码,在HTML
2、文件中使用JavaScript脚本时，JavaScript代码需要出现在和之间。 【例2-1】 一个简单的在HTML文件中使用JavaScript脚本实例。简单的JavaScript代码/ 下面是JavaScript代码document.write(“这是一个简单的JavaScript程序!“);document.close();,【例2-1】,在JavaScript中，使用/作为注释符。浏览器在解释程序时，将不考虑一行程序中/后面的代码。,2.1.2 使用js文件,另外一种插入 JavaScript程序的方法是把 JavaScript 代码写到一个.js文件当中，然后在HTML文件中引用该j
3、s文件，方法如下： ,【例2-2】,使用引用js文件的方法实现【例2-1】的功能。创建output.js，内容如下：document.write(“这是一个简单的JavaScript程序!“);document.close(); HTML文件的代码如下：简单的JavaScript代码,2.2 基本语法,2.2.1 数据类型 2.2.2 变量 2.2.3 注释 2.2.4 运算符,2.2.1 数据类型,JavaScript包含5种原始数据类型,2.2.2 变量,变量是内存中命名的存储位置，可以在程序中设置和修改变量的值。 在JavaScript中，可以使用var关键字声明变量，声明变量时不要求指
4、明变量的数据类型。例如： var x; 也可以在定义变量时为其赋值，例如： var x = 1; 或者不定义变量，而通过使用变量来确定其类型，例如： x = 1; str = “This is a string“; exist = false;,JavaScript变量名需要遵守两条简单的规则：, 第一个字符必须是字母、下划线（_）或美元符号（$）； 其他字符可以是下划线、美元符号或任何字母或数字字符。,typeof运算符,可以使用typeof运算符返回变量的类型，语法如下： typeof 变量名 【例2-3】 演示使用typeof运算符返回变量类型的方法，代码如下： var temp; do
5、cument.write(typeof temp); /输出 “undefined“ temp = “test string“; document.write(typeof temp); /输出 “String“ temp = 100; document.write(typeof temp); /输出 “ Number“,2.2.3 注释,1/ /是单行注释符，这种注释符可与要执行的代码处在同一行，也可另起一行。从/开始到行尾均表示注释。对于多行注释，必须在每个注释行的开始使用/。【例2-3】中已经演示了/注释符的使用方法。 2/* . */ /* . */是多行注释符，表示注释的内容。这种注
6、释字符可与要执行的代码处在同一行，也可另起一行，甚至用在可执行代码内。对于多行注释，必须使用开始注释符（/*）开始注释，使用结束注释符（*/）结束注释。注释行上不应出现其他注释字符。,【例2-4】,使用/* . */给【例2-3】添加注释。 /* 一个简单的JavaScript程序,演示使用typeof运算符返回变量类型的方法*/ var temp; document.write(typeof temp); /* 输出 “undefined“ */ temp = “test string“; document.write(typeof temp); /* 输出 “String“ */ temp
7、 = 100; document.write(typeof temp); /* 输出 “ Number“ */,2.2.4 运算符,运算符可以指定变量和值的运算操作，是构成表达式的重要元素。JavaScript支持一元运算符、算术运算符、位运算符、关系运算符、条件运算符、赋值运算符、逗号运算符等基本运算符。,1一元运算符,接上,2算术运算符,算术运算符可以实现数学运行，包括加（+）、减（-）、乘（*）、除（/）和求余（%）等。具体使用方法如下： var a,b,c; a = b + c; a = b - c; a = b * c; a = b / c; a = b % c;,3赋值运算符,赋值
8、运算符是等号（=），它的作用是将运算符右侧的常量或变量的值赋值到运算符左侧的变量中。上面已经给出了赋值运算符的使用方法。,复合赋值运算符,4关系运算符,5位运算符,6逻辑运算符,7条件运算符,JavaScript条件运算符的语法如下： variable = boolean_expression ? true_value : false_value; 表达式将根据boolean_expression的计算结果为变量赋值variable。如果Boolean_expression为true，则把true_value赋给变量；否则把false_value赋给变量。例如，下面的代码将iNum1和iNum
9、2中大者赋值给变量iMax 。 var iMax = (iNum1 iNum2) ? iNum1 : iNum2;,8逗号运算符,使用逗号运算符可以在一条语句中执行多个运算，例如： var iNum1 = 1, iNum = 2, iNum3 = 3;,2.3 常用语句,2.3.1 条件分支语句 2.3.2 循环语句,2.3.1 条件分支语句,1if语句 2else语句 3else if语句 4switch语句,1if语句,if(条件表达式)语句块,【例2-5】 if语句的例子,if(a 10)document.write(“变量a大于10“); 如果语句块中包含多条语句，可以使用将语句块包含
10、起来。例如： if(a 10) document.write(“变量a大于10“);a = 10; ,【例2-6】 嵌套if语句的例子,if(a 10) document.write(“变量a大于10“);if(a 100)document.write(“变量a大于100“); ,2else语句,if(条件表达式)语句块1 else语句块2,【例2-7】 if.else.语句的例子,if(a 10)document.write(“变量a大于10“); elsedocument.write(“变量a小于或等于10“);,3else if语句,if 条件表达式1语句块1 Else if 条件表达式
11、2 语句块2 Else if 条件表达式3语句块3 else 语句块n,【例2-8】,下面是一个显示当前系统日期的JavaScript代码，其中使用到了if语句、else if语句和else语句。简单的JavaScript代码d=new Date();document.write(“今天是“);if(d.getDay()=1) document.write(“星期一“);else if(d.getDay()=2) document.write(“星期二“);else if(d.getDay()=3) document.write(“星期三“);else if(d.getDay()=4) doc
12、ument.write(“星期四“);else if(d.getDay()=5) document.write(“星期五“);else if(d.getDay()=6) document.write(“星期六“); else document.write(“星期日“); ,4switch语句,switch(表达式) case 值1:语句块1break;case 值2:语句块2break; case 值n:语句块nbreak;default:语句块n+1 ,【例2-9】,将【例2-8】的程序使用switch语句来实现，代码如下：【例2-9】d=new Date();document.write(
13、“今天是“);switch(d.getDay() case 1:document.write(“星期一“);break;,接上,case 2:document.write(“星期二“);break;case 3:document.write(“星期三“);break;case 4:document.write(“星期四“);break;case 5:document.write(“星期五“);break;case 6:document.write(“星期六“);break;default:document.write(“星期日“);,2.3.2 循环语句,1while语句 2dowhile语句
14、 3for语句 4continue语句 5break语句,1while语句,while(条件表达式) 循环语句体 ,【例2-10】,下面通过一个实例来演示while语句的使用。【例2-10】var i = 1;var sum = 0;while(i,2dowhile语句,do 循环语句体 while(条件表达式);,【例2-11】,【例2-11】var i = 1;var sum = 0;dosum = sum + i;i+;while(i,3for语句,for(表达式1; 表达式2; 表达式3) 循环体 ,【例2-12】, 【例2-12】var sum = 0;for(var i=1; i,
15、4continue语句,在循环体中使用continue语句可以跳过本次循环后面的代码，重新开始下一次循环。 【例2-13】 如果只计算1100之间偶数之和，可以使用下面的代码：【例2-13】var i = 1;var sum = 0;while(i,5break语句,在循环体中使用break语句可以跳出循环体。 【例2-14】 将【例2-10】修改为使用break语句跳出循环体。【例2-14】var i = 1;var sum = 0;while(true) if(i=11)break;sum = sum + i;i+;document.write(sum);,2.4 函数,2.4.1 创建自
16、定义函数 2.4.2 调用函数 2.4.3 变量的作用域 2.4.4 函数的返回值,2.4.1 创建自定义函数,可以使用function关键字来创建自定义函数，其基本语法结构如下： function 函数名 (参数列表) 函数体 参数列表可以为空，即没有参数；也可以包含多个参数，参数之间使用逗号（,）分隔。函数体可以是一条语句，也可以由一组语句组成。,【例2-15】,创建一个非常简单的函数PrintWelcome，它的功能是打印字符串“欢迎使用JavaScript”，代码如下： function PrintWelcome() document.write(“欢迎使用JavaScript“);
17、,【例2-16】,创建函数PrintString()，通过参数决定要打印的内容。 function PrintString(str) document.write (str); ,【例2-17】,定义一个函数sum()，用于计算并打印两个参数之和。函数sum()包含两个参数。参数$num1和$num2，代码如下： function sum(num1, num2) document.write (num1 + num2); ,2.4.2 调用函数,可以直接使用函数名来调用函数，无论是系统函数还是自定义函数，调用函数的方法都是一致的。 【例2-18】 要调用PrintWelcome()函数，显示“
18、欢迎使用JavaScript”字符串，代码如下：【例2-18】function PrintWelcome()document.write(“欢迎使用JavaScript“);PrintWelcome();,如果函数存在参数，则在调用函数时，也需要使用参数,【例2-19】 要调用PrintString()函数，打开用户指定的字符串，代码如下：【例2-19】function PrintString(str)document.write (str);PrintString(“传递参数“);,【例2-20】,调用sum()函数，计算并打印1和2之和，代码如下：【例2-20】function sum(n
19、um1, num2)document.write (num1 + num2);sum(1, 2);,2.4.3 变量的作用域,在函数中也可以定义变量，在函数中定义的变量被称为局部变量。局部变量只在定义它的函数内部有效，在函数体之外，即使使用同名的变量，也会被看作是另一个变量。相应地，在函数体之外定义的变量是全局变量。全局变量在定义后的代码中都有效，包括它后面定义的函数体内。如果局部变量和全局变量同名，则在定义局部变量的函数中，只有局部变量是有效的。,【例2-21】 局部变量和全局变量作用域的例子, 【例2-14】var a = 100; / 全局变量function setNumber() v
20、ar a = 10; / 局部变量document.write(a); / 打印局部变量a setNumber();document.write(“); document.write(a); / 打印全局变量a,运行结果,在函数setNumber()外部定义的变量a是全局变量，它在整个程序中都有效。在setNumber()函数中也定义了一个变量$a，它只在函数体内部有效。因此在setNumber()函数中修改变量a的值，只是修改了局部变量的值，并不影响全局变量a的内容。运行结果如下： 10 100,2.4.4 函数的返回值,可以为函数指定一个返回值，返回值可以是任何数据类型，使用return语
21、句可以返回函数值并退出函数，语法如下： function 函数名() return 返回值; ,2.5 面向对象程序设计,2.5.1 面向对象程序设计思想简介 2.5.2 JavaScript内置类 2.5.3 HTML DOM 2.5.4 Window对象 2.5.5 Navigator对象 2.5.6 document对象,2.5.1 面向对象程序设计思想简介,2.5.2 JavaScript内置类,1基类Object,所有JavaScript内置类都从基类Object派生（继承）。 继承是面向对象程序设计思想的重要机制。类可以继承其他类的内容，包括成员变量和成员函数。而从同一个类中继承得
22、到的子类也具有多态性，即相同的函数名在不同子类中有不同的实现。就如同子女会从父母那里继承到人类共有的特性，而子女也具有自己的特性。,基类Object的方法,2内置类的基本功能,3Array对象,可以使用Array对象创建数组。数组（array）是内存中一段连续的存储空间，用于保存一组相同数据类型的数据。数组具有如下特性： 和变量一样，每个数组都有一个唯一标识它的名称。 同一数组的数组元素应具有相同的数据类型。 每个数组元素都有索引和值（value）两个属性，索引是从0开始的整数，用于定义和标识数组元素值数组中的位置；值当然就是数组元素对应的值。,一维数组的示意图,创建数组对象的方法,var 数
23、组对象名 = new Array(数组大小)new关键字用于创建对象。可以使用它为所有JavaScript类创建对象。 例如创建包含7个元素的数组对象arr的语句如下； var arr = new Array(7);,访问数组元素,可以通过索引访问数组元素，方法如下： 数组对象名索引 例如可以使用arr0获取或设置数组对象arr的第1个数组元素的值。 数组元素的索引是从0开始的整数，arr0表示数组对象arr的第1个数组元素，arr1表示数组对象arr的第2个数组元素，以此类推。,【例2-23】,一个定义和使用一维数组的例子。【例2-23】var arr = new Array(3);/为数组
24、元素赋值arr0 = “CPU“;arr1 = “内存“;arr2 = “硬盘“;/打印数组元素的值for (var i=0;i“);,Array对象的方法,【例2-24】,【例2-24】, 演示使用Array对象的方法var MyArr;var MyStr;MyArr = new Array(3);MyArr0 = “123“;MyArr1 = “789“;MyArr2 = “456“;/计算数组长度document.write(“数组MyArr的长度为: “ + MyArr.length); document.write(“);,接上,/连接数组MyStr = MyArr.join(“-“
25、);document.write(“将数组MyArr连接成字符串MyStr，MyStr的值为: “ + MyStr);document.write(“);/倒序MyArr.reverse();MyStr = MyArr.join(“-“);document.write (“将数组MyArr倒序后，各元素值依次为: “ + MyStr); document.write(“);/排序MyArr.sort();MyStr = MyArr.join(“-“);document.write (“将数组MyArr排序后，各元素值依次为: “ + MyStr); ,浏览【例2-24】的结果,4Date对象,
26、可以使用下面几种方法创建Date对象： MyDate = new Date; / 建日期为当前系统时间的Date对象 MyDate = new Date(“2014-11-20“) / 创建日期为2014-11-20的Date对象 MyDate = new Date(2014, 11 ,20) / 参数分别指定Date对象的年、月、日,Date对象的常用方法,【例2-25】,演示使用Array对象var arrWeekDay = new Array(“星期日“, “星期一“, “星期二“, “星期三“, “星期四“, “星期五“, “星期六“, “星期日“);var today;today =
27、 new Date();document.write (“现在是: “ + today.getFullYear() + “年“ + (today.getMonth()+1) + “月“ + today.getDate() + “日 “+ arrWeekDay today.getDay();,【例2-25】的浏览结果,5Math对象,【例2-26】, 演示使用Math对象var arrWeekDay = new Array(“星期日“, “星期一“, “星期二“, “星期三“, “星期四“, “星期五“, “星期六“, “星期日“);var today;document.write (“Math
28、.abs(-1)= “ + Math.abs(-1)+“);document.write (“Math.ceil(0.60)= “ +Math.ceil(0.60)+“);document.write (“Math.floor(0.60)= “ +Math.floor(0.60)+“);document.write (“Math.max(5,7)= “ +Math.max(5,7)+“);document.write (“Math.min(5,7)= “ +Math.min(5,7)+“);document.write (“Math.random()= “ +Math.random()+“);
29、document.write (“Math.round(0.60)= “ +Math.round(0.60)+“);document.write (“Math.sqrt(4)= “ +Math.sqrt(4)+“);,【例2-26】的浏览结果,6String对象,接上,【例2-27】,演示使用String对象var MyStr;MyStr = new String(“这是一个测试字符串“);document.write(MyStr+“);/显示大号字体document.write(MyStr.big()+“);/加粗字体document.write(MyStr.bold()+“);/设置字体大
30、小document.write(MyStr.fontsize(2)+“);/设置字体颜色document.write(MyStr.fontcolor(“green“)+“);,【例2-27】的浏览结果,HTML DOM浏览器对象的结构,HTML DOM浏览器对象的具体功能,2.5.4 Window对象,接上,Window对象的方法,【例2-28】,使用alert方法弹出一个警告对话框的例子。演示使用Window.alert()的使用function Clickme() alert(“你好“);点击试一下,【例2-28】的浏览结果,【例2-29】,使用Window.confirm()方法显示一个
31、请求确认对话框的例子。演示使用Window.confirm()的使用function Checkme() if (confirm(“是否确定删除数据?“) = true) alert(“成功删除数据“);elsealert(“没有删除数据“);删除数据,浏览【例2-29】的结果,【例2-30】, 演示使用Window.prompt()的使用function Input() var MyStr = prompt(“请输入您的姓名“);alert(“您的姓名是: “ + MyStr);录入姓名,浏览【例2-30】的结果,【例2-31】, 演示使用Window.setTimeout()的使用func
32、tion closewindow() document.write(“2秒钟后将关闭窗口“);setTimeout(“window.close()“,2000); ,2.5.6 document对象,document是常用的JavaScript对象，用于管理网页文档。前面已经介绍了使用document.write()用于在文档中输出字符串的方法。本节再简单地介绍一下document对象的属性、方法、子对象和集合。,1常用属性,2常用方法,3子对象和集合,【例2-34】,New Document “)document.write(“文件标题:“+document.title+“);documen
33、t.write(“图片路径:“+document.images0.src+“);document.write(“文本颜色:“+document.fgColor+“);document.write(“背景颜色:“+document.bgColor+“);/,在Internet Explorer中浏览【例2-34】的结果,2.6 JavaScript事件处理,2.6.1 常用HTML事件 2.6.2 Window对象的事件处理,2.6.1 常用HTML事件,接上,【例2-35】,在网页中点击鼠标，弹出一个对话框，显示触发的事件类型。function getEventType(event) alert(event.type);在网页中点击某个位置。对话框会提示出被触发的事件的类型。,每个事件的处理函数都有一个Event对象作为参数，Event对象代表事件的状态。,显示event.type属性,2.6.2 Window对象的事件处理,Window对象的事件包括OnLoad（窗口启动）、OnUnLoad（窗口关闭）、OnFocus（窗口获得焦点）、OnBlur（窗口失去焦点）和OnError（窗口中出现错误）等，比较常用的事件是OnLoad。,【例2-37】,演示在打开一个网页时弹出一个对话框，代码如下：演示使用Window对象事件的使用打开此网页时将弹出一个对话框,
