HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第9章 JavaScript入门_第1页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第9章 JavaScript入门_第2页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第9章 JavaScript入门_第3页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第9章 JavaScript入门_第4页
HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）课件 第9章 JavaScript入门_第5页
已阅读5页，还剩261页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第9章JavaScript入门《HTML+CSS+JavaScript网页制作案例教程（AI助学）（第3版）》学习目标/Target了解JavaScript，能够简述JavaScript的常见应用。熟悉JavaScript的关键字，能够识别常用的JavaScript关键字。了解DOM，能够区分DOM中节点的层级关系。了解访问节点的常用方法，能够说出每个方法的作用。掌握JavaScript的数据类型，能够说出每种类型的作用。知识目标学习目标/Target掌握JavaScript中的运算符及其优先级与结合性，能够说出不同类型运算符的作用。了解BOM，能够说出常用BOM对象的作用。熟悉Date对象，能够说出Date对象的常用方法及其作用。知识目标技能目标掌握JavaScript语法规则，能够正确书写JavaScript代码。掌握JavaScript代码的引入方式，能够正确在HTML文档中引入JavaScript代码。学习目标/Target掌握alert()和prompt()方法，能够熟练使用这两个方法实现功能。掌握JavaScript中的对象，能够熟练使用对象的属性和方法。掌握设置节点样式的方式，能够在代码中灵活设置节点样式。掌握JavaScript中变量的用法，能够声明变量并为变量赋值。掌握函数的知识，能够定义和调用函数。技能目标学习目标/Target熟悉JavaScript中的常用事件，能够实现简单的事件调用。熟悉JavaScript中的条件语句，能够使用条件语句实现简单功能。了解不同数据类型的转换，能够在开发中根据需求实现数据类型转换。熟悉循环语句和跳转语句，能够使用循环语句和跳转语句实现简单功能。掌握数组，能够正确创建数组并操作数组技能目标素养目标通过对网页视听技术的学习，提升对视听内容的审美鉴赏能力。章节概述/Summary通过对前面章节的学习，相信大家已经能够运用HTML和CSS技术来搭建各式各样的网页了。然而，仅凭HTML与CSS的组合，虽然能打造出视觉上精美的页面，但仍限于静态页面或简单动画效果。如果想要网页实现真正的动态交互效果（如焦点图切换、下拉菜单等），那么掌握JavaScript技术尤为重要。本章将对JavaScript的基础知识进行讲解。目录/Contents010203案例9-1身份验证案例9-2商城下拉菜单式导航栏案例9-3限时抢购页面04案例9-4Tab栏切换效果身份验证案例9-1案例描述在浏览网页时，既可以看到静态的文本、图像，也可以看到浮动的动画以及弹出的对话框等。要想实现页面上这些动态的、可交互的网页效果，就需要使用JavaScript。本案例将运用JavaScript中常用的方法来实现身份验证，其效果如图。案例描述单击“确定”按钮后，会弹出一个要求输入姓名的提示框，效果如图。知识引入了解JavaScript，能够简述JavaScript的常见应用。学习目标1.认识JavaScript知识引入说起JavaScript，大家可能并不陌生，在我们浏览的网页中，或多或少都有JavaScript的影子。例如，下图所示的单击网站导航时弹出的列表菜单，就是通过JavaScript实现的。1.认识JavaScript知识引入作为一种独立的脚本语言，JavaScript可以做很多事情，但它的主要作用还是创建网页特效。使用JavaScript实现的动态应用在网页上随处可见。下面介绍JavaScript几种常见的应用。1.认识JavaScript验证用户输入的内容实现动态效果实现提示框制作文字特效知识引入1.认识JavaScript验证用户输入的内容使用JavaScript可以在客户端对用户输入的内容进行验证。例如，在用户注册页面，用户需要输入相应的注册信息，例如手机号、密码和验证码等，如图。01知识引入1.认识JavaScript验证用户输入的内容如果用户输入的信息不符合要求，将弹出相应的提示信息（一些简单的提示信息可以使用HTML5表单进行设置），如图。01知识引入1.认识JavaScript实现动态效果使用JavaScript可以实现网页中的动态效果，例如焦点图切换效果，如图。02知识引入1.认识JavaScript实现提示框在与网页进行某些交互操作时，页面经常会弹出一些提示框，告诉用户该如何操作，如下图所示，这些提示框可以通过JavaScript来实现。03知识引入1.认识JavaScript实现提示框使用JavaScript可以制作多种文字特效，例如文字掉落效果，如图。03知识引入掌握JavaScript语法规则，能够正确书写JavaScript代码。学习目标2.JavaScript语法规则知识引入每一种程序设计语言都有自己的语法规则，只有遵循语法规则，才能编写出符合要求的代码。在使用JavaScript时，同样需要遵循一些语法规则，例如执行顺序、区分字母大小写和注释规范等，下面将对JavaScript的语法规则进行具体介绍。2.JavaScript语法规则执行顺序字母大小写区分每行结尾的分号可有可无注释规范知识引入执行顺序JavaScript程序按照在HTML文档中的排列顺序逐行执行。如果代码（例如函数、全局变量等）需要在整个HTML文档中使用，最好将这些代码放在HTML文档的<head></head>标签中。012.JavaScript语法规则字母大小写区分JavaScript严格区分字母大小写。也就是说，在输入关键字、函数名、变量名和其他标识符时，都必须采用正确的大小写形式。例如，变量username与变量userName是两个不同的变量。02知识引入每行结尾的分号可有可无JavaScript并不要求必须以分号“;”作为语句的结束标志。如果语句的结尾没有分号，JavaScript会自动将该行代码的结尾作为整个语句的结束。例如，下面两行示例代码，虽然第1行代码中的语句结尾没有分号，但也是正确的。032.JavaScript语法规则alert("您好，欢迎学习JavaScript！")alert("您好，欢迎学习JavaScript！");知识引入注意：书写JavaScript代码时，为了保证代码的严谨性、准确性，最好在每行代码的结尾处加上分号。2.JavaScript语法规则每行结尾的分号可有可无03知识引入注释规范使用JavaScript时，为了使代码易于阅读，需要为JavaScript代码添加一些注释。JavaScript代码的注释分为单行注释和多行注释，示例代码如下。042.JavaScript语法规则//我是单行注释/*我是多行注释1我是多行注释2我是多行注释3*/知识引入熟悉JavaScript的关键字，能够识别常用的JavaScript关键字。学习目标3.关键字知识引入JavaScript关键字又被称为保留字，是指在JavaScript中被事先定义好并赋予特殊含义的单词。JavaScript关键字不能作为变量名和函数名使用，否则会使JavaScript代码在载入过程中出现编译错误。JavaScript的常用关键字如表。3.关键字abstractcontinuefinallyinstanceofprivatethisbooleandefaultfloatintpublicthrowbreakdoforinterfacereturntypeofbytedoublefunctionlongshorttruecaseelsegotonativestaticletcatchextendsimplementsnewsupervoidcharfalseimportnullswitchwhileclassfinalinpackagesynchronizedwith知识引入掌握JavaScript代码的引入方式，能够正确在HTML文档中引入JavaScript代码。学习目标4.JavaScript脚本代码的引入方式知识引入JavaScript脚本代码的引入方式与CSS文件的类似。在HTML文档中引入JavaScript脚本代码主要有3种方式，即行内式、内嵌式、外部式。4.JavaScript脚本代码的引入方式行内式A内嵌式B外部式C知识引入行内式是将JavaScript脚本代码作为HTML标签的属性值使用。例如，单击“test”时，弹出一个警告框提示“Happy”，具体示例如下。4.JavaScript脚本代码的引入方式01行内式<ahref="javascript:alert('Happy');">test</a>知识引入JavaScript脚本代码还可以写在HTML标签的事件属性中，事件是JavaScript中的一种机制。例如，单击网页中的一个按钮时，就会触发按钮的单击事件，具体示例如下。4.JavaScript脚本代码的引入方式01行内式<inputtype="button"onclick="alert('Happy');"value="test">上述代码实现了单击“test”按钮时，弹出一个警告框提示“Happy”知识引入在HTML中，运用<script>标签及其相关属性可以嵌入JavaScript脚本代码。嵌入JavaScript脚本代码的基本语法格式如下。4.JavaScript脚本代码的引入方式02内嵌式<scripttype="text/javascript">JavaScript脚本代码;</script>指定该标签内脚本语言的类型知识引入随着Web技术的发展（HTML5的普及、浏览器性能的提升），嵌入JavaScript脚本代码的基本语法格式又有了变化，具体如下。4.JavaScript脚本代码的引入方式<script>JavaScript语句;</script>02内嵌式知识引入JavaScript脚本代码可以放在HTML文档中的任何位置，但放置的位置会对JavaScript脚本代码的执行顺序有一定影响。在实际运用中，一般将JavaScript脚本代码所在的<script>标签放置在<head></head>标签之间或者</body>标签之前，两者的差异如下。4.JavaScript脚本代码的引入方式02内嵌式知识引入放置在<head></head>标签之间4.JavaScript脚本代码的引入方式放置在<head></head>标签之间的JavaScript脚本代码会在页面加载完成之前就被优先载入。但是当通过JavaScript脚本代码控制<body>标签中的元素时，由于<body>标签中的元素还未载入，此时网页会报错。因此一般都需要通过事件触发执行JavaScript脚本代码。例如下面的示例代码，这里只需要了解即可。<script>JavaScript语句;</script>02内嵌式知识引入放置在</body>标签之前4.JavaScript脚本代码的引入方式放置在</body>标签之前的<script>标签中的JavaScript脚本代码会在页面加载完成之后载入并执行，这样网页就不会报错，但这种方式不适用于一些只加载但暂时不执行的JavaScript脚本代码。02内嵌式知识引入放置在</body>标签之前4.JavaScript脚本代码的引入方式下面展示的就是一段嵌入了JavaScript脚本代码的示例代码。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>内嵌式</title></head>02内嵌式知识引入放置在</body>标签之前4.JavaScript脚本代码的引入方式<body><script>alert("我是JavaScript脚本代码！");

</script></body></html>02内嵌式知识引入4.JavaScript脚本代码的引入方式03外部式外部式是将所有的JavaScript脚本代码放在一个或多个以“.js”为扩展名的外部JavaScript文件中，通过src属性将这些脚本文件链接到HTML文档中，其基本语法格式如下。<scriptsrc="脚本文件路径"></script>上述语法格式中，src是<script>标签的属性，用于指定外部脚本文件的路径。同样地，在外部式的基本语法格式中，也可以省略type属性，简写为。<scriptsrc="脚本文件路径"></script>知识引入4.JavaScript脚本代码的引入方式03外部式在实际开发中，当需要编写大量逻辑复杂的JavaScript脚本代码时，推荐使用外部式方式。相比内嵌式方式，外部式方式的优势可以总结为以下两点。利于后期修改和维护：内嵌式方式会导致HTML与JavaScript代码混合在一起，不利于代码的修改和维护，而外部式方式会将HTML、CSS、JavaScript这3部分代码分离开来，利于后期的修改和维护。1知识引入4.JavaScript脚本代码的引入方式03外部式减小文档体积、加快页面加载速度：内嵌式方式会将使用的JavaScript代码全部嵌入HTML页面中，这就会增加HTML文档的体积，影响网页本身的加载速度，而外部式方式可以利用浏览器缓存，将JavaScript代码重复利用，既减小了文档的体积，也加快了页面的加载速度。例如，在多个页面中引入了相同的JavaScript文件时，打开第1个页面后，浏览器就将JavaScript文件缓存下来，下次打开其他引用该JavaScript文件的页面时，浏览器就不用重新加载JavaScript文件了。2知识引入掌握alert()方法，能够熟练使用alert()方法实现功能。学习目标5.alert()方法知识引入alert()方法用于弹出一个警告框，确保用户可以看到某些提示信息。利用alert()方法可以很方便地输出一个结果，因此alert()方法常用于测试程序，例如下面的示例代码。alert("程序错误");5.alert()方法知识引入在网页中运行上述代码，效果如图。5.alert()方法知识引入掌握prompt()方法，能够熟练使用prompt()方法实现功能。学习目标6.prompt()方法知识引入prompt()方法用于弹出一个提示框，可以显示信息和提示用户输入信息，其基本语法格式如下。prompt(内容1,内容2);6.prompt()方法“内容1”是在提示框中显示的提示信息。“内容2”是默认的输入文本，例如下面的示例代码。prompt('请输入姓名','例如张三')知识引入在网页中运行上述代码，效果如图。6.prompt()方法项目实现掌握JavaScript，能够运用运用JavaScript中常用的方法来实现身份验证。学习目标项目实现商城下拉菜单式导航栏案例9-2案例描述下拉菜单是网页中一种常用的效果。使用下拉菜单不仅可以使网站结构清晰，方便用户查找相关网页，而且可以节约页面空间。本案例将运用JavaScript的相关知识制作一个商城下拉菜单式导航栏，效果如图。当鼠标指针移至“数码家电”时，会弹出一个下拉菜单，效果如下图所示。当鼠标指针移出后，下拉菜单会消失。案例描述单击“确定”按钮后，会弹出一个要求输入姓名的提示框，效果如图。知识引入了解DOM，能够区分DOM中节点的层级关系。学习目标1.DOM简介知识引入HTML文档在浏览器中进行解析时会自动转换为一个模型，这个模型就是DOM（DocumentObjectModel，文档对象模型），通过该模型可以使用JavaScript脚本代码对HTML文档的内容进行增加、删除、修改、查找等操作。下图所示为一个HTML文档。1.DOM简介知识引入浏览器进行解析时，会按照层级关系构建DOM，可以用树状层级结构来表示图HTML文档所示的HTML文档，如图。1.DOM简介知识引入需要说明的是，根据节点层级关系的不同，可以把节点分为根节点、父节点、子节点和兄弟节点，具体介绍如下。1.DOM简介某个节点的上一级节点，统称为父节点。根节点父节点位于节点树的顶层，每棵节点树有一个根节点。子节点某个节点的下一级节点，统称为子节点。兄弟节点具有相同父节点的两个节点，被称为兄弟节点。知识引入掌握对象，能够说出对象包含属性和方法。学习目标2.对象知识引入说起对象，一些JavaScript初学者可能会感到陌生，但是如果把对象放在生活中，对象意味着什么呢？其实在生活中，我们接触到的形形色色的事物都是对象。例如，网页可以看作一个对象，它既包含背景颜色、布局等特性，也包含打开、跳转、关闭等动作或行为。在JavaScript中，对象包含属性和方法两个要素，具体解释如下。2.对象用于操作对象的一系列动作或行为。属性方法用于描述对象特性的数据。知识引入在JavaScript中，若要调用对象的属性或方法，则需要在对象后面加上一个点“.”，再加上属性名或方法名，示例代码如下。2.对象screen.width；Math.sqrt(x);用于调用对象属性，表示通过screen对象的width属性获取宽度用于调用对象方法，表示通过Math对象的sqrt()方法获取x的平方根知识引入JavaScript中有若干对象，最常用的是document对象，它包含大量的属性和方法，代表整个HTML文档。每一个载入浏览器的HTML文档都会成为document对象，只有通过document对象，才能获取某个HTML文档中的对象。2.对象知识引入了解访问节点的常用方法，能够说出每个方法的作用。学习目标3.访问节点知识引入要想控制某个节点，首先要找到这个节点，查找节点的过程被称为访问节点。下表列举了访问节点的常用方法。3.访问节点方法说明getElementById()获取带有指定id的节点getElementsByName()获取带有指定name属性值的节点getElementsByTagName()获取带有指定标签名的节点getElementsByClassName()获取带有指定类名的节点（不支持IE6.0～IE8.0）知识引入使用不同方法可以访问HTML文档中带有指定id、name属性值、标签名或类名的节点。例如想要访问id为“box”的节点，可以使用下面的代码。3.访问节点document.getElementById('box');知识引入掌握设置节点样式的方式，能够在代码中灵活设置节点样式。学习目标4.设置节点样式知识引入style对象可以用来设置节点样式，通过style对象可以动态调用节点的内嵌样式，从而获得所需要的效果。应用style对象的基本语法格式如下。对象.style.属性='属性值';4.设置节点样式要设置样式的节点需要加引号，可以为单引号或双引号（常用单引号）知识引入style对象属性和CSS样式属性的用法基本相似，但部分属性的拼写不同。例如，设置宽度和背景颜色的代码如下。#test{width:200px;}/*CSS样式属性设置宽度*/#test{background-color:#000;}/*CSS样式属性设置背景颜色*/test.style.width='200px';//style对象属性设置宽度test.style.backgroundColor='#000';//style对象属性设置背景颜色4.设置节点样式知识引入在JavaScript中，通过设置元素的className属性可以更改某个节点的样式。节点的className属性用于为节点指定类名。下面通过代码进行具体演示，如例example01.html。<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>为节点指定类名</title>4.设置节点样式添加className属性设置节点样式知识引入<style>.box{width:100px;

