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>