【文档说明】HTML+CSS+JavaScript网页设计-第11章-JavaScript语法基础.ppt,共(56)页,397.500 KB,由小橙橙上传
转载请保留链接:https://www.ichengzhen.cn/view-2915.html
以下为本文档部分文字说明:
HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第1页第11章JavaScript语法基础本章概述本章的学习目标主要内容HTML+CSS+JavaScript网页设计第11章JavaScript语法基础
第2页本章概述JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。JavaScript同其他语言一样,有其自身的语法、
表达式和运算符及程序的流程控制语句。本章将从JavaScript的发展历程和特点将起,介绍JavaScript的基本语法、运算符、流程控制语句等。通过本章的学习读者应掌握JavaScript的基本语法,能够在HTML页面中使用JavaScript实现简单的操作
。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第3页本章的学习目标了解JavaScript的起源与发展历程掌握在HTML中使用JavaScript的方法掌握常用的D
OM方法和属性理解JavaScript中的变量和数据类型掌握JavaScript中运算符的用法掌握JavaScript中的选择语句掌握JavaScript中的循环语句和跳转语句HTML+CSS+JavaScript网页设计第11章JavaScri
pt语法基础第4页主要内容11.1JavaScript简介11.2文档对象模型11.3变量与数据类型11.4运算符11.5流程控制语句11.6本章小结11.7思考和练习HTML+CSS+JavaScript网页设计第11章J
avaScript语法基础第5页11.1JavaScript简介JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它可以嵌入到HTML中,在客户端执行,是动态特效网页设计的最佳选择,同时也是浏览器普遍支持的网页脚步语言。H
TML+CSS+JavaScript网页设计第11章JavaScript语法基础第6页JavaScript的发展历程在JavaScript出现之前,Web浏览器不过是一种能够显示超文本文档的软件的基本部分。而在JavaScr
ipt出现之后,网页的内容不再局限于枯燥的文本,它们的可交互性得到了显著的改善。JavaScript最初由Netscape的BrendanEich在1995年设计,在Netscape导航者浏览器上首次实现
,其最初的名称为LiveScript,后来因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。HTML+CS
S+JavaScript网页设计第11章JavaScript语法基础第7页JavaScript的发展历程JavaScript1.0获得了巨大的成功,Netscape随后在NetscapeNavigator3浏览器中发布了JavaS
cript1.1。之后作为竞争对手的微软在自家的IE3中加入了名为Jscript(名称不同是为了避免侵权)的JavaScript实现。而此时市面上有3个不同的JavaScript版本:IE的JScript、Netscape的JavaS
cript和ScriptEase中的CEnvi。当时还没有标准规定JavaScript的语法和特性。随着版本不同暴露的问题日益加剧,JavaScript的规范化最终被提上日程。HTML+CSS+JavaScript网页设计
第11章JavaScript语法基础第8页JavaScript的发展历程1997年,以JavaScript1.1为蓝本的建议被提交给了欧洲计算机制造商协会(ECMA,EuropeanComputerManufacture
sAssociation),该协会指定39号技术委员会(TC39)负责将其进行标准化,由来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出了ECMA-262,定义了一种名为ECMAScript
的新脚本语言的标准。第二年,ISO/IEC(国标标准化组织和国际电工委员会)也采用了ECMAScript作为标准(即ISO/IEC-16262)。从此,Web浏览器就开始努力将ECMAScript作为JavaScript实现的基础。1998年6月,ECMAScript2.
0版发布。1999年12月,ECMAScript3.0版发布,成为JavaScript的通行标准2000年,ECMAScript4.0开始酝酿。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第9页JavaScrip
t的发展历程随后的几年,ECMAScript相继推出了ECMAScript5.0和ECMAScript5.1,到2015年6月,ECMAScript6(ES6)正式通过,成为国际标准,正式名称是“ECMAScript2015”(简称
ES2015)。2016年6月,小幅修订的“ECMAScript2016”(简称ES2016或ES7)标准发布,相当于ES6.1版,因为两者的差异非常小。目前,各大浏览器的最新版本,都支持ES6。HTML+CSS
+JavaScript网页设计第11章JavaScript语法基础第10页JavaScript的发展历程完整的JavaScript实现包含3个部分:ECMAScript,文档对象模型(DOM),浏览器对象模型(BOM)。►ECMAScript是核心,提供核心
语言功能。►文档对象模型,提供访问和操作网页内容的方法和接口。►浏览器对象模型,提供与浏览器交互的方法和接口。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第11页Ja
vaScript的特点JavaScript是一种属于网络的解释性脚本语言,主要用来向HTML页面添加交互行为。在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。(1)脚本语言。(2)基于对象。(3)简单。(4)动
态性。(5)跨平台性。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第12页在HTML中使用JavaScriptJavaScript程序本身不能独立运行,它依附于某个HTML页面,在浏览器端解释执行。JavaScr
ipt可以直接放在HTML页面中,也可以向css那样独立成一个外部文件,然后在HTML页面中使用标签引入外部JavaScript文件。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第13页使用<sc
ript>标签在HTML中输入JavaScript时,需要使用<script>标签,然后通过type属性指定脚本的MIME类型,对于JavaScript,其MIME类型是"text/javascript"。►<scriptt
ype="text/javascript">►document.write("在<head>标签内的脚本输出的内容!")►</script>HTML+CSS+JavaScript网页设计第11章JavaScript
语法基础使用外部JavaScript虽然可以直接将脚本代码写在HTML页面中,但在大型项目开发中,很少这样做,因为这样做,对于页面性能及可维护性都比较差。更好的做法是将JavaScript代码写在文件扩展名为.js的
外部文档中,就像编写外部样式表文件那样,然后在需要使用这些脚本的HTML页面中通过<script>的src属性链接外部文件。在运行时,整个外部.js文件的代码全部嵌入到包含它的页面内,页面程序可以自由使用。第14页HTML+CSS+JavaScr
ipt网页设计第11章JavaScript语法基础使用外部JavaScript使用外部JavaScript文件有如下好处:►实现代码的复用。如果脚本用于多于一个页面,就不需要在每个使用该脚本的页面中重复其内容。►易于修改和维护。如果需要更新脚本,则只需要修改一处内容结构清晰。它使HTM
L页面更加整洁且更易读。在.js文件中,不需要<script>标签,所以,只需将<script>标签对中的代码移入一个独立的文件,并将其保存为扩展名为.js的文件(如main.js)即可。在需要引用该
js文件的HTML页面中使用类似下面的<script>元素即可:►<scripttype="text/javascript"src="scripts/main.js"></script>第15页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础添
加到事件中除了以上两种使用JavaScript代码的方法以外,对于简单的脚本还可以直接写在事件处理中,例如,下面是一个“打开”按钮,在按钮的OnClick事件中,直接添加JavaScript代码,以弹出窗口的形式打开11-1.html页面:►<inputt
ype="button"value="打开"►onClick="window.open('11-1.html','big','height=200,width=400,menubar=no')"第16页HTML+CSS+JavaScript网页设计第11章JavaScript语法基
础第17页主要内容11.1JavaScript简介11.2文档对象模型11.3变量与数据类型11.4运算符11.5流程控制语句11.6本章小结11.7思考和练习HTML+CSS+JavaScript网页设计第11章JavaScr
ipt语法基础11.2文档对象模型DOM使用一系列对象表示浏览器载入的网页。其中的主对象是document对象,在【例11-1】中我们就使用的是document对象的write方法。DOM解释了脚本可以从一个文档中获取哪些属性,以及哪些属性可以修改。它还定义了一些方法,用于在调用时在
文档中执行某种动作。第18页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础使用点符号访问值为了访问在JavaScript中遇到的不同对象的属性和方法,需要依次列出对象、方法或属性。每个对象、属性或方法应使用
一个句点或完全停止符进行分隔。因此,这被称为点符号。例如,要访问<body>元素中的CSS类名,可以使用下面的代码:►document.body.className该语句具有3个使用句点分隔的部分以得到CSS的类名:►document指明正在访问document对象
。►body对应了HTML页面中的<body>元素。►className指定需要访问附加在body上的任何CSS类。第19页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础常用的DOM方法HTMLDOM定义了所有HTML元
素的对象和属性,以及访问它们的方法。常用的HTMLDOM方法►getElementById(id):获取带有指定id的节点(元素)。►getElementsByClassName(className):获取文档中所有指定类名的元素集合,作为NodeList对象。►getEleme
ntsByName(name):获取带有指定名称的对象集合。►appendChild(node):插入新的子节点(元素)。►removeChild(node):删除子节点(元素)。第20页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础常用的
HTMLDOM属性属性是能够获取或设置的元素的值,常用的属性如下:►innerHTML:节点的文本值,即HTML元素的内容。►nodeName:节点的名称。元素节点的nodeName就是标签名;属性节点的nodeName是属性名。►nodeValue:
节点的值。元素节点的nodeValue是undefined或null;文本节点的nodeValue是文本本身;属性节点的nodeValue是属性值。►parentNode:节点的父节点。►childNodes:节点的子节点。►attributes:节点的属性节
点。第21页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第22页主要内容11.1JavaScript简介11.2文档对象模型11.3变量与数据类型11.4运算符11.5流程控制语句11.6本
章小结11.7思考和练习HTML+CSS+JavaScript网页设计第11章JavaScript语法基础11.3变量与数据类型变量是存储信息的容器。在【例11-2】中的addOption()中,我们就使用了变量x来存储使用getElementById()方法得到的节点对象,然后就可以使用x
来对该节点进行操作了。第23页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第24页关键字在JavaScript中,有多种关键字在起作用,如break、for、if以及while,所有这些都有特殊含义。因此,这些单词不应该作为变量、函数、方法,或对象的名称
使用。abstractbooleanbreakbytecasecatchcharclassconstcontinuedefaultdodoubleelseextendsfalsefinalfinallyfloa
tforfunctiongotoifimplementsimportininstanceofintinterfacelongnativenewnullpackageprivateprotectedpubli
creturnshortstaticsuperswitchsynchronizedthisthrowthrowstransientTruetryvarvoidwhilewithHTML+CSS+JavaScript网页设计第11章JavaSc
ript语法基础第25页变量变量的名称需要遵循以下规则:►变量必须以字母、$或下划线(_)开头。►变量名称是区分大小写的。但是不建议使用不同的大小写形式区分两个变量(例如username与UserName),因为这样很容易混淆,出现错误。►变量名不能是JavaScript关键字。►尽量使
用描述性名称定义变量。这样做将使代码更易于维护和阅读。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第26页变量在JavaScript中,可以通过var语句来声明变量,例如:►v
arx;►varcarname;变量声明结尾处的分号,表示一个语句的结束。在以上声明之后,变量并没有值,也可以在声明它们时向变量赋值,例如:►varx=5;►varcarname="Volvo";HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第27页变量
当在函数中声明一个变量时,它仅能够在该函数中被访问(下一章将介绍函数)。在函数执行过后,则无法再访问该变量。函数中的变量被称为局部变量。因为局部变量仅在函数内部工作,所以可以在不同函数中声明名称相同的变量(因为每个变量仅在所在函数内部能够识别)。在函数内声明的变量,仅在函数被调用时使用内
存,并且在函数运行完成后不再占用任何内存。在所有函数之外声明的变量,称为全局变量,因为它对于页面中的全部脚本全局可用,页面中的所有函数都可以访问它。这类变量的生命周期从变量声明开始,至页面关闭结束。HTML+CS
S+JavaScript网页设计第11章JavaScript语法基础第28页数据类型JavaScript中包含以下3种简单的数据类型。►数字类型:被用于进行算术操作(加法、减法、乘法以及除法)。任何不在引
号之间的整数或小数都将作为数字对待。►字符串类型:用于处理文本。它是一个字符的集合(包括数字、空格,以及标点符号),包含在两个引号之间。►布尔类型:布尔值只有两种可能的取值——true和false。此类数据主要用来进行逻辑操作,并检查某项事物
为真或假。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第29页数据类型除此之外,还有另外两种特殊的数据类型。►空类型:指明该值不存在。使用关键字null表示。它明确声明未
赋予任何值。►未定义类型:即该值在之前的代码中没有定义,使用关键字undefined表示。前面提到过,如果声明一个变量但不为其赋值,则该变量就被认为是未定义的。以上5种类型都是基本数据类型,JavaScript还有3大引用数据类型:对象、数组和函数。这些将在第12章中详细介绍。HTML
+CSS+JavaScript网页设计第11章JavaScript语法基础第30页主要内容11.1JavaScript简介11.2文档对象模型11.3变量与数据类型11.4运算符11.5流程控制语句11.6本章小结11.7思考和练习
HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第31页11.4运算符运算符也叫操作符,是在表达式中用于对一个值进行某些操作的关键字或符号。例如,算术运算符“+”会将两个值相加。JavaScript的运算符包括
算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符和字符串运算符。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第32页算术运算符算术运算符对操作数进行数学运算操作需要说明的是自
增和自减运算符有两种形式:一种是操作数在前(如x++),一种是操作数在后(如++x)。这两种写法的区别是,操作数在前先引用变量的值,然后再进行自增或自减操作;操作数在后,则是先进行自增或自减操作,然后再引用变量的值(此时变量的值已经是自增或自减操作
后的新值)。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第33页赋值运算符前面的示例中,我们曾使用过基本的赋值运算符等号,它的作用是将值赋予等号左侧的变量。►除了等号以为,还可以与前
面的简单算术运算符相结合,从而允许将值赋予某个变量,并且同时进行某些操作。例如,下面的语句,其中带有一个赋值运算符和一个算术运算符:►total=total-profit;此语句可被精简为以下形式:►total-=profit;这里的-=就是一个符合赋值运算符,类似的还
有+=、*=、/=和%=,其含义和用法都类似。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第34页比较运算符比较运算符是比较两个操作数的大小的运算符,根据比较结果
返回true或false。当进行比较的两个操作数是不同数据类型时,JavaScript会自动进行类型转换,因此“1=="1"”的比较结果是true,因为JavaScript会首先将字符串"1"转换为数字1,类似地1==true的比较结果也是true,因为true转换为数字也
是1。如果我们需要对操作数的类型和值都进行比较,希望上面这种情况的比较结果是false,可以使用另一种检测相等性的方法,即恒等比较操作符“===”(3个等号)。恒等操作符对类型与值都进行检测,而且不进行任何类型转换。下面的比较
结果为false:►1===“1”1===trueHTML+CSS+JavaScript网页设计第11章JavaScript语法基础第35页逻辑运算符逻辑运算符用来比较两个布尔值,返回结果也是一个布尔值。操作符
描述示例(其中x=1且y=2)&&与,只有两个条件都是true时才返回true(x<2&&y>1)返回true(x<2&&y1)返回false||或,两个条件中只要有一个为ture,结果就为true(x<2||y<1)返回true
(x>2||y<1)返回false!非,只有一个操作数,结果与原操作数相反!(x<y)返回false!(x==y)返回trueHTML+CSS+JavaScript网页设计第11章JavaScript语法基础第36页条件运算符条件运算符是一个比较特殊的运算符,它需要3个操作数,语法格式如下;►(
condition)?value1:value2其中,第1个操作数condition是一个布尔指或一个返回布尔值的表达式,如果其值为ture,则条件表达式的结果为value1,否则结果为value2。例如,下面的语句用来判断某年是否为闰年:►val=(year%4==0&&
year%100!=0||year%400==0)?"闰年":"平年";HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第37页字符串运算符字符串运算符是指使用“+”运算符将两个字符串连接为
一个。例如,下面的语句:►varfirstName="赵";►varlastName="一凡";►name=firstName+lastName;变量name的值为“赵一凡”。还可以使用前面的比较运算符比较两个字符串。例如,在提交表单时,可以检查用户是否向文本框中输入了
某个特定值。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第38页主要内容11.1JavaScript简介11.2文档对象模型11.3变量与数据类型11.4运算符11.5流程控制语句11.6本章小结1
1.7思考和练习HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第39页11.5流程控制语句JavaScript提高了多种用于程序流程控制的语句,这些语句可以分为选择、循
环和跳转等类型。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第40页选择语句选择语句也叫条件语句,用于基于不同的条件来执行不同的动作。在JavaScript中,可使用以下条件语句:►if语句:用于当某个条件为真时,就执行一段脚本的情况。►if
...else语句:当条件为true时执行一操作,当条件为false时,执行另一块语句。►if...elseif....else语句:用于多个条件分支的选择。►switch语句:用于多个条件分支的选择。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第41页if
语句if语句允许代码在某个特定条件成立时得到执行。如果条件为真,则花括号中的代码段被执行。语法格式如下:►if(condition){►//这里是要执行的代码块►}HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第42页if…else语句
当希望某个条件成立和不成立时执行不同的操作,可以使用if…else语句。它的功能是:如果指定的条件成立,则运行第一个代码块,否则运行第二个代码块。语法格式如下:►if(condition){►//条件
为true时执行►}►else{►//条件为false时执行►}HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第43页if....elseif...else语句if....elseif...else语句用来从多个条件中选择
一个来执行,语法格式如下:►if(condition1){►当条件1为true时执行►}►elseif(condition2){►当条件2为true时执行►}►…►elseif(conditionN){►当条件N为true时执行►}►else{►当所
有都不为true时执行►}HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第44页switch语句switch语句也是多条件选择结构,它需要一个表达式或是变量,根据表达式的取值情况,与后面的case分支进行比较。如果有匹
配的值,则开始执行相应的代码块;如果所有case分支都不匹配,则执行default分支。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第45页switch语句switch(expression){caseoption1:/
/与option1匹配时执行break;caseoption2://与option2匹配时执行break;caseoption3://与option3匹配时执行break;…default://所有分支都不匹配时执行}
HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第46页循环语句循环语句用于按指定的次数执行相同的操作,JavaScript支持如下几种类型的循环:►while:只要指定的条件为真,就循环执行指定的代码块。►do…while:与while循环不同,
该循环会先执行一次循环结构,再检查条件是否为真。如果条件为真,则继续执行直到条件为假,否则退出循环。►for:通常用来指定循环次数的循环。►for/in:用来循环遍历对象的属性。HTML+CSS+Ja
vaScript网页设计第11章JavaScript语法基础第47页while循环在while循环中,只要条件保持为真,就会重复执行一段代码块。语法格式如下:►while(condition){►//循环代码块►}
循环条件condition通常是一个条件表达式,当表达式的值为true时,开始执行循环代码块,在循环代码块中通常会修改循环变量的值,执行完循环代码块后,会再次判断循环条件,如果条件为真,则继续执行循环
代码块,直至循环条件为false,退出循环结构。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第48页do…while在while循环中,如果条件表达式一开始就为false,则循
环可能一次也不执行。而do…while循环先执行一次代码块,然后才检查条件。只要条件保持为真,循环就会继续执行。因此,无论条件如何,循环都将至少执行一次,这是while循环和do…while循环的重要区别。HTML+CSS+JavaScript网页设计第
11章JavaScript语法基础第49页for循环for循环是用的最多的一种循环结构,它常用在已知循环次数的情况下。for循环的语法格式如下:►for(语句1;语句2;语句3){►循环代码块►}for语句的写法非常灵活,语句1、语句2和语句3都是可选
的,但是括号内的两个分号是必须的HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第50页for循环for(vari=1,sum=0;i<101;){sum+=i++;}或者vari=1,sum
=0;for(;;){if(i>100)break;sum+=i++;}这里的break语句用来跳出循环。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第51页for/i
n在JavaScript中,for/in语句用来遍历对象的属性。例如,下面的代码:►varx,txt="";►varperson={fname:"赵",lname:"艳铎",age:38};►for(xinperso
n){►txt=txt+person[x];►}执行后,txt的值为“赵艳铎38”HTML+CSS+JavaScript网页设计第11章JavaScript语法基础跳转语句跳转语句包括break和continue两个语句。break语句在前面已经使用过,它可以用来跳出swit
ch结构和循环结构。本节主要介绍continue语句。continue语句只能用于循环结构,用来跳过本次循环中continue后面的语句。例如,下面的循环用来计算1~100之间所有偶数的和:►for(vari=1,sum=0;i<101;i++){►if(i%2==1)►continue;►
sum+=i;►}第52页HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第53页主要内容11.1JavaScript简介11.2文档对象模型11.3变量与数据类型11.4运算符11.5流程控制语句11.6本章小结11.7
思考和练习HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第54页11.6本章小结本章主要介绍了JavaScript的基本语法,包括JavaScript的发展历程及其特点、在HTML中使用JavaScript的方法、
使用DOM访问和操作HTML元素、变量和数据类型、JavaScript运算符以及流程控制语句。首先介绍的是JavaScript的发展历程及其特点,以及如何在HTML中使用JavaScript;然后讲述了
文档对象模型DOM,包括常用的DOM方法、属性,以及使用DOM修改HTML元素;接着介绍了JavaScript的变量和数据类型,以及常用的运算符,包括算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符和字符串运算符;最
后讲述了流程控制语句,包括选择语句、循环语句和跳转语句。本章内容是JavaScript的基础知识,下一章继续学习JavaScript的更多语法和技巧。HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第55页主要内容11.1JavaScript简介11.
2文档对象模型11.3变量与数据类型11.4运算符11.5流程控制语句11.6本章小结11.7思考和练习HTML+CSS+JavaScript网页设计第11章JavaScript语法基础第56页11.7思考和练习1
.完整的JavaScript实现包含3个部分:ECMAScript,,浏览器对象模型(BOM)。2.在HTML中输入JavaScript时,需要使用标签。3.获取带有指定id的节点(元素)的DOM方法是。4.下面四个变量声明语句中,哪一个变量的命名
是正确的?()A.vardefaultB.varmy_bouseC.varmydogD.var2cats。5.下面哪一个不是JavaScript运算符?()A.=B.==C.&&D.$#6.表达式123%7的计算结果是()A.2B.3C
.4D.5