Download presentation
Presentation is loading. Please wait.
1
网 站 设 计 与 建 设 Website design and developments
2
第三部分 网站设计技术 第16章JavaScript基础
3
16.1 什么是JavaScript 4个基本特征： JavaScript是一种脚本语言
它采用小程序段的方式实现编程。 JavaScript是一种解释性语言 JavaScript是基于对象但不是面向对象的一种语言 它不允许对象继承，也没有子类， 它在功能上依赖于内建对象的集合 JavaScript是一种事件驱动的语言 JavaScript是与Java语言无关的一种语言
4
16.2 JavaScript和其他语言 JavaScript和LiveWire
JavaScript源于Netscape的脚本语言LiveScript 1995年11月Netscape和Sun联合将LiveScript 更名为JavaScript LiveWire是Netscape服务器插件软件包。 只有安装了LiveWire，服务器端JavaScript才工作。JavaScript不支持在没有LiveWire的情况下直接访问数据库
5
JavaScript和Java
6
JavaScript和VBScript、JScript
VBScript是Microsoft开发的脚本语言 VBScript是Visual Basic的一个子集 Netscape Navigator不支持VBScript JavaScript既支持IE又支持Navigator JScript是Microsoft的Netscape JavaScript JScript也支持IE又支持Navigator
7
ECMA Script Netscape和Microsoft都向欧洲计算机制造商协会（European Computer Manufacturers Association（ECMA））的脚本语言ECMA脚本靠拢。 ECMAScript，这是一种国际标准化的JavaScript版本。 现在的主流浏览器都支持这种版本
8
16.3 JavaScript的优势 ①简单性 ②动态性 ③跨平台性 ④节省CGI的交互时间 事件驱动
9
16.4 JavaScript版本及运行环境 JavaScript 1.0版本 JavaScript 1.2版本
符合ECMAv3规范。 JScript 5.6 开始符合ECMAv3规范。 目前ECMA-262 4th Edition正在开发的过程中，与其对应的JavaScript的版本为JavaScript 2.0，目前也正在开发过程中。
10
16.5 在HTML中内嵌JavaScript <SCRIPT LANGUAGE = "JavaScript">
<!--Hide the SCRIPT from other browsers {JavaScript程序} // Stop hiding from other browsers --> </SCRIPT> <SCRIPT LANGUAGE = "JavaScript" SRC=" </SCRIPT>
11
<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>
12
<SCRIPT>标记符中的语言属性告诉浏览器将要读出的脚本类型，
如果不加语言属性，Microsoft Internet Explorer和Netsacpe Navigator默认的语言属性是JavaScript。 为了保证浏览器解释的脚本是JavaScript，建议总是加上语言属性。 该属性也支持语言的指派版本， LANGUAGE=”JavaScript1.1”
13
内建对象继承关系
14
16.6 使用JavaScript和用户通信 ①给用户一个消息：方法alert()
alert()方法是一个允许你和用户通信的简单JavaScript方法。 它是Window对象的一个方法 alert()方法的语法如下： alert(〞message〞)。
15
<SCRIPT LANGUAGE = "JavaScript">
<!--Hide the SCRIPT from other browsers alert("Welcome to JavaScript") // Stop hiding from other browsers --> </SCRIPT>
16
prompt()方法的使用 <SCRIPT LANGUAGE = "JavaScript">
<!--Hide the SCRIPT from other browsers prompt("What's your name", "yourname") // Stop hiding from other browsers --> </SCRIPT>
17
<Script Language="JavaScript">
name=prompt("请输入你的名字:"); alert ("早上好,"+name); </Script>
18
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
19
toolbar创建标准的工具条 location创建位置输入域 directiries创建标准的目标按钮 status创建状态条 menubar创建在窗口顶端的菜单 scrollbars当文档超过当前窗口时，创建滚动条 resizable允许用户重新调整窗口大小 width指定窗口的宽度，像素为单位 height指定窗口的高度，像素为单位 top指定在Internet Explorer 4和Navigator 4中打开窗口的屏幕顶端坐标的y坐标 left指定在Internet Explorer 4和Navigator 4中打开窗口的屏幕顶端坐标的x坐标
20
<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()方法
21
16.7 JavaScript函数 JavaScript函数定义： Function 函数名 （参数,变元） { 函数体;.
Return 表达式; }
22
<html> <head> <title>一个简单的不带参数的JavaScript函数及其调用的示例代码</title> <script language = "JavaScript"> function clickme() { alert("你好！") } </script> </head> <body> <div onclick = "clickme()">点击我吧</div> </body> </html>
23
表达式与运算符应用实例 // 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;
24
<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>
25
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>
26
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>
27
13.JavaScript的重定向实例 <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>
28
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>
29
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"; two=new Image; two.src="sample jpg"; oneOver=new Image; oneOver.src="sample over.jpg"; twoOver=new Image; twoOver.src="sample over.jpg"; } --> </script> </head>
30
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> <br> <a href="sample-1602-netscape.htm" onMouseOver="document.cat.src=twoOver.src" onMouseOut="document.cat.src=two.src"> <img width=70% height=70% src="sample jpg" name="cat" border=0> </a> </body> </html>
31
14.JavaScript的图像预加载实例(续2)
32
网上例子 http://www.yesky.com/imagesnew/software/jscript/index.html
Similar presentations
