12.1 JavaScript使用

在网页上插入JavaScript脚本时，脚本必须放在<script>标签中。<script>标签可以位于<body>标签和<head>标签中，一般在<head>标签中的脚本是JavaScript函数。下面的代码通过在<body>标签中嵌入JavaScript代码实现向网页输出字符串：

<body> <p>JavaScript能够直接写入HTML输出流中：</p> <script> document.write（"<h1>This is a heading</h1>"）; document.write（"<p>This is a paragraph.</p>"）; </script> <p>您只能在HTML输出流中使用 <strong>document.write</strong>。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p> </body>

此代码段在浏览器中的显示效果如图12-1所示。

图12-1 在<body>标签中嵌入JavaScript代码效果

也可以在<head>标签中定义函数，然后调用定义的函数：

<! DOCTYPE html> <html> <head> <script> function myFunction（） { document.getElementById（"demo"）.innerHTML="My First JavaScript Function"; } </script> </head> <body> <h1>My web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction（）">单击这里</button> </body> </html>

上面的代码在<head>标签中定义了函数“myFunction”，在网页中插入一个按钮，单击按钮时调用函数“myFunction”。代码段在浏览器中的显示效果如图12-2所示，其中图12-2（a）为单击按钮前的显示效果，图12-2（b）为单击按钮后的显示效果。

图12-2 调用<head>标签中定义函数的浏览效果

也可以把脚本保存到外部文件中，外部JavaScript文件的扩展名是“.js”。在网页中要使用外部js文件，只需在<head>标签中设置<script>标签的“src”属性，设有外部js文件“myScript.js”，文件中的内容为：

function myFunction（） { document.getElementById（"demo"）.innerHTML="我的第一个JavaScript函数"; }

“myScript.js”位于“js”文件夹。

下面的代码演示了网页怎样引用外部js文件并调用其中的函数：

<! DOCTYPE html> <html> <head> <script src="js/myScript.js"></script> </head> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction（）">单击这里</button> </body> </html>

单击按钮时，将调用外部js文件的“myFunction”函数，在网页上的显示效果如图12-2所示。