搜索
网页编程技术彭丽旅游学院教育科学与技术系E-mail:pengli@scfc.edu第4章使用JavaScript编写网页4.1JavaScript概述4.2JavaScript语法基础4.3JavaScript内置对象和函数4.4JavaScript的事件与事件处理程序第4章使用JavaScript编写网页4.1JavaScript概述Netscape公司为了进一步扩充它的浏览器的功能，开发了一种可以嵌入在Web主页中的编程语言。在早期这种语言叫做LiveScript，后来为了利用Sun公司开发的Java语言的功能并借用它的流行性，把它改名为JavaScript。前身叫做Livescript，是一种基于对象和事情驱动、并有安全性的解释性（就是说，代码执行不进行预编译）脚本语言。通过JavaScript，您可以重构整个HTML文档。我们可以添加、移除、改变或重排页面上的项目。JavaScript是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说InternetExplorer、Mozilla、Firefox、Netscape、和Opera。4.1.1JavaScript的特点1．JavaScript是一种脚本语言2．JavaScript是基于对象的语言3．JavaScript是事件驱动的语言4．JavaScript是安全的语言5．JavaScript是与平台无关的语言第4章使用JavaScript编写网页而基于对象的基本特征，就是采用事件驱动(event-driven)。通常鼠标或热键的动作我们称之为事件（Event），而由鼠标或热键引发的一连串程序的动作，称之为事件驱动（EventDriver）。4.1.2JavaScript的功能JavaScript为HTML设计师提供了一种编程工具JavaScript可以将动态的文本放入HTML页面JavaScript可以对事件作出响应JavaScript可以读写HTML元素JavaScript可被用来验证数据JavaScript可被用来检测访问者的浏览器JavaScript可被用来创建cookies第4章使用JavaScript编写网页4.1.3JavaScript与其他语言的比较1．JavaScript与Java2．JavaScript与VBScript3.javaScript与Jscript第4章使用JavaScript编写网页4.1.3JavaScript与其他语言的比较1、Javascript和java是两个公司开发的两个不同产品，作用和用途不一样，但两者语法上有很多相似之处，javascript并不是java的子集。在概念和设计方面，Java和JavaScript是两种完全不同的语言。Java（由太阳微系统公司开发）很强大，同时也是更复杂的编程语言，就像同级别的C和C++。第4章使用JavaScript编写网页4.1.3JavaScript与其他语言的比较3、Javascript和Jscript最开始web上只有静态的html,为了满足更好的交互需求，netscape开发了在Navigator中使用的LiveScript语言，后改名为JavaScript,Microsoft发行jscript用于internetexplorer。最初的jscript和javascript差异过大，web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,它是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。我们写程序的时候最好写scriptlanguage=javascript而不是scriptlanguage=jscript，因为javascript是一个通用的名称，所有浏览器都认识，而jscript只有IE认识。第4章使用JavaScript编写网页4.1.4JavaScript与HTML为了运用JavaScript控制HTML页面上的对象，JavaScript的代码必须与HTML代码结合在一起。将JavaScript嵌入HTML页面时，必须使用＜SCRIPT＞标签，该标签使用形式如下：SCRIPTLANGUAGE=JavaScript//JavaScript代码/SCRIPT标签SCRIPT通知浏览器，有脚本嵌入到标签中。htmlbodyscriptlanguage=javascript//scripttype=text/javascriptdocument.write(HelloWorld!);/script/body/html上面的代码会在HTML页面中产生这样的输出：HelloWorld!4.1.5JavaScript在HTML中的位置一般在head部分放JavaScript用到的函数的定义，在body部分调用执行。实例head部分包含函数的脚本位于文档的head部分。这样我们就可以确保在调用函数前，脚本已经载入了。body部分执行位于body部分的脚本。外部JavaScript如何访问外部脚本。注意：外部文件的js不能包含script标签。然后把.js文件指定给script标签中的“src”属性，就可以使用这个外部文件了。第4章使用JavaScript编写网页4.2JavaScript语法基础JavaScript是一种易学易用的脚本语言，目的是面向与用户动态交互的脚本开发，扩展HTML页面的功能，而不是开发大型复杂的程序，所以相对而言，JavaScript的语法规则较少而且较为简单。但作为一门编程语言，它有自己的语法规则，自己的关键字、指令和对象。4.2JavaScript语法基础4.2.1Javascrip的保留关键字4.2JavaScript语法基础4.2.2变量1．JavaScript的数据类型变量的定义类型(关键字）说明字符串类型(String)用引号引起的一串字符（“”，‘’）数值类型(int,float,double)整数或者实数布尔类型（boolean）逻辑值，有真或假两种（true,false)空类型（null）代表一个空值对象类型（Object）代表JavaScript中的一些对象未定义数据类型(unDefined)如果对象属性不存在,声明了变量但从未赋值,将返回undefined4.2JavaScript语法基础2．变量的定义JavaScript中采用弱类型变量，变量可以不做声明和不做类型说明，而在使用或赋值时确定类型。但为了形成良好的编程风格，变量应该采取先定义再使用的方法。JavaScript中变量的定义用关键字var来实现。例如，定义一个名为id的变量：SCRIPTLANGUAGE=JavaScriptvarid;varx=5;varcarname=Volvo;y=“hello”;//如果您所赋值的变量还未进行过声明，该变量会自动声明。/SCRIPT4.2JavaScript语法基础3．变量的命名变量的命名要遵循如下的规则：（1）变量名不能与保留字冲突。（2）变量名必须以字母或者下划线（_）或者$开头，不能用数字或者其他非字母字符作为变量名开头。（3）变量名中不能包含空格。（4）JavaScript是区分大小写的，所以给变量命名时要考虑大小写的问题。4.2JavaScript语法基础4.2.3表达式与运算符按照运算符的功能可以分为：算术运算符:+,-,*,/,%,++,--,-(取负）逻辑运算符:&&,||,!比较运算符:==，！=，,,=,=赋值运算符:=，+=，-=，*=，/=，%=条件运算符：？：字符串连接运算符：+4.2JavaScript语法基础1.算术运算符:+,-,*,/,%,++,--,-(取负)例如:设X=6,则Y=++X:Y的值是Y=X++:Y的值是X=--X:X的值是X=X--:Y的值是76564.2JavaScript语法基础2.逻辑运算符:&&,||,!(1)”&&”:当表达式两边的逻辑值都是true时结果为true,否则结果为false。例如：21&&54，结果为true21&&54,结果为false（2）“||”:当表达式两边的逻辑值任意一个是true时结果为true,当表达式两边的逻辑值都为false时，结果为false。例如：21||54,其结果为true21|54,其结果也为true（3）”！“：当表达式的逻辑值为true时返回结果false,当表达式的逻辑值为false时返回结果true。例如：！(21)结果为false。4.2JavaScript语法基础3.比较运算符:==，===，！=，,,=,=；x==“5”为true4.2JavaScript语法基础4.赋值运算符:=，+=，-=，*=，/=，%=（1）“+=”：表示左、右两边数相加，结果赋给左边变量。例如：X=5，Y=5，X+=Y将10赋给了X。（2）“-=”：表示左、右两边数相减，结果赋给左边变量。例如：X=5，Y=5，X-=Y将0赋给了X。（3）“*=”：表示左、右两边数相乘，结果赋给左边变量。例如：X=5，Y=5，X*=Y将25赋给了X。（4）“/=”：表示右边数除左边数，结果赋给左边变量。例如：X=5，Y=5，X/=Y将1赋给了X。（5）“%=”：表示右边数除左边数，余数赋给左边变量。例如：X=25，Y=7，X%=Y将4赋给了X。4.2JavaScript语法基础5.条件运算符：？：（1）表达式结构如下：（条件）？结果1：结果2（2）运算过程是：首先计算条件（逻辑表达式或比较表达式）的值，值为true表达式的值为结果1，值为false表达式的值为结果2。例如：（day==“星期六”）？“今天是周末”：“今天不是周末”4.2JavaScript语法基础6.字符串连接运算符：+字符串运算符只有一个合并运算符“+”，表示两个字符串的合并，例如：‘abc’+“您好！”，这个表达式的值为“abc您好！”。注意：如果把数字与字符串相加，结果将成为字符串scripttype=text/javascriptx=5+5;document.write(x);//10document.write(br/);x=5+5;document.write(x);//55document.write(br/);/script4.2JavaScript语法基础7.运算符优先级优先级从高到低顺序为：（1）乘、除、模（*、/、%）。（2）加、减（+、-）。（3）比较（、、=、=、==、!=、===)。（4）逻辑与（&&)。（5）逻辑或（||)。（6）条件(?:)。例如：(4*5+1822)?”对”:”错“的值为什么？错4.2JavaScript语法基础8.一个完整的程序htmlheadscriptlanguage=“JavaScript”varquestion=10+20是多少?;varanswer=30;varx1=计算正确;varx2=计算错误;varx5=prompt(question,0);varoutput=(x5==answer)?x1:x2;/script/headbodyscriptlanguage=JavaScriptdocument.write(output);/script/body/html程序效果演示4.2JavaScript语法基础4.2.4基本语句1．条件语句（1）if语句格式：if(表达式){语句块;}（2）if-else语句if(表达式){语句块1;}else{语句块2;}例如：根据当前时间判断是白天还是夜晚htmlscriptlanguage=javascriptvarmess1=;document.write(centerfontcolor='#0000FF'size=4b);day=newDate();hr=day.getHours();if((hr