《（本科）第7章 JavaScript编程基础知识ppt课件.pptx》由会员分享，可在线阅读，更多相关《（本科）第7章 JavaScript编程基础知识ppt课件.pptx（86页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、课程主讲人：第7章 JavaScript编程基础知识第 7 章 JavaScript编程基础知识JavaScript语法JavaScript调试初识JavaScriptJavaScript基础案例HTML 学习目标了解什么是JavaScript，掌握JavaScript的特点和引入方式12掌握JavaScript基本语法，能够编写简单的JavaScript程序掌握JavaScript中变量的声明，语句、运算符和表达式3了解掌握掌握掌握掌握调试程序的知识和技巧4本章将对JavaScript的基础知识做详细讲解。无论使用HTML和CSS制作的网页多么漂亮，最多实现的也只是一些小的动画效果，如果想要
2、网页实现真正的动态交互效果（例如焦点图切换、下拉菜单等），还需要使用JavaScript技术。章节概要 目录7.17.1初识JavaScript7.27.2JavaScript语法基础7.37.3在浏览器中调试JavaScript程序 知识架构7.1 初识JavaScriptJavaScript介绍引入JavaScript的方式案例 7-17.1 初识JavaScript什么是什么是JavaScript？说起JavaScript其实大家并不陌生，在我们浏览的网页中或多或少都有JavaScript的影子。7.1.1 JavaScript介绍知识点概述在设计之初，JavaScript是一种可以嵌入
3、到网页中的脚本语言，它的主要作用是在Web上创建网页特效。使用JavaScript脚本语言实现的动态应用，在网页上随处可见。例如1.验证用户输入的内容7.1.1 JavaScript介绍知识点概述在设计之初，JavaScript是一种可以嵌入到网页中的脚本语言，它的主要作用是在Web上创建网页特效。使用JavaScript脚本语言实现的动态应用，在网页上随处可见。例如2.网页动态效果7.1.1 JavaScript介绍知识点概述在设计之初，JavaScript是一种可以嵌入到网页中的脚本语言，它的主要作用是在Web上创建网页特效。使用JavaScript脚本语言实现的动态应用，在网页上随处可见
4、。例如3.窗口的应用7.1.1 JavaScript介绍知识点概述在设计之初，JavaScript是一种可以嵌入到网页中的脚本语言，它的主要作用是在Web上创建网页特效。使用JavaScript脚本语言实现的动态应用，在网页上随处可见。例如4.文字特效7.1.1 JavaScript介绍跳动的文字7.1.1 JavaScript介绍1、JavaScript的起源美国人Brendan Eich（布兰登艾奇）被称为“JavaScript之父”Netscape（网景）公司在1995年为新版本浏览器增加了脚本功能，该脚本被命名为“LiveScript”。LiveScriptJavaScriptNets
5、cape与Sun公司合作之后将其改名为JavaScript。7.1.1 JavaScript介绍1、JavaScript的起源7.1.1 JavaScript介绍1、JavaScript的起源基本语法格式在设计之初，JavaScript是一种可以嵌入到网页中的脚本语言，用来控制浏览器的行为。在今天JavaScript承担了更多的责任，尤其是当Ajax技术兴起之后，网站的用户体验又得到了更大的提升。例如，当人们在百度的搜索框中输入几个字以后，网页会智能感知用户接下来要搜索的内容，出现一个下拉菜单。7.1.1 JavaScript介绍2、JavaScript的主要特点简单性动态性跨平台性安全性Ja
6、vaScript与HTML标识结合在一起，从而方便用户的使用操作。JavaScript可以直接对用户或客户输入做出响应，无须经过Web服务程序。JavaScript既能很好地服务于PC端，也能在移动端承载更多的职责，具有跨平台性。JavaScript是一种较为安全的语言，它不允许访问者对网络文档进行修改和删除,从而有效地防止数据的丢失。1、 行内式行内式是将JavaScript代码作为HTML标签的属性值使用。例如 单击“test”时，弹出一个警告框提示“Happy”。 test 单击网页中的一个按钮时，就会触发按钮的单击事件。7.1.2 引入JavaScript的方式7.1.2 引入Java
7、Script的方式2、 嵌入式在HTML中运用标签及其相关属性可以嵌入JavaScript脚本代码。基本语法格式 / 此处为JavaScript代码在编写JavaScript代码时可以省略type属性。7.1.2 引入JavaScript的方式3、 外链式外链式是将所有的JavaScript代码放在一个或多个以.js为扩展名的外部JavaScript文件中，通过标签将这些JavaScript文件链接到HTML文档中基本语法格式在编写JavaScript代码时可以省略type属性。7.1.2 引入JavaScript的方式外链式的优势1）利于后期修改和维护2）减轻文件体积、加快页面加 载速度7.
8、1.3 案例7-1常用输出语句1、 alert()alert()用于弹出一个警告框，确保用户可以看到某些提示信息。利用alert()可以很方便的输出一个结果，因此alert()经常用于测试程序。声明变量基本语法格式 window.alert(提示信息); alert(提示信息);或7.1.3 案例7-1常用输出语句2、 console.log()console.log()用于在浏览器的控制台中输出内容。例如：在网页脚本中使用console.log（Hello World）7.1.3 案例7-1常用输出语句3、 document.write()document.write()用于在页面中输出内容
9、。例如：在网页脚本中使用document.write(这是加粗文本);7.1.3 案例7-1需要注意的是，运用document.write()时，如果输出的内容中包含JavaScript结束标签，会导致代码提前结束。需要添加”解决document.write(alert(123););【示例】document.write(alert(123););7.1.3 案例7-1简单的JavaScript页面该程序包含“警告框”和“页面文字”两部分。当单击图中的“确定”按钮后，警告框消失，显示后面的网页文字。JavaScript代码是逐行执行的，遇到了错误代码将停止执行。所以，即使错误代码后面的代码是正
10、确的也无法执行。这就需要用到后面的调试代码的技巧纠正程序错误。 知识架构7.2JavaScript语法基础7.2.1常量与变量7.2.2基本数据类型7.2.3数据类型的转换与检测7.2.4表达式与运算符7.2.5语句7.2.6函数（方法）案例7-27.2.7执行顺序大小写敏感结尾分号JavaScript程序按照在HTML文件中出现的顺序逐行执行。如果某些代码（例如函数、全局变量等）需要在整个HTML文件中使用，最好将其放在HTML文件的标签中。某些代码，如函数体内的代码，不会被立即执行，只有当所在的函数被其他程序调用时，该代码才会被执行。注释大小写敏感结尾分号注释7.2 JavaScript语
11、法基础JavaScript严格区分字母大小写。说明在输入关键字、函数名、变量以及其他标识符时，都必须采用正确的大小写形式。例如，变量username与变量userName是两个不同的变量。执行顺序大小写敏感结尾分号注释大小写敏感结尾分号注释执行顺序7.2 JavaScript语法基础7.2 JavaScript语法基础在JavaScript中，每行结尾的分号可有可无。说明JavaScript语言并不要求必须以分号（；）作为语句的结束标签。如果语句的结束处没有分号，JavaScript会自动将该行代码的结尾作为语句的结尾。但是，通常习惯在每行代码的结尾处加上分号，来保证代码的严谨性、准确性。执行
12、顺序大小写敏感结尾分号注释大小写敏感结尾分号注释执行顺序JavaScript中主要包括两种注释：单行注释和多行注释。语法格式 单行注释使用双斜线“/”作为注释标签，将“/”放在一行代码的末尾或者单独一行的开头，它后面的内容就是注释部分。 多行注释可以包含任意行数的注释文本。多行注释是以“/*”标签开始，以“*/”标签结束，中间的所有内容都为注释文本。执行顺序大小写敏感结尾分号注释大小写敏感结尾分号注释执行顺序7.2 JavaScript语法基础7.2 JavaScript语法基础关键字关键字：JavaScript关键字（Reserved Words），是指在JavaScript脚本语言中被事先
13、定义好并赋予特殊含义的单词字符。JavaScript关键字不能作为变量名和函数名使用，否则会使JavaScript在载入过程中出现编译错误。breakcasecatchclassconstcontinuedebuggerdefaultdeletedoelseexportextendsfalsefinallyforfunctionifimportininstanceofnewnullreturnsuperswitchthisthrowtrytruetypeofvarvoidwhilewithyield7.2 JavaScript语法基础保留字保留字：保留字是指语言中定义具有特殊含义的字符，使用者
14、将不能用保留字作为标识符使用。abstractargumentsawaitbytebooleanchardoubleenumevalfinalfloatgotoimplementsintinterfaceletlongnativepackageprivateprotectedpublicshortstaticsynchronizedthrowstransientvolatile 7.2 JavaScript语法基础标识符标识符：在JavaScript中，标识符就和名字作用类似，它的作用是标识某些函数、变量、对象的名字。 一般由字母、数字、下划线组成。不能以数字开头。严格区分大小写。不能使用Ja
15、vaScript中的关键字命名。 要尽量要做到“见其名知其意”。标识符命名规则7.2 JavaScript语法基础常量是指程序运行过程中，始终不变的量。常量的特点是一旦被定义就不能被修改或重新定义。一般在我们学习的数学和物理中会存在很多常量，它们都是一个具体的数值或一个数学表达式。网页设计师 /字符串型常量012345 /数值型常量true /布尔型常量例如常量7.2.1 常量与变量7.2.1 常量与变量多学一招：定义常量const PI = 3.14;const P = 2 * PI * r;【示例】在上面的示例代码中，运用const关键字定义了两个常量“PI”“P”，其中为“PI” 赋值（
16、“=”是一个运算符，表示赋值）“3.14”，为“P”赋值一个表达式“2 * PI * r”。7.2.1 常量与变量变量什么是变量？7.2.1 常量与变量在程序运行期间，随时可能产生一些临时数据，应用程序会将这些数据保存在一些内存单元中。变量就是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。变量7.2.1 常量与变量 思考 如何声明变量？所有的JavaScript变量都由关键字var声明。声明变量基本语法格式 var 变量名;变量例如：var sales;var hits, hot, NEWS;var room_101, room102;var $name, $a
17、ge;7.2.1 常量与变量变量的赋值知识概述可以在声明变量的同时为变量赋值，也可以在声明完成之后，为变量赋值。例如：var unit, room; / 声明变量var unit = 3; / 为变量赋值var room = 1001; / 为变量赋值var fname = Tom, age = 12; / 声明变量的同时赋值隐式声明变量flag = false;/ 声明变量flag并为其赋值falsea = 1, b = 2; / 声明变量a和b并分别为其赋值为1和27.2.1 常量与变量7.2.1 变量l变量是指在程序运行过程中，值可以发生改变的量，可以看作是存储数据的容器。每一个变量都有
18、唯一的名称（标识符），通过名称可以访问其保存的数据。l变量的命名是需要一定的规则的，具体规则如下：（1）必须以字母或者$ 和 _ 符号开头，后面跟字母或数字（3x是非法标识符，$x和_x是合法标识符）。（2）字母大小写敏感（y 和 Y 是不同的标识符）。l变量名不能和保留字（系统自用的标识符）重复l推荐使用：var 变量名称 = 初始值；7.2.2 基本数据类型数值型字符串型布尔型特殊类型字符串型布尔型特殊类型数字（number）是最基本的数据类型。JavaScript和其他程序设计语言（如C和Java）的不同之处在于它并不区分整型数值和浮点型数值。例如：整型数据：var x=123；十六进制
19、：var x=0 x5C；八进制：var x=023；浮点型数据（即小数）：var x=3.11；数值型字符串型布尔型特殊类型字符串(string)是由Unicode字符、数字、标点符号等组成的序列，它是JavaScript用来表示文本的数据类型。例如：var name=myname“;var name2=You can call meTom!数值型字符串型布尔型特殊类型7.2.2 基本数据类型数值型字符串型布尔型特殊类型数值型数据类型和字符串型数据类型的值有无穷多个，但布尔型数据类型只有两个值，分别由“true”和“false”表示。数值型字符串型布尔型特殊类型例如：var zhen=tru
20、e;var jia=false;JavaScript的ifelse语句就是在布尔值为true时执行一个动作，而在布尔值为false时执行另一个动作。7.2.2 基本数据类型数值型字符串型布尔型特殊类型数值型字符串型布尔型特殊类型空值（null）空型（null）用于表示一个不存在的或无效的对象与地址，它的取值只有一个null。并且由于JavaScript对大小写字母书写要求严格，因此变量的值只有是小写的null时才表示空型。7.2.2 基本数据类型数值型字符串型布尔型特殊类型数值型字符串型布尔型未定义值未定义型（Undefined）用于声明的变量还未被初始化时，变量的默认值为undefined。
21、与null不同的是，undefined表示没有为变量设置值，而null则表示变量（对象或地址）不存在或无效。7.2.2 基本数据类型7.2.3 数据类型之间的转换与检测1.Typeof2.String()3.Number()4.Boolean()不同的数据类型之间原则上是不能一起参与运算的，建议显式进行数据类型转换，确保表达式中的数据类型一致。7.2.4 表达式与运算符1、 算术运算JavaScript支持加（+）减（-）乘（*）除（/）求余（%）四则运算例如：alert(220 + 230);/ 输出结果：450alert(2 * 3 + 25 / 5 - 1);/ 输出结果：10alert
22、(2 * (3 + 25) / 5 - 1); / 输出结果：10.2先乘除后加减小括号（）优先7.2.4 表达式与运算符2、 比较大小JavaScript支持、=、= =（等于）、！=（不等于）等比较符号（比较运算符），通过比较运算符号可以比较两个数字的大小例如：alert(22 33);/ 输出结果：falsealert(22 33);/ 输出结果：truealert(22 ！= 33);/ 输出结果：truealert(22 = 22);/ 输出结果：true表示算式不成立表示算式成立7.2.4 表达式与运算符3、 赋值赋值需要使用赋值运算符，最基本的赋值运算符是等于号“=”。其他运算符
23、可以和赋值运算符“=”联合使用，构成组合赋值运算符赋值运算符赋值运算符描述描述=将右边表达式的值赋给左边的变量。例如，username=“name”+ =将运算符左边的变量加上右边表达式的值赋给左边的变量。例如，a+=b，相当于a=a+b- =将运算符左边的变量减去右边表达式的值赋给左边的变量。例如，a-=b，相当于a=a-b7.2.4 表达式与运算符4、 使用字符串保存数据在JavaScript中，使用单引号或双引号包裹的数据是字符串，当需要在警告框中输出“Hello”时，为了在代码中保存“Hello”这个数据，就需要用到字符串这种数据类型。例如：alert(Hello);/ 单引号字符串a
24、lert(Hello); / 双引号字符串7.2.4 表达式与运算符5、比较两个字符串是否相同使用“=”运算符可以比较两个字符串是否相同例如：alert(22 = 22);/ 输出结果：truealert(22 = 33);/ 输出结果：false7.2.4 表达式与运算符6、字符串与数字的拼接使用“+”运算符操作两个字符串时，表示字符串拼接例如：alert(220 + 230);/ 输出结果：220230alert(220 + 230 = + 220 + 230);/ 输出结果：220 + 230 = 220230alert(220 + 230 = + (220 + 230);/ 输出结果：
25、220 + 230 = 4507.2.4 表达式与运算符7、使用变量保存数据变量是指在程序运行过程中，值可以发生改变的量，可以看作是存储数据的容器。每一个变量都有唯一的名称，通过名称可以访问其保存的数据。例如：var num1 = 22;/ 使用名称为num1的变量保存数字22var num2 = 33;/ 使用名称为num2的变量保存数字33alert(num1 + num2);/ 输出结果：55alert(num1 - num2);/ 输出结果：-11变量名用于将右边的数据赋值给左边的变量7.2.4 表达式与运算符变量的值可以被修改，两个变量的值可以被交换。例如：num1=22;num2=
26、33;var temp = num1;/ 将变量num1的值赋给变量tempnum1 = num2;/ 将变量num2的值赋给变量num1num2 = temp;/ 将变量temp的值赋给变量num2alert(num1 = + num1 + , num2 = + num2); / 输出结果：num1 = 33, num2 = 22由于直接将num1和num2互相赋值，会导致其中一个变量的值丢失，因此需要使用第3个变量temp临时保存其中一个变量的值,从而实现了两个变量值的互换。7.2.4 运算符与表达式用运算符连接各种类型数据或变量或函数的式子就是表达式例如：3 = 4 /判断3和4相等的结
27、果为false2+3*4 /结果为14x*2+Math.sqrt（y）/结果根据x和y的具体值算出条件语句什么是if条件语句？7.2.5 语句条件语句所谓条件语句就是对语句中不同条件的值进行判断，进而根据不同的条件执行不同的语句。条件语句主要有两类：一类是if判断语句；另一类是switch多分支语句。7.2.5 语句条件语句if语句1.单向判断语句if（执行条件）执行语句 单向判断语句执行流程7.2.5 语句条件语句if语句1.单向判断语句2.双向判断语句if（执行条件）执行语句1 else执行语句27.2.5 语句条件语句if语句1.单向判断语句2.双向判断语句3.多向判断语句if（执行条件
28、1）执行语句1 else if（执行条件2）执行语句2else if（执行条件3）执行语句3.7.2.5 语句条件语句7.2.5 语句1.单向判断语句2.双向判断语句3.多向判断语句switch语句switch (表达式)case 目标值1:执行语句1break;case 目标值2:执行语句2break;case 目标值n:执行语句nbreak;default:执行语句n+1break;语法格式循环语句7.2.5 语句在JavaScript中有一种特殊的语句叫做循环控制语句，它可以实现将一段代码重复执行。循环语句7.2.5 语句While循环语句doWhile循环语句for循环语句doWhil
29、e循环语句for循环语句基本语法格式while(循环条件)循环体语句;循环语句7.2.5 语句While循环语句doWhile循环语句for循环语句doWhile循环语句for循环语句While循环语句基本语法格式do 循环体语句; while(循环条件);循环语句7.2.5 语句While循环语句doWhile循环语句for循环语句doWhile循环语句for循环语句While循环语句基本语法格式for（初始化表达式; 循环条件; 操作表达式）循环体语句;循环语句用表示初始化表达式、表示循环条件、表示操作表达式、表示循环体，通过序号来具体分析for循环的执行流程。for（ ; ; ）第一步，
30、执行第二步，执行，如果判断结果为true，执行第三步，如果判断结果为false，执行第五步第三步，执行第四步，执行，然后重复执行第二步第五步，退出循环7.2.5 语句While循环语句doWhile循环语句for循环语句doWhile循环语句While循环语句跳转语句break语句continue语句continue语句基本语法格式break;7.2.5 语句跳转语句break语句continue语句基本语法格式continue;break语句7.2.5 语句在JavaScript程序中，经常会遇到需要多次重复操作的情况，这时就需要重复书写相同的代码。工作量变大！维护困难！7.2.6 函数（方
31、法）什么是函数？7.2.6 函数（方法）在Javascript程序设计中，为了使代码更为简洁并可以重复使用，通常会将某段实现特定功能的代码定义成一个函数。所谓的函数就是在计算机程序中由多条语句组成的逻辑单元。系统提供的函数叫做内置函数，如大量系统对象的函数（方法）用户也自己设计的函数叫自定义函数7.2.6 函数（方法）认识函数在JavaScript中，函数使用关键字function来定义。定义函数基本语法格式function 函数名 (参数1,参数2,) 函数体function：在声明函数时必须使用的关键字函数名：创建函数的名称，函数名是唯一的。 参数：外界传递给函数的值，它是可选的，当有多个
32、参数时，各参数用“，”分隔。函数体：函数定义的主体，专门用于实现特定的功能。7.2.6 函数（方法）调用函数函数的调用非常简单，只需引用函数名，并传入相应的参数即可。调用函数基本语法格式函数名称(参数1,参数2,)7.2.6 函数（方法）调用函数的参数必须具有确定的值，以便把这些值传送给形参，这类参数被称为“实参”函数中变量的作用域什么是变量的作用域？7.2.6 函数（方法）函数中变量的作用域函数中的变量需要先定义后使用，但这并不意味着定义变量后就可以随时使用。变量需要在它的作用范围内才可以被使用，这个作用范围称为变量的作用域。全局变量定义在所有函数之外，作用于整个程序的变量 。局部变量定义在
33、函数体之内，作用于函数体的变量。7.2.6 函数（方法）求100内的偶数之和 主要思想是定义了一个函数来判断一个整数是否偶数，然后用for循环选择1-100内的偶数累加。7.2.7 案例7-2 知识架构7.3在浏览器中调试程序7.3.1调试模式7.3.2监控变量7.3.1 开发者（调试）模式1. 点击谷歌浏览器右上方的三个点的图标，打开一个命令菜单；2. 找到菜单下方的“更多工具”，点击“更多工具”打开二级菜单；3. 在二级菜单中找到“开发者工具”命令项，点击启动开发者模式。在英文模式下按F12键即可进入开发者模式7.3.1 开发者（调试）模式1. 点击谷歌浏览器右上方的三个点的图标，打开一个命令菜单；2. 找到菜单下方的“更多工具”，点击“更多工具”打开二级菜单；3. 在二级菜单中找到“开发者工具”命令项，点击启动开发者模式。在英文模式下按F12键即可进入开发者模式7.3.2 监控变量点击“Source“调出源代码调试窗口，单击”Watch“展开，再单击”+“符号添加需要监控的变量。7.3.2 监控变量设置断点、添加两个观察变量i和sum7.3.2 监控变量点击带箭头弧形图标，步步执行程序，观察变量。7.3.2 监控变量找出错误原因，修改代码；结束调试var sum=0,i=1;while (i =10) sum += i; i+;alert(sum);