![Java Script从入门到精通(第5版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/758/52842758/b_52842758.jpg)
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按钮创建项目。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P27_54926.jpg?sign=1739589703-wDBDF4DqToaWGZJE1AcQNf8C4I5CwREs-0-b0f54fd3907e22eac05422e0c93b2814)
图1.17 WebStorm欢迎界面
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P27_54927.jpg?sign=1739589703-9F5UyCNRFZNmEyMrDfrbzAreXQlU2gP3-0-9fa8cc84a2b39702029144244a5ec340)
图1.18 创建新项目窗口
(3)在项目名称sl上右击,在弹出的快捷菜单中选择New→Directory命令,如图1.19所示。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P28_54928.jpg?sign=1739589703-snOMNtl45ZVWrmzlTnav5aeycX4SWiBr-0-6c9b854ef5864ed4afd57c7e6a9de5e7)
图1.19 在项目中创建目录
(4)此时弹出新建目录对话框,如图1.20所示,在文本框中输入新建目录的名称作为本章实例文件夹,然后按Enter键,完成文件夹的创建。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P28_54929.jpg?sign=1739589703-TKZfd7BYL0nteH7PpTKw1h8zxIHA0vIX-0-33afd2213326584cfba8cc1c85e129de)
图1.20 输入新建目录名称
(5)按照同样的方法,在文件夹1下创建第一个实例文件夹01。
(6)在第一个实例文件夹01上右击,在弹出的快捷菜单中选择New→HTML File命令,如图1.21所示。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P28_54930.jpg?sign=1739589703-IiS0br95mJ54GrIipLAqsTsXBwSZIk8o-0-f0e5847620d07200aa3d212b3c260bc9)
图1.21 在文件夹下创建HTML文件
(7)此时弹出新建HTML文件对话框,如图1.22所示,在文本框中输入新建文件的名称index,然后按Enter键,完成index.html文件的创建。WebStorm会自动打开刚刚创建的文件,结果如图1.23所示。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P29_54931.jpg?sign=1739589703-WBgnS8HQ3FDekf73THeZPMZZq1j2bJyR-0-5b3ff6689807cad2741add1b774d00a9)
图1.22 新建HTML文件对话框
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P29_4574.jpg?sign=1739589703-VtKwmc42rLjtnZf37NDrp1ieim3nSGRo-0-2b7c3498d24e5d4e8ccc2e42bdd63a64)
图1.23 打开新创建的文件
(8)在<title>标记中将标题设置为“第一个JavaScript程序”,在<body>标记中编写JavaScript代码,如图1.24所示。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P29_54932.jpg?sign=1739589703-PRwkfDVDVh6Hc7p2iyZqr2DW2LPka19l-0-e7245e95ab72856a323aedb12774a694)
图1.24 设置标题并编写JavaScript代码
(9)使用谷歌浏览器运行E:\TM\sl\1\01目录下的index.html文件,在浏览器中将会查看到运行结果,如图1.25所示。
![](https://epubservercos.yuewen.com/F2DC7F/31398433307916706/epubprivate/OEBPS/Images/Figure-P30_4667.jpg?sign=1739589703-CXojBD3ZOTd70wNVmf2ZjFp2bKcFQb0r-0-ac6fd400d66e9b9637c7161279bee9c7)
图1.25 程序运行结果
说明
脚本中使用的document.write()是JavaScript语句,其功能是直接在页面中输出括号中的内容。<script>标记可以放在Web页面的<head>…</head>标记中,也可以放在<body>…</body>标记中。