上一节:
下一节:

  JavaScript 使用

  • <script>标签

    在HTML中，必须在<script>和</script>标签之间插入JavaScript代码。 
    <script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
    尝试一下
    旧的JavaScript示例可能使用类型属性：<script type=“text/javascript”>。type属性不是必需的。JavaScript是HTML中的默认脚本语言。

  • JavaScript函数和事件

    JavaScript 函数是一段JavaScript代码，可以在“调用”时执行。例如，可以在事件发生时调用函数，例如当用户单击按钮时。
    您将在后面的章节中了解有关函数和事件的更多信息。

  • <head>或<body>中的JavaScript

    您可以在HTML文档中放置任意数量的脚本。脚本可以放置在<body>，或在<head>一个HTML页面的部分，或者在两者。

  • <head>中的JavaScript

    在此示例中，JavaScript 函数放置在HTML页面的<head>部分中。单击按钮时将调用该函数： 
    <!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>
    尝试一下

  • <body>中的JavaScript

    在此示例中，JavaScript 函数放置在HTML页面的<body>部分中。单击按钮时将调用该函数： 
    <!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>
    尝试一下
    将脚本放在<body>元素的底部可以提高显示速度，因为脚本编译会降低显示速度。

  • 外部JavaScript

    脚本也可以放在外部文件中： 
    function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}
    当在许多不同的网页中使用相同的代码时，外部脚本是实用的。JavaScript文件的文件扩展名为.js。要使用外部脚本，请将脚本文件的名称放在<script>标记的src属性中： 
    <script src="myScript.js"></script>
    尝试一下
    您可以将外部脚本引用<head>或<body>只要你喜欢。该脚本的行为就像它位于<script>标签所在的位置一样。
    外部脚本不能包含<script>标记。

  • 外部JavaScript优势

    将脚本放在外部文件中有一些优点：
    • 它分离HTML和代码
    • 它使HTML和JavaScript更易于阅读和维护
    • 缓存的JavaScript文件可以加快页面加载速度
    要将多个脚本文件添加到一个页面 - 使用多个脚本标记： 
    <script src="myScript1.js"></script>
<script src="myScript2.js"></script>

  • 外部JavaScript参考

    可以使用完整URL或相对于当前网页的路径引用外部脚本。此示例使用完整URL链接到脚本： 
    <script src="https://www.cainiaoya.com/images/myScript1.js"></script>
    尝试一下
    此示例使用位于当前网站上指定文件夹中的脚本： 
    <script src="/images/myScript1.js"></script>
    此示例链接到与当前页面位于同一文件夹中的脚本： 
    <script src="myScript1.js"></script>
上一节:
下一节: