版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
Web前端开发JavaScript+jQuery活页式教程学习活动1输入输出数据学习活动2控制分支语句程序学习活动3控制程序循环执行学习活动4存储并编辑数组数据学习活动5JavaScript代码模块化学习活动6JavaScript对象学习活动7掌握JavaScrtip中BOM操作学习活动8使用DOM控制页面元素学习活动9JavaScript事件处理学习活动10使用jQuery框架处理元素学习活动11基于jQuery的事件处理与动画效果学习活动12使用正则表达式全套PPT课件Web前端开发JavaScript+jQuery活页式教程输入输出数据学习活动1学习活动1输入输出数据目录Contents学习任务1引入JavaScript脚本学习任务2声明JavaScript变量学习任务3输入输出简单数据学习任务4输入输出表达式学习活动1输入输出数据
│【学习目标】知识目标：1.学习引入JavaScript脚本的方法。2.学习JavaScript语言中数据、表达式的输入输出方法。3.学习简单的JavaScript语言程序设计方法。技能目标：1.能够在HTML脚本中正确引入JavaScript。2.能够编写JavaScript脚本并进行简单的程序设计。3.能够利用工具调试JavaScript代码。学习活动1输入输出数据
│【学习活动简介】在Web前端开发中，使用HTML和CSS可以做出精美的页面，但是用户和页面之间的交互需求却无法被满足。为了减轻服务器端的负担，同时增强页面的交互性，使用JavaScript是非常好的解决方法。同时，JavaScript也是jQuery框架的基础。本次学习活动的目标是能够正确地引入JavaScript（JS）脚本，并能进行简单的JavaScript语言程序设计，可以完成简单的输入输出操作，同时能够调试、纠正程序中出现的错误。学习活动1输入输出数据学习任务1
│
引入JavaScript本脚本【学习目标】掌握采用行内式引入JavaScript脚本的方法掌握采用内嵌式引入JavaScript脚本的方法掌握采用外链式引入JavaScript脚本的方法学习活动1输入输出数据【知识介绍】JavaScript语言是一种直译式脚本语言，不能单独运行，必须引入HTML脚本中才能被解释、执行。将JavaScript（JS）脚本引入HTML脚本中的方法有行内式、内嵌式和外链式3种。1.行内式将简短的JavaScript脚本写在HTML标签的事件属性中，这种方法称为行内式。以下HTML脚本能够实现单击【确定】按钮后弹出提示框。HTML标签的事件属性一般都是以“on”开头，例如onclick、onchange等。运行此语句所在的HTML文件，单击页面中的【行内式】按钮，弹出提示框。
<buttononclick="alert('行内式JS')">行内式</button>学习任务1
│
引入JavaScript本脚本学习活动1输入输出数据【知识介绍】2.内嵌式当JavaScript脚本有多行语句时，可以采用内嵌式引入JavaScript脚本。这种方法是将JavaScript脚本包含在<script>标签中。<script>标签可以写在<head>标签或<body>标签中。示例代码如下。【示例1-1】demo1_1.html第2行和第4行分别是<script>标签的开始和结束，JavaScript脚本程序写在这个区间内。<script>标签的type属性值“text/JavaScript”表示脚本为JavaScript文本，这是HTML5中<script>标签的默认属性，可以省略。学习任务1
│
引入JavaScript脚本1
<body>2
<scripttype="text/JavaScript">3
alert("内嵌式JS演示");4 </script>5
</body>学习活动1输入输出数据【知识介绍】3.外链式外链式也称为外部JavaScript，是指将JavaScript脚本代码写在一个单独的文件中，文件一般以“.js”作为扩展名。当JavaScript代码量很大，或者多个页面需要实现相同的交互效果时，一般需要使用外链式。使用外链式JavaScript需要注意以下三点。（1）.js文件中不需要写<script>标签，应直接写JavaScript脚本。（2）在HTML文件中使用以下标签引入外部的.js文件：（3）外链式<script>标签不能写成单标记，必须以“</script>”结束。学习任务1
│
引入JavaScript脚本
<scriptsrc=".js文件名"></script>学习活动1输入输出数据【知识介绍】3.外链式外链式也称为外部JavaScript，是指将JavaScript脚本代码写在一个单独的文件中，文件一般以“.js”作为扩展名。当JavaScript代码量很大，或者多个页面需要实现相同的交互效果时，一般需要使用外链式。使用外链式JavaScript需要注意以下三点。（1）.js文件中不需要写<script>标签，应直接写JavaScript脚本。（2）在HTML文件中使用以下标签引入外部的.js文件：（3）外链式<script>标签不能写成单标记，必须以“</script>”结束。学习任务1
│
引入JavaScript脚本
<scriptsrc=".js文件名"></script>学习活动1输入输出数据【知识介绍】以下示例代码演示了外链式JavaScript的使用。【示例1-2】demo1_2.html步骤1：创建test.js文件，在文件中编写以下代码。步骤2：创建demo1_2.html文件，引入当前目录下的test.js。步骤3：通过浏览器运行demo1_2.html，页面中会自动弹出提示框，提示内容为“外链式JS”。学习任务1
│
引入JavaScript脚本
alert("外链式JS");1
<body>2 <scriptsrc="./test.js"></script>3
</body>学习活动1输入输出数据【知识链接】1.JavaScript的历史1994年，网景公司（Netscape）发布了历史上第一个比较成熟的网络浏览器Navigator，轰动一时。但是，这个版本的浏览器都是静态的，只能用来浏览，不具备与用户互动的能力，也不具备今天的各种浏览器的各种动态效果，如图片轮播、鼠标悬浮切换等效果。1995年，网景公司系统程序员布兰登·艾奇，用不到两周的时间设计出了能在网页上实现动态效果的编程语言。当时，Sun公司的Java非常有名气，网景公司希望借用Java在当时的名气来进行推广，便将这种语言命名为JavaScript。实际上，JavaScript除了语法上有点像Java外，其他地方都跟Java没有任何关系。欧洲计算机制造商协会（EuropeanComputerManufacturersAssociation）以JavaScript1.1为蓝本，制定了“ECMA-262”标准，并由此标准定义了一种新脚本语言ECMAScript。随后，ISO也采用ECMAScript作为标准，各浏览器厂商开始将ECMAScript作为各自JavaScript实现的基础，JavaScript也由此开始逐步发展完善起来。学习任务1
│
引入JavaScript脚本学习活动1输入输出数据【知识链接】ECMA推出ECMAScript后，规范了浏览器市场。JavaScript语言以ECMAScript为核心，还包括了DOM（文档对象模型）和BOM（浏览器对象模型）两部分。学习任务1
│
引入JavaScript脚本学习活动1输入输出数据【知识链接】（1）ECMAScriptECMAScript是JavaScript的核心标准，规定了语言的组成部分，其具体内容包括语法、类型、语言、关键字、保留字、操作符、对象等。（2）文档对象模型（DOM）文档对象模型（DocumentObjectModel，简称DOM）将页面映射为一个多层次节点结构，通过DOM，开发者可以自由地对网页元素进行删除、添加、替换或修改，实现动态效果。（3）浏览器对象模型（BOM）浏览器对象模型（BrowserObjectModel，简称BOM）用于处理浏览器窗口和框架，通过BOM，开发者可以对浏览器窗口进行操作，比如弹出框、前进、后退、页面刷新、关闭浏览器窗口等。学习任务1
│
引入JavaScript脚本学习活动1输入输出数据【知识链接】2.JavaScript的特点（1）脚本语言JavaScript是文本命令组成的脚本语言（Script），与非脚本语言（例如C语言）相比，JavaScript语言不需要编译成可执行文件后才能运行，程序在运行过程中逐行解释执行。（2）基于对象JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。例如使用jQuery框架提高开发速度，使得JavaScript开发更加地快捷高效。（3）简单JavaScript语言采用弱类型的变量类型，对使用的数据类型未做出严格的要求，其设计简单紧凑，灵活易用。（4）跨平台性JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以在任意支持JavaScript脚本的浏览器中运行。目前，JavaScript已被大多数的浏览器所支持学习任务1
│
引入JavaScript脚本学习活动1输入输出数据【知识链接】3.JavaScript开发工具的选择前端页面开发对软件环境的要求相对较低，只需要使用编辑器和浏览器即可。常用的编辑器有Editplus、Notepad++、Sublime_text、HBuilder、WebStrom等。我们可以使用轻量级开发工具VSCode或者HBuilder编辑器，开发测试前端的浏览器一般使用Chrome浏览器和火狐浏览器。学习任务1
│
引入JavaScript脚本学习活动1输入输出数据【实践练习】1.问答题（1）JavaScript由哪几部分组成？其中组成核心是什么？（2）可以使用哪些方式将JavaScript脚本引入HTML脚本中（3）在HTML脚本中引入当前目录中的function.js的代码是什么？（4）<script>标签可以放在HTML脚本中的什么位置？（5）查阅资料，简述JavaScript的优势。2.编程练习分别使用JavaScript脚本的
3
种引入方法编写程序，使得页面加载后提示框中显示“HelloWorld！”。学习任务1
│
引入JavaScript脚本学习活动1输入输出数据学习任务2│
声明JavaScript变量【学习目标】掌握JavaScript中变量的声明与赋值方法掌握JavaScript中数据类型的组成了解JavaScript中常见的关键字学习活动1输入输出数据【知识介绍】1.变量的声明与赋值变量指的是在程序运行期间，值可以改变的量。为变量起的名字称为变量名。变量实际上是程序运行过程中，在内存中分配的一段空间。JavaScript中使用“var”关键字声明变量，其语法格式如下。
示例代码如下变量声明之后是没有值的，为其赋值之后才有实际意义，示例代码如下。
var变量名;学习任务2│
声明JavaScript变量
name=“Tom”;
age=20;varname,age;学习活动1输入输出数据【知识介绍】1.变量的声明与赋值变量赋值之后，可以通过变量名进行访问，示例代码如下。也可以在声明变量的同时进行变量赋值，这个过程称为变量初始化，示例代码如下。
学习任务2│
声明JavaScript变量
alert(name);
alert(age);
varname=“Tom”;学习活动1输入输出数据【知识介绍】1.变量的声明与赋值进行变量命名时，必须遵循JavaScript的命名规范，具体要求如下。（1）变量名由数字、字母、下划线和符号“$”组成。（2）变量名不能以数字开头，例如变量名“1abc”是错误的。（3）变量命名时尽量使用有意义的标识符，例如age、name、gender等，可以根据变量名判断变量表示的含义。（4）命名变量建议采用规范的驼峰命名法，即当变量名有多个单词组成时，除第一个单词外，其他单词的首字母须大写，例如：firstTime、endTime。需要说明的是，JavaScript属于弱类型语言，变量也可以不通过var关键字进行声明而直接使用。但是因为有变量作用域的问题，并且出现问题排错比较困难，因此不推荐这种用法。学习任务2│
声明JavaScript变量学习活动1输入输出数据【知识介绍】2.JavaScript常见关键字JavaScript变量命名时，不能与保留字、关键字重名。JavaScript常见关键字，如表1-2所示。学习任务2│
声明JavaScript变量学习活动1输入输出数据【知识介绍】3.JavaScript数据类型JavaScript是弱类型语言，虽然在声明变量时不需要指明变量的数据类型，但是JavaScript会根据变量的值自动判断数据类型，并分配相应的存储空间。JavaScript中的数据类型分为基本数据类型和引用数据类型。学习任务2│
声明JavaScript变量学习活动1输入输出数据【知识介绍】3.JavaScript数据类型关于JavaScript数据类型，需要注意以下几点。（1）Number数字类型既可以表示整数，也可以表示浮点数。（2）Number类型中有一个特殊值NaN（NotaNumber），表示非数字。可以使用isNaN()函数来判断一个数据或变量是否为非数字，示例代码如下。（3）String类型的数据是用单引号或者双引号引起来的文本。（4）布尔类型即逻辑型只有两个值：true和false。（5）Null类型只有一个值null，表示空对象指针。（6）Undefined类型只有一个值undefined，表示声明的变量没有被赋值。学习任务2│
声明JavaScript变量
document.write(isNaN('123')); //显示结果：false
document.write(isNaN(123)); //显示结果：false
document.write(isNaN("abc")); //显示结果：true学习活动1输入输出数据【实践练习】1.问答题（1）JavaScript中如何表示八进制数和十六进制数？（2）对于以下变量定义语句，请问isNaN(num)和isNaN('num')的值分别是多少？varnum=876.23;2.编程练习（1）分别定义Null类型变量和Undefined类型变量，通过函数alert()输出。（2）定义变量greeting，赋值为“helloworld”，通过函数alert()输出。（3）定义变量introduce，初始化为个人信息介绍，通过alert()函数输出。（4）定义两个变量“x”“y”并进行赋值，然后交换它们的值，通过函数alert()输出交换结果。学习任务2│
声明JavaScript变量学习活动1输入输出数据学习任务3│
输入输出简单数据【学习目标】掌握使用函数alert()输出信息的方法掌握使用函数confirm()输出信息的方法掌握使用函数prompt()输入输出信息的方法掌握使用函数document.write()在页面中输出信息的方法掌握JavaScript中数据类型转换的方法学习活动1输入输出数据【知识介绍】1.JavaScript简单输入、输出语句在页面交互过程中，常见的数据输入方式是通过表单控件进行的，而输出的信息也通常显示在页面的控件中。但是，对于一些简单数据的输入，可以通过提示框的方式完成，简单信息的输出可以通过消息框（警告框、确认框）完成，也可以通过在页面中直接输出的方式实现。JavaScript中常用消息框和页面输出的使用方法见表1-4所示。学习任务3│
输入输出简单数据学习活动1输入输出数据【知识介绍】【示例1-3】demo1_3.html上述代码运行后，alert()警示框，如图1-7所示，confirm()确认框，如图1-8所示。prompt()提示框，如图1-9所示。document.write()输出信息，如图1-10所示。学习任务3│
输入输出简单数据1
<scripttype="text/javascript">2 alert("警示框，用于提示信息");3 confirm("确认框，用于用户确认信息");4 prompt("提示框，用户提示用户输入信息");5 document.write("<h1>在页面中输出信息</h1>");6
</script>学习活动1输入输出数据【知识介绍】学习任务3│
输入输出简单数据学习活动1输入输出数据【知识介绍】2.JavaScript数据类型检测在Web前端开发过程中，有时需要根据不同的数据类型进行不同的操作。JavaScript提供了
4
种常用的数据类型检测方法，分别是typeof、instanceof、constructor和Ototype.toString.call()。（1）typeof用于检测变量或者值的数据类型，基本语法如下。typeof运算符的返回值为字符串，表明数据类型。需要说明的是，typeof只能检测基本的数据类型，如果遇到引用数据类型（如Array类型或者Object类型），返回值都是object。学习任务3│
输入输出简单数据typeof(表达式) //检测表达式结果的数据类型typeof变量名 //检测变量的数据类型学习活动1输入输出数据【知识介绍】2.JavaScript数据类型检测typeof运算符的返回值为字符串，表明数据类型。typeof运算结果分类，如表1-5所示。学习任务3│
输入输出简单数据返回值字符串含义undefined表示未定义类型的变量或值boolean表示布尔类型的变量或值string表示字符串类型的变量或值number表示数字类型的变量或值object表示对象类型的变量或值，或者是nullfunction表示函数类型的变量或值表1-5学习活动1输入输出数据【知识介绍】2.JavaScript数据类型检测（2）instanceof用于检测一个实例是否属于某个类。使用
instanceof
可以弥补typeof不能检测对象数据类型的局限性，示例代码如下。学习任务3│
输入输出简单数据console.log([
]instanceofArray); //trueconsole.log(function(){}instanceofFunction); //trueconsole.log({
}instanceofObject); //trueconsole.log(newString('abc')instanceofString) //true学习活动1输入输出数据【知识介绍】2.JavaScript数据类型检测（3）constructor是函数原型上的属性，该属性指向的是构造函数本身。此处仅做简单的了解，示例代码如下。学习任务3│
输入输出简单数据console.log(("1").constructor===String); //trueconsole.log(([]).constructor===Array); //trueconsole.log(({}).constructor===Object); //true学习活动1输入输出数据【知识介绍】2.JavaScript数据类型检测（4）Ototype.toString.call()是最全面地检测数据类型的方式。返回值的类型为String类型，示例代码如下。学习任务3│
输入输出简单数据Ototype.toString.call(1); //"[objectNumber]"Ototype.toString.call({}); //"[objectObject]"Ototype.toString.call([]); //"[objectArray]"Ototype.toString.call(null); //"[objectNull]"学习活动1输入输出数据【知识介绍】3.JavaScript数据类型转换在运算中如果出现操作数的数据类型与预期不符，JavaScript就会进行自动类型转换，由于转换是自动完成的，用户是不可见的，但是，如果无法进行自动类型转换，就需要进行强制类型转换。（1）强制类型转换强制转换主要包括转换为字符串类型、转换为数字型、转换为布尔类型。强制类型转换，如表1-6所示。学习任务3│
输入输出简单数据学习活动1输入输出数据【知识介绍】3.JavaScript数据类型转换（2）自动类型转换自动转换是基于强制转换之上的，遇到以下三种情况时，JavaScript会进行自动数据类型转换。自动转换为Boolean类型JavaScript遇到预期为布尔值的地方（比如if语句的条件部分），就会将非布尔值的数据自动转换为布尔值，系统内部会自动调用Boolean()函数。自动转换为Number类型算数运算符（+、-、*、/等）跟非Number类型的值进行运算时，除了“+”运算符用于字符串拼接之外，JavaScript都会将这些值转换为Number类型，然后再进行运算。自动转换为String类型自动转换为字符串，主要发生在字符串的“加法”运算时。当一个值为字符串，另一个值为非字符串时，后者转为字符串。学习任务3│
输入输出简单数据学习活动1输入输出数据【实践练习】1.问答题（1）其他数据类型转换为布尔型时，哪些数值会转换false？哪些数值会转换为true？（2）写出表达式的结果。
typeofage;
typeof(true);
typeof'abc';
typeof100);
typeofNaN);
typeofnull;
varfn=function(){};
typeof(fn);学习任务3│
输入输出简单数据学习活动1输入输出数据【实践练习】1.问答题（3）写出以下表达式的结果。
Number('674');
Number('674abc');
Number('');
Number(true);
Number(null);
parseInt("9.54");
parseFloat('2.31');
parseFloat('a3b');
parseFloat("11.22.33");
parseFloat("4.3abc");学习任务3│
输入输出简单数据学习活动1输入输出数据【实践练习】1.问答题（4）写出以下表达式的结果。
'15'-'2';
'15'*'2';
true-1;
'1'-1;
'15'+1;
'15'+true;学习任务3│
输入输出简单数据学习活动1输入输出数据【实践练习】2.编程练习通过提示框输入两个操作数和一个操作符，实现简单的数据计算功能，将运算结果显示在页面中。提示信息：eval()函数可以将字符串解析成JavaScript代码并执行。例如：
学习任务3│
输入输出简单数据console.log(eval(“45*56”))//显示结果为100学习活动1输入输出数据【学习目标】掌握JavaScript语言中算术运算符及表达式掌握JavaScript语言中比较运算符及表达式掌握JavaScript语言中逻辑运算符及表达式掌握JavaScript语言中赋值运算符及表达式掌握JavaScript语言中三元运算符的使用方法了解JavaScript语言中运算符的优先级学习任务4│
输入输出表达式学习活动1输入输出数据【知识介绍】JavaScript运算符也称为操作符，用于赋值、比较、算术运算、逻辑运算等。常见的运算符为算术运算符、比较运算符、逻辑运算符、赋值运算符、三目运算符等。JavaScript常用运算符，如表1-8所示。使用不同的运算符组成不同类型的表达式。学习任务4│
输入输出表达式学习活动1输入输出数据【知识介绍】1.算术运算符中，取余数运算符（%）计算结果的正负号由第一个操作数的正负决定，示例代码如下。2.比较运算符中，“==”“===”是有区别的。“==”是相等运算符，会自动转换数据类型，变成相同的数据类型后再比较两个数据的值是否相等；“===”是严格相等运算符，不会自动转换数据类型，所以它既比较数值，又比较数据类型，用来比较两个操作数的值和类型是否都相同。学习任务4│
输入输出表达式
document.write(-5%2); //显示结果：-
document.write(5%-2); //显示结果：1学习活动1输入输出数据【知识介绍】3.逻辑运算符中，与运算“&&”的运算规则是：如果第一个表达式的布尔值为true，则返回第二个表达式的值（注意是值，不是布尔值）；如果第一个表达式的布尔值为false，则直接返回第一个表达式的值，且不再对第二个表达式求值，示例代码如下。或运算符“||”的运算规则是：如果第一个表达式的布尔值为true，则返回第一个表达式的值，且不再对第二个表达式求值；如果第一个表达式的布尔值为false，则返回第二个表达式的值，示例代码如下。学习任务4│
输入输出表达式
document.write('t'&&'f'); //结果："f"
document.write(NaN&&(1+2)); //结果：NaN
document.write(''||'f'); //结果："f"
document.write('abc'||(3==2)) //结果："abc"学习活动1输入输出数据【知识介绍】4.三元运算符三元运算符是JavaScript语言中唯一一个需要三个操作数的运算符，能够基于条件执行语句。语法格式如下。如果条件表达式的布尔值为true，则返回表达式1的值，否则返回表达式2的值，示例代码如下。运行上述脚本，当输入大于60的数值时，页面显示“通过”，当输入小于60的数值时，页面上显示“未通过”。
学习任务4│
输入输出表达式
条件表达式?表达式1：表达式2varscore=prompt("请输入一个分数值");document.write(score>=60?"通过":"未通过");学习活动1输入输出数据【知识介绍】5.运算符优先级当表达式中包含了多种运算符时，应首先明确所有参与运算的运算符的优先级，才能计算出正确的结果。运算符优先级，如表1-9所示。学习任务4│
输入输出表达式学习活动1输入输出数据【实践练习】1.填写下列代码的显示结果
（1）document.write(-5%2);（2）document.write(5%-2);（3）document.write('cat'>'dog');（4）document.write('cat'>100);（5）document.write("123"==123);（6）document.write("123"===123);（7）document.write("123"!==123);学习任务4│
输入输出表达式（8）假设x=10，y=20，填写以下表格中表达式的运算结果表达式结果x<20&&y>1
x==20||y==5
!(x==y)学习活动1输入输出数据【实践练习】2.编程练习
（1）输入3个整数a、b和c，使用三元运算符计算最大值，输出到页面中。（2）输入圆的半径，计算出圆的面积和周长，输出到页面上。（3）编写一个收银台收款程序，输入商品的单价、购买数量和收款金额，输出应收金额和找零。学习任务4│
输入输出表达式Web前端开发JavaScript+jQuery活页式教程控制分支语句程序学习活动2学习活动2控制程序流程目录Contents学习任务1使用单分支语句模拟话费充值学习任务2使用双分支语句判断成绩学习任务3使用多分支语句判断年龄区间学习任务4使用switch语句控制图片显示
│【学习目标】知识目标：1．学习JavaScript语言中单分支语句的语法。2．学习JavaScript语言中双分支语句的语法。3．学习JavaScript语言中多分支语句的语法。4．学习switch语句的语法。5．了解JavaScript程序中读取表单控件的方法。技能目标：1.能够使用单分支结构编写模拟话费充值程序。2.能够使用双分支结构编写成绩判断程序。3.能够使用多分支结构编写年龄结构判断程序。4.能够使用switch结构编写图片显示程序。
│【学习活动简介】流程控制是任何程序设计语言的基础和核心。通过流程控制，我们可以控制程序的执行过程。JavaScript程序流程主要包括顺序结构、分支结构和循环结构。按照代码先后顺序，由上而下依次执行的程序流程叫做顺序结构。如果需要程序按照条件执行不同的流程，则必须编写分支结构程序。例如，当用户登录网站时，系统会判断用户输入的账户信息的正确性，如果正确则进入网站，如果账户错误，则进行错误提示。本次学习活动主要目标是使读者掌握JavaScript中常用的分支流程控制方法，掌握单分支、双分支、多分支及switch结构程序设计方法，能够使用分支语句编写程序。学习任务1
│
使用单分支语句模拟话费充值【学习目标】掌握JavaScript单分支程序语法。能够编写单分支结构程序。【知识介绍】单分支语法结构如下：执行过程为：当“判断条件”的值为true时，执行大括号“{}”中的语句体，如果语句体只有一行代码，大括号“{}”可以省略。当“判断条件”的计算结果为false时，程序流程将直接执行if语句体后面的代码。学习任务1
│
使用单分支语句模拟话费充值
if(判断条件)
{
//执行语句;
}【知识介绍】【示例2-1】demo2_1.html学习任务1
│
使用单分支语句模拟话费充值1
<script>2
varage=prompt("请输入一个人的年龄：");3 if(age>=18){4 document.write(age+"岁，已是成年人！");5 }6 document.write("程序结束");7
</script>【知识介绍】在浏览器中执行上述代码所在页面，当输入23时，页面显示结果如图2-3所示，当输入16时，页面显示结果如图2-4所示。当输入23时，if后面括号中关系表达式“age>=18”的值为true，因此会执行第4行语句，然后在执行第6行代码。但是当输入16时，因为if后面关系表达式“age>=18”的值为false，因此不会执行第4行的if语句体，而是直接执行第6行代码。学习任务1
│
使用单分支语句模拟话费充值【实践练习】1.程序填空题
某位同学想给手机充话费，但是只想当话费余额小于等于5元钱时，充值50元，如果话费余额大于5元，就先不充值。假设该同学银行账户中还有500元钱，我们使用JavaScript编写程序，模拟上述过程。请在横线处填写正确的代码。学习任务1
│
使用单分支语句模拟话费充值<script> varbankBalance=500; varphoneBalance=3; if(________________){ __________________ __________________ } //显示当前银行账户余额 document.write("当前银行账户余额为："+______________+"<br/>"); //显示当前手机余额 document.write("当前手机余额为："+__________________);</script>【实践练习】2.编程练习（1）输入x和y两个整型数，使用单分支结构判断x是否为y的约数。（2）举重比赛中，60公斤级选手体重不能超过60公斤。编写JavaScript脚本，输入选手体重，如果体重超过60，则显示“超重，不能参赛！”。学习任务1
│
使用单分支语句模拟话费充值学习任务2│
使用双分支语句判断成绩【学习目标】掌握JavaScript语言中双分支语句的语法掌握双分支语句的执行流程能够编写双分支语句的程序【知识介绍】双分支结构由if...else…语句组成，语法结构如下。双分支语句的执行过程为：当条件表达式的值为true时，执行语句体1，否则执行else部分的语句体2。与单分支语句不同的是，双分支语句对于条件表达式的值为true和false时都有对应的语句体执行，而单分支语句只有当条件表达式的值为true时，才会执行语句体。学习任务2│
使用双分支语句判断成绩
if(条件表达式){
代码块1;
}else{
代码块2;
}【知识介绍】【示例2-2】demo2_2.html上述代码中，第2行输入数据赋值给变量age，第3行到第7行为双分支结构程序。如果age变量值大于等于18，条件表达式“age>=18”的值为true，执行第4行代码，输出“已是成年人！”；如果age的值小于18时，执行第6行代码，输出“还未成年！”。学习任务2│
使用双分支语句判断成绩1
<script>2 varage=prompt("请输入一个人的年龄：");3 if(age>=18){4 document.write("已是成年人！");5 }else{6 document.write("还未成年！")7 }8
</script>【知识拓展】在进行页面交互时，一般很少使用prompt()函数输入数据，而是使用表单控件进行数据的输入，例如文本框、密码框、单选按钮、复选框、按钮等都叫做表单控件。如何使用JavaScript脚本获取文本框中输入的内容呢？【示例2-3】编写JavaScript代码，单击页面中按钮，获取文本框中输入的内容。1.创建demo2_3.html文件，编写页面HTML代码。学习任务2│
使用双分支语句判断成绩1
<body>2 <span>请输入您的年龄：</span>3 <inputtype="text"id="txtAge"value=""/>4 <inputtype="button"id="btn"value="确认">5 <br/>6 <spanid="result"></span>7</body>【知识拓展】运行以上代码后，页面显示如图2-6所示。学习任务2│
使用双分支语句判断成绩【知识拓展】2.编写JavaScript代码，实现交互功能。（1）定义函数getValue()，代码如下。JavaScript中根据控件ID获取输入的数据的语句是document.getElementById("元素ID").value。上述代码中第3行获取文本框中输入的内容，第4行将显示信息输出到<span>标签控件中。学习任务2│
使用双分支语句判断成绩1
<script>2 functiongetValue(){3 varage=document.getElementById("txtAge").value;4 document.getElementById("result").innerHTML="您的年龄为"+age;5 }6
</script>【知识拓展】（2）修改HTML脚本，在按钮控件中添加按钮的单击事件，代码如下。上述代码为按钮添加了一个名为“onclick”事件属性，赋值为“getValue()”，表示当鼠标单击此按钮时，调用getValue()函数。学习任务2│
使用双分支语句判断成绩
<inputtype="button"id="btn"value="确认"onclick="getValue()">【知识拓展】3.使用浏览器运行以上文件，在图2-6所示的文本框中输入一个年龄值，单击按钮后，页面出现信息提示。页面执行效果，如图2-8所示。学习任务2│
使用双分支语句判断成绩【实践练习】本次学习活动需要完成的实践任务如下。在页面中输入一名同学数学、化学和物理的成绩，分别判断这三个成绩是否合格，如果大于等于60分，则显示“成绩合格”，否则显示“成绩不合格”。程序运行效果如下。成绩判断页面，如图2-9所示。学习任务2│
使用双分支语句判断成绩【实践练习】请读者在已有源代码的基础上，编写JavaScript代码，判断各个成绩，并显示提示信息。请按提示信息写出主要代码。学习任务2│
使用双分支语句判断成绩
<script> functionjudge(){ //（1）获取三个文本框的值
//（2）获取显示结果标签控件
//（3）判断数学成绩，结果显示在mathResult标签中
//（4）判断化学成绩，结果显示在chemResult标签中
//（5）判断物理成绩，结果显示在phyResult标签中 }</script>学习任务3│
使用多分支语句判断年龄区间【学习目标】掌握JavaScript语言中多分支语句的语法掌握多分支语句程序的执行流程能够编写简单的多分支语句程序【知识介绍】多分支if...elseifelse语句结构也称为多分支结构，语法结构如下。学习任务3
│
使用多分支语句判断年龄区间if(条件表达式1){
代码块1}elseif(条件表达式2){
代码块2}elseif(条件表达式3){
代码块3;}……else{
代码块n;}【知识介绍】多分支结构用于多个条件的判断与执行。当条件表达式1的值为true时，执行代码块1，否则再判断条件表达式2，当条件表达式2的值为true时，执行代码块2，否则再继续判断条件表达式3的值为true还是false，以此类推，当所有条件计算值都为false时，才会执行最后else中的代码块。虽然是多个条件的判断，但是每个条件表达式的判断都是在前一个条件表达式的值为false时，才会进行计算。虽然有多个代码块，但是只会执行其中之一。学习任务3
│
使用多分支语句判断年龄区间【知识介绍】下面通过示例代码演示多分支结构。本示例用于计算某公司年终奖，发放标准如表2-3所示。编程实现根据员工的月薪和工龄，计算最后一个月的总收入。示例代码如下。学习任务3
│
使用多分支语句判断年龄区间【知识介绍】【示例2-4】demo2_4.html1.HTML页面代码如下。学习任务3
│
使用多分支语句判断年龄区间1
<divclass="box">2
<span>输入工龄：</span>3
<inputtype="text"id="workAge"value=""/><br/>4
<span>输入月薪：</span>5
<inputtype="text"id="salary"value=""/><br/>6
<inputtype="button"id="btn"value="计算最终收入"onclick="compute()">7
<br/>8
<spanid="result"></span>9
</div>【知识介绍】【示例2-4】demo2_4.html以上代码执行后，显示页面如图2-11所示。学习任务3
│
使用多分支语句判断年龄区间【知识介绍】【示例2-4】demo2_4.html2.JavaScript代码如下。学习任务3
│
使用多分支语句判断年龄区间1
<script>2
varyear=parseInt(document.getElementById("workAge").value);3
varmoney=parseFloat(document.getElementById("salary").value);4
varaward;5
if(year<=2){6 if(money>12000){7
award=money*1.2;8 }else{9
award=money;10 }11
}elseif(year>5){12 if(money>20000){13
award=money*3;14 }else{【知识介绍】【示例2-4】demo2_4.html2.JavaScript代码如下。学习任务3
│
使用多分支语句判断年龄区间15
award=money*2;16 }17
}else{18 if(money>15000){19
award=money*1.8;20 }else{21
award=money*1.5;22 }23
}24
varlast=money+award;25
document.getElementById("result").innerHTML="最后一个月的总收入为："+last;26
</script>【知识介绍】上述代码中在多分支结构中使用了分支嵌套，第5行到第23行为多分支结构，先判断工龄，对于某个工龄段，再继续根据月薪计算年终奖。第24行计算员工最后一个月的总收入，第25行显示总收入结果。本示例执行后，页面显示如下。页面执行效果，如图2-12所示。学习任务3
│
使用多分支语句判断年龄区间【实践练习】本次学习活动需要完成的任务要求如下。在页面中输入一个人的年龄，按照不同的年龄区间，输出判断结果。判断依据见表2-4所示。学习任务3
│
使用多分支语句判断年龄区间【实践练习】HTML部分代码如下。学习任务3
│
使用多分支语句判断年龄区间<divclass="box">
<span>请输入您的年龄：</span> <inputtype="text"id="txtAge"value=""/> <inputtype="button"id="btn"value="确认"onclick="judgeAge()"> <br/> <spanid="result"></span></div>【实践练习】请读者在已有源代码的基础上，编写JavaScript代码，判断输入的年龄，并显示提示信息。请按提示信息写出主要代码。学习任务3
│
使用多分支语句判断年龄区间<script> functionjudgeAge(){ varage=parseInt(document.getElementById('txtAge').value); varresult; //判断年龄段 document.getElementById("result").innerHTML=result; }</script>学习任务4│
使用switch语句控制图片显示【学习目标】掌握switch语句结构组成掌握switch语句执行过程及执行特点能够编写简单的switch语句程序【知识介绍】switch语句也是一种多分支结构的语句，与if…elseif…语句结构不同的是，switch语句只能对单个变量或表达式的值进行判断。语法结构如下。学习任务4
│
使用switch语句控制图片显示
switch(变量/表达式){
case值1：[语句块1;][break;] case值2：[语句块2;][break;] case值3：[语句块3;][break;] case值4：[语句块4;][break;]
…… [default:语句块n;break;]
}【知识介绍】switch语句执行过程为：（1）计算出switch后面变量或表达式的值，再逐一与每个case后面的值进行匹配。（2）只要值一致，就会执行对应case后面的语句体，并且不会再进行其他匹配。（3）一直执行，直到遇到break语句或者代码全部执行完毕，才会结束switch语句。（4）default是可选项，若所有case后都没有相匹配的值，则执行default后面的语句体。学习任务4
│
使用switch语句控制图片显示
switch(变量/表达式){
case值1：[语句块1;][break;] case值2：[语句块2;][break;] case值3：[语句块3;][break;] case值4：[语句块4;][break;]
…… [default:语句块n;break;]
}【知识介绍】使用switch语句时需要注意以下4点：1．每个case后面的值不能重复。2．每个case的前后顺序可以任意。3．每个case最后的break语句是可选项，如果缺省，则执行case语句块之后，不会跳出switch语句结构，而是继续执行下一个case中的语句块或者default中的语句块。4．default后面没有值，表示默认情况下执行的语句块，default语句可以缺省。下面的示例中，输入成绩等级，输出该等级所在的分数段。“A等级”对应90～100分，“B等级”对应80～89分，“C等级”对应70～79分，“D等级”对应60～69分，“E等级”对应不及格。学习任务4
│
使用switch语句控制图片显示【知识介绍】【示例2_5】demo2_5.html学习任务4
│
使用switch语句控制图片显示1<script>2 vargrade=prompt("请输入成绩等级：");3 switch(grade.toUpperCase())){4 case'A':document.write('A等级对应90~100分');break;5 case'B':document.write('B等级对应80~90分');break;6 case'C':document.write('C等级对应70~80分');break;7 case'D':document.write('D等级对应60~70分');break;8 case'E':document.write('E等级对应不合格的分数');break;9 default:document.write('输入的等级错误！');break;10 }11</script>【知识介绍】
上述代码中，toUpperCase()为JavaScript内置字符串处理函数，作用是将字符串中的小写字母转换为大写。程序中通过switch语句判断输入的成绩等级，只要匹配到case后面的值，就执行后面的输出语句，当执行到break语句时，结束switch结构。如果没有匹配到任何case后面的值，则执行default后面的语句。在浏览器中执行页面代码，提示框中输入“B”，如图2-12所示。运行结果页面，如图2-13所示。学习任务4
│
使用switch语句控制图片显示【知识介绍】下面的示例，演示了多个case语句体共用break语句的样例。输入星期值，判断是否为工作日。【示例2_6】demo2_6.html学习任务4
│
使用switch语句控制图片显示学习任务4
│
使用switch语句控制图片显示1<script>2 varweekDay=prompt("输入今天星期几：");3 switch(weekDay){4 case"星期一":5 case"星期二":6 case"星期三":7 case"星期四":8 case"星期五":document.write(weekDay+"为工作日");break;9 case"星期六":10 case"星期日":document.write(weekDay+"是非工作日");break;11 default:document.write("输入有误！");12 }13</script>【知识介绍】浏览器中打开该页面，在提示框中输入星期值，例如输入“星期一”，从第3行开始执行switch结构语句。第4行“case”后的值和输入内容相匹配，程序流程从第4行case后面的语句开始执行，本例中为空语句，而且没有break语句，因此程序依次执行后面case语句体，一直到第8行，输出“星期一为工作日”后，执行break语句，跳出switch语句体。输入星期值，如图2-15所示，程序显示结果，如图2-16所示。学习任务4
│
使用switch语句控制图片显示【知识拓展】本学习活动的任务是在网页中通过JavaScript程序显示图片，涉及到的相关知识点如下。1.通过JavaScript设置控件属性。现有如下HTML代码。在JavaScript脚本中，将以上<img>控件显示的图片改为2.jpg，代码如下。从代码中可以看到，变量img表示的是ID为“pict”的<img>控件，通过设置src属性值，可以改变页面上显示的图片。学习任务4
│
使用switch语句控制图片显示<imgsrc="./images/1.jpg"id="pict">varimg=document.getElementById("pict");img.src="./images/2.jpg"【知识拓展】2.通过JavaScript获取下列框选项。HTML控件“<select>”表示的是下拉列表，示例代码如下。上述代码中，“onchange="choose()”在表示选项改变时，调用choose()函数。学习任务4
│
使用switch语句控制图片显示<selectid="languages"onchange="choose()"> <optionvalue="1">C语言</option> <optionvalue="2">PHP</option> <optionvalue="3">JavaScript</option> <optionvalue="4">jQuery</option></select>【知识拓展】编写JavaScript脚本，当选项改变时，获取被选中的选项值，代码如下。学习任务4
│
使用switch语句控制图片显示<script>
functionchoose(){
varlesson=document.getElementById("languages").value;
alert("您选择的是"+lesson);
}</script>【知识拓展】当选择“PHP”时，页面中弹出信息提示框，如图2-18所示。请注意，信息提示框中显示的是选项的“value”，而不是选项在页面中显示的内容。学习任务4
│
使用switch语句控制图片显示【实践练习】本学习活动的实践任务是使用switch结构编写JavaScript程序，任务实现效果，如图2-19所示。通过在下拉列表中选择不同的选项，实现页面中图片的切换效果。学习任务4
│
使用switch语句控制图片显示【实践练习】源代码中已包含了四张图片，保存在“images”文件夹中，分别为“spring.png”、“summer.png”、“autumn.png”和“winter.png”。CSS样式已经在源代码中提供，请按要求补充代码。学习任务4
│
使用switch语句控制图片显示【实践练习】1.编写HTML部分代码学习任务4
│
使用switch语句控制图片显示<divclass="box"> <!--下拉列表id为choose，onchange事件属性值为chooseImg()，请填写代码--> <select_____________________________> <optionvalue="">--请选择--</option>
<!--选项为春、夏、秋、冬，对应value值为1、2、3、4，请补充代码-->
</select> <br/> <!--显示img控件，id为pic，src值为空，请填写代码--> <img________________________></div>【实践练习】2.编写JavaScript脚本学习任务4
│
使用switch语句控制图片显示<script> functionchooseImg(){ //获取下拉列表的值，请填写代码 varval=____________________________ //获取<img>控件，请填写代码 varimg=___________________________ switch(val){ //根据下拉列表的值设置<img>显示的图片，请补充代码 } }</script>Web前端开发JavaScript+jQuery活页式教程控制程序循环执行 学习活动3学习活动3控制程序循环执行目录Contents学习任务1使用while循环语句输出表格学习任务2使用do-while循环语句计算水仙花数学习任务3使用for循环语句输出图片学习任务4控制循环流程
│【学习目标】知识目标：1．学习JavaScript语言中while循环语句的语法。2．学习JavaScript语言中do-while循环语句的语法。3．学习JavaScript语言中for循环语句的语法。4．学习控制循环执行流程的方法。技能目标：1．能够使用while循环语句在页面中输出表格。2．能够使用do-while循环语句计算水仙花数。3．能够使用for循环语句在页面中输出多张图片。4．能够利用break或continue控制循环的流程。5．掌握使用JavaScript语言输出HTML标签的方法。
│【学习活动简介】循环结构的程序可以重复执行相同的代码段。例如，输出1~100之间的整数，如果不使用循环，需要100行代码才能完成，如果使用循环结构，只需要几行代码即可完成此功能。和分支结构一样，循环结构也是程序设计的基础，尤其是循环与分支相结合，能够实现很多复杂的功能。本次学习活动的目标是使读者掌握JavaScript中循环程序的分类和语法结构，能够综合使用循环结构和分支结构，编写较复杂的程序，并可以呈现在页面中。学习任务1
│
使用while循环语句输出表格【学习目标】掌握JavaScript中while循环语句。能够编写while循环语句程序。【知识介绍】while循环的语法结构如下。执行过程为：当循环条件的值为true时，执行循环体代码，当循环体代码执行结束后，返回到while语句处，重新计算循环条件的值，如果仍然为true，则再次执行循环体代码，然后再回到while语句处计算循环条件的值，如此反复执行，直到循环条件的值为false，或者在循环体代码内部执行了一些停止循环的语句为止。学习任务1
│
使用while循环语句输出表格while(循环条件)
{ 循环体代码；
}【知识介绍】值得说明的是：除非有特殊要求，循环结构中一定要有一个使得循环能够趋向于结束的语句，如果循环条件一直为true，那么循环将一直执行下去，这种情况称为“死循环”。学习任务1
│
使用while循环语句输出表格【知识介绍】【示例3-1】demo3_1.html输出中2~500之间的所有偶数。学习任务1
│
使用while循环语句输出表格1
<script>2 varn=2;3 while(n<=500){4 document.write(n+"");5 n+=2;6 }7
</script>【知识介绍】代码中第2行变量n初始化为2，第4、5行为循环体。每次执行循环体之前，先计算“n<=1000”这个关系表达式的值，如果为true，则执行循环体代码；如果值为false，则结束循环。循环体中，“n+=2”是使得循环能够趋向结束的关键语句，如果没有这条语句，n值不会变化，“n<=1000”的条件永远为true，循环会一直执行下去。学习任务1
│
使用while循环语句输出表格【知识拓展】JavaScript脚本中，可以通过document.write()方法输出HTML脚本，这也是前端设计中常见的编程效果。如下示例通过通过JavaScript在页面中输出表格。【示例3_2】demo02.html
首先在HTML中对表格设置样式类，代码如下。学习任务1
│
使用while循环语句输出表格学习任务1
│
使用while循环语句输出表格1<styletype="text/css">2 table{3 width:400px;4 border-collapse:collapse;5 border-spacing:0;6 text-align:center;7 }8 td,th{9 border:1pxsolid#cbcbcb;10 height:30px;11 }12 th{13 background-color:#e0e0e0;14 color:#000;15 }16
</style>【知识拓展】编写JavaScript脚本，代码如下。学习任务1
│
使用while循环语句输出表格1
<script>2 varstr="<tableclass='lesson-table'>";3 str+="<tr><th>课程编号</th><th>课程名称</th></tr>";4 str+="<tr><td>0100101</td><td>JavaScript</td></tr>";5 str+="<tr><td>0100102</td><td>JQuery</td></tr>";6 str+="<tr><td>0100103</td><td>Python</td></tr>";7 str+="</table>";8 document.write(str);9
</script>【知识拓展】上述代码中，将一个表格的HTML脚本作为字符串，赋值给变量str，第8行中将这个字符串输出。在浏览器中运行以上页面，页面输出表格。学习任务1
│
使用while循环语句输出表格【实践练习】本次学习任务是使用while循环结构在页面中输出一个表格，且表格奇数行和偶数行的背景颜色不同，该表格的行和列可以由用户指定，例如输入行数、列数分别为5和6，程序运行效果，如图3-6所示。学习任务1
│
使用while循环语句输出表格【实践练习】（1）本练习中大部分CSS样式在源代码中已经提供，请填写正确脚本，设置偶数行和奇数行背景颜色学习任务1
│
使用while循环语句输出表格<styletype="text/css"> /*省略部分脚本*/ …… .even{_____________________; } /*偶数行背景颜色为#DFF1E6*/ .odd{_____________________; } /*奇数行背景颜色为#CCCCCC*/</style>【实践练习】（2）编写JavaScript脚本，请在横线处填写正确的代码。学习任务1
│
使用while循环语句输出表格<scripttype="text/javascript"> varrows=prompt("请输入表格行数："); varcols=prompt("请输入表格列数："); vartableStr="<tablealign='center'>"; varrow=1; //初始化行数 while(_____________){ //行循环 if(row%2==0){ tableStr+="______________";//偶数行 }else{ tableStr+="______________"; //奇数行 } varcol=1; //初始化列数 while(__
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 旅游管理专业产教融合实施方案
- 2024至2030年中国直流X向牵引电磁铁数据监测研究报告
- 2024至2030年中国欧式锤数据监测研究报告
- 2024至2030年中国方形保鲜盒数据监测研究报告
- 2024至2030年中国女士皮靴数据监测研究报告
- 2024至2030年血液透析监控系统项目投资价值分析报告
- 2024至2030年燃煤快装式锅炉项目投资价值分析报告
- 2024至2030年中国凸轮式快速夹钳行业投资前景及策略咨询研究报告
- 一二年级学生“室内手指操”比赛方案
- 2024年配网自动化监控项目评价分析报告
- 校车使用(许可)申请表
- 月度质量例会PPT模板
- 煤矿皮带智能化集控系统PPT教学讲授课件
- 分数乘除法整理复习（课堂PPT）
- 故乡雨正普五线谱(正谱)
- YD_T 3956-2021 电信网和互联网数据安全评估规范_（高清版）
- 2022年物业管理师《物业管理实务》考试题库大全-下（多选题、简答）
- 大班科学活动教案《豆豆家族》含PPT课件
- 压力管道检验员在线考试习题与答案
- 【精品试卷】部编人教版(统编)一年级上册语文第一单元测试卷含答案
- 金属有机化学ppt课件
评论
0/150
提交评论