height:100px;

background:#FC0;}</style></head>4.设置节点样式添加className属性设置节点样式知识引入<body><divid="test"></div><script>document.getElementById('test').className='box';</script></body></html>4.设置节点样式添加className属性设置节点样式知识引入运行示例代码，效果如图。4.设置节点样式添加className属性设置节点样式知识引入掌握JavaScript中变量的用法，能够声明变量并为变量赋值。学习目标5.变量知识引入当一个数据需要多次使用时，可以使用变量将数据保存起来。变量是指程序中已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。下面将对变量的命名、变量的声明与赋值进行讲解。5.变量变量的命名变量的声明与赋值知识引入在JavaScript中，可以使用字母、数字和一些符号来命名变量。在命名变量时需要遵循以下原则。5.变量01变量的命名变量名不能包含空格、加号、减号等符号。12必须以字母、美元符号或下划线开头。例如，number、_it123均为合法的变量名，而88shout、&num为非法变量名。3不能使用JavaScript中的关键字作为变量名，例如int。4JavaScript的变量名严格区分字母大小写，例如UserName与username代表两个不同的变量。知识引入在JavaScript中使用“let”关键字声明变量。这种直接使用let声明变量的方法，被称为“显式声明变量”，显式声明变量的基本语法格式如下。5.变量02变量的声明与赋值let变量名;为了让初学者掌握声明变量的方法，通过以下代码进行演示。letsales;lethits,hot,NEWS;letroom_101,room102;let$name,$age;知识引入在声明变量的同时为变量赋值，也可以在声明完成之后为变量赋值，例如下面的示例代码。5.变量02变量的声明与赋值letunit,room; letunit=3; letroom=1001; letfname='Tom',age=12; 声明变量为变量赋值为变量赋值在声明变量的同时赋值知识引入需要说明的是，在声明变量时，也可以省略关键字let，通过赋值的方式声明变量，这种方法称为“隐式声明变量”。例如下面的示例代码。5.变量02变量的声明与赋值flag=false; a=1,b=2; 声明变量flag并为其赋值false声明变量a和b并分别为其赋值1和2知识引入注意如果重复声明的变量已经有一个初始值，那么再次声明就相当于对变量进行重新赋值。5.变量02变量的声明与赋值知识引入掌握函数的知识，能够定义和调用函数。学习目标6.函数知识引入在JavaScript程序中，经常会遇到功能需要多次使用的情况，这时就需要重复书写相同的代码，这样不仅增加了开发者的工作量，而且增加了代码后期维护的复杂度。为此，JavaScript提供了函数，它可以将程序中多次使用的代码模块化，提高程序的可读性，并且便于后期维护。下面将对函数的相关知识进行讲解。6.函数函数的定义A函数的调用B函数中变量的作用域C知识引入在JavaScript程序设计中，为了使代码更为简洁并可以重复使用，通常会将某段实现特定功能的代码定义成一个函数。所谓的函数就是在计算机程序中由多条语句组成的逻辑单元。在JavaScript中，函数使用关键字function来定义，其语法格式如下。6.函数01函数的定义function函数名([参数1,参数2,…])｛函数体｝

