HTML5网页前端设计（第3版）- 微课视频版 课件 CH04 JavaScript基础(下)

第4章JavaScript基础（下）主讲人：某某老师本章学习目标掌握JavaScript运算符的使用；掌握JavaScript条件语句的用法；掌握JavaScript函数的使用；掌握JavaScriptDOM的用法。目录4.5JavaScript运算符4.6JavaScript条件语句4.7JavaScript函数4.8文档对象模型DOM4.5.1赋值运算符4.5.2算术运算符4.5.3逻辑运算符4.5.4关系运算符4.5.5相等性运算符4.5JavaScript运算符4.5.1赋值运算符在JavaScript中，运算符=专门用来为变量赋值，因此也称为赋值运算符。在声明变量时可以使用赋值运算符对其进行初始化，例如：varx1=9;//为变量x1赋值为整数9varx2="hello";//为变量x2赋值为字符串"hello"4.5.1赋值运算符也可以使用赋值运算符将已存在的变量值赋值给新的变量，例如：还可以使用赋值运算符为多个变量连续赋值，例如：赋值运算符的右边还可以接受表达式，例如：varx1=9;//为变量x1赋值为整数9varx2=x1;//将变量x1的值赋值给新声明的变量x2varx=y=z=99;//此时变量x、y、z的赋值均为整数99varx=100+20;//此时变量x将赋值为120这里使用了加法（+）运算符形成的表达式，在运行过程中会优先对表达式进行计算，然后再对变量x进行赋值。4.5.2算术运算符在JavaScript中所有的基本算术均可以使用对应的算术运算符完成，包括加减乘除和求余等。算术运算符的常见用法如表4-6所示。4.5.2算术运算符其中加号还有一个特殊用法：可用于连接文本内容或字符串变量。例如：如果将字符串和数字用加号相加，则会先将数字转换为字符串，再进行连接。例如：vars1="Hello";vars2="JavaScript";vars3=s1+s2;//结果会是HelloJavaScriptvars="Hello";varx=2016;varresult=s+x;//结果会是Hello20164.5.2算术运算符上述代码中即使字符串本身也是数字内容，使用加号连接仍然不会进行数学运算。例如：vars="2015";varx=2016;varresult=s+x;//结果会是20152016，而不是两个数字相加的和4.5.2算术运算符将赋值运算符（等号）和算术运算符（加、减、乘、除、求余数）结合使用，可以达到简写的效果。具体用法如表4-7所示。4.5.3逻辑运算符逻辑运算符有三种类型：NOT（逻辑非）、AND（逻辑与）和OR（逻辑或）。逻辑运算符使用的符号与对应关系如表4-8所示。4.5.3逻辑运算符在进行逻辑运算之前，JavaScript中自带的抽象操作ToBoolean会将运算条件转换为逻辑值。转换规则如表4-9所示。4.5.3逻辑运算符1.逻辑非运算符（NOT）在JavaScript中，逻辑非运算符号与C语言和Java语言都相同，使用感叹号（！）并放置在运算内容左边表示。逻辑非运算符的返回值只能是布尔值，即true或者false。逻辑非的运算规则如表4-10所示。4.5.3逻辑运算符2.逻辑与运算符（AND）在JavaScript中，逻辑与运算符使用双和符号（&&）表示，用于连接符号前后的两个条件判断，表示并列关系。当两个条件均为布尔值时，逻辑与的运算结果也是布尔值（true或者false）。判断结果如表4-11所示。4.5.3逻辑运算符2.逻辑与运算符（AND）还有一种特殊情况：当条件1为假（false）时，无论条件2是任何内容（例如null值、undefined、数字、对象等），最终返回值都是假（false）。原因是逻辑与有简便运算的特性，即如果第一个条件为假（false）的话，直接判断逻辑与的运行结果为假（false），不再执行第二个条件。例如：varx1=false;varresult=x1&&x2;//因为x1为false，可以忽略x2直接判断最终结果alert(result);//该语句执行结果为false由于条件1为false，逻辑与会直接判定最终结果为false，直接忽略条件2。因此即使本例中条件2的变量未声明都不影响代码的运行。4.5.3逻辑运算符2.逻辑与运算符（AND）如果存在某个条件是数字类型，则先将其转换为布尔值再继续判断。其中数字0对应的是假（false），其他非0的数字对应的都是真（true）。例如：varx1=0;//对应的是falsevarx2=99;//对应的是truevarresult=x1&&x2;//结果是false逻辑与运算符的返回值不一定是布尔值，如果其中某个条件的返回值不是布尔值，有可能出现其他返回值。逻辑非的运算规则如表4-12所示。4.5.3逻辑运算符3.逻辑或运算符（OR）在JavaScript中，逻辑或运算符使用双竖线符号（||）表示，用于连接符号前后的两个条件判断，表示二选一的关系。当两个条件均为布尔值时，逻辑或的运算结果也是布尔值（true或者false）。判断结果如表4-13所示。4.5.3逻辑运算符3.逻辑或运算符（OR）还有一种特殊情况：当条件1为真（true）时，无论条件2是任何内容（例如null值、undefined、数字、对象等），最终返回值都是真（true）。原因是逻辑或也具有简便运算的特性，即如果第一个条件为真（true）的话，直接判断逻辑或的运行结果为真（true），不再执行第二个条件。例如：varx1=true;varresult=x1||x2;//因为x1为true，可以忽略x2直接判断最终结果alert(result);//该语句执行结果为true由于条件1为真（true），逻辑或会直接判定最终结果为真（true），直接忽略条件2。因此即使本例中条件2的变量未声明都不影响代码的运行。4.5.3逻辑运算符3.逻辑或运算符（OR）和逻辑与运算符类似，如果存在某个条件是数字类型，则先将其转换为布尔值再继续判断。其中数字0对应的是假（false），其他非0的数字对应的都是真（true）。例如：varx1=0;//对应的是falsevarx2=99;//对应的是truevarresult=x1||x2;//结果是true逻辑或运算符的返回值同样不一定是布尔值，如果其中某个条件的返回值不是布尔值，有可能出现其他返回值。逻辑非的运算规则如表4-23所示。4.5.4关系运算符在JavaScript中，关系运算符共有四种：大于（>）、小于（<）、大于等于（>=）和小于等于（<=）。用于比较两个值的大小，返回值一定是布尔值（true或false）。4.5.4关系运算符1.数字之间的比较数字之间的比较完全依据数学中比大小的规律，当条件成立时返回真（true），否则返回假（false）。例如：varresult1=99>0;//符合数学规律，返回truevarresult2=1>100;//不符合数学规律，返回false此时只要两个运算数都是数字即可，整数或小数都可以依据此规律进行比较并且返回对应的布尔值。4.5.4关系运算符2.字符串之间的比较当两个字符串进行比大小时，是按照从左往右的顺序依次比较相同位置上的字符，如果字符完全一样则继续比较下一个。如果两个字符串在相同位置上都是数字则仍然按照数学上的大小进行比较。例如：varx1="9";varx2="1";varresult=x1>x2;//返回true此时从数学概念上来说，9大于1，因此返回值是真（true）。4.5.4关系运算符2.字符串之间的比较但是如果两个数字的位数不一样，仍然只对相同位置上的数字进行比大小，不按照数学概念看整体数值大小。例如：varx1="9";varx2="10";varresult=x1>x2;//返回true此时虽然从数学概念上来说10应该大于9，但是由于字符串同位置比较原则，此时比较的是变量x1中的9和变量x2中的1，得出结论9大于1，因此返回值仍然是真（true）。4.5.4关系运算符2.字符串之间的比较由于JavaScript是一种大小写敏感的程序语言，所以如果相同位置上的字符大小写不同就可以直接作出判断，因为大写字母的代码小于小写字母的代码。例如：varx1="hello";varx2="HELLO";varresult=x1>x2;//返回true4.5.4关系运算符2.字符串之间的比较如果大小写相同，则按照字母表的顺序进行比较，字母越往后越大。例如：varx1="hello";varx2="world";varresult=x1>x2;//返回false在上述示例中，同样按照从左往右的顺序先比较两个字符串的第一个字符，即变量x1中的h和变量x2中的w。按照字母表的顺序h在先w在后。因此返回值是假（false）。此时已判断出结果因此不再继续比较后续的字符。4.5.4关系运算符2.字符串之间的比较如果不希望两个字符串之间的比较受到大小写字母的干扰，而是无论大小写都按照字母表顺序进行比大小，可以将所有字母都转换为小写或大写的形式，再进行大小的比较。使用方法toLowerCase()可以将所有字母转换为小写形式，例如：varx1="ball";varx2="CAT";varresult1=x1>x2;//返回truevarresult2=x1.toLowerCase()>x2.toLowerCase();//返回false4.5.4关系运算符2.字符串之间的比较使用方法toUpperCase()可以将所有字母转换为大写形式，例如：varx1="ball";varx2="CAT";varresult1=x1>x2;//返回truevarresult2=x1.toUpperCase()>x2.toUpperCase();//返回false本示例使用了toUpperCase()将所有字母转换为大写再进行比较，效果与之前使用方法toLowerCase()将所有字母转换为小写的原理相同，不再赘述。4.5.5相等性运算符在JavaScript中，相等性运算符包括：等于（==）和非等于（!=）。用于判断两个值是否相等，返回值一定是布尔值（true或false）。4.5.5相等性运算符在JavaScript中，判断两个数值是否相等用双等于符号（==）表示，只有两个数值完全相等时返回真（true）；判断两个数值是否不相等使用感叹号加等于号（!=）表示，在两个数值不一样的情况下返回真（true）。在使用等于或非等于运算符进行比较时，如果两个值均为数字类型，则直接进行数学逻辑上的比较判断是否相等。例如：varx1=100;varx2=99;alert(x1==x2);//返回false4.5.5相等性运算符若需要进行比较的数据存在其他数据类型（例如字符串、布尔值等），要先将运算符前后的内容尝试转换为数字再进行比较判断。转换规则如表4-15所示。4.5.5相等性运算符在进行了数据类型转换后仍然不是数字类型的特殊情况判断规则如表4-16所示。4.6.1if语句4.6.2switch语句4.6JavaScript条件语句4.6.1if语句在各类计算机程序语言中，最常见的条件语句就是if语句。1.if语句2.ifelse语句3.ifelse-ifelse语句4.6.1if语句1.if语句最简单的if语句由单个条件组成，语法规则如下：例如判断成绩等级，如果高于90分弹出对话框提示为Excellent，代码如下：if(条件){

