山东大学《网站设计与建设》课件第13章JavaScript基础

1、第第13章章 JavaScript基础基础第三部分 网站设计技术13.1 什么是JavaScriptJavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。4个基本特征：nJavaScript是一种脚本语言它采用小程序段的方式实现编程。JavaScript是一种解释性语言JavaScript被直接嵌入 HTML 页面，被设计用来向 HTML 页面添加交互行为nJavaScript是基于对象但不是面向对象的一种语言它不允许对象继承，也没有子类，它在功能上依赖于内建对象的集合 使用JavaScript，你可以创建自己的对象nJavaScript是一种事件驱动的语言JavaScript能做什么能做什么n（1）JavaScript 为 HTML 设计师提供了一种编程工具。n（2）JavaScript 可以将动态的文本放入 HTML 页面。document.write( + name + )n（3）JavaScript 可以对事件作出响应。n（4）JavaScript 可以读取及改变 HTML 元素的内容。n（5）JavaScript 可被用来验证数据。在数据被提交到服务器之前，J

2、avaScript 可被用来验证这些数据。n（6）JavaScript 可被用来检测访问者的浏览器。JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。n（7）JavaScript 可被用来创建、操作cookies。JavaScript和其他语言nJavaScript和LiveWire JavaScript源于Netscape的脚本语言LiveScript1995年11月Netscape和Sun联合将LiveScript 更名为JavaScriptLiveWire是Netscape服务器插件软件包。只有安装了LiveWire，服务器端JavaScript才工作。JavaScript不支持在没有LiveWire的情况下直接访问数据库JavaScript和Java6JAVASCRIPTJAVASCRIPTJAVAJAVA客户解释（不编译）客户解释（不编译）在在客客户户端端上上执执行行以以前前，要要在在服服务器上进行编译务器上进行编译基基于于对对象象。代代码码使使用用内内建建的的可可扩展的对象，没有类或者继承扩展的对象，没有类或者继承面面向向

3、对对象象。AppletsApplets由由带带有有继继承的对象类组成承的对象类组成不不需需要要声声明明变变量量类类型型（松松散散类类型）型）必须声明变量类型（强类型）必须声明变量类型（强类型）动动态态捆捆绑绑。在在运运行行时时检检查查对对象象引用引用静静态态捆捆绑绑。对对象象的的引引用用必必须须再再汇编时就已经存在汇编时就已经存在安全。不能写硬盘安全。不能写硬盘安全。不能写硬盘安全。不能写硬盘代码集成，并内嵌在代码集成，并内嵌在HTMLHTML中中代代码码在在服服务务器器上上，对对用用户户不不可可见见表16.1 JavaScript和 Java比较JavaScript和VBScript、JScriptnVBScript是Microsoft开发的脚本语言nVBScript是Visual Basic的一个子集nNetscape Navigator不支持VBScriptnJavaScript既支持IE又支持NavigatornJScript是Microsoft的Netscape JavaScriptnJScript也支持IE又支持NavigatornECMA ScriptnNetscape和

4、Microsoft都向欧洲计算机制造商协会（European Computer Manufacturers Association（ECMA）的脚本语言ECMA脚本靠拢。nECMAScript，这是一种国际标准化的JavaScript版本。n现在的主流浏览器都支持这种版本 JavaScript的优势n简单性n动态性事件驱动n跨平台性JavaScript是依赖于浏览器本身，与操作环境无关n节省CGI的交互时间JavaScript版本及运行环境nJavaScript 1.0版本nJavaScript 1.2版本nJavaScript 1.5版本符合ECMAv3规范。nJScript 5.6开始符合ECMAv3规范。n目前ECMA-262 4th Edition正在开发的过程中，与其对应的JavaScript的版本为JavaScript 2.0，目前也正在开发过程中。13.2 JavaScript使用方法 JavaScript简单实例 页面内容页面内容n标记符中的语言属性告诉浏览器将要读出的脚本类型，如果不加语言属性，Microsoft Internet Explorer和Netsacpe