在声明函数时必须使用的关键字创建函数的名称，由使用者自行定义，函数名是唯一的函数定义的主体，专门用于实现特定的功能外界传递给函数的值，它是可选的，因此可以为空。当有多个参数时，各参数用“,”分隔知识引入在了解了函数定义的语法格式后，下面通过代码来定义一个函数，如例example02.html。6.函数01函数的定义<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>定义函数</title> 知识引入6.函数01函数的定义<script>functionhello(){alert('你好，欢迎学习函数！');}</script></head><body></body></html> 知识引入函数定义后并不会自动执行，而是需要在特定的位置调用函数。函数的调用非常简单，只需引用函数名，并传入相应的参数即可。函数调用的语法格式如下。6.函数02函数的调用函数名([参数1,参数2,…]) 用于表示参数列表，参数可以有0个、1个或多个知识引入例如要调用例example02.html中的函数，可以在第9行和第10行之间添加如下代码。6.函数02函数的调用hello(); 运行代码，页面中会弹出由函数定义的警告框，如图。知识引入函数中的变量需要先定义后使用，但这并不意味着定义变量后就可以随时使用。变量需要在它的作用范围内才可以被使用，这个作用范围称为变量的作用域。变量的作用域取决于该变量是哪一种变量，在JavaScript中，变量一般分为全局变量和局部变量。6.函数03函数中变量的作用域局部变量：定义在函数体内，作用于函数体的变量。12全局变量：定义在所有函数外，作用于整个程序的变量。知识引入为了让大家进一步了解全局变量和局部变量的用法，下面通过代码进行演示，如例。6.函数03函数中变量的作用域<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>变量的作用域</title> 知识引入6.函数03函数中变量的作用域<script>functionsend1(){leta='欢迎来到';

letb='北京';

alert(a+b);}该变量在函数内声明，只作用于该函数体该变量在函数内声明，只作用于该函数体知识引入6.函数03函数中变量的作用域functionsend2(){letc='天津';

alert(a+c);}</script></head> 该变量在函数内声明，只作用于该函数体知识引入6.函数03函数中变量的作用域<body><script>send1();send2();</script></body></html> 知识引入运行示例代码，效果如图。6.函数03函数中变量的作用域单击“确定”按钮，并不会弹出预期的第2个警告框知识引入将变量a放到例example03.html中的第6行代码和第7行代码之间，此时变量a属于全局变量，对整个程序起作用。示例代码如下。6.函数03函数中变量的作用域<script>leta='欢迎来到';