条件为真（true）时执行的代码}varscore=99;if(score>90){alert("Excellent!");}4.6.1if语句2.ifelse语句当判断条件成立与否都需要有对应的处理时可以使用if-else语句。其语法格式如下：if(条件){

条件为真（true）时执行的代码}else{

条件为假（false）时执行的代码}如果条件成立则执行紧跟if语句的代码部分，否则执行跟在else语句后面的代码部分。这些代码均可以是单行语句，也可以是一段代码块。4.6.1if语句2.ifelse语句例如同样是判断成绩等级，如果大于等于60分则提示弹出对话框提示“考试通过！”，否则提示“不及格！”。修改后的代码如下：varscore=99;if(score>=60){alert("考试通过!");}else{alert("不及格!");}4.6.1if语句3.ifelse-ifelse语句当有多个条件分支需要分别判断时，可以使用elseif语句。if(条件1){

条件1为真（true）时执行的代码}elseif(条件2){

条件2为真（true）时执行的代码}else{

所有条件都为假（false）时执行的代码}其中的elseif语句可以根据实际需要有一个或多个。4.6.1if语句【例4-16】JavaScriptif-else语句的简单应用4.6.2switch语句当对于同一个变量需要进行多次条件判断时，也可以使用switch语句代替多重if-elseif-else语句。4.6.2switch语句语法格式如下：switch(变量){case值1：

执行代码块1break;case值2：

执行代码块2break;

……case值n：

执行代码块nbreak;[default：

以上条件均不符合时的执行代码块]}4.6.2switch语句【例4-17】JavaScriptswitch语句的简单应用4.7.1函数的基本结构4.7.2函数的调用4.7.3函数的返回值4.7JavaScript函数4.7.1函数的基本结构函数是在调用时才会执行的一段代码块，可以重复使用。其基本语法结构如下：function函数名称(参数0,参数1,……参数N){

待执行代码块}上述语法结构是由关键词function、函数名称、小括号内的一组可选参数以及大括号内的待执行代码块组成的。其中函数名称和参数个数均可以自定义，待执行的代码块可以是一句或多句JavaScript代码组成。4.7.1函数的基本结构例如：functionwelcome(){alert("WelcometoJavaScriptWorld");}上述代码定义了一个名称为welcome的函数，该函数的参数个数为0。在待执行的代码部分只有一句alert()方法，用于在浏览器上弹出对话框并显示双引号内的文本内容。4.7.1函数的基本结构如果需要弹出的对话框每次显示的文本内容不同，可以使用参数传递的形式：functionwelcome(msg){alert(msg);}此时为之前的welcome函数方法传递了一个参数msg，在待执行的代码部分修改原先的alert()方法，用于在浏览器上弹出对话框并动态显示msg传递的文本内容。4.7.2函数的调用函数可以通过使用函数名称的方法进行调用。例如：如果该函数存在参数，则调用时必须在函数的小括号内传递对应的参数值。welcome();welcome("HelloJavaScript!");4.7.2函数的调用函数可以在JavaScript代码的任意位置进行调用，也可以在指定的事件发生时调用。例如在按钮的点击事件中调用函数：【例4-18】JavaScript函数的简单调用<buttononclick="welcome()">点击此处调用函数</button>上述代码中的onclick属性表示元素被鼠标点击的状态触发等号右边的内容。4.7.3函数的返回值相比Java而言，JavaScript函数更加简便，无需特别声明返回值类型。JavaScript函数如果存在返回值，直接在大括号内的代码块中使用return关键词后面紧跟需要返回的值即可。4.7.3函数的返回值例如：functiontotal(num1,num2){returnnum1+num2;}varresult=total(8,10);//返回值是18alert(result);上述代码对两个数字进行了求和运算，使用自定义变量result获取total函数的返回值。此时在total函数的参数位置填入了两个测试数据，得到了正确的计算结果。4.7.3函数的返回值函数也可以带有多个return语句：functionmaxNum(num1,num2){if(num1>num2)returnnum1;elsereturnnum2;}varresult=maxNum(99,100);//返回值是100alert(result);上述代码对两个数字进行了比大小运算，然后返回其中较大的数值。使用自定义变量result获取maxNum函数的返回值。此时在maxNum函数的参数位置填入了两个测试数据，得到了正确的计算结果。4.7.3函数的返回值单独使用return语句可随时终止函数代码的运行。例如测试数值是否为偶数，如果是奇数则不提示，如果是偶数则弹出对话框：functiontestEven(num){if(num%2!=0)return;alert(num+"是偶数！");}testEven(99);//不会弹出对话框testEven(100);//会弹出对话框显示"100是偶数！"函数在执行到return语句时就直接退出了代码块，即使后续还有代码也不会被执行。本例中如果参数为奇数才能符合if条件然后触发return语句，因此后续的alert()方法不会被执行到，从而做到只有在参数为偶数时才显示对话框。4.7.3函数的返回值【例4-19】JavaScript带有返回值函数的应用4.8.1查找HTML元素4.8.2DOMHTML4.8.3DOMCSS4.8.4DOM事件4.8.5DOM节点4.8文档对象模型DOM4.8.1查找HTML元素在JavaScript中有三种方式可以查找HTML元素：通过HTML元素的id名称查找；通过HTML元素的标签名称查找；通过HTML元素的类名称查找。4.8.1查找HTML元素1.通过id查找HTML元素一般默认不同的HTML元素使用不一样的id名称以示区别，因此通过id名称找到指定的单个元素。在JavaScript中语法如下：document.getElementById("id名称");其中getElementById()方法是遵照驼峰命名法，即第一个单词全小写，后面的每一个单词首字母大写的方式。这种命名方法在JavaScript中比较普遍。如果未找到该元素，则返回值为null；如果找到该元素，则会以对象的形式返回。4.8.1查找HTML元素1.通过id查找HTML元素例如，查找id="test"的元素，并获取该元素内部的文本内容：//根据id名称获取元素对象vartest=document.getElementById("test");//获取元素内容varresult=test.innerHTML;为简便代码阅读效果，使用了与id名称同名的变量test来获取指定元素，该变量名称也可以是其他自定义变量名，不影响运行效果。innerHTML可以用于获取元素内部的HTML代码，关于innerHTML更多用法请参考下一节4.12.2。4.8.1查找HTML元素2.通过标签名查找HTML元素HTML元素均有固定的标签名称，因此通过标签名称可以找到指定的单个或一系列元素。在JavaScript中语法如下：document.getElementsByTagName("标签名称");此时方法中的Elements是复数形式，因为要考虑到有可能存在多个元素符合要求。同样如果未找到符合的元素，则返回值为null；如果有多个符合条件的元素，则返回值是数组的形式。4.8.1查找HTML元素2.通过标签名查找HTML元素例如，查找所有的段落元素<p>，并获取第一个段落标签内部的文本内容：vartest=document.getElementByTagName("p");

