通常情况下，在Web页面中使用JavaScript有以下三种方法：一种是在页面中直接嵌入JavaScript代码，另一种是链接外部JavaScript文件，还有一种是将其作为特殊标记的属性值使用。下面分别对这三种方法进行介绍。
1.3.1 在页面中直接嵌入JavaScript代码
在HTML文档中可以使用<script>…</script>标记将JavaScript脚本嵌入其中，在HTML文档中可以使用多个<script>标记，每个<script>标记标记中可以包含多个JavaScript的代码集合，并且各个<script>标记中的JavaScript代码之间可以互相访问，与将所有代码放在一对<script>…</script>标记中的效果相同。<script>标记常用的属性及说明如表 1.1所示。
| 属性 | 说明 |
| language | 设置所使用的脚本语言及版本 |
| src | 设置一个外部脚本文件的路径位置 |
| type | 设置所使用的的脚本语言，此属性已代替language属性 |
| defer | 此属性表示当HTML文档加载完毕后再执行脚本语言 |
language属性
language属性指定在HTML文档中使用的脚本语言及其版本。language属性的使用格式如下：
<script language="javascript1.5">说明：如果不定义language属性，浏览器默认脚本语言为JavaScript 1.0版本。
src属性
src属性用来指定外部脚本文件的路径，外部脚本文件通常使用JavaScript脚本，其扩展名为 .js。src属性的使用格式如下：
<script src="01.js">type属性
type属性用来指定HTML文档中使用的脚本语言及其版本，自HTML 4.0标准开始，推荐使用type属性来代替language属性。type属性的使用格式如下;
<script type="text/javasciprt">defer属性
defer属性的作用是当文档加载完毕后再执行脚本，当脚本语言不需要立即执行时，设置defer属性后，浏览器将不必等待脚本语言装载，这样页面加载会更快。但当有一些脚本需要在页面加载过程中或加载完成后立即执行时，就不再需要使用defer属性。defer属性的使用格式如下：
<script defer>实例01 编写第一个JavaScript程序
编写第一个JavaScript程序，在WebStorm工具中直接嵌入JavaScript代码，在页面中输出“我喜欢学习JavaScript”。
具体步骤如下;
（1）启动WebStorm，如果还未创建任何项目，会弹出如图 1.22所示的对话框。
（2）单击图 1.22中的Create New Project 选项弹出创建新项目对话框，如图 1.23所示。在对话框中输入项目名称“Code”，并选择项目存储路径，将项目文件夹存储在计算机中的E盘中，然后单击Create按钮创建项目。
（3）在项目名称“Code”上单击鼠标右键，然后依次选择New→Directory菜单项，如图 1.24所示。
（4）选择Directory菜单项，弹出新建目录对话框，如图 1.25所示，在文本框中输入新建目录的名称“SL”，然后按下键盘中的<Enter>，完成文件夹 SL 的创建。
（5）按照同样的方法，在文件夹SL下创建本章实例文件夹01，在该文件夹下创建第一个实例文件夹 01.
（6）在第一个实例文件夹 01上单击鼠标右键，然后依次选择New→HTML File菜单项，如图 1.26所示。
（7）选择HTML File选项，弹出新建HTML文件对话框，如图 1.27所示，在文本框中输入新建文件的名称“index”，然后按下键盘中的<Enter>键，完成index.html文件的创建。此时，开发工具会自动打开刚刚创建的文件，结果如图 1.28所示。
（8）讲实例背景图片 bg.gif复制到“E:\Code\SL\01\01”目录下，设置背景图片的存储了路径为“光盘\Code\SL\01\01”.
（9）在<title>标记中将标题设置为“第一个JavaScript程序”，在<body>标记中编写JavaScript代码，如图 1.29所示。
双击“E:\Code\SL\01\01”目录下的index.html文件，在浏览器中将会看到运行结果，如图 1.30所示。
说明：
（1）<script>标记可以放在Web页面的<head></head>标记中，也可以放在<body></body>标记中。
（2）脚本中使用的document.write是JavaScript语句，可以直接在页面中输出括号中的内容。
拓展训练
一、在WebStorm开发环境中应用 document.write 语句输出由“*”组成的菱形，运行结果如图 1.31所示。（源代码：https://cdncos.worthstudy.cn/tbnote/2023/01/16/01.rar）
二、在WebStorm开发环境中应用 document.write语句输出一张名为 rabbit.jpg的图片，该图片储存在“光盘\Code\Try\01\02”目录下，运行结果如图 1.32所示。（源代码：https://cdncos.worthstudy.cn/tbnote/2023/01/16/02.rar）
1.3.2 链接外部JavaScript文件
在Web页面中引入JavaScript的另一种方法是采用链接外部JavaScript文件的形式。如果代码比较复杂或是同一段代码可以被多个页面所使用的，则可以将这些代码放置在一个单独的文件中（保存文件的扩展名为 .js），然后在需要使用该代码的Web页面中链接该JavaScript文件即可。
在Web页面中链接外部JavaScript文件的语法格式如下：
<script rype="text/javascript" src="javascript.js"></script>说明：如果外部JavaScript文件保存在本机中，那么src属性可以是绝对路径或是相对路径；如果外部JavaScript文件保存在其他服务器中，则src属性需要指定绝对路径。
实例02 调用外部JavaScript文件
在HTML文件中调用外部JavaScript文件，运行时会在页面中显示对话框，然后在对话框中输出“我喜欢学习JavaScript”。
具体步骤如下：
（1）在本章实例文件夹 01 下创建第二个实例文件夹 02.
（2）在文件夹 02 上单击鼠标右键，然后依次选择 New→JavaScript File菜单项，如图 1.33所示。
（3）选择JavaScript File菜单项，弹出新建JavaScript文件对话框，如图 1.34所示，在文本框中输入JavaScript文件的名称“index”，然后按下键盘中的<Enter>键，完成index.js文件的创建。此时，开发工具会自动打开刚刚创建的文件。
（4）在index.js文件中编写JavaScript代码，代码如图 1.35所示。
说明：代码中使用的 alert是JavaScript语句，其功能是在页面中弹出一个对话框，对话框中可以显示括号中的内容。
（5）在文件夹下02创建index.html文件，在该文件中调用外部JavaScript文件index.js，代码如图 1.36所示。
双击“E:\Code\SL\01\02”目录下的index.html文件，运行结果如图 1.37所示。
拓展训练
一、在WebStorm开发环境中应用 alert语句输出古诗《枫桥夜泊》，运行结果如图 1.38所示。（光盘\Code\Try\01\03）（源代码：https://cdncos.worthstudy.cn/tbnote/2023/01/16/03.rar）
二、在WebStorm开发环境中应用 alert语句输出现在日期和时间，运行结果如图 1.39所示。（光盘\Code\Try\01\04）（源代码：https://cdncos.worthstudy.cn/tbnote/2023/01/16/04.rar）
注意：
（1）在外部JavaScript文件中，不能将代码用<script>和</script>标记括起来。
（2）在使用src属性引用外部JavaScript文件时，<script></script>标记中不能包含其他JavaScript代码。
（3）在<script>标记中使用src属性引用外部JavaScript文件时，</script>结束标记不能省略。
1.3.3 作为标记的属性值使用
在JavaScript脚本程序中，有些JavaScript代码可能需要立即执行，而有些JavaScript代码可能需要单击某个超链接或者触发一些事件（如单击按钮）之后才执行。下面介绍如何将JavaScript代码作为标记的属性值使用。
1.通过“javascript:”调用
在HTML中，可以通过“javascript:”的方式来调用javascript的函数或方法。实例代码如下：
<a href="javascript:alert('您单击了这个超链接')">清单击这里</a>在上述代码中通过使用“javascript:”来调用alert()方法，但该方法并不是在浏览器解析到“javascript:”时就立即执行，而是在单击该超链接时才会执行。
2.与事件结合调用
JavaScript可以支持很多事件，而时间可以影响用户的操作。比如单击鼠标左键、按下键盘或移动鼠标等。与事件结合，可以调用执行JavaScript的方法或函数。示例代码如下：
<input type="button" value="单击按钮" onclick="alert('您单击了这个按钮')" />在上述代码中，onclick是单击事件，意思是当单击对象时将会触发JavaScript的方法或函数。
本人于2023年1月16日20:44:58学习完该章节，特于此记录并分享。
暂无评论内容