《JavaScript动态网页设计》 课件 孙永林 项目1、2 创建JavaScript程序、制作二级联动效果

项目1.1环境搭配主讲：***2024年1月2日JavaScript动态网页设计1子项目项目1JavaScript的基础2024年1月2日JavaScript动态网页设计2学习任务

任务1环境搭配

任务2

第一个JavaScript脚本程序

任务3JavaScript语法（变量、数

据类型、运算符）项目1JavaScript的基础2024年1月2日JavaScript动态网页设计3任务1环境搭配在网页设计中，HTML、JavaScript和CSS文件必须是纯文本格式的，JavaScript源程序是文本文件，因此可以使用任何文本编辑器来编写程序源代码，如Windows操作系统里的“记事本”程序。为了更快速地编写程序并且降低出错的概率，通常会选择一些专业的代码编辑工具。专业的代码编辑器有代码提示和自动完成功能，比如AdobeDreamweaver（后面简称DW）、notepad++、editplus，本文只介绍了DW的安装。项目1JavaScript的基础2024年1月2日JavaScript动态网页设计4项目1JavaScript的基础这里安装用的是Dreamweaver_CS6，官方简体中文版的安装文件及破解补丁都可以在官网下载：/cn/products/cs6/dreamweaver.html。（1）运行Dreamweaver_CS6安装程序，第一步是将其解压缩到指定目录，我这里就解压到桌面，也可以点击右边的文件夹按钮选择指定位置。解压完成后，会自动运行安装程序。一、下载解压安装包2024年1月2日JavaScript动态网页设计5项目1JavaScript的基础（2）可能会弹出这个错误提示，直接忽略就行；二、安装Dreamweaver软件2024年1月2日JavaScript动态网页设计6项目1JavaScript的基础（3）因为我们没有安装序列号，是使用破解补丁破解，所以这里选择“作为试用版安装”；二、安装Dreamweaver软件2024年1月2日JavaScript动态网页设计7项目1JavaScript的基础（4）选择”接受“；二、安装Dreamweaver软件2024年1月2日JavaScript动态网页设计8项目1JavaScript的基础（5）选择安装的路径：如E:\软件安装列表；二、安装Dreamweaver软件2024年1月2日JavaScript动态网页设计9项目1JavaScript的基础（6）点击安装。二、安装Dreamweaver软件2024年1月2日JavaScript动态网页设计10项目1JavaScript的基础（7）安装完毕后，先不要启动程序，现在的软件还是试用期的，只能使用一个月，后面的步骤是进行破解。二、安装Dreamweaver软件2024年1月2日JavaScript动态网页设计11项目1JavaScript的基础（8）将破解补丁中的amtlib.dll替换安装目录的文件，这样，软件就可以永久使用了。二、安装Dreamweaver软件2024年1月2日JavaScript动态网页设计12结束！项目1JavaScript的基础项目2数组及其常用方法主讲：***2024年1月2日JavaScript动态网页设计13子项目2024年1月2日JavaScript动态网页设计14学习任务

任务1数组的创建及赋值

任务2数组的访问与修改

任务3常用数组操作函数2024年1月2日JavaScript动态网页设计15任务1数组的创建及赋值

