网 站 设 计 与 建 设 Website design and developments
第三部分 网站设计技术 第13章JavaScript基础
13.1 什么是JavaScript JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。 4个基本特征： 它采用小程序段的方式实现编程。 JavaScript是一种解释性语言 JavaScript被直接嵌入 HTML 页面，被设计用来向 HTML 页面添加交互行为 JavaScript是基于对象但不是面向对象的一种语言 它不允许对象继承，也没有子类， 它在功能上依赖于内建对象的集合 使用JavaScript，你可以创建自己的对象 JavaScript是一种事件驱动的语言
JavaScript能做什么 （1）JavaScript 为 HTML 设计师提供了一种编程工具。 document.write("<h1>" + name + "</h1>") （3）JavaScript 可以对事件作出响应。 （4）JavaScript 可以读取及改变 HTML 元素的内容。 （5）JavaScript 可被用来验证数据。在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。
（6）JavaScript 可被用来检测访问者的浏览器。JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。 （7）JavaScript 可被用来创建、操作cookies。
JavaScript和其他语言 JavaScript和LiveWire JavaScript源于Netscape的脚本语言LiveScript 1995年11月Netscape和Sun联合将LiveScript 更名为JavaScript LiveWire是Netscape服务器插件软件包。 只有安装了LiveWire，服务器端JavaScript才工作。JavaScript不支持在没有LiveWire的情况下直接访问数据库
JavaScript和Java JAVASCRIPT JAVA 客户解释（不编译） 在客户端上执行以前，要在服务器上进行编译 基于对象。代码使用内建的可扩展的对象，没有类或者继承 面向对象。Applets由带有继承的对象类组成 不需要声明变量类型（松散类型） 必须声明变量类型（强类型） 动态捆绑。在运行时检查对象引用 静态捆绑。对象的引用必须再汇编时就已经存在 安全。不能写硬盘 代码集成，并内嵌在HTML中 代码在服务器上，对用户不可见
JavaScript和VBScript、JScript VBScript是Microsoft开发的脚本语言 VBScript是Visual Basic的一个子集 Netscape Navigator不支持VBScript JavaScript既支持IE又支持Navigator JScript是Microsoft的Netscape JavaScript JScript也支持IE又支持Navigator
ECMA Script Netscape和Microsoft都向欧洲计算机制造商协会（European Computer Manufacturers Association（ECMA））的脚本语言ECMA脚本靠拢。 ECMAScript，这是一种国际标准化的JavaScript版本。 现在的主流浏览器都支持这种版本
JavaScript的优势 ①简单性 ②动态性 ③跨平台性 ④节省CGI的交互时间 事件驱动
JavaScript版本及运行环境 JavaScript 1.0版本 JavaScript 1.2版本 JavaScript 1.5版本 符合ECMAv3规范。 JScript 5.6 开始符合ECMAv3规范。 目前ECMA-262 4th Edition正在开发的过程中，与其对应的JavaScript的版本为JavaScript 2.0，目前也正在开发过程中。
13.2 JavaScript使用方法 <SCRIPT LANGUAGE = "JavaScript"> <!--Hide the SCRIPT from other browsers {JavaScript程序} // Stop hiding from other browsers --> </SCRIPT> <SCRIPT LANGUAGE = "JavaScript" SRC="http://www.cs.sdu.cn/javascript/javaScript.js"> </SCRIPT>
<HTML> <HEAD> <TITLE>JavaScript简单实例</TITLE> <SCRIPT LANGUAGE = "JavaScript"> <!--Hide the SCRIPT from other browsers {JavaScript程序} // Stop hiding from other browsers --> </SCRIPT> </HEAD> <BODY> 页面内容 </BODY> </HTML>
<SCRIPT>标记符中的语言属性告诉浏览器将要读出的脚本类型， 如果不加语言属性，Microsoft Internet Explorer和Netsacpe Navigator默认的语言属性是JavaScript。 为了保证浏览器解释的脚本是JavaScript，建议总是加上语言属性。 该属性也支持语言的指派版本， LANGUAGE=”JavaScript1.1” type="text/javascript"
使用JavaScript <html> <body> <script type="text/javascript"> document.write("Hello World!"); document.write("<h1>header</h1>"); </script> </body> </html> Hello.html
内建对象继承关系
13.3 JavaScript语法 JavaScript语句与注释 JavaScript变量 分号是可选的 代码块以左花括号开始，以右花括号结束 单行的注释以 // 开始，多行注释以 /* 开头，以 */ 结尾 JavaScript变量 可以不声明 区分大小写 必须以字母或下划线开始
运算符 条件语句 循环语句 变量有效期 异常
13.4 JavaScript函数 自定义函数 Function 函数名 （参数,变元） { 函数体;. Return 表达式; }
<head> <script language = "JavaScript"> function getSum(a,b) {return(a+b);} </script> </head> <body> <script type="text/JavaScript"> document.write(getSum(8,2))</script></body></html>
JavaScript消息框 警告框、确认框、提示框。 给用户一个消息：方法alert() alert()方法是一个允许你和用户通信的简单JavaScript方法。 它是Window对象的一个方法 alert()方法的语法如下： alert(〞message〞)。
<SCRIPT LANGUAGE = "JavaScript"> <!--Hide the SCRIPT from other browsers alert("Welcome to JavaScript") // Stop hiding from other browsers --> </SCRIPT>
prompt()方法的使用 <SCRIPT LANGUAGE = "JavaScript"> <!--Hide the SCRIPT from other browsers prompt("What's your name", "yourname") // Stop hiding from other browsers --> </SCRIPT>
<Script Language="JavaScript"> name=prompt("请输入你的名字:"); alert ("早上好,"+name); </Script> JavaScript 对大小写敏感 变量必须以字母或下划线开始
确认框 确认框用于使用户可以验证或者接受某些信息。 当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。 如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
<html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head>
13.5 JavaScript事件 <body> <input type="button" onclick="show_confirm()" value="Show a confirm box" /> </body> </html> 事件驱动 自定义函数
open()方法 控制打开哪些窗口以及其所包含的文档。 open(“(URL)”, “(窗口名)”, “特征列表”); window.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
<html> <head> <script type="text/javascript"> function open_win() {window.open("http://www.w3school.com.cn")} </script> </head> <body> <input type=button value="Open Window“ onclick="open_win()" /> </body> </html>
toolbar创建标准的工具条 location创建位置输入域 directiries创建标准的目标按钮 status创建状态条 menubar创建在窗口顶端的菜单 scrollbars当文档超过当前窗口时，创建滚动条 resizable允许用户重新调整窗口大小 width指定窗口的宽度，像素为单位 height指定窗口的高度，像素为单位 top指定在Internet Explorer 4和Navigator 4中打开窗口的屏幕顶端坐标的y坐标 left指定在Internet Explorer 4和Navigator 4中打开窗口的屏幕顶端坐标的x坐标
<HTML> <HEAD> <TITLE> New Window </TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="打开搜索引擎窗口" onClick="newWindow=open(‘http://www.google.com’, ‘google’,‘toolbar=0,location=1, menubar=1,scrollbars=1,resizable=1’) "> </FORM > </BODY> </HTML> 使用OnClick事件被触发来自内联脚本的Open()方法
<html> <head> <title>一个简单的不带参数的JavaScript函数及其调用的示例代码</title> <script language = "JavaScript"> function clickme() { alert("你好！") } </script> </head> <body> <div onclick = "clickme()">点击我吧</div> </body> </html>
表达式与运算符应用实例 // DEFINE VARIABLES FOR REST OF SCRIPT var question = "What is 10 + 10 ? "; var answer = 20; var correct = '<IMG SRC = "correct.gif">'; var incorrect = '<IMG SRC = "incorrect.gif">'; // ASK THE QUESTION var response = prompt(question,"0"); // CHECK THE ANSWER var output=(response= =answer)?correct:incorrect;
<HTML> <HEAD> <TITLE>函数实例</TITLE> <script language=“javascript”> function testQuestion(question) { var answer = eval(question); var output = "What is " + question + "?"; var correct = '<IMG SRC = "correct.gif">'; var incorrect = '<IMG SRC = "incorrect.gif">'; var response = prompt(output,"0"); return(response= =answer) ? correct:incorrect; } </script> </HEAD> <BODY> Var result=testQuestion(“10+10”); Document.write(result); </BODY> </HTML>
13.7 JavaScript对象 <script type="text/javascript"> var txt="Hello World!" document.write(txt.length) document.write(str.toUpperCase()) </script>
Navigator对象允许访问针对浏览器的信息
12.JavaScript的浏览器检测信息实例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>浏览器信息搜集</title> <script language="JavaScript"> <!-- function yourBrowser() { document.details.Name.value=navigator.appName; document.details.Version.value=navigator.appVersion; document.details.Code.value=navigator.appCodeName; document.details.Agent.value=navigator.userAgent; } --> </script> </head>
12.JavaScript的浏览器检测信息实例(续) <body bgcolor="#FFFFFF"> <DIV align="center"> <TABLE border="1"> <FORM name="details"> <TR> <TD>浏览器名称</TD> <TD><input type="text" name="Name" size="50"</TD> </TR> <TR> <TD>浏览器版本</TD> <TD><input type="text" name="Version" size="50"</TD> <TR> <TD>浏览器代码名称</TD> <TD><input type="text" name="Code" size="50"</TD> <TR> <TD>代理商名称</TD> <TD><input type="text" name="Agent" size="50"</TD> <TR> <TD><input type="button" value="测试浏览器" onClick="yourBrowser()"></TD> </TR></FORM></TABLE></DIV></body> </html>
Robots协议 robots.txt文件是一个文本文件 User-agent: Baiduspider Disallow: /
Window 对象表示浏览器窗口。 每当 <body> 或者 <frameset> 标记出现，Window 对象就会被自动创建。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员 对话框，open，close，浏览器窗口的高度和宽度…… Document, history, location
location 对象 window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面 <script> document.write(location.href); </script>
加载新文档 <script> function newDoc() { window.location.assign("http://www.w3school.com.cn") } </script> <body> <input type="button" value="加载新文档" onclick="newDoc()"> </body>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>浏览器重定向实例</title> <script language="JavaScript"> <!-- function checkBrowser() { var name=navigator.appName; if (name.indexOf('Netscape') != -1) { document.location.href="sample-1602-netscape.htm"; } else { if (name.indexOf('Microsoft') != -1) { document.location.href="sample-1602-microsoft.htm"; } --> </script> </head>
13.JavaScript的重定向实例(续) <body bgcolor="#FFFFFF"> <p> 点击测试浏览器的命令按钮，将提示你使用的是何种浏览器。 </p> <FORM METHOD="post" action=" "> <DIV align="center"> <INPUT type="button" name="Button" value="测试浏览器" onClick="checkBrowser()"> </DIV> </FORM> </body> </html>
history对象 window.history.back() window.history.forward()
document对象 window.document指示页面上有什么信息 在Document下是Image和Form
14.JavaScript的图像预加载实例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>浏览器重定向实例</title> <script language="JavaScript"> <!-- if (document.images) { one=new Image; one.src="sample-1603-1.jpg"; oneOver=new Image; oneOver.src="sample-1603-1over.jpg"; } --> </script> </head>
14.JavaScript的图像预加载实例(续1) <body bgcolor="#FFFFFF"> <a href="sample-1602-microsoft.htm" onMouseOver="document.cert.src=oneOver.src" onMouseOut="document.cert.src=one.src"> <img width=70% height=70% src="sample-1603-1.jpg" name="cert" border=0> </a> </body> </html>
HTML DOM （Document Object Model for HTML）
getElementById() getElementsByTagName() 方法 或者使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性。
<html> <body> <h1 id="id1"> My Heading 1 </h1> <button type="button" onclick="document.getElementById('id1').style.color='red'"> 点击这里！ </button> </body> </html>
Cookies <html> <head> <script type="text/javascript"> function getCookie(c_name) { if (document.cookie.length>0) c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } return ""
function setCookie(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()) } function checkCookie() username=getCookie('username') if (username!=null && username!="") {alert('Welcome again '+username+'!')} else username=prompt('Please enter your name:',"") setCookie('username',username,365)
</script> </head> <body onLoad="checkCookie()"> </body> </html>