19.2　添加嵌入脚本

嵌入脚本位于HTML文档之内，同嵌入样式表很相似。嵌入的脚本包含在script元素内，如图19.2.1所示。嵌入脚本并不是首选的方法（参见19.1节），但有时必须这样做。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="utf-8" />
  5.      <title>Adding an Embedded Script</title>
  6. <link rel="stylesheet" href="css/base.css" />
  7. </head>
  8. <body>
  9. ……所有HTML内容写在这里……
  10.  
  11. <script>
  12. /*
  13. JavaScript代码写在这里
  14. */
  15. </script>
  16. </body>
  17. </html>

图19.2.1　嵌入脚本没有src属性。相反，代码位于页面之内。如果要嵌入脚本，应该尽可能地在结束标记之前这样做。虽然也可以在head中嵌入脚本（如图19.2.2所示），但通常出于性能原因而避免这样做

添加嵌入脚本的步骤

  • 在HTML文档中，输入。

  • 输入脚本的内容。

  • 输入。

提示　每个脚本都按照它们出现在HTML中的顺序依次进行处理，无论是嵌入脚本还是外部脚本（参见19.1节）。

　

提示　尽管script元素必须有结束标记（），但在有src属性的情况下，不能在该元素的开始标记和结束标记之间嵌入脚本（参见19.1节）。也就是说，是无效的。对于任何script元素，要么仅通过src加载外部脚本，要么嵌入脚本并不含src。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.      <meta charset="utf-8" />
  5.      <title>Loading an External Script</title>
  6. <!-- 在加载任何JS文件之前加载样式表 -->
  7. <link rel="stylesheet" href="base.css" />
  8. <script>
  9. /*
  10. JavaScript代码写在这里
  11. */
  12. </script>
  13. </head>
  14. <body>
  15. ……所有的HTML内容写在这里……
  16. </body>
  17. </html>

图19.2.2　在这个例子中，嵌入脚本位于head中。它位于link元素的后面，从而让CSS文件更快地加载。关于为什么要尽可能地避免在head中嵌入脚本，参见“脚本和性能的最佳实践”