第1章JavaScript入门(2014)

更新时间：2023-05-21 00:28:01 阅读量：实用文档文档下载

说明：文章内容仅供预览，部分内容可能不全。下载后的文档，内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的，是否完整无缺。

第1章巨变推荐度：
相关推荐

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>

把通用功能编写为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>

1.2 编写JavaScript脚本

处理不支持脚本的情况：<script language="javascript" type="text/javascript"> <!-被屏蔽的JavaScript语句 //--> </script>

支持script标记的浏览器将忽略包含<script>与</script>之间的HTML注释标记

1.2 编写JavaScript脚本

处理不支持脚本的情况：

对于不支持或禁止运行JavaScript脚本的浏览器，可以使用 noscript标记指定要显示的HTML内容，语法如下：

要显示的HTML内容</noscript>

1.2 编写JavaScript脚本<html> <head> <title>代码屏蔽示例</title> </head> <body> <script language="javascript" type="text/javascript"> document.write("这是执行JavaScript代码的结果。"); </script> <noscript> 本网页包含JavaScript代码，但您的浏览器不支持

或禁止 JavaScript代码运行。 </noscript> </body> </html>

小结

javascript脚本放在<script></script>标记中，可以放在HTML文档的任意位置，注意标记嵌套；

浏览器按先后顺序从上到下解释执行HTML文档； Javascript脚本可以通过绑定对象事件来处理事件:<script language="javascript" type="text/javascript"for="elementId" event="eventName"> 事件处理程序代码

可以通过属性调用脚本，注意超链接中href="javascript:脚本代码",onclick="脚本代码" ……

</script>

小结

可以调用外部脚本文件(.js)<script language="javascript" type="text/script" src="完整的脚本文件名" > </script>

处理不支持脚本的方法：

用 将脚本括起来用<noscript></noscript>标记，把不支持脚本情况下要显示

的内容用此标记括起来。

作业