数组就是某类数据的集合，数组的类型可以是整形、字符串，甚至是对象。JavaScript不支持多维数组，因为数组里面可以包含对象。数组对象的作用是：使用单独的变量名来存储一系列的值。数组有多种创建及赋值的方法，最常用的有以下三种：（1）使用构造函数（2）对数组直接赋值（3）当无法提前预知数组最终元素个数时，可声明不知道个数的数组2024年1月2日JavaScript动态网页设计161、使用构造函数vararray1=newArray();//空数组vararray2=newArray(5);//指定数组长度vararray3=newArray(“a”,“b”,“c”);//定义并赋值2、对数组直接赋值vararray4=["a","b","c"];3、当无法提前预知数组最终元素个数时，可声明不知道个数的数组varfruit=newArray();fruit[0]="Apple";fruit[1]="Orange";fruit[2]="Pear";2024年1月2日JavaScript动态网页设计17任务2数组的访问与修改1、通过指定数组名以及索引号码，可以访问某个特定的元素document.write(fruit[1]);即可输出：Orange2、如需修改已有数组中的值，只要向指定下标号添加一个新值即可fruit[1]="Cherry";此刻上面的语句：document.write(fruit[1]);将输出：Cherry3、获取数组长度Javascript的数组不需要预先设定长度，会自己进行扩展，“数组名.length”会返回元素个数。2024年1月2日JavaScript动态网页设计181、push():将一个或多个新元素添加到数组未尾，并返回数组新长度: arrayObj.push([item1[,item2[,...[,itemN]]]]);push()方法可以把它的参数顺序添加到ayyayObj的尾部。它直接修改arrayObj,而不是创建一个新的数组。范例2-1：程序代码如下：<script>vararrayNum=[1,2];varlen=arrayNum.push(3,4);alert("长度为："+len+"--"+arrayNum);</script>运行效果：任务3常用数组操作函数对数组操作的常用函数包括对数组元素的增加、删除、截取和合并等操作。2024年1月2日JavaScript动态网页设计192、unshift():将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度: arrayObj.unshift([item1[,item2[,...[,itemN]]]]);范例2-2：程序代码如下：<script>vararrayNum=[1,2];varlen=arrayNum.unshift(3,4);alert("长度为："+len+"--"+arrayNum);</script>运行效果：2024年1月2日JavaScript动态网页设计203、shift():用于把数组的第一个元素从数组中删除，并返回该元素的值： arrayObj.shift();如果数组是空的，那么shift()方法将不进行任何操作，返回Undefined值。范例2-3：程序代码如下：<script>varfruit=newArray();fruit[0]="Apple";fruit[1]="Orange";fruit[2]="Pear";alert(fruit+"\n"+fruit.shift()+"\n"+fruit);</script>运行效果：2024年1月2日JavaScript动态网页设计214、pop():用于把数组的最后一个元素从数组中删除，并返回该元素的值： arrayObj.pop();范例2-4：程序代码如下：<script>varfruit=newArray();fruit[0]="Apple";fruit[1]="Orange";fruit[2]="Pear";alert(fruit+"\n"+fruit.pop()+"\n"+fruit);</script>运行效果：2024年1月2日JavaScript动态网页设计22返回5、slice():以数组的形式返回数组的一部分，即截取数组的一部分：arrayObj.slice(start,[end]);

注意：数组截取时不包括end对应的元素，如果省略end将复制start之后的所有元素。范例2-5：程序代码如下：<script>vararr1=newArray();arr1[0]="one";arr1[1]="two";arr1[2]="three";arr1[3]="four";arr1[4]="five";vartemp=arr1.slice(1,2);alert(temp);</script>运行效果：2024年1月2日JavaScript动态网页设计236、concat():将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组:arrayObj.concat([item1[,item2[,...[,itemN]]]]);

该方法不会改变现有的数组，返回被连接数组的副本。该副本数组将所有item参数添加到arrayObj中，如果要进行concat()操作的参数是数组，那么添加的是数组中的元素，而不是数组。范例2-6：程序代码如下：<script>vararr1=newArray(3);arr1[0]="one";arr1[1]="two";arr1[2]="three";vararr2=newArray(3);arr2[0]="four";arr2[1]="five";arr2[2]="six";vartemp=arr1.concat(arr2);alert(temp);</script>2024年1月2日JavaScript动态网页设计24运行效果：2024年1月2日JavaScript动态网页设计257、sort():字面上对数组元素排序： sort(item1,item2[,...[,itemN]]]]);范例2-7：程序代码如下：<script>vararr=newArray(6);arr[0]="George";arr[1]="John";arr[2]="Thomas";arr[3]="James";arr[4]="Adrew";arr[5]="Martin";alert(arr+"\n"+arr.sort());</script>运行效果：2024年1月2日JavaScript动态网页设计26结束！项目1.2我的第一个JavaScript脚本程序主讲：***2024年1月2日JavaScript动态网页设计27子项目项目1JavaScript的基础脚本语言JavaScript第一个JavaScript程序JavaScript代码编写注意事项项目1JavaScript的基础

如今成熟的脚本语言非常多，根据使用方式的不同分成嵌入式和非嵌入式两类。嵌入式脚本语言，这类语言通常为了应用程序的扩展而开发出来。解释器通常嵌入在被扩展的应用程序中，成为宿主程序的一部分。例如，Lua语言、Python语言的嵌入性也比较好，如今这两者在游戏开发领域应用较多，通常作为游戏软件的脚本系统或配置文件。根据笔者的经验，Lua语言无论在嵌入性和运行效率上都远超过其他语言，将Python语言纳入嵌入式语言分类中有些勉强，因为其更像其他独立运行的语言。