functionsend1(){letb='北京';alert(a+b);} 该变量在函数外声明，作用于整个程序知识引入熟悉JavaScript中的常用事件，能够利用JavaScript编程来执行一些特定的代码实现特定的交互效果。学习目标7.事件知识引入事件是指可以被JavaScript检测到的交互行为，例如在网页中移动鼠标指针或单击、滚动页面、按键盘上的键等。当事件发生后，可以利用JavaScript编程来执行一些特定的代码，从而实现特定的交互效果。7.事件知识引入在JavaScript中使用事件时，首先需要获得节点，然后为节点的事件赋值事件处理程序，从而在节点的事件发生时执行事件处理程序。为了便于初学者理解和掌握，下面通过代码进行具体演示，如例example04.html。7.事件<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>事件和事件调用</title></head> 知识引入7.事件<body><buttonid="save">单击按钮</button><script>letbtn=document.getElementById('save');btn.onclick=function(){alert('轻松学习JavaScript事件');};

</script></body></html> 知识引入运行示例代码，效果如图。7.事件单击“单击按钮”知识引入熟悉JavaScript中的常用事件，能够利用JavaScript编程来执行一些特定的代码实现特定的交互效果。学习目标8.JavaScript中的常用事件知识引入JavaScript中的常用事件包括鼠标事件、键盘事件、表单事件和页面事件。8.JavaScript中的常用事件鼠标事件键盘事件表单事件页面事件知识引入鼠标事件是指通过鼠标操作触发的事件，鼠标事件有很多，下表列举了JavaScript中常用的鼠标事件。鼠标事件018.JavaScript中的常用事件事件事件说明onclick单击时触发此事件ondblclick双击时触发此事件onmousedown按下鼠标按键时触发此事件知识引入鼠标事件是指通过鼠标操作触发的事件，鼠标事件有很多，下表列举了JavaScript中常用的鼠标事件。鼠标事件018.JavaScript中的常用事件事件事件说明onmouseup松开鼠标按键时触发的事件onmouseover鼠标指针移动到某个设置了此事件的元素上时触发此事件onmousemove鼠标指针移动时触发此事件onmouseout鼠标指针从某个设置了此事件的元素上离开时触发此事件知识引入键盘事件是指用户在使用键盘时触发的事件。例如，用户在Word中按“Enter”键实现换行，就是一个键盘事件。下表列举了JavaScript中常用的键盘事件。键盘事件028.JavaScript中的常用事件事件事件说明onkeydown当键盘上的某个键被按下时触发此事件onkeyup当键盘上的某个键被按下后松开时触发此事件onkeypress当按键盘上有效的键时触发此事件知识引入表单事件是指对表单进行操作时发生的事件。例如，表单提交前对表单的验证，表单重置时的确认操作等。下表列举了JavaScript中常用的表单事件。表单事件038.JavaScript中的常用事件事件事件说明onblur当元素失去焦点时触发此事件onchange当元素失去焦点并且元素内容发生改变时触发此事件onfocus当某个元素获得焦点时触发此事件onreset当表单被重置时触发此事件onsubmit当表单被提交时触发此事件知识引入页面事件可以改变JavaScript代码的执行时间。下表列举了JavaScript中常用的页面事件。页面事件038.JavaScript中的常用事件事件事件说明onload当页面加载完成时触发此事件onunload当页面卸载（即页面被关闭）时触发此事件项目实现掌握JavaScript中的事件，能够运用JavaScript的相关知识制作一个商城下拉菜单式导航栏。学习目标项目实现限时抢购页面案例9-3案例描述限时抢购是指商家在某一段限定的活动时间里，通过大幅度降低活动商品价格的方式，吸引更多的消费者参与活动，以达到营销的目的。作为一种有效的促销手段，限时抢购已经被越来越多的网络商家所使用。本案例将带领大家制作限时抢购页面，其效果如图。案例描述当抢购结束后，页面中的倒计时会变成结束提示信息，如图。知识引入掌握JavaScript的数据类型，能够说出每种类型的作用。学习目标1.数据类型知识引入数字型字符串型布尔型特殊类型的数据每一种程序设计语言都有自己支持的数据类型。JavaScript是弱类型语言，即对于一个变量或常量，可以不事先声明其数据类型，而是在使用或赋值时再确定其数据类型。下面具体介绍JavaScript中的几种数据类型。1.数据类型知识引入数字型是最基本的数据类型。JavaScript与其他程序设计语言（例如C和Java）的不同之处在于，它将整型数值和浮点型数值视为同一种类型，即数字型。在JavaScript中，所有数字都是数字型的。1.数据类型数字型01知识引入当一个数字直接出现在JavaScript程序中时，称它为数字字面量。JavaScript支持的数字字面量主要包括整型数据、二进制数据、八进制数据、十六进制数据、浮点型数据。例如。数字型011.数据类型整型数据：123二进制数据：0b101八进制数据：0o127十六进制数据：0x5C浮点型数据：3.14（即小数）

