网站设计与Web应用开发技术 ch06

网站设计与WebWebWebWeb应用开发技术清华大学出版社2011201120112011年9999月24242424日第6章JavaScript脚本语言教学目标教学重点教学过程第2222页网站设计与WebWebWebWeb应用开发技术清华大学出版社教学目标�理解JavaScriptJavaScriptJavaScriptJavaScript脚本语言的基本概念�掌握JavaScriptJavaScriptJavaScriptJavaScript脚本语言的基本语法�掌握JavaScriptJavaScriptJavaScriptJavaScript的变量、各类控制语句和函数的用法�了解JavaScriptJavaScriptJavaScriptJavaScript内置对象和文档对象模型的基本用法第3333页网站设计与WebWebWebWeb应用开发技术清华大学出版社教学重点�JavaScriptJavaScriptJavaScriptJavaScript脚本语言的基本语法�JavaScriptJavaScriptJavaScriptJavaScript的变量、各类控制语句和函数的用法�JavaScriptJavaScriptJavaScriptJavaScript在网页中的应用第4444页网站设计与WebWebWebWeb应用开发技术清华大学出版社教学过程�JavaScriptJavaScriptJavaScriptJavaScript简介�JavaScriptJavaScriptJavaScriptJavaScript基本语法�对象化编程�JavaScriptJavaScriptJavaScriptJavaScript的浏览器内部对象(DOM)(DOM)(DOM)(DOM)�JavaScriptJavaScriptJavaScriptJavaScript实例第5555页网站设计与WebWebWebWeb应用开发技术清华大学出版社6.1JavaScript6.1JavaScript6.1JavaScript6.1JavaScript简介�JavaScriptJavaScriptJavaScriptJavaScript是由NetscapeNetscapeNetscapeNetscape公司的BrendanBrendanBrendanBrendanEichEichEichEich发明的，最初称为LiveScriptLiveScriptLiveScriptLiveScript�1995199519951995年JavaJavaJavaJava出现后，以JavaJavaJavaJava的设计理念，对LiveScriptLiveScriptLiveScriptLiveScript进行了改写，增加了对JavaJavaJavaJavaAppletAppletAppletApplet的支持，所以改名为JavaScriptJavaScriptJavaScriptJavaScript�JavaScriptJavaScriptJavaScriptJavaScript可增加网页的互动性�简化HTMLHTMLHTMLHTML代码中的重复代码�减少网页下载时间�对提交表单做即时的检查，即时响应用户的操作第6666页网站设计与WebWebWebWeb应用开发技术清华大学出版社6.1JavaScript6.1JavaScript6.1JavaScript6.1JavaScript简介�基于对象))))和事件驱动，并具有较高安全性能的脚本语言，特点如下：�一种脚本语言�基于对象的语言�简单性�安全性�动态性�跨平台性第7777页网站设计与WebWebWebWeb应用开发技术清华大学出版社6.1JavaScript6.1JavaScript6.1JavaScript6.1JavaScript简介�JavaScriptJavaScriptJavaScriptJavaScript不是JavaJavaJavaJava的精简版，区别如下：�JavaJavaJavaJava是面向对象的，而JavaScriptJavaScriptJavaScriptJavaScript是基于对象的�JavaScriptJavaScriptJavaScriptJavaScript是解释执行的，而JavaJavaJavaJava是编译执行�JavaJavaJavaJava采用强变量，JavaScriptJavaScriptJavaScriptJavaScript采用弱变量�两者的代码格式不同�两者嵌入HTMLHTMLHTMLHTML的方式不一样第8888页网站设计与WebWebWebWeb应用开发技术清华大学出版社6.1JavaScript6.1JavaScript6.1JavaScript6.1JavaScript简介�JavaScriptJavaScriptJavaScriptJavaScript在网站开发中具有以下作用：�创建生动的用户界面�数据有效性验证工作�数据查找�JavaScriptJavaScriptJavaScriptJavaScript语言的组成�JavaScriptJavaScriptJavaScriptJavaScript核心语言�JavaScriptJavaScriptJavaScriptJavaScript客户端扩展�JavaScriptJavaScriptJavaScriptJavaScript服务器端扩展第9999页网站设计与WebWebWebWeb应用开发技术清华大学出版社6.1JavaScript6.1JavaScript6.1JavaScript6.1JavaScript简介�将JavaScriptJavaScriptJavaScriptJavaScript引入网页�可直接将代码加入网页�JavaScriptJavaScriptJavaScriptJavaScript可出现在网页中的任意位置，但必须使用标记scriptscriptscriptscript…………/script/script/script/script�““““!!!!—”—”—”—”和““““//--//--//--//--””””的作用，是让不能解析scriptscriptscriptscript标签的浏览器忽略JavaScriptJavaScriptJavaScriptJavaScript代码�第四行前边的双反斜杠““““////////””””是JavaScriptJavaScriptJavaScriptJavaScript里的注释标号scriptscriptscriptscript!--!--!--!--............(JavaScript(JavaScript(JavaScript(JavaScript代码))))............//--//--//--//--/script/script/script/script第10101010页网站设计与WebWebWebWeb应用开发技术清华大学出版社6.1JavaScript6.1JavaScript6.1JavaScript6.1JavaScript简介�将JavaScriptJavaScriptJavaScriptJavaScript引入网页�使用外部文件的方式，将某个....jsjsjsjs文件引入scriptscriptscriptscriptsrcsrcsrcsrc====javascript.jsjavascript.jsjavascript.jsjavascript.js/script/script/script/script�在浏览器中直接调用JavaScriptJavaScriptJavaScriptJavaScript1.1.1.1.浏览器““““地址””””栏输入：javascriptjavascriptjavascriptjavascript:JavaScript:JavaScript:JavaScript:JavaScript语句2.2.2.2.使用链接：aaaahrefhrefhrefhref====javascriptjavascriptjavascriptjavascript:JavaScript:JavaScript:JavaScript:JavaScript语句.../a.../a.../a.../a第11111111页网站设计与WebWebWebWeb应用开发技术清华大学出版社6.1JavaScript6.1JavaScript6.1JavaScript6.1JavaScript简介一个简单的JavaScriptJavaScriptJavaScriptJavaScript实例HTMLHTMLHTMLHTMLHEADTITLEHEADTITLEHEADTITLEHEADTITLE一个简单的实例/TITLE/TITLE/TITLE/TITLE/HEAD/HEAD/HEAD/HEADBODYBODYBODYBODYscriptlanguage=scriptlanguage=scriptlanguage=scriptlanguage=javascriptjavascriptjavascriptjavascriptdocument.writedocument.writedocument.writedocument.write((((一个简单的实例););););/script/script/script/script/BODY/BODY/BODY/BODY/HTML/HTML/HTML/HTML第12121212页网站设计与WebWebWebWeb应用开发技术清华大学出版社6.2JavaScript6.2JavaScript6.2JavaScript6.2JavaScript基本语法�一般语句具有如下格式：语句;;;;�用大括号““““{}{}{}{}””””括起来的一个或多个语句，相当于一个复合语句�允许语句块的嵌套第13131313页网站设计与WebWebWebWeb应用开发技术清华大学出版社6.2JavaScript6.2JavaScript6.2JavaScript6.2JavaScript基本语法�JavaScriptJavaScriptJavaScriptJavaScript的数据类型：数据类型基本数据类型字符串型数值型复合数据类型数组对象复合数据类型NullUndefined整形浮点型布尔型第14141414页网站设计与WebWebWebWeb应用开发技术清华大学出版社6.2JavaScript6.2JavaScript6.2JavaScript6.2JavaScript基本语法�JavaScriptJavaScriptJavaScriptJavaScript的变量名称符合：只包含字母、数字和////或下划线；必须以字母开头；不能太长；不能与JavaScriptJavaScriptJavaScriptJavaScript保留字重复�变量是区分大小写的�变量名及函数名一般用小写，多个单词中除首单词外其余单词首字母大写�声明变量的方式：varvarvarvar变量[=[=[=[=值];];];];�变量的作用域及赋值方法第15151515页网站设计与WebWebWebWeb应用开发技术清华大学出版社�赋值操作符：====、+=+=+=+=、-=-=-=-=、****====、/=/=/=/=、%=%=%=%=、====、===