在页面中直接嵌入JavaScript代码

ゞ浴缸里的玫瑰 2022-05-11 23:16 217阅读 0赞

**一 <script>标记**

在HTML文档中通过使用<script></script>标记将JavaScript脚本嵌入到其中，在HTML文档中可以使用多个<script>标记，每个<script>标记中可以包含多个JavaScript的代码集合。

script标记属性说明

<table style="border-collapse:collapse;border:1px solid #bbbbbb;width:622px;"> 
 <tbody> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">属性</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:502px;" align="left">说明</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">language</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:502px;" align="left">设置所使用的脚本语言及版本</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">src</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:502px;" align="left">设置一个外部脚本文件的路径位置</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">type</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:502px;" align="left">置所使用的脚本语言，此属性已代替language属性</td> 
  </tr> 
  <tr> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:119px;" align="left">defer</td> 
   <td style="border-collapse:collapse;border:1px solid #bbbbbb;width:502px;" align="left">此属性表示当HTML文档加载完毕后再执行脚本语言</td> 
  </tr> 
 </tbody> 
</table>

*  language属性

language属性指定在HTML中使用的哪种脚本语言及其版本。language属性使用的格式如下。

说明：如果不定义language属性，浏览器默认脚本语言为JavaScript 1.0版本。

*  src属性

src属性用来指定外部脚本文件的路径，外部脚本文件通常使用JavaScript脚本，其扩展名为.js。src属性使用的格式如下：

*  type属性

type属性用来指定HTML中使用的是哪种脚本语言及其版本，此属性在HTML 4.0标准开始，推荐使用type属性来代替language属性。type属性使用的格式如下：

*  defer属性

defer属性的作用是当文档加载完毕后再执行脚本，当脚本语言不需要立即运行时，设置defer属性后，浏览器将不必等待脚本语言装载。这样页面加载会更快。但当有一些脚本需要在页面加载过程中或加载完成后立即执行时，就不需要使用defer属性。defer属性使用格式如下：

**二 <script>标记的位置**

<html>

<head>

<title>将script标记嵌入到头部标记中</title>

…//脚本语句

</script>

</head>

<body>

</body>

</html>

但有些时候为了方便查看脚本语言的代码，需要将<script>标记嵌入到<body>主体标记中。将<script>标记嵌入到主体标记的格式如下：

<html>

<head>

<title>将script标记嵌入到主体标记中</title>

</head>

<body>

…//脚本语句

</script>

</body>

</html>

**三 编写第一个JavaScript程序**

在编写JavaScript前，应该先选用一种编写JavaScript的编辑器。编写JavaScript可以使用任何一种文本编辑器，例如Windows中的写字板和记事本工具，也可以选用任何一种编写HTML文档的工具软件，例如Dreamweaver和FrontPage等。读者可以从中选用任何一种工具来作为编写JavaScript的编辑器。

下面将介绍如何编写第一个JavaScript，如何使用记事本工具来作为JavaScript的编辑器。编写步骤如下。

（1）单击“开始”→“程序”→“附件”→“记事本”将打开记事本工具。

（2）在打开的记事本工具中编写如下代码：

1.  `<html>`
2.  `<head>`
3.  `<title>一段简单的JavaScript代码</title>`
4.  `<script type="text/javascript" defer>`
5.  `window.alert('欢迎光临本网站')`
6.  `</script>`
7.  `</head>`
8.  `<body>`
9.  `<h3>这是一段简单的JavaScript代码。</h3>`
10. `</body>`
11. `</html>`

（3）输入完代码后需要将其保存为.html格式或.htm格式。保存完.htm格式后文档图标将会变成一个IE浏览器的图标，双击此图标，以上代码的运行结果会在浏览器中显示，结果如图1所示。

![e69ceb2f-9008-3651-a026-1c4c103da3ac.png][]

![8c1355d4-9352-32bb-b31b-6e2f72a0838d.png][]

[e69ceb2f-9008-3651-a026-1c4c103da3ac.png]: /images/20220512/34f299df81eb44b78e355c856bb313a8.png
[8c1355d4-9352-32bb-b31b-6e2f72a0838d.png]: /images/20220512/4266e26e48ae4ad0bf790b93feeaffa4.png