知识引入字符串是由Unicode字符组成的序列，可以包含数字、字母等，它是JavaScript用来表示文本的数据类型。程序中的字符串型数据包含在单引号或双引号中，由单引号定界的字符串中可以包含双引号，由双引号定界的字符串中也可以包含单引号，具体示例如下。单引号定界的一个或多个字符，示例代码如下。字符串型021.数据类型'Hi''网页平面设计学院' 知识引入双引号定界的一个或多个字符，示例代码如下。字符串型021.数据类型"Hello""我要学习JavaScript" 单引号定界的字符串中可以包含双引号，示例代码如下。'name="myname"' 知识引入双引号定界的字符串中可以包含单引号，示例代码如下。字符串型021.数据类型"Youcancallme'Tom'!" 知识引入在字符串中还有一种以反斜线开头的、不可显示的特殊字符，通常将其称为控制字符，也被称为转义字符。通过转义字符，可以在字符串中添加不可显示的特殊字符，还可以避免引号匹配引起的混乱问题。JavaScript中常用的转义字符如表。字符串型021.数据类型转义字符描述转义字符描述\b退格\v垂直制表符\n换行符\r回车符知识引入字符串型021.数据类型转义字符描述转义字符描述\t水平制表符\\反斜线\f换页\ooo八进制整数，范围为000～777\'单引号\xHH十六进制整数，范围为00～FF\"双引号\uhhhh十六进制编码的Unicode字符知识引入布尔型只有两个值（即布尔值），分别由“true”和“false”表示。在JavaScript程序中，布尔值通常用来表示比较的结果。例如：布尔值031.数据类型n==1 用于测试变量n的值是否与1相等。如果相等，比较的结果就是true，否则结果就是false。知识引入布尔值通常用在JavaScript的控制结构中，例如JavaScript的if…else语句就是在布尔值为true时执行一个操作，而在布尔值为false时执行另一个操作。示例如下：布尔值031.数据类型if

(n

==

1)m

=

n

+

1;elsen

=

n

+

1;

检测n是否与1相等。如果相等，则m=n+1，否则n=n+1。知识引入除了上面介绍的几种数据类型的数据，JavaScript还包括一些特殊类型的数据，如未定义值、空值等，具体介绍如。特殊类型的数据031.数据类型空值。JavaScript中的关键字null是一个特殊的值，它表示空值，用于定义空的或不存在的引用。需要注意的是，null不等于空字符串（“”）和0。12未定义值。未定义类型的变量是undefined，表示变量还没有赋值，或者被赋予一个不存在的属性值。知识引入掌握JavaScript中的运算符，能够说出不同类型运算符的作用。学习目标2.运算符知识引入在数学计算中，可以使用加减乘除符号来进行数字的运算。同样，如果要在程序中执行特定的运算，也需要使用相应的符号，这个符号就是运算符。JavaScript中的运算符主要包括算术运算符、比较运算符、逻辑运算符、赋值运算符和条件运算符。2.运算符算术运算符比较运算符逻辑运算符赋值运算符条件运算符知识引入算术运算符用于连接运算表达式，主要包括加（+）、减（-）、乘（*）、除（/）、取模（%）、自增（++）、自减（--）等运算符，JavaScript中常用的算术运算符如表。算术运算符012.运算符算术运算符描述+加运算符-减运算符*乘运算符知识引入算术运算符012.运算符算术运算符描述/除运算符%取模运算符（取余数）++自增运算符，该运算符有i++（在使用i之后，使i的值加1）和++i（在使用i之前，先使i的值加1）两种--自减运算符，该运算符有i--（在使用i之后，使i的值减1）和--i（在使用i之前，先使i的值减1）两种知识引入下面使用算术运算符来完成简单的计算，如例example05.html。算术运算符012.运算符<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>算术运算符</title></head>

知识引入算术运算符012.运算符<body><pre>

<script>letprice,rate=0.05,paid=105,tax;price=paid/(1+rate);tax=paid-price;document.writeln("标价="+price);document.writeln("税费="+tax);</script></pre></body></html>

