HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第14章 JavaScript快速入门

网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号14授课日期月日月日月日月日授课班级课内教学内容：第14章JavaScript快速入门课外学习任务：（1）课前：以小组为单位，讨论JavaScript相关知识并以PPT的形式记录下来。（2）课后：=1\*GB3①使用鼠标事件实现单击按钮切换div元素的CSS样式的效果。=2\*GB3②将输入框中的字母全部转换为大写形式。=3\*GB3③使用onsubmit事件捕获“提交”按钮的表单提交操作。教学目标：知识目标掌握JavaScript基础知识。掌握对元素的动态操作。掌握事件常用方法。能力目标能够独立实现动态网页的布局；能够独立使用JavaScript语言。素质目标较强的专业知识和自学能力；丰富知识结构，提升专业知识；掌握JavaScript语言编写技能，理解并应用专业知识。重点难点及解决方法：（1）重点：JavaScript基础知识解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解JavaScript的基础知识，引导学生积极思考，掌握相应知识；同时通过课堂在线展示，使学生可以更直观的了解JavaScript语言的相关知识；培养学生的思维能力和分析问题解决问题的能力。（2）难点：对元素的动态操作和事件解决方法：通过代码讲解+在线演示的的方式教学，细致讲解网页中各种动态效果是如何通过JavaScript代码实现的。帮助学生掌握JavaScript代码对网页动态交互效果的实现方法和技巧。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段1.初识JavaScriptJavaScript语言允许开发者实现网页的动态效果和响应用户交互行为，同时也被用于服务器端编程、移动应用开发等多种平台。JavaScript于1995年由Netscape公司的布兰登·艾奇（BrendanEich）在网景导航者浏览器上首次设计、实现而成。本节将介绍JavaScript语言基础知识的相关内容。【JavaScript语言的组成】JavaScript语言的组成方式与其他编程语言类似。JavaScript语言主要由标识符、关键字、变量、运算符、语句、函数以及对象组成。1．标识符编程语言的基本功能是处理数据，但是单独的数据是没有任何含义的。例如，一个数字1，谁也不知道它代表什么。因此，数字需要用有含义的词语去指代或者与其关联，例如，1个苹果，此时数字1就代表1个苹果。在编程时对苹果和数字1处理时，苹果这种名词就被称为标识符。标识符就是在编程语言中拥有指定功能的字、词或符号。标识符在命名时要遵循以下几个规则：标识符由数字、字母、下画线（_）、美元符号（$）等构成； 第一个字符必须是字母、下画线或美元符号； 标识符区分字母的大小写，推荐使用小写形式或骆驼命名法； 标识符不能与JavaScript中的关键字相同。2．关键字关键字是由JavaScript语言官方规定的拥有特定功能的标识符。例如，for用于实现循环语句。编程人员在自定义标识符时是不能使用关键字或保留字的。JavaScript语言的系统预定义关键字如表14.1所示。序号关键字序号关键字序号关键字序号关键字1abstract17else33instanceof49switch2arguments18enum34int50synchronized3boolean19eval35interface51this4break20export36let52throw5byte21extends37long53throws6case22false38native54transient7catch23final39new55true8char24finally40null56try9class25float41package57typeof10const26for42private58var11continue27function43protected59void12debugger28goto44public60volatile13default29if45return61while14delete30implements46short62with15do31import47static63yield16double32in48super3．变量变量是指用于存放可变化数据的标识符。在变量中可以存放不同的值，这样就可以在同一块空间中实现大量数据的运算和迭代。变量就像一辆货车，在有限的空间内可以运送不同的货物。在使用变量之前需要先创建变量，然后才能使用变量实现数据的存储和运算。声明变量是使用固定代码向计算机硬件申请一块内存空间用以存储数据，但是这块空间内是没有数据的。就像购买了一辆卡车，卡车的货仓是空的。声明变量的语法格式如下。var变量1,变量2,…,变量n其中，var表示声明或定义变量的关键字。var可以一次声明一个或多个变量，每个变量之间用英文逗号分隔。变量的名字由开发者定义，但是要符合标识符的命名规范。在JavaScript语言中是区分大小写的，所以变量a和变量A代表两个变量。声明一个变量truck的代码如下所示。vartruck;声明多个变量truck1、truck2、truck3的代码如下所示。vartruck1,truck2,truck3;声明变量就像一辆空卡车，而定义变量就是一辆装满货物的卡车。如果已经有了确定的数据，此时就可以使用定义变量的方式来创建变量。定义变量的语法格式如下。var变量名=初始值;其中，“=”为赋值运算符，该运算符会将右侧的初始值赋给左侧的变量。初始值就是要使用变量存储的数据，也就是卡车中装的货物。如果要一次性定义多个变量，其语法格式如下。var变量名1=初始值1,变量名2=初始值2,变量名n=初始值n,;其中，每个变量直接用逗号分隔。4．运算符运算符用于实现对数据的运算。JavaScript语言中常用的运算符包括赋值运算、算术运算、比较运算和逻辑运算。按照运算符的操作数，运算符又可以分为单目运算符、双目运算符和多目运算符。常用的运算符如表14.2所示。运算符功能示例=赋值运算，双目，将赋值运算右侧的数据赋给左侧的变量a=10或a=b+加法运算，双目，计算两个操作数的和a+b-减法运算，双目，计算两个操作数的差a-b*乘法运算，双目，计算两个操作数的积a*b/除法运算，双目，计算两个操作数的商a/b%取余运算，双目，计算两个操作数的余数a%b++自加运算，单目，在操作数原来的基础上加1a++或++a--自减运算，单目，在操作数原来的基础上减1a--或--a>大于。左侧的值大于右侧的值时返回true，否则返回falsea>b>=大于等于。左侧的值大于等于右侧的值时返回true，否则返回falsea>=b<小于。左侧的值小于右侧的值时返回true，否则返回falsea<b<=小于等于。左侧的值小于等于右侧的值时返回true，否则返回falsea<=b!=不等于。左侧与右侧的值不相等时返回true，否则返回falsea!=b==等于。左侧与右侧的值相等时返回true，否则返回falsea==b!===严格不等于。左侧与右侧的值不相等或数据类型不同时返回true，否则返回falsea!===b===严格等于。左侧与右侧的值相等且数据类型相同时返回true，否则返回falsea===b&&逻辑与运算符。当两个操作数同时为true时返回true，否则返回falsea&&b！逻辑非运算符。只有一个操作数，操作数为true时，返回false，否则返回true!a||逻辑或运算符。当两个操作数同时为false时返回false，否则返回truea||b5．语句语句是编程语言中的基础单位，每个语句代码都会实现一个或多个功能。就像写作文，每句话都会表达一个或多个中心思想。在JavaScript语言中建议每句代码结尾处添加英文分号，以表示语句的结束。在JavaScript语言中程序默认是从源代码第1行开始依次顺序执行。有几种语句可以改变程序的执行顺序，这些语句包括分支控制语句以及循环控制语句。下面介绍几个常见的改变程序执行顺序的语句。（1）if语句if语句会为程序提供一条可执行的分支。如果满足if语句的条件，就执行该分支，否则跳过该分支。其语法格式如下。if(条件表达式){语句块;}（2）if…else语句if…else语句会提供两条可执行的分支。如果满足条件，执行第一个分支，否则执行另外一个分支；两条分支中必须有一个分支被执行。其语法格式如下。if(条件表达式){语句块1;}else{语句块2;}（3）for语句for语句是标准的循环语句，也是所有循环语句中具有执行效率的语句。for语句会在循环条件为真的前提下不断循环执行指定的语句，其语法格式如下。for(初始条件;循环条件;迭代条件){循环体语句块;}其中，初始条件是指循环的起始点，一般为初始化变量的值。循环条件为条件表达式，用于控制循环的次数，如果表达式的值为真就进入循环，执行循环体语句块，否则就停止并跳出循环。迭代条件用于对变量进行迭代。3个条件之间要使用英文分号（；）进行分隔。循环体语句块是由一条或多条语句组成的。（4）while语句while语句的特点是先判断条件是否成立，再决定是否执行循环体语句块。它是for循环语句的一种变形，其语法格式如下。while(条件表达式){循环体语句块;}（5）do…while语句do…while语句的特点是先执行一次指定的语句，然后判断条件是否成立，再决定是否进行第2次循环。它也是for循环语句的一种变形，其语法格式如下。do{语句块;}while(条件表达式);6．函数函数是指一段有固定功能的代码块。函数名用于指代这个代码块。函数的存在是为了提高代码的利用率。开发者定义一个函数之后就可以重复地调用该函数，这样就省去了重复编写同一段代码的过程，从而提高了代码的利用率。函数的使用就像一个锤子，当人们需要敲钉子的时候，只需要直接拿起锤子使用即可，而不需要每次敲钉子都先制造一个锤子，再敲钉子。自定义函数的语法格式如下。function函数名(){语句块;}其中，函数名由开发者自定义，但是需要符合标识符的命名规则。语句块就是用于实现具体功能的单行或多行代码。开发者定义函数之后可以通过函数名调用这个函数，调用的语法格式如下。函数名();其中，函数名必须与定义的函数名完全相同。7．对象对象是包含相关属性和方法的集合体。其中，属性就是与对象产生关联的变量，方法就是与对象产生关联的函数。JavaScript提供了多个对象，每个对象都有对应的属性和方法。开发者只需要通过调用这些对象的属性和方法就可以实现对元素的操作。对象调用对应的属性或方法时会用到点运算符，其语法格式如下。对象.属性;或对象.方法();JavaScript中的数组变量也会被作为对象处理，数组变量可以使用单独的变量名来存储一系列数据。定义数组变量的语法格式如下。var数组名=newArray(元素1,元素2,…,元素n);简写形式为var数组名={元素1,元素2,…,元素n};如果数组变量的元素是一个字符串，定义数组变量的语法格式如下。var数组名="字符串";如果要访问数组变量中的元素，其语法格式如下。数组名[下标];其中，下标用于指定要访问的数组中的元素，下标默认从0开始。例如，定义一个数组a代码如下所示。vara={1,2,3};如果要访问数组中的第一个元素，数组下标值必须为0，代码如下所示。a[0];【嵌入方式】JavaScript代码嵌入HTML文本的方式包括行内嵌入、内部嵌入和外部嵌入3种。行内嵌入JavaScript代码是将代码添加到标签中，其语法格式如下。<标签名触发事件="JavaScript代码"/>其中，触发事件属于JavaScript方法的一种。内部嵌入是将JavaScript代码添加在<script>与</script>标签之间。<script>与</script>标签可以添加在<head>与</head>标签之间，也可以添加在<body>与</body>标签之间的末尾。如果放在<head>与</head>标签之间，脚本会在HTML文件全部加载前执行，这可能会导致页面显示延迟或无法触发指定的效果。因此，为了不影响页面加载速度，许多开发者倾向于将脚本放在<body>与</body>标签之间的末尾。内部嵌入JavaScript代码的语法格式如下。<head><scripttype="text/javascript">JavaScript代码;</script></head><body>…网页元素…<scripttype="text/javascript">JavaScript代码;</script></body>其中，<script>标签的type属性在HTML5标准中可以省略。但是为了兼容，建议添加该属性。外部嵌入是将JavaScript代码与HTML文件进行分离存放。JavaScript代码会存放到文件扩展名为.js的文件中，然后在HTML页面中使用<script>标签将.js文件引入，<script>标签一般默认添加到<head>与</head>标签之间。外部嵌入时HTML文件中引入.js文件的语法格式如下。<scripttype="text/javascript"src="JavaScript/xxx.js"></script>【注释】注释是编写代码过程中的重要部分。注释类似于古文中的对照翻译，用于解释JavaScript代码，以提高代码的可读性。在编写代码或对代码后期维护时，添加合理和精准的注释是十分重要的。JavaScript代码的注释可以分为单行注释和多行注释两种。单行注释以双斜杠（//）开头，且双斜杠后面的同行内容不会被执行。单行注释的语法格式如下。alert("显示的内容"); //单行注释多行注释以斜杠和星号（/*）开头、以星号和斜杠（*/）结尾。多行注释可以跨越多行代码，且在注释符之间的所有内容都不会被执行。多行注释的语法格式如下。/*多行注释alert("显示的内容");alert("显示的内容");*/2.对元素的动态操作对元素的动态操作是指通过JavaScript语言提供的对象中的方法和属性实现对网页元素的动态操作，包括获取元素中的内容、修改元素内容和属性值以及修改元素样式等。【document对象】document对象是JavaScript语言提供的一个重要对象。通过document对象的属性和方法，可以实现对HTML文件页面中所有元素的操作。document对象的常用属性如表14.3所示。表14.3document对象的常用属性属性功能属性功能cookie设置或返回与当前文件相关的所有cookiereferrer返回载入当前文件的URLdomain返回当前文件的域名title返回当前文件的标题lastModified返回文件被最后修改的日期和时间URL返回当前文件的URLdocument对象的常用方法如表14.4所示。表14.4document对象的常用方法方法功能getElementById()返回拥有指定id属性值的第一个对象getElementsByClassName()返回拥有指定class属性值的对象集合getElementsByTagName()返回带有指定标签名的对象集合write()向文件写HTML表达式或JavaScript代码【获取元素中的内容】网页中有很多元素，我们可以通过innerHTML属性获取元素中的文本内容。该属性需要配合document对象的查找元素的方法使用，其语法格式如下。查找元素的方法.innerHTML下面通过3种常用的查找元素方法配合innerHTML属性获取元素中的内容。1．通过id属性获取元素的内容通过id属性值查找对应元素需要使用getElementById()方法实现，其语法格式如下。document.getElementById("id属性值")使用getElementById()方法只可以获取一个id属性为指定值的元素。如果两个元素的id属性值相同，只会获取文件中从上到下第一个出现的指定元素。2．通过class属性获取元素的内容通过class属性查找HTML元素需要使用getElementsByClassName()方法实现，其语法格式如下。document.getElementsByClassName("类属性值")使用getElementsByClassName()方法可以获取到所有拥有指定class属性值的对应元素。该方法返回的值是一个数组，然后通过数组和下标名的方式可以访问指定的元素。3．通过标签名获取元素的内容通过标签名查找HTML元素需要使用getElementsByTagName()方法实现，其语法格式如下。document.getElementsByTagName("标签名")该方法的返回值为一个数组，该数组包含获取到的所有指定标签的元素。通过数组和下标可以访问对应的元素。【修改元素内容和属性值】通过JavaScript代码可以动态地查找并修改对应元素的内容和属性值。通过修改内容可以实现交互信息的切换，通过修改属性值可以实现样式的切换等效果。查找并修改元素的内容和属性值的语法格式如下。查找元素.innerHTML=文本内容;查找元素.标签属性名=属性值;其中，如果文本内容与属性值是字符串，需要使用英文双引号括起来；如果是变量，则不需要使用双引号。【修改元素样式】在JavaScript语言中可以提供style对象的CSS属性动态改变元素的样式。该对象的属性分为12类，包括背景、边框和边距、布局、列表、杂项、定位、打印、滚动条、表格、文本和规范，每个分类又可以细化为与CSS样式对应的属性。使用style对象的语法格式如下。查找元素.perty="属性值"其中，查找元素需要根据具体需求选择；style表示style对象不可以省略；property表示具体的属性名（基本与CSS样式类似）；属性值为样式要修改的具体值（基本与CSS样式类似）。3.事件JavaScript语言提供了多种事件用于监听对应元素上的操作（如单击元素、输入信息等操作），然后执行对应的代码。JavaScript语言提供的事件可以分为鼠标事件、键盘事件及表单事件等。【事件方法的基本语法】事件需要嵌入元素标签中使用。每个元素中一次可以嵌入多个事件，每个事件之间使用空格进行分隔。添加事件的语法格式如下。<标签名事件1="JavaScript代码"事件n="JavaScript代码"></标签名>【鼠标事件】鼠标事件用于监听在网页中用户使用鼠标对元素的所有操作，包括单击、右击、双击、悬浮于元素上方、离开元素上方等。在14.2节中用到的事件onclick就是鼠标单击事件的一种。鼠标事件如表14.5所示。事件功能onclick单击元素时被此事件捕获oncontextmenu右击某个元素并打开上下文菜单时被此事件捕获ondblclick双击元素时被此事件捕获onmousedown在元素上按下鼠标按键时被此事件捕获onmouseenter鼠标指针移动到元素上时被此事件捕获onmouseleave鼠标指针从元素上移出时被此事件捕获onmousemove鼠标指针在元素上方移动时被此事件捕获onmouseout用户将鼠标指针移出元素或其中的子元素时被此事件捕获onmouseover鼠标指针移动到元素或其中的子元素上时被此事件捕获onmouseup在元素上释放鼠标按键时被此事件捕获【键盘事件】键盘事件用于监听当用户使用键盘在元素中输入信息时的所有操作。通过键盘事件，可以捕获键盘按下按键、抬起按键以及按下并抬起按键3种事件。键盘事件如表14.6所示。事件功能onkeydown按下键时被此事件捕获onkeypress按下并释放某个键时被此事件捕获onkeyup松开键时被此事件捕获【表单事件】表单元素是用于收集用户输入信息的HTML元素。用户在网页中输入账号、密码等信息时都需要使用到表单元素。表单相关的事件包括更改时触发事件