Web编程基础Chapter1-JavaScript入门2014年2月20日星期四
提纲
JavaScript概述 编写JavaScript代码
1.1 JavaScript概述
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，它是通过嵌入或导入到 标准的HTML文档中实现的。
用来实现用户与浏览器的交互以及浏览器与服务器的异步通信。
提供用户交互 动态更改内容 数据验证
1.1 JavaScript概述
JavaScript的特点
简单性。解释性语言，在程序运行过程中边解释边执行。 动态性。可以直接对用户操作做出响应，不需要经过Web 服务器程序处理。 跨平台性。依赖于Web浏览器本身，与操作环境无关。 基于对象。可以调用其自身提供的对象或其他语言创建的 对象，并采用面向对象的编程方法来设置对象的属性、调 用对象的方法。 事件驱动。对用户操作的响应采用以事件驱动的方式进行。 所谓事件，通常是指在网页中执行了某种操作所产生的动 作。 节省与服务器端的交互时间。
1.2 编写JavaScript脚本
在HTML中嵌入JavaScript的三种形式：
JavaScript代码可以直接包含在<script>与</script> 标记之间； 也可以作为某个HTML元素的事件处理程序的属性 值; 还可以把JavaScript代码存储在一个单独的文件(.js), 进行导入
开发工具：DreamWeaver 8
1.2 编写JavaScript脚本
(1)设置脚本语言
创建脚本代码块： <script language="javascript" type="text/javascript> 一个或多个脚本语句 </script> <script> 标签 指示浏览器后面的文本是脚本的一部分 type 属性 指定文件类型和在该脚本中使用的脚本语言 language属性(早期使用，为兼顾。可用type属性替代) 指定script标记内代码行所使用的脚本语言 使用script标记注意事项：P3
1.2 编写JavaScript脚本
【例1.1】创建一个网页，用标题1格式显示问候语“Hello,Word!”。
【例1.1_b】使用JavaScript脚本来实现上例。<script type="text/javascript"> document.write("<h1>Hello,World!</h1>"); </script>
1.2 编写JavaScript脚本<html xmlns = "/1999/xhtml"> <head><title>Printing Multiple Lines</title> <script type = "text/javascript"> <!-document.writeln( "<h1>Welcome toJavaScript" + "Programming!</h1>" ); // --> </script> </head><body></body> </html>
1.2 编写JavaScript脚本<html xmlns = "/1999/xhtml"> <head><title>Printing Multiple Lines in a Dialog Box</title> <script type = "text/javascript"> <!-window.alert( "Welcome to\nJavaScript\nProgramming!" ); // --> </script> </head> <body> <p>Click Refresh (or Reload) to run this script again.</p> </body> </html>
1.2 编写JavaScript脚本
(2)绑定对象事件：通过script标记的event和fo
r属性把某个对象与指定事件绑定 起来 <script language="javascript" type="text/javascript" for="elementID" event="eventName" > 事件处理程序代码 </script> for属性的值为某个页面元素的ID属性值， event属性的值则是该元素的事件名称，该元素必须支持 event属性指定的事件 当页面元素产生该事件时，将执行script标记中的脚本语句， 否则该脚本不会被执行。
【例1.2】示
例
<html> <head> <title>绑定对象事件示例</title> <script type="text/javascript" for="btnOK" event="onclick"> var username=document.getElementById("txtUsername").value; var p1=document.getElementById("p1"); p1.innerHTML=username+"用户，您好！"; </script> </head> <body> <p>用户名： <input type="text" name="txtUsername" id="txtUsername" /> <input name="btnOK" type="button" id="btnOK" value="确定" />
1.2 编写JavaScript脚本
(3)调用外部脚本库：
从外部文件中导入脚本语句。语法如下：
<script language="javascript" type="text/javascript" src="URL" >
</script>
把通用功能编写为JavaScript函数，保存为.js的脚本库，在 各个HTML文档顶部的head元素中导入该脚本库。
需要修改所有HTML文档中的函数定义时，对脚本库进行修改即可。 便于实现网站的模块化设计。
function welcome(){ document.write("Now is "+new Date().toLocaleString()+"."); document.write("Welcome to JavaScript!"); } <html> <head> <title>导入外部脚本文件示例</title> <script src="script1-01.js" language="javascript" type="text/javascript"> </script> </head> <body> <p align="center"> <script language="javascript" type="text/javascript"> welcome(); </script> </p> </body> </html>
示
例
1.2 编写JavaScript脚本
(4)通过属性调用脚本：
通过设置事件属性可以调用JavaScript脚本，如onclick属性
<html> <head> <title>通过HTML属性调用脚本</title> </head> <body> <p><a href="javascript:alert('欢迎您访问本网站！');"> 单击这里</a></p> <p><a href="#" onclick="window.close();return false;">关闭窗口</a> </p> </body> </html>
搜索“diyifanwen.net”或“第一范文网”即可找到本站免费阅读全部范文。收藏本站方便下次阅读，第一范文网，提供最新高等教育第1章JavaScript入门(2014)全文阅读和word下载服务。
相关推荐：
一个像夏天