varresult=p[0].innerHTML;因为有多个段落标签，因此变量返回值是数组的形式。其中第一个段落标签对应的是p[0]，以此类推，最后一个元素对应的索引号为数组长度减1。4.8.1查找HTML元素3.通过类名查找HTML元素document.getElementsByClassName()方法可用于根据类名称获取HTML元素。在JavaScript中语法如下：document.getElementsByClassName("类名称");此时方法中的Elements是复数形式，因为要考虑到有可能存在多个元素符合要求。同样如果未找到符合的元素，则返回值为null；如果有多个符合条件的元素，则返回值是数组的形式。注：该方法在IE5、6、7、8版本中使用均无效，为考虑各个版本浏览器的兼容性，如果不能保证用户使用IE5、6、7、8版本以外的浏览器则不建议使用此方法来获取HTML元素。4.8.1查找HTML元素【例4-20】JavaScriptDOM查找元素的应用4.8.2DOMHTML1.创建动态的HTML内容2.改变HTML元素内容3.改变HTML元素属性4.8.2DOMHTML1.创建动态的HTML内容在JavaScript中，使用document.write()方法可以往HTML页面动态输出内容。例如：<body><script>document.write("Hello2016");</script></body>上述代码片段表示将在空白页面上动态输出字符串"Hello2016"。需要注意的是，alert()方法中的换行符\n在这里是无效的，如果需要输出换行直接使用HTML换行标签<br>即可。4.8.2DOMHTML1.创建动态的HTML内容【例4-21】JavaScriptDOM动态生成HTML内容注：每次打开生成的时间都是实时更新的。