非嵌入式脚本语言，这类语言无须嵌入其他程序中，如本书所讲的JavaScript语言。这些语言主要应用不是作为系统扩展，而是实现一般的任务控制。一、脚本语言的分类项目1JavaScript的基础

众多Web浏览器对JavaScript的支持也很不一致，相同的语言特性在不同的浏览器中会有所差异。这种差异对开发者影响极大，开发时不得不为不同的浏览器编写不同的代码，这种难堪的局面一直持续到JavaScript标准的制定。1997年发布了ECMA-262语言规范，将JavaScript语言标准化并重命名为ECMAScript，现在各种浏览器都以该规范作为标准。

提示：语言和系统接口标准化后可以大大减轻应用开发人员的负担，不用为不同的语言特性或接口编写不同的代码，这也增强了软件的可移植性。二、JavaScript的标准与历史项目1JavaScript的基础JavaScript的脚本包括在HTML中，它成为HTML文档的一部分。与HTML标识相结合，构成了一个功能强大的Internet网上编程语言。使用特定的标记可以直接将JavaScript脚本加入文档：三、JavaScript在网页中的应用

项目1JavaScript的基础脚本语言JavaScriptJavaScript在网页中的应用JavaScript的脚本包括在HTML中，它成为HTML文档的一部分。与HTML标识相结合，构成了一个功能强大的Internet网上编程语言。使用特定的标记可以直接将JavaScript脚本加入文档：01 <html> <!--文档开始-->02 <head></head> <!--文档头-->03 <body> <!--文档体-->04 <scriptLanguage="JavaScript">05 JavaScript语言代码；JavaScript语言代码;....06 </script>07 </body> <!--文档体结束-->08 </html> <!--文档结束-->项目1JavaScript的基础脚本语言JavaScriptJavaScript的发展趋势语言永远被当做工具，这一点从来都没有被改变过，以后也不会。例如，在Windows平台上，使用ADODB组件可以使JavaScript能处理支持SQL的数据库中的数据，使用FSO组件可以实现本地文件IO功能。这一切都说明了JavaScript位于应用开发的最顶端，其与低层技术的实现无关，层次结构如图1-2所示。尽管平台技术不断发生变化，JavaScript仍将以不变的形式去使用平台提供的能力从而适应新的需求。未来的一段时间内，Web开发将是开发者众聚之地，也是JavaScript变得紫红的时代。项目1JavaScript的基础第一个JavaScript程序学习每一门新语言，大致了解了它的背景之后，最想做的莫过于先写一个最简单的程序并成功运行。如果最初连续几个程序都无法成功编译或运行，初学者学习的信心多少会受些打击，这是正常现象。本节将带领读者对JavaScript进行第一次实践尝试，用它编写一个最简单且流行了几十年的“HelloWorld”程序。项目1JavaScript的基础第一个JavaScript程序选择JavaScript编辑器JavaScript源程序是文本文件，因此可以使用任何文本编辑器来编写程序源代码，如Windows操作系统里的“记事本”程序。为了更快速地编写程序并且降低出错的概率，通常会选择一些专业的代码编辑工具。专业的代码编辑器有代码提示和自动完成功能，笔者推荐使用AptanaStudio，它是一款很不错的JavaScript代码编辑器。项目1JavaScript的基础第一个JavaScript程序编写HelloWorld程序01 <html> <!---------HTML文档开始-------------------->02 <body> <!---------文档体开始-------------------------->03 <scriptlanguage="JavaScript"> <!---------脚本程序----------------------------->04 document.write("HelloWorld!"); //输出经典的HelloWorld05 </script> <!---------脚本结束----------------------------->06 </body> <!---------文档体结束-------------------------->07 </html> <!---------HTML文档结束-------------------->项目1JavaScript的基础第一个JavaScript程序运行程序运行JavaScript程序最简单的方法就是使用浏览器打开包含JavaScript代码的网页文件，通常网页文件的扩展名为htm或者html。使用系统自带的浏览器即可。项目1JavaScript的基础JavaScript代码编写时的注意事项JavaScript程序的书写有些许需要注意的地方，如大小写敏感、单行和多行、分号的运用等。初学者在编写程序时通常会触犯这些规则，应该尽力避免。用户自定义的标识符不能与语言保留的关键字同名，通过使用一些专业的编辑器可以帮助消除语法错误。项目1JavaScript的基础JavaScript代码编写时的注意事项大小写敏感空格与换行分号可有可无注释形式项目1JavaScript的基础2024年1月2日JavaScript动态网页设计40结束！项目1JavaScript的基础3.1条件控制语句主讲：***2024年1月2日JavaScript动态网页设计41子项目2024年1月2日JavaScript动态网页设计42学习任务

