JavaScript编程起步

来源：互联网发布：5.8毫米子弹相关数据编辑：程序博客网时间：2024/06/05 09:24

1、第一个程序 Hello World

<body><center> <script language="javascript1.2" type="text/javascript">   document.write("Hello World"); </script></center></body>

2、选择JavaScript脚本编辑器

NotePad，UltraEdit等，只要所选编辑器能将所编辑的代码最终保存为HTML文档类型（.htm,.html）即可。

3、如何引入JavaScript脚本代码

1）、引入方法：

代码包含于<script>和</script>标记对，然后嵌入到HTML文档中
通过 <script>标记的src属性链接外部的JavaScript脚本文件
通过JavaScript伪URL地址引入
通过HTML文档事件处理程序引入

2）、<script>标记的属性

language：用于指定封装代码的脚本语言及版本
type：指定<script>和</script>标记对之间插入的脚本代码类型
src：用于将外部的脚本文件嵌入到当前文档中，一般在较新的浏览器中使用，使用JavaScript脚本编写的外部脚本文件必须使用.js为扩展名，同时在<script>和</script>标记对中不包含任何内容

<body><center> <script language="javascript1.2" type="text/javascript" src="1.js">  <!-- document.write("Hello World");--> </script></center></body>

3）、通过JavaScript伪URL引入

伪URL地址的一般格式：JavaScript：alert("Hello World")

<body><br><center> <p> 伪URL地址引入JavaScript脚本代码实例： </p> <form name="MyForm">   <input type="text" name="MyText" value="鼠标单击" onclick="javascript:alert('鼠标已单击文本框！')"/> </form></center></body>

运行结果如下图：

4）、通过HTML文档事件处理程序引入

通常是设置某HTML元素的属性来引入一个脚本（可以是一个动作或者函数），属性一般以on开头，如鼠标移动onmousemove()等。

<title>Sample Page</title><script language="javascript" type="text/javascript">  function ClickMe(){  alert("鼠标已单击按钮");  }</script></head><body><br /><center><p>通过文档事件处理程序引入JavaScript脚本代码实例：</p><form name="MyForm">  <input  type="button" name="MyButton" value="鼠标单击" onclick="ClickMe()"/></form></center></body>

运行结果如下：

4、知道了如何引入JavaScript脚本代码，下面介绍在HTML中嵌入JavaScript脚本代码的位置。

JavaScript脚本代码可放在HTML文档任何需要的位置。一般来说，可以在<head>和</head>标记对、<body>与</body>标记对之间按需要放置JavaScript代码。

1）、放在<head>与</head>之间的JavaScript代码一般用于提前载入，以响应用户的页面动作，且一般不影响HTML文档的浏览器显示内容。基本文档结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Sample Page</title><script language="javascript" type="text/javascript"> //脚本语句....</script></head><body></body></html>

2）、如果需要在页面载入时运行JavaScript脚本生成网页内容，应将脚本代码放置在<body>与</body>标记对之间，可根据需要编写多个独立的脚本代码段并与HTML代码结合在一起。基本文档结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Sample Page</title></head><body><script language="javascript" type="text/javascript">//脚本语句......</script>//HTML语句....<script language="javascript" type="text/javascript">//脚本语句......</script></body></html>

3）、在两个标记对之间混合放置

如果既需要提前载入脚本代码以响应用户事件，又需要在页面载入时使用脚本生成页面内容，基本文档结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Sample Page</title><script language="javascript" type="text/javascript">//脚本语句......</script></head><body><script language="javascript" type="text/javascript">//脚本语句......</script></body></html>

5、选择合适的浏览器

JavaScript脚本在客户端由浏览器解释执行并将结果更新为目标页面，由于各浏览器厂商对JavaScript版本的支持不尽相同，浏览器的版本也对JavaScript脚本的支持有很大影响，所以编写代码时一定考虑合适的浏览器之间的兼容性，重点在于编写符合JavaScript标准的代码以适应目标浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Sample Page</title><script language="javascript" type="text/javascript">//输出浏览器版本信息function PrintVersion(){  var msg="";  msg+="浏览器名称"+navigator.appName+"\n";  msg+="浏览器版本"+navigator.appVersion+"\n";  msg+="浏览器代码"+navigator.appCodeName+"\n";  alert(msg);}</script></head><body><center><p>鼠标单击按钮显示当前浏览器的版本信息</p><form name="MyForm"><input  type="button" name="MyButton" value="鼠标单击" onclick="PrintVersion()"/></form></center></body></html>

运行结果如图所示：

-
6、处理不支持JavaScript脚本的情况

客户端浏览器不支持当前JavaScript脚本存在如下几种可能：

客户端浏览器不支持任何JavaScript脚本
客户端浏览器支持的JavaScript脚本版本与该脚本代码使用的版本所支持的对象、属性或者方法不同
客户端为了安全起见，已经将浏览器对JavaScript脚本的支持设置为禁止

以上三种情况总结起来就是，浏览器对当前脚本不能解释正确的结果，在编写脚本代码时如不进行相关处理，用户使用该浏览器浏览有该脚本的文档时将出现警示框。可以通过以下两种方法解决：

使用标记对直接屏蔽法

该方法使用标记对将JavaScript代码进行封装，告诉浏览器如果它不支持该脚本就直接跳过，如果支持则自动跳过该标记对，达到如果浏览器不支持脚本代码则将其隐藏的目的。代码结构如下：

<script language="javascript" type="text/javascript"><!--//此处添加脚本代码 --></script>

Tips：上述方法并没有实现JavaScript脚本代码的真正隐藏，因为浏览器同样下载了该脚本，并将其作为源代码使用，只是在解释的时候忽略标记对之间的代码。

使用<noscript>和</noscript>标记对给出提示信息

该方法在浏览器不支持该脚本代码或者浏览器对JavaScript脚本的支持已设置为禁止的情况下，忽略<script>和</script>标记对之间的脚本代码，返回<noscript>和</noscript>标记对中预设的页面提示信息；如果支持该脚本代码则解释执行<script>和</script>标记对之间的脚本代码，而忽略<noscript>和</noscript>标记对之间预设的页面提示信息。这种方法较之第一种方法更人性化。代码结构如下：

<script language="javascript" type="text/javascript">//脚本代码</script><noscript>//提示信息</noscript>

目前，客户端浏览器版本很少有不支持JavaScript脚本的情况，但其禁用JavaScript脚本的情况很常见，在编写代码的时候应充分考虑不支持JavaScript脚本的情况，并采取相应的代码编写策略。