16第05章 在网页中使用简单的JavaScript

2020年4月18日星期六《网页设计与制作》第五章在网页中使用简单的JavaScript主讲：王兆华JSP动态网页开发技术第5章在网页中使用JavaScript内容提要一．JavaScript简介二．JavaScript编程基础三．JavaScript的事件驱动四．JavaScript的对象五．JavaScript的应用六．重点和难点JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。①一种由Netscape的LiveScript发展而来的面向对象的客户端脚本语言②脚本语言(JavaScript,VBscript等)介于HTML和C,C++,Java,C#等编程语言之间③它的基本结构形式与C、C++、java等编程语言十分类似。④脚本语言是一种解释性的语言，不需要编译，可以直接用，由解释器来负责解释，能直接被浏览器执行，从而产生各种各样的动态效果。JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介1.JavaScript的特点2.JavaScript的运行和编辑环境3.在网页中使用JavaScript的方法JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介1.JavaScript的特点①脚本编写语言②基于对象a)JavaScript是一种基于对象的语言，它能自已创建或运用脚本环境内建对象。③简单性a)JavaScript的基本语法结构与其他面向对象的高级语言类似，但舍弃了许多复杂特性；而且其语法要求不是很严格，方便书写。JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介1.JavaScript的特点④安全性a)JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。⑤动态性a)JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。⑥跨平台a)JavaScript是依赖于浏览器本身，与操作环境无关，只要浏览器支持JavaScript即可正确执行。JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介2.JavaScript的运行和编辑环境①运行环境:a)InternetExplorer4.0或NetscapeNavigator3.0以上②编辑环境a)任何可以编辑HTML文档的文本编辑器或专门的网页编辑器(FrontPage、Dreamweaver等。)JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介3.在网页中使用JavaScript的方法①使用script标记符插入脚本②直接添加脚本③链接脚本文件JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介3.在网页中使用JavaScript的方法①使用script标记符插入脚本a)方法：把脚本标记符script/script置于网页上的head部分或body部分，然后在其中加入脚本程序。b)格式：scriptlanguage=JavaScripttype=text/javascript!--在此编写javascript代码.//--/scripthtmlheadscriptlanguage=JavaScript!--alert(这是第一个JavaScript例子!);//--/script/head/htmlExample5_1JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介3.在网页中使用JavaScript的方法②直接添加脚本a)方法html可以直接在表单的输入元素标记内添加脚本，以响应输入元素的事件。b)例如：inputname=按钮type=buttonvalue=单击试试onClick=JavaScript:alert('你好,欢迎光临!')Example5_2JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介3.在网页中使用JavaScript的方法③链接脚本文件a)方法当同一段脚本在若干个web页中使用，可以将脚本放在单独的一个文件里，然后再在任何需要该文件的web页中调用该文件。引用时，使用script标记符的src属性来指定外部脚本文件的URL。JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介3.在网页中使用JavaScript的方法③链接脚本文件b)步骤编写脚本文件并保存为JavaScript源文件形式编写网页文件，引用脚本文件Hello.jsfunctionshowmsg(){alert(你好，欢迎光临！);}htmlheadtitle链接脚本文件/titlescriptlanguage=javascripttype=text/javascriptsrc=hello.js“/script/headbodyinputname=按钮type=buttononClick=showmsg()value=单击试试/body/htmlExample5_3JSP动态网页开发技术第5章在网页中使用JavaScript一、JavaScript简介3.在网页中使用JavaScript的方法注意:①书写JavaScript时应注意大小写。②在JavaScript中，行尾用换行符作为一行完整代码的终止字符③若需要将几行代码放在一行中，应使用分号将它们分开④在JavaScript中，注释标记为:/**/(多行注释)或//(单行注释)。⑤应将脚本程序包括在html注释符内，以便不支持脚本的浏览器忽略脚本内容。JSP动态网页开发技术第5章在网页中使用JavaScript内容提要一．JavaScript简介二．JavaScript编程基础三．JavaScript的事件驱动四．JavaScript的对象五．JavaScript的应用六．重点和难点JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础1.基本数据类型2.变量3.运算符4.表达式5.语句6.函数JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础1.基本数据类型①数值a)包括整数和浮点数。如:12.98,6e8,2.6e5等。②字符串型a)用“”号或‘’括起来的任意数量的字符，0个字符也可以。如：“123”,”abc123”,”Thisisabook”③布尔型a)True或False④NULL(空)：a)包括一个NULL，定义空的或不存在时引用。⑤Object(对象)：包括各种对象类型a)例如：数组类型，日期对象Data等。JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础2.变量①变量的主要作用是存取数据、提供存放信息的容器。②对于变量必须明确a)变量的命名b)变量的类型c)变量的声明d)变量的作用域JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础2.变量①变量的命名a)必须以字母或下划线(_)开头，变量名称不能有空格、＋、－、，或其它特殊符号。b)不能使用JavaScript中的关键字作为变量。c)在JavaScript中定义了40多个类键字，这些关键是JavaScript内部使用的，不能作为变量的名称。如var、int、double、true不能作为变量的名称。d)在对变量命名时，最好把变量的意义与其代表的意思对应起来，以免出现错误。e)在所说明的范围内必须是唯一的。f)变量名称区分大小写。JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础2.变量②变量的类型a)在JavaScript中，变量的类型由其值的类型来决定。在JavaScript中，变量可以用命令var作声明：如varmytest;如varmytest=”Thisisabook”;b)在JavaScript中，变量可以不作声明，而在使用时再根据数据的类型来确定其变量的类型。如：x=100y=”125”xy=truecost=19.5这里，X为整数，Y为字符串，XY为布尔型，COST为实型。JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础2.变量③变量的声明a)在JavaScript中，变量可以用命令var作声明b)格式:var变量名称1[＝初始值1],变量名称2[＝初始值2]…;c)一个var声明多个变量，其间用“,”分隔。例:varmytest,thesum;//该例子定义了两个变量。但没有赋予值。varmytest=”Thisisabook”//该例子定义了一个mytest变量,同时赋予了它的值。JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础2.变量④变量的作用域a)在JavaScript中有全局变量和局部变量。b)全局变量是定义在所有函数体之外，其作用范围是所有函数；c)局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础3、运算符：是完成操作的一系列符号,也称操作符。(P205)①算术运算符:+、-、*、/、%、++、--②字符串运算符:“+”连接两个字符串③位运算符：&,|,^,-,~,,等④比较运算符:、、=、=、==、!=⑤逻辑运算符:&&、||、!⑥条件运算符：条件？结果1:结果2(若条件为真，则表达式的值为“结果1”，否则为”结果2”)⑦赋值运算符：=，+=，-=等JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础4.表达式①它是变量、常量、布尔及运算符的集合，是运算符和操作数的组合。②表达式可以分为算术表述式、字符串表达式、赋值表达式以及布尔表达式等。Example5_4JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础5.语句①一般语句②条件语句③Switch语句④循环语句JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础5.语句①一般语句a)数据声明语句Var变量名[=初始值]b)赋值语句Month=3c)注释语句//单行注释/*…….*/多行注释JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础5.语句②条件语句a)if语句b)Ifelse语句if(条件式){语句块1；}else{语句块2；}if(条件式){语句块1；}Example5_5Example5_5_2JSP动态网页开发技术第5章在网页中使用JavaScript二、JavaScript编程基础5.语句③switch语句switch(表达式){case测试值1：｛语句块1；｝break；case测试值2：｛语句块2；｝break；……default：{语句块n；}}执行时首先计算表达式的值，再寻找测试值与该值匹配的case支路执行。说明：如果case部分没有break语句，则和C语言一样会执行下一个case语句。因此，如果要控制在每种情况下执行一定的语句，就必须在每一个case部分的执行语句之后加上一个break语句。Example5_6JSP动态网页开发技术第5章在网页中使用JavaScr