HTML5网页前端设计第3版 第04章教案-JavaScript基础

《HTML5网页前端设计》教案第4章JavaScript基础一、教学目标：了解JavaScript的使用方式；了解JavaScript的基本语法规则；熟悉JavaScript的变量声明与命名规范；掌握JavaScript的基本数据类型；掌握JavaScript运算符的使用；掌握JavaScript条件语句的用法；掌握JavaScript函数的使用；掌握JavaScriptDOM的用法。二、教学重点和难点：重点：JavaScript的运算符、条件语句和函数的用法；难点：JavaScriptDOM的用法。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要内容是JavaScript基础知识，包括JavaScript的使用、语法、变量等内容。基本数据类型、运算符、条件语句、函数以及DOM的用法。五、教学基本内容：4.1JavaScript的使用 JavaScript有两种使用方式：一是在HTML文档中直接添加代码；二是将JavaScript脚本代码写到外部的JavaScript文件中，再在HTML文档中引用该文件的路径地址。4.2JavaScript语法 4.2.1JavaScript大小写 在JavaScript中大小写是严格区分的，无论是变量、函数名称、运算符和其他语法都必须严格按照要求的大小写进行声明和使用。4.2.2JavaScript分号 JavaScript的语法规则对此比较宽松，如果一行代码结尾没有分号也是可以被正确执行的。4.2.3JavaScript注释 JavaScript有两种注释方式：单行注释和多行注释。单行注释用双斜杠（//）开头，可以自成一行也可以写在JavaScript代码的后面。多行注释使用/*开头，以*/结尾，在这两个符号之间的所有内容都会被认为是注释内容，均不会被浏览器所执行。4.2.4JavaScript代码块 和Java语言类似，JavaScript语言也使用一对大括号标识需要被执行的多行代码。4.3JavaScript变量 4.3.1变量的声明 JavaScript是一种弱类型的脚本语言，无论是数字、文本还是其他内容，统一使用关键词var加上变量名称进行声明，其中关键词var来源于英文单词variable（变量）的前三个字母。可以在声明变量的同时对其指定初始值；也可以先声明变量，再另行赋值。4.3.2变量的命名规范 一个有效的变量命名需要遵守以下两条规则：首位字符必须是字母（A-Za-z）、下划线（_）或者美元符号（$）；其他位置上的字符可以是下划线（_）、美元符号（$）、数字（0-9）或字母（A-Za-z）。4.3.3JavaScript关键字和保留字JavaScript关键字一览表breakcasecatchcontinuedefaultdeletedoelsefinallyforfunctionifininstanceofnewreturnswitchthisthrowtrytypeofvarvoidwhilewith JavaScript保留字一览表abstractbooleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgotoimplementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile4.4JavaScript基本数据类型 4.4.1Undefined类型 所有Undefined类型的输出值都是undefined。当需要输出的变量从未声明过，或者使用关键词var声明过但是从未进行赋值时会显示undefined字样。4.4.2Null类型null值表示变量的内容为空，可用于初始化变量，或者清空已经赋值的变量。 4.4.3String类型 在JavaScript中String类型用于存储文本内容，又称为字符串类型。为变量进行字符串赋值时需要使用引号(单引号或双引号均可)括住文本内容。在字符串中，每一个字符都有固定的位置，其位置从左往右进行分配。首字符H从位置0开始，第二个字符L是位置1，以此类推，直到最后一个字符O的位置是字符串的总长度少1。JavaScriptString对象常见方法一览方法名解释charAt()返回指定位置上的字符。charCodeAt()返回指定位置上的字符Unicode编码。concat()连接字符串。indexOf()正序检索字符串中指定内容的位置。lastIndexOf()倒序检索字符串中指定内容的位置。match()返回匹配正则表达式的所有字符串。replace()替换字符串中匹配正则表达式的指定内容。search()返回匹配正则表达式的索引值。slice()根据指定位置节选字符串片段。split()把字符串分割成字符串数组。substring()根据指定位置节选字符串片段toLowerCase()将字符串中所有字母都转换为小写。toUpperCase()将字符串中所有字母都转换为大写。4.4.4Number类型 在JavaScript中使用Number类型表示数字，其数字可以是32位以内的整数或64位以内的浮点数。科学计数法对于极大或极小的数字也可以使用科学记数法（数值e倍数）表示，例如3.14e8表示的数是3.14乘以10的8次方，即314000000；3.14e-8表示的数是3.14乘以10的-8次方，即0.0000000314。八进制与十六进制数八进制的数需要用数字0开头，后面跟的数字只能是0-7（八进制字符）之间的一个。例如varx=010;//这里相当于十进制的8十六进制的数需要用数字0和字母x开头，后面跟字符只能是0-9或A-F（十六进制字符）之间的一个，大小写不限。例如varx=0xA;//这里相当于十进制的10浮点数要定义浮点数，必须使用小数点以及小数点后面至少跟一位数字。例如varx=3.14如果浮点数类型的小数点前面整数位为0可以省略。例如varx=.15;//等同于0.15浮点数可以使用toFixed()方法规定小数点后保留几位数。例如：varx=3.1415926;varresult=x.toFixed(2);//返回值为3.14特殊Number值特殊值解释Infinity正无穷大，在JavaScript使用Numer.POSITIVE_INFINITY表示。-Infinity负无穷大，在JavaScript使用Numer.NEGATIVE_INFINITY表示。NaN非数字，在JavaScript使用Numer.NaN表示。Number.MAX_VALUE数值范围允许的最大值，大约等于1.8e308Number.MIN_VALUE数值范围允许的最小值，大约等于5e-3244.4.5Boolean类型 布尔值（boolean）在很多程序语言中都被用于进行条件判断，其值只有两种：true（真）或者false（假）。4.5JavaScript运算符 4.5.1赋值运算符 在JavaScript中，运算符=专门用来为变量赋值，因此也称为赋值运算符。4.5.2算术运算符 在JavaScript中所有的基本算术均可以使用对应的算术运算符完成，包括加减乘除和求余等。4.5.3逻辑运算符 逻辑运算符有三种类型：NOT（逻辑非）、AND（逻辑与）和OR（逻辑或）。运算符解释！逻辑非，表示对布尔值结果再次反转。例如原先为true，加上！符号后返回值就变为false。&&逻辑与，表示并列关系。必须在&&符号前后条件均为true，返回值才为true。只要有任何一个条件为false，返回值均为false。||逻辑或，表示二选一的关系。在||符号前后条件只要有一个为true，返回值就为true。如果两个条件都为false，则返回值才为false。4.5.4关系运算符 在JavaScript中，关系运算符共有四种：大于（>）、小于（<）、大于等于（>=）和小于等于（<=）。用于比较两个值的大小，返回值一定是布尔值（true或false）。4.5.5相等性运算符在JavaScript中，判断两个数值是否相等用双等于符号（==）表示，只有两个数值完全相等时返回真（true）；判断两个数值是否不相等使用感叹号加等于号（!=）表示，在两个数值不一样的情况下返回真（true）。4.6JavaScript条件语句 4.6.1if语句 最简单的if语句由单个条件组成，语法规则如下：if(条件){条件为真（true）时执行的代码}当判断条件成立与否都需要有对应的处理时可以使用if-else语句。其语法格式如下：if(条件){条件为真（true）时执行的代码}else{条件为假（false）时执行的代码}当有多个条件分支需要分别判断时，可以使用elseif语句。if(条件1){条件1为真（true）时执行的代码}elseif(条件2){条件2为真（true）时执行的代码}else{所有条件都为假（false）时执行的代码}4.6.2switch语句 当对于同一个变量需要进行多次条件判断时，也可以使用switch语句代替多重if-elseif-else语句。语法格式如下：switch(变量){case值1：执行代码块1break;case值2：执行代码块2break;……case值n：执行代码块nbreak;[default：以上条件均不符合时的执行代码块]} 4.7JavaScript函数 4.7.1函数的基本结构函数是在调用时才会执行的一段代码块，可以重复使用。其基本语法结构如下：function函数名称(参数0,参数1,……参数N){待执行代码块} 4.7.2函数的调用函数可以通过使用函数名称的方法进行调用。例如：welcome();如果该函数存在参数，则调用时必须在函数的小括号内传递对应的参数值。welcome("HelloJavaScript!"); 4.7.3函数的返回值 JavaScript函数无需特别声明返回值类型，直接在大括号内的代码块中使用return关键词后面紧跟需要返回的值即可。4.8文档对象模型DOM 4.8.1查找HTML元素在JavaScript中有三种方式可以查找HTML元素：通过HTML元素的id名称查找；通过HTML元素的标签名称查找；通过HTML元素的类名称查找。 4.8.2DOMHTML创建动态的HTML内容在JavaScript中，使用document.write()方法可以往HTML页面动态输出内容。例如：<body><script>document.write("Hello2016");</script></body>上述代码片段表示将在空白页面上动态输出字符串"Hello2016"。需要注意的是，alert()方法中的换行符\n在这里是无效的，如果需要输出换行直接使用HTML换行标签<br>即可。改变HTML元素内容innerHTML可以用于获取元素内容，也可以改变元素内容。使用innerHTML属性获取或更改的元素内容可以包括HTML标签本身。获取元素内容的语法结构如下：var变量名=元素对象.innerHTML;更改元素内容的语法结构如下：元素对象.innerHTML=新的内容;这里的元素对象可以使用document对象的getElementById("id名称")方法获取。改变HTML元素属性在JavaScript还可以根据属性名称动态地修改元素属性。其语法结构如下：元素对象.attribute=新的属性值;这里的attribute替换为真正的属性名称即可使用。4.8.3DOMCSS JavaScript还可以改变HTML元素的CSS样式。其语法结构如下：元素对象.style.属性=新的值;这里的元素对象可以使用document对象的getElementById("id名称")方法获取。属性指的是在CSS样式中的属性名称，等号右边填写该属性更改后的样式值。4.8.4DOM事件 JavaScript还可以在HTML页面状态发生变化时执行代码，这种状态的变化称为DOM事件（Event）。HTML常用事件属性一览表事件属性解释onabort图像加载过程被中断onblur元素失去焦点onchange域的内容被改变onclick元素被鼠标左键点击ondbclick元素被鼠标左键双击onerror加载文档或图像时发送错误onfocus元素获得焦点onkeydown键盘按键被按下onkeypress键盘按键被按下并松开onkeyup键盘按键被松开onload页面或图像被加载完成onmousedown鼠标按钮被按下onmousemove鼠标被移动onmouseout鼠标从当前元素上移走onmouseover鼠标移动到当前元素上onmouseup鼠标按键被松开onreset重置按钮被点击onresize窗口或框架的大小被更改onselect文本被选中onsubmit提交按钮被点击onunload退出页面4.8.5DOM节点 添加HTML元素添加HTML元素有两个步骤，先要创建需要添加的HTML元素，然后将其追加在一个已存在的元素中去。使用document对象的createElement()方法可以创建新的元素，其语法结构如下：document.createElement("元素标签名");例如，创建一个新的段落标签<p>：document.createElement("p");使用appendChild()方法可以将创建好的元素追加到已存在的元素中，其语法结构如下：已存在的元素对象.appendChild(需要添加的新元素对象);这里已存在的元素对象可以使用document对象的getElementById("id名称")方法获取。例如，将上一个示例中创建的段落标签<p>追加到id="test"的<div>标签中去：varp=document.createElement("p");vartest=document.getElementById("test");test.appendChild(p);删除HTML元素删除已存在的HTML元素也需要两个步骤：首先使用document对象的getElementById("id名称")方法获取该元素，然后使用removeChild()方法将其从父元素中删除。其父元素如果有明确的id名称，同样可以使用getElementById()方法获取。例如，在知道父元素id名称的情况下删除其中id="p01"的子元素：vartest=document.getElementById("test");//获取父元素varp=document.getElementById("p01");//获取子元素test.removeChild(p);//删除子元素若父元素无对应的id名称获取，可以使用子元素的parentNode属性获取其父元素对象，效果相同。例如，在不知道父元素id名称的情况下删除其中id="p01"的子元素：varp=document.getElementById("p01");//获取子元素vartest=p.parentNode;//获取父元素test.removeChild(p);//删除子元素4.9实验案例——数字时钟的设计与实现设计一款简单的数字时钟，要求实现显示当前的时分秒，并且可以每秒更新一次实现动态效果。4.10本章小结本章主要介绍了JavaScript的基础知识，包括JavaScript的语法规则、变量声明和数据类型等内容。在JavaScript运算符部分，根据运算符的功能不同分别介绍了赋值运算符、算术运算符、逻辑运算符、关系运算符以及相等性运算符。在JavaScript条件语句部分介绍了if和switch语句的用法；在JavaScript函数部分主要介绍了函数的基本结构、调用方法与返回值处理；最后还介绍了JavaScript对于文档对象模型DOM的使用方法包括如何查找、添加、删除HTML元素、修改