4.8.2DOMHTML2.改变HTML元素内容innerHTML可以用于获取元素内容，也可以改变元素内容。使用innerHTML属性获取或更改的元素内容可以包括HTML标签本身。获取元素内容的语法结构如下：更改元素内容的语法结构如下：var变量名=元素对象.innerHTML;元素对象.innerHTML=新的内容;这里的元素对象可以使用document对象的getElementById("id名称")方法获取。4.8.2DOMHTML2.改变HTML元素内容【例4-22】JavaScriptDOM修改元素内容4.8.2DOMHTML3.改变HTML元素属性在JavaScript还可以根据属性名称动态地修改元素属性。其语法结构如下：例如，更改id="image"的图片地址src属性：元素对象.attribute=新的属性值;varimg=document.getElementById("image");img.src="image/newpic.jpg";4.8.2DOMHTML3.改变HTML元素属性也可以使用setAttribute()方法达到同样的效果。其语法格式如下：例如，更改id="image"的图片地址src属性的代码修改后如下：元素对象.setAttribute("属性名称","新的属性值");varimg=document.getElementById("image");img.setAttribute("src","image/newpic.jpg");4.8.2DOMHTML3.改变HTML元素属性【例4-23】JavaScriptDOM修改元素属性4.8.3DOMCSSJavaScript还可以改变HTML元素的CSS样式。其语法结构如下：元素对象.style.属性=新的值;这里的元素对象可以使用document对象的getElementById("id名称")方法获取。属性指的是在CSS样式中的属性名称，等号右边填写该属性更改后的样式值。4.8.3DOMCSS例如，更改id="test"的元素背景颜色为蓝色：上述代码也可以连成一句，写法如下：vartest=document.getElementById("test");test.style.backgroundColor="blue";需要注意的是，这里元素CSS属性名称需要修改成符合camel标记法的规则的写法，即首个单词全小写，后面的每个单词均首字母大写。而属性值在定义时需要加上双引号。vartest=document.getElementById("test").style.backgroundColor="blue";4.8.3DOMCSS【例4-24】JavaScriptDOM修改元素CSS样式4.8.4DOM事件JavaScript还可以在HTML页面状态发生变化时执行代码，这种状态的变化称为DOM事件（Event）。4.8.4DOM事件例如用户点击元素会触发点击事件，使用事件属性onclick就可以捕获这一事件。为元素的onclick属性添加需要的JavaScript代码，即可做到用户点击元素时触发动作。<buttononclick="alert('hi')">点我会弹出对话框</button>常见事件如表4-26所示。4.8.4DOM事件JavaScript代码可以直接在onclick属性的双引号中添加，也可以写到JavaScript函数中，在onclick属性的双引号中调用函数名称。例如上述代码可以改写为：<buttononclick="test()">点我会弹出对话框</button><script>functiontest(){alert("hi");}</script>以上两种方法效果完全相同，可根据代码量决定采用其中哪种方式，假如点击事件触发后需要执行的代码较多，建议使用函数调用的方式。4.8.4DOM事件【例4-25】DOM事件的简单应用

4.8.5DOM节点使用JavaScript也可以为HTML页面动态地添加和删除HTML元素。4.8.5DOM节点1.添加HTML元素添加HTML元素有两个步骤，先要创建需要添加的HTML元素，然后将其追加在一个已存在的元素中去。使用document对象的createElement()方法可以创建新的元素，其语法结构如下：例如，创建一个新的段落标签<p>：document.createElement("元素标签名");document.createElem