Download presentation
Presentation is loading. Please wait.
1
网 站 设 计 与 建 设 Website design and developments
2
第三部分 网站设计技术 第13章JavaScript基础
3
13.1 什么是JavaScript JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。 4个基本特征：
它采用小程序段的方式实现编程。 JavaScript是一种解释性语言 JavaScript被直接嵌入 HTML 页面，被设计用来向 HTML 页面添加交互行为 JavaScript是基于对象但不是面向对象的一种语言 它不允许对象继承，也没有子类， 它在功能上依赖于内建对象的集合 使用JavaScript，你可以创建自己的对象 JavaScript是一种事件驱动的语言
4
JavaScript能做什么 （1）JavaScript 为 HTML 设计师提供了一种编程工具。
document.write("<h1>" + name + "</h1>") （3）JavaScript 可以对事件作出响应。 （4）JavaScript 可以读取及改变 HTML 元素的内容。 （5）JavaScript 可被用来验证数据。在数据被提交到服务器之前，JavaScript 可被用来验证这些数据。
5
（6）JavaScript 可被用来检测访问者的浏览器。JavaScript 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。
（7）JavaScript 可被用来创建、操作cookies。
6
JavaScript和其他语言 JavaScript和LiveWire
JavaScript源于Netscape的脚本语言LiveScript 1995年11月Netscape和Sun联合将LiveScript 更名为JavaScript LiveWire是Netscape服务器插件软件包。 只有安装了LiveWire，服务器端JavaScript才工作。JavaScript不支持在没有LiveWire的情况下直接访问数据库
7
JavaScript和Java JAVASCRIPT JAVA 客户解释（不编译） 在客户端上执行以前，要在服务器上进行编译
基于对象。代码使用内建的可扩展的对象，没有类或者继承 面向对象。Applets由带有继承的对象类组成 不需要声明变量类型（松散类型） 必须声明变量类型（强类型） 动态捆绑。在运行时检查对象引用 静态捆绑。对象的引用必须再汇编时就已经存在 安全。不能写硬盘 代码集成，并内嵌在HTML中 代码在服务器上，对用户不可见
8
JavaScript和VBScript、JScript
VBScript是Microsoft开发的脚本语言 VBScript是Visual Basic的一个子集 Netscape Navigator不支持VBScript JavaScript既支持IE又支持Navigator JScript是Microsoft的Netscape JavaScript JScript也支持IE又支持Navigator
9
ECMA Script Netscape和Microsoft都向欧洲计算机制造商协会（European Computer Manufacturers Association（ECMA））的脚本语言ECMA脚本靠拢。 ECMAScript，这是一种国际标准化的JavaScript版本。 现在的主流浏览器都支持这种版本
10
JavaScript的优势 ①简单性 ②动态性 ③跨平台性 ④节省CGI的交互时间 事件驱动
11
JavaScript版本及运行环境 JavaScript 1.0版本 JavaScript 1.2版本 JavaScript 1.5版本
符合ECMAv3规范。 JScript 5.6 开始符合ECMAv3规范。 目前ECMA-262 4th Edition正在开发的过程中，与其对应的JavaScript的版本为JavaScript 2.0，目前也正在开发过程中。
12
13.2 JavaScript使用方法 <SCRIPT LANGUAGE = "JavaScript">
<!--Hide the SCRIPT from other browsers {JavaScript程序} // Stop hiding from other browsers --> </SCRIPT> <SCRIPT LANGUAGE = "JavaScript" SRC=" </SCRIPT>
13
<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>
14
<SCRIPT>标记符中的语言属性告诉浏览器将要读出的脚本类型，
如果不加语言属性，Microsoft Internet Explorer和Netsacpe Navigator默认的语言属性是JavaScript。 为了保证浏览器解释的脚本是JavaScript，建议总是加上语言属性。 该属性也支持语言的指派版本， LANGUAGE=”JavaScript1.1” type="text/javascript"
15
使用JavaScript <html> <body>
<script type="text/javascript"> document.write("Hello World!"); document.write("<h1>header</h1>"); </script> </body> </html> Hello.html
16
内建对象继承关系
17
13.3 JavaScript语法 JavaScript语句与注释 JavaScript变量 分号是可选的
代码块以左花括号开始，以右花括号结束 单行的注释以 // 开始，多行注释以 /* 开头，以 */ 结尾 JavaScript变量 可以不声明 区分大小写 必须以字母或下划线开始
18
运算符 条件语句 循环语句 变量有效期 异常
19
13.4 JavaScript函数 自定义函数 Function 函数名 （参数,变元） { 函数体;. Return 表达式; }
20
<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>
21
JavaScript消息框 警告框、确认框、提示框。 给用户一个消息：方法alert()
alert()方法是一个允许你和用户通信的简单JavaScript方法。 它是Window对象的一个方法 alert()方法的语法如下： alert(〞message〞)。
22
<SCRIPT LANGUAGE = "JavaScript">
<!--Hide the SCRIPT from other browsers alert("Welcome to JavaScript") // Stop hiding from other browsers --> </SCRIPT>
23
prompt()方法的使用 <SCRIPT LANGUAGE = "JavaScript">
<!--Hide the SCRIPT from other browsers prompt("What's your name", "yourname") // Stop hiding from other browsers --> </SCRIPT>
24
<Script Language="JavaScript">
name=prompt("请输入你的名字:"); alert ("早上好,"+name); </Script> JavaScript 对大小写敏感 变量必须以字母或下划线开始
25
确认框 确认框用于使用户可以验证或者接受某些信息。 当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
26
<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>
27
13.5 JavaScript事件 <body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" /> </body> </html> 事件驱动 自定义函数
28
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
29
<html> <head> <script type="text/javascript"> function open_win() {window.open(" </script> </head> <body> <input type=button value="Open Window“ onclick="open_win()" /> </body> </html>
30
toolbar创建标准的工具条 location创建位置输入域 directiries创建标准的目标按钮 status创建状态条 menubar创建在窗口顶端的菜单 scrollbars当文档超过当前窗口时，创建滚动条 resizable允许用户重新调整窗口大小 width指定窗口的宽度，像素为单位 height指定窗口的高度，像素为单位 top指定在Internet Explorer 4和Navigator 4中打开窗口的屏幕顶端坐标的y坐标 left指定在Internet Explorer 4和Navigator 4中打开窗口的屏幕顶端坐标的x坐标
31
<HTML> <HEAD> <TITLE> New Window </TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="打开搜索引擎窗口" onClick="newWindow=open(‘ ‘google’,‘toolbar=0,location=1, menubar=1,scrollbars=1,resizable=1’) "> </FORM > </BODY> </HTML> 使用OnClick事件被触发来自内联脚本的Open()方法
32
<html> <head> <title>一个简单的不带参数的JavaScript函数及其调用的示例代码</title> <script language = "JavaScript"> function clickme() { alert("你好！") } </script> </head> <body> <div onclick = "clickme()">点击我吧</div> </body> </html>
33
表达式与运算符应用实例 // DEFINE VARIABLES FOR REST OF SCRIPT
var question = "What is ? "; 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;
34
<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>
35
13.7 JavaScript对象 <script type="text/javascript">
var txt="Hello World!" document.write(txt.length) document.write(str.toUpperCase()) </script>
37
Navigator对象允许访问针对浏览器的信息
38
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>
39
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>
40
Robots协议 robots.txt文件是一个文本文件
User-agent: Baiduspider Disallow: /
41
Window 对象表示浏览器窗口。 每当 <body> 或者 <frameset> 标记出现，Window 对象就会被自动创建。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员 对话框，open，close，浏览器窗口的高度和宽度…… Document, history, location
42
location 对象 window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
<script> document.write(location.href); </script>
43
加载新文档 <script> function newDoc() { window.location.assign(" } </script> <body> <input type="button" value="加载新文档" onclick="newDoc()"> </body>
44
<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>
45
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>
46
history对象 window.history.back() window.history.forward()
47
document对象 window.document指示页面上有什么信息 在Document下是Image和Form
48
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 jpg"; oneOver=new Image; oneOver.src="sample over.jpg"; } --> </script> </head>
49
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 jpg" name="cert" border=0> </a> </body> </html>
50
HTML DOM （Document Object Model for HTML）
51
getElementById() getElementsByTagName() 方法 或者使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性。
52
<html> <body> <h1 id="id1"> My Heading 1 </h1> <button type="button" onclick="document.getElementById('id1').style.color='red'"> 点击这里！ </button> </body> </html>
53
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 ""
54
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)
55
</script> </head> <body onLoad="checkCookie()"> </body> </html>
Similar presentations