知识引入运行示例代码，效果如图。算术运算符012.运算符知识引入比较运算符常用于逻辑语句中，用来判断变量和值是否相等。运算时先对操作数进行比较，然后返回布尔值true或false。JavaScript中常用的比较运算符如表。比较运算符022.运算符比较运算符描述<小于>大于<=小于等于>=大于等于知识引入比较运算符022.运算符比较运算符描述==等于，只根据字面量进行判断，不涉及数据类型，例如"27"==27的值为true===绝对等于，同时根据表面值和数据类型进行判断，例如"27"===27的值为false!=不等于，只根据表面值进行判断，不涉及数据类型，例如"27"!=27的值为false!==不绝对等于，同时根据表面值和数据类型进行判断，例如"27"!==27的值为true知识引入在了解了比较运算符后，下面对其用法进行演示，如例example06.html。2.运算符<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>比较运算符</title></head>

比较运算符02知识引入2.运算符<body><pre><script>leta=2,b=3,c='2',result;document.writeln("a=2,b=3,c='2'");document.write('a<b');result=a<b;document.writeln(result);document.write('a<=b');result=a<=b;document.writeln(result);document.write('a>b');result=a>b;document.writeln(result);document.write('a>=b');result=a>=b;document.writeln(result);

比较运算符02知识引入2.运算符document.write('a==c');result=a==c;document.writeln(result);document.write('a===c');result=a===c;document.writeln(result);document.write('a!=c');result=a!=c;document.writeln(result);document.write('a!==c');result=a!==c;document.writeln(result);</script></pre></body></html>比较运算符02知识引入运行示例代码，效果如图。2.运算符比较运算符02知识引入逻辑运算符会根据表达式的值来返回真值或假值。JavaScript中常用的逻辑运算符如表。逻辑运算符032.运算符逻辑运算符描述&&逻辑与，只有当两个表达式a、b的值都为true时，a&&b的值才为true，否则为false||逻辑或，只有当两个表达式a、b的值都为false时，a||b的值才为false，否则为true!逻辑非，!true的值为false，而!false的值为true知识引入在了解了逻辑运算符后，下面对其用法进行演示，如例。逻辑运算符032.运算符<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>逻辑运算符</title></head>知识引入逻辑运算符032.运算符<body><pre><script>leta=2,b=3,result;document.writeln('a=2,b=3');document.write('a<b&&a<=b');result=a<b&&a<=b;document.writeln(result);document.write('a<b&&a>b');result=a<b&&a>b;document.writeln(result);知识引入逻辑运算符032.运算符document.write('a<b||a>b');result=a<b||a>b;document.writeln(result);document.write('a>b&&a>=b');result=a>b||a>=b;document.writeln(result);document.write('!(a<b)');result=!(a<b);document.writeln(result);知识引入逻辑运算符032.运算符document.write('!(a>b)');result=!(a>b);document.writeln(result);</script></pre></body></html>知识引入运行示例代码，效果如图。逻辑运算符032.运算符知识引入基本的赋值运算符是等号“=”，用于对变量进行赋值。某些算术运算符可以与赋值运算符“=”联合使用，构成组合赋值运算符。JavaScript中常用的赋值运算符如表。赋值辑运算符042.运算符赋值运算符描述=将右边表达式的值赋给左边的变量，例如username="name"+=将运算符左边的变量加上右边表达式的值赋给左边的变量，例如a+=b相当于a=a+b-=将运算符左边的变量减去右边表达式的值赋给左边的变量，例如a-=b相当于a=a-b知识引入赋值辑运算符042.运算符赋值运算符描述*=将运算符左边的变量乘右边表达式的值赋给左边的变量，例如a*=b相当于a=a*b/=将运算符左边的变量除以右边表达式的值赋给左边的变量，例如a/=b相当于a=a/b%=将运算符左边的变量用右边表达式的值取模，并将结果赋给左边的变量，例如a%=b相当于a=a%b知识引入在了解了赋值运算符后，下面对其用法进行演示，如例。2.运算符<!DOCTYPEhtml><html><head><metacharset="UTF-8">

<title>赋值运算符</title></head>赋值辑运算符04知识引入2.运算符<body><pre><script>leta=3,b=2;document.writeln('a=3,b=2');document.write('a+=b=');

a

+=

b;

document.writeln(a);document.write('a-=b=');

a-=

b;

document.writeln(a);document.write('a*=b=');

a

*=

b;

document.writeln(a)；赋值辑运算符04知识引入2.运算符document.write('a/=b=');

a

/=

b;

document.writeln(a);document.write('a%=b=');

a

%=

b;

document.writeln(a);</script></pre></body></html>赋值辑运算符04知识引入运行示例代码，效果如图。2.运算符赋值辑运算符04知识引入条件运算符是JavaScript中的一种特殊的三目运算符，其语法格式如下。2.运算符操作数

？结果1:结果2条件运算符05若操作数的值为true，则整个表达式的结果为“结果1”，否则为“结果2”知识引入下面通过代码来对条件运算符的使用进行演示，如例example09.html。2.运算符<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>条件运算符</title></head>条件运算符05知识引入2.运算符<body><pre><script>

leta=5;letb=5;alert((a==b)?true:false);

