1.3.1　在页面中直接嵌入JavaScript代码

在HTML文档中，可以使用<script>…</script>标记将JavaScript代码嵌入。此外，还可以使用多个<script>标记，每个<script>标记中可以包含多个JavaScript代码集合，并且不同<script>标记中的JavaScript代码之间可以相互访问，这如同将所有代码放在一对<script>…</script>标记之中。<script>标记有以下几个常用的属性。

（1）language属性：用来指定HTML中使用的脚本语言及其版本。language属性的使用格式如下。说明

<script language="JavaScript1.8">

说明

如果不定义language属性，浏览器默认使用的脚本语言为JavaScript 1.0。

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

<script src="index.js">

（3）type属性：用来指定HTML中使用的脚本语言及其版本。自HTML 4.0标准开始，推荐使用type属性来代替language属性。type属性的使用格式如下。

<script type="text/javascript">

（4）defer属性：用于设置文档加载完毕后再执行脚本语言。当脚本语言不需要立即运行时，可以设置defer属性，此时浏览器将不必等待脚本语言装载，这样页面加载会更快。若脚本语言需要在页面加载过程中或加载完成后立即执行，则不能使用defer属性。defer属性的使用格式如下。

<script defer>

【例1.1】第一个JavaScript程序。（实例位置：资源包\TM\sl\1\01）

编写第一个JavaScript程序，在WebStorm工具中直接嵌入JavaScript代码，在页面中输出hello JavaScript。具体步骤如下。

（1）启动WebStorm，如果未创建过任何项目，会弹出如图1.17所示的窗口。

（2）单击图1.17中的New Project按钮，弹出创建新项目窗口，如图1.18所示。在该窗口中选择项目存储路径，并输入项目名称sl，这里将项目文件夹存储在计算机的E盘中，然后单击Create按钮创建项目。

图1.17　WebStorm欢迎界面

图1.18　创建新项目窗口

（3）在项目名称sl上右击，在弹出的快捷菜单中选择New→Directory命令，如图1.19所示。

图1.19　在项目中创建目录

（4）此时弹出新建目录对话框，如图1.20所示，在文本框中输入新建目录的名称作为本章实例文件夹，然后按Enter键，完成文件夹的创建。

图1.20　输入新建目录名称

（5）按照同样的方法，在文件夹1下创建第一个实例文件夹01。

（6）在第一个实例文件夹01上右击，在弹出的快捷菜单中选择New→HTML File命令，如图1.21所示。

图1.21　在文件夹下创建HTML文件

（7）此时弹出新建HTML文件对话框，如图1.22所示，在文本框中输入新建文件的名称index，然后按Enter键，完成index.html文件的创建。WebStorm会自动打开刚刚创建的文件，结果如图1.23所示。

图1.22　新建HTML文件对话框

图1.23　打开新创建的文件

（8）在<title>标记中将标题设置为“第一个JavaScript程序”，在<body>标记中编写JavaScript代码，如图1.24所示。

图1.24　设置标题并编写JavaScript代码

（9）使用谷歌浏览器运行E:\TM\sl\1\01目录下的index.html文件，在浏览器中将会查看到运行结果，如图1.25所示。

图1.25　程序运行结果

说明

脚本中使用的document.write()是JavaScript语句，其功能是直接在页面中输出括号中的内容。<script>标记可以放在Web页面的<head>…</head>标记中，也可以放在<body>…</body>标记中。

上一章目录下一章