任务1选择结构和条件判断

任务2if-else条件控制语句

任务3switch-case条件控制语句2024年1月2日JavaScript动态网页设计43

语句：和其他编程语言一样，Javascript也具有各种语句来进行流程上的判断。从本质上看，语句定义了ECMAScript中的主要语法，语句通常使用一或多个关键字来完成给定点任务。语句可以很简单，例如通知函数退出；也可以比较复杂，例如指定重复执行某个命令的次数。

程序控制语句主要分成两种：条件控制语句和循环控制语句。2024年1月2日JavaScript动态网页设计44任务1选择结构和条件判断条件控制语句采用依照某种条件判断该代码段是否执行。实际的生活中往往存在选择分支的情况，一般来说，像抛硬币之类的事件存在着正面和反面两个分支，像选择出行路径之类的事件，往往存在多个分支，分支的数量不同将决定程序的不同行为表现。常用的有两种选择语句：（1）if语句，这种语句的作用场景为只有两个分支的程序选择中。（2）switch语句，这种语句的作用场景为具有多个分支的程序选择中。

2024年1月2日JavaScript动态网页设计45任务2if-else条件控制语句1、对程序流程进行条件判断时，最为常用的一个语句就是if-else语句。if-else语句的语法：if(condition)statement1elsestatement2其中的条件condition可以是任意的表达式，且该条件表达式的值不一定是布尔值。ECMAScript会自动调用Boolean()转换函数将这个表达式的结果转换为一个布尔值。if语句的执行过程为：如果对condition求值的结果是true,则执行statement1（语句1）；如果condition的结果为false，则执行statement2（语句2）。执行体语句1和语句2既可以是一行代码，也可以是一个代码块（以一对花括号括起来的多行代码）。2024年1月2日JavaScript动态网页设计46if-else控制语句执行流程图如下：

2024年1月2日JavaScript动态网页设计47【范例3-1】根据年龄显示不同内容。程序代码如下：<body><script>varage=20;if(age>=18){//如果age>=18为true，则执行if语句块alert('成年人');}else{//否则执行else语句块alert('青少年');}</script></body>运行效果：2024年1月2日JavaScript动态网页设计48<body><script>varage=20;if(age>=18)//如果age>=18为true，则执行if语句块alert(‘成年人’);else//否则执行else语句块alert('青少年');</script></body>执行结果与例3-1完全一样。在上面例3-1中，else语句是可选的，即可不包含else语句。

同时，如果语句块只包含一条语句，那么可以省略大括号{},则例3-1可以修改如下：是否所有大括号{}都可以省略呢？？？2024年1月2日JavaScript动态网页设计49<body><script>varage=20;if(age>=18)alert('成年人');elseconsole.log('年龄小于18岁');alert('青少年');</script></body>此刻程序的结果仅在控制台里输出：年龄小于18岁不可以！！！省略{}的危险之处在于，如果后来想添加一些语句，却忘了写{}，就改变了if...else...的语义，比如在3-1例子中的else条件后需执行两条语句，修改如下：2024年1月2日JavaScript动态网页设计50上述代码的else子句实际上只负责执行语句console.log(“年龄小于18岁“)，原有的alert(“青少年”)语句已经不属于else的控制范围了，当条件判断的表达式结果为假，它仅执行到else后面的第一个分号;处，因此语句alert(“青少年”)执行不到。所以业界推崇的最佳实践是始终使用代码块，即使要执行的只有一行代码。因为这样可以消除人们的误解，否则可能让人分不清在不同条件下分别要执行哪些语句。

以上代码修改如下，则可得到预期的输出结果：<body>