JavaScript编程起步

最新推荐文章于 2023-11-21 12:40:14 发布

原创最新推荐文章于 2023-11-21 12:40:14 发布 · 507 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了如何在HTML中引入JavaScript脚本，包括脚本的编写、引入方式、位置选择以及如何处理不支持JavaScript的情况。通过具体实例展示了JavaScript与HTML的紧密结合，帮助开发者构建动态交互式网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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脚本的情况，并采取相应的代码编写策略。