</script></pre></body></html>条件运算符05知识引入运行示例代码，效果如图。2.运算符条件运算符05知识引入掌握JavaScript中的运算符及其优先级与结合性，能够说出不同类型运算符的作用。学习目标3.运算符优先级与结合性知识引入JavaScript运算符均有明确的优先级与结合性，优先级较高的运算符将先于优先级较低的运算符进行运算。结合性则是指具有同等优先级的运算符将按照怎样的顺序进行运算，结合性有向左结合和向右结合两种。3.运算符优先级与结合性知识引入例如，表达式a+b+c，向左结合就是先计算a+b，即(a+b)+c；而向右结合就是先计算b+c，即a+(b+c)。JavaScript运算符的优先级与结合性如表。3.运算符优先级与结合性优先级结合性运算符最高向左结合.、[]、()由高到低依次排列向右结合++、--、-、!、delete、new、typeof、void向左结合*、/、%向左结合+、-知识引入3.运算符优先级与结合性优先级结合性运算符由高到低依次排列向左结合<<、>>、>>>向左结合<、<=、>、>=、in、instanceof向左结合==、!=、===、!===向左结合&向左结合^向左结合|知识引入3.运算符优先级与结合性优先级结合性运算符由高到低依次排列向左结合&&向左结合||向右结合?:向右结合=向右结合*=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=最低向左结合,知识引入下面通过代码来对条件运算符的使用进行演示，如例example09.html。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>运算符优先级</title></head>3.运算符优先级与结合性知识引入<body><script>leta=1+2*3;letb=(1+2)*3;alert('a='+a+'\nb='+b);</script></body></html>3.运算符优先级与结合性知识引入运示例代码，效果如图。3.运算符优先级与结合性知识引入3.运算符优先级与结合性认识表达式表达式是一个语句集合，像一个组一样，计算结果是一个单一的值，该值的数据类型可以是布尔型、数字型、字符串型等。在定义完变量后，可以对其进行赋值、更改、计算等一系列操作，这些操作需要通过表达式来完成。例如，表达式x=7是将值7赋给变量x，整个表达式的计算结果为7，一旦将7赋给x的工作完成，则x也将是一个合法的表达式。除了赋值运算符，还有许多可以组成表达式的运算符，如算术运算符、逻辑运算符等。知识引入熟悉JavaScript中的条件语句，能够使用条件语句实现简单功能。学习目标4.条件语句知识引入所谓条件语句就是对语句中不同条件的值进行判断，进而根据不同的值执行不同的语句。条件语句主要有两类：一类是if语句；另一类是switch语句。4.条件语句If语句switch语句知识引入if语句是最基本、最常用的条件语句。通过判断条件的值为true或者false来确定是否执行某一条语句。它主要包括单向判断语句、双向判断语句和多向判断语句。单项判断语句单向判断语句是结构最简单的条件语句，如果程序中存在绝对不执行某些操作的情况，就可以使用单向判断语句，其基本语法格式如下。4.条件语句01If语句if(执行条件){

执行语句;}知识引入单项判断语句单向判断语句的执行流程如图。4.条件语句01If语句知识引入单项判断语句在了解了单向判断语句的基本语法格式和执行流程后，下面对其用法进行演示，如例example11.html。4.条件语句01If语句<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>单向判断语句</title></head>知识引入单项判断语句4.条件语句01If语句<body><script>letnum1=100;

letnum2=200;

if(num1>num2){alert('成立');

}定义变量num1并赋值定义变量num2并赋值如果条件成立，则弹出“成立”知识引入单项判断语句4.条件语句01If语句alert('对不起，条件不成立’);

</script></body></html>如果条件不成立，则弹出“对不起，条件不成立”知识引入单项判断语句运行示例代码，效果如图。4.条件语句01If语句知识引入双向判断语句双向判断语句是if语句的基础形式，只是在单向判断语句的基础上增加了一个else语句，其基本语法格式如下。4.条件语句01If语句if(执行条件){

语句1;}else{

语句2;}知识引入双向判断语句双向判断语句的执行流程如图。4.条件语句01If语句知识引入双向判断语句在了解了双向判断语句的基本语法格式和执行流程后，下面对其用法进行演示，如例example12.html。4.条件语句01If语句<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>双向判断语句</title></head>知识引入双向判断语句4.条件语句01If语句<body><script>letnum1=100;letnum2=200;if(num1>num2){alert('成立');

}如果条件成立，则弹出“成立”知识引入双向判断语句4.条件语句01If语句else{alert('对不起，条件不成立');

}alert('演示完成');

</script></body></html>如果条件不成立，则弹出“对不起，条件不成立”无论条件成立与否，最后都弹出“演示完成”知识引入双向判断语句运行示例代码，效果如图。4.条件语句01If语句单击“确定”知识引入多向判断语句多向判断语句是根据多个条件进行判断，其基本语法格式如下。4.条件语句01If语句if(执行条件1){

执行语句1;}elseif(执行条件2){

执行语句2;}知识引入多向判断语句4.条件语句01If语句elseif(执行条件3){

执行语句3;}...else{

执行语句n+1}知识引入多向判断语句在上述语法格式中，通过elseif语句可以对多个条件进行判断，并且根据判断的结果执行相关的语句。末尾的else语句用于在所有条件都不满足时执行特定语句，如果不需要else语句，则可以省略它。多向判断语句的执行流程如图。4.条件语句01If语句知识引入多向判断语句在了解了多向判断语句的基本语法格式和执行流程后，下面对其用法进行演示，如例example13.html。4.条件语句01If语句<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>多向判断语句</title></head>知识引入多向判断语句4.条件语句01If语句<body><script>letcar='房车';//定义一个变量并对其赋值

if(car=='跑车'){//如果赋值为跑车，则弹出下面的内容alert('奖品:跑车');}

知识引入多向判断语句4.条件语句01If语句elseif(car=='马车'){//如果赋值为马车，则弹出下面的内容alert('奖品：马车');}elseif(car=='房车'){/

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论