5、Navigator默认的语言属性是JavaScript。为了保证浏览器解释的脚本是JavaScript，建议总是加上语言属性。该属性也支持语言的指派版本，nLANGUAGE=”JavaScript1.1”ntype=text/javascript使用JavaScript document.write(Hello World!); document.write(header); 内建对象继承关系13.3 JavaScript语法nJavaScript语句与注释语句与注释分号是可选的代码块以左花括号开始，以右花括号结束单行的注释以 / 开始，多行注释以 /* 开头，以 */ 结尾nJavaScript变量变量可以不声明可以不声明区分大小写区分大小写必须以字母或下划线开始n运算符n条件语句n循环语句n变量有效期n异常13.4 JavaScript函数n自定义函数Function 函数名函数名 （参数（参数,变元）变元）函数体函数体;.Return 表达式表达式; function getSum(a,b) return(a+b); document.write(getSum(8,2)JavaS

6、cript消息框n警告框、确认框、提示框。n给用户一个消息：方法alert()nalert()方法是一个允许你和用户通信的简单JavaScript方法。n它是Window对象的一个方法nalert()方法的语法如下：alert(message)。prompt()方法的使用name=prompt(请输入你的名字:);alert (早上好,+name);nJavaScript 对大小写敏感n变量必须以字母或下划线开始确认框确认框n确认框用于使用户可以验证或者接受某些信息。n当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。n如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。 function show_confirm() var r=confirm(Press a button!); if (r=true) alert(You pressed OK!); else alert(You pressed Cancel!); 13.5 JavaScript事件 n事件驱动n自定义函数open()方法n控制打开哪些窗口以及其所包含的文档。nopen(

7、“(URL)”, “(窗口名)”, “特征列表”);nwindow.open(new.html, newWindow, toolbar=yes,location=1,directories=yes, status=yes,menubar=1,scrollbars=yes, resizable=0, width=200, height=200);P111 表表7-8 function open_win() window.open(http:/) ntoolbar创建标准的工具条nlocation创建位置输入域ndirectiries创建标准的目标按钮nstatus创建状态条nmenubar创建在窗口顶端的菜单nscrollbars当文档超过当前窗口时，创建滚动条nresizable允许用户重新调整窗口大小nwidth指定窗口的宽度，像素为单位nheight指定窗口的高度，像素为单位ntop指定在Internet Explorer 4和Navigator 4中打开窗口的屏幕顶端坐标的y坐标nleft指定在Internet Explorer 4和Navigator 4中打开窗口的屏幕顶端坐标

8、的x坐标 New Window n使用OnClick事件被触发来自内联脚本的Open()方法一个简单的不带参数的JavaScript函数及其调用的示例代码function clickme()alert(你好！)点击我吧表达式与运算符应用实例/ DEFINE VARIABLES FOR REST OF SCRIPTvar question = What is 10 + 10 ? ;var answer = 20;var correct = ;var incorrect = ;/ ASK THE QUESTIONvar response = prompt(question,0);/ CHECK THE ANSWERvar output=(response= =answer)?correct:incorrect;函数实例function testQuestion(question) var answer = eval(question);var output = What is + question + ?;var correct = ;var incorrect = ;var respon

9、se = prompt(output,0);return(response= =answer) ? correct:incorrect;Var result=testQuestion(“10+10”);Document.write(result);13.7 JavaScript对象var txt=Hello World!document.write(txt.length)document.write(str.toUpperCase()nNavigator对象允许访问针对浏览器的信息12.JavaScript的浏览器检测信息实例浏览器信息搜集浏览器信息搜集浏览器信息搜集浏览器信息搜集!-12.JavaScript的浏览器检测信息实例(续) 浏览器名称浏览器名称浏览器名称浏览器名称 input type=text name=Name size=50 input type=text name=Name size=50 浏览器版本浏览器版本浏览器版本浏览器版本 input type=text name=Version size=50 input type=text name=Version s

10、ize=50 浏览器代码名称浏览器代码名称浏览器代码名称浏览器代码名称 input type=text name=Code size=50 input type=text name=Code size=50 代理商名称代理商名称代理商名称代理商名称 input type=text name=Agent size=50 input type=text name=Agent size=50 input type=button value= Robots协议nrobots.txt文件是一个文本文件n当一个搜索蜘蛛访问一个站点时，它会首先检查该站点根目录下是否存在robots.txtn淘宝网的 Robots.txt文件User-agent: BaiduspiderDisallow: /nWindow 对象表示浏览器窗口。n每当 或者 标记出现，Window 对象就会被自动创建。n所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员n对话框，open，close，浏览器窗口的高度和宽度nDocument, history, locationlocation 对象

《山东大学《网站设计与建设》课件第13章JavaScript基础》由会员东***分享，可在线阅读，更多相关《山东大学《网站设计与建设》课件第13章JavaScript基础》请在金锄头文库上搜索。