Web全栈技术指南-2.3.1 script标签 - 书目录

Web全栈技术指南-2.3.1 script标签

2.3.1 script标签

HTML文档一般通过<script></script>标签引入JavaScript代码。例如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>你好</title>
  </head>
  <body>
    <button id="btn1">点我</button>
    <script>
      var btn = document.getElementById('btn1');
      btn.onclick = function() {
        document.body.innerHTML = '<h1>你好,JavaScript!</h1>';
      };
    </script>
  </body>
</html>

但我们一般把JavaScript代码放在一个单独的文件里,并从HTML文档里引用它1。例如:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>你好</title>
  </head>
  <body>
    <button id="btn1">点我</button>
    <script src=”hello.js”></script>
  </body>
</html>

其中hello.js的内容是:

var btn = document.getElementById('btn1');
btn.onclick = function() {
  document.body.innerHTML = '<h1>你好,JavaScript!</h1>';
};

读者应试着运行一下以上两个示例,看看是什么效果。

另外,<script></script>标签还可以包含在<head></head>标签里。读者可以修改示例代码,看看结果有什么不同,并研究一下原因2

1. 在上文CSS的部分我们提到“样式(代码)与内容(代码)相分离”的原则,在此我们遵循类似的规则,即“行为(代码)与内容(代码)相分离”。至此,内容(HTML),样式(CSS)和行为(JavaScript)都已登场,它们相互“独立”又关联。读者可在实践中细细体会。

2. 一般浏览器都有JavaScript调试器(debugger)。如果你遇到了问题,不妨打开调试器看看原因是什么。不同浏览器的调试器打开方式不同,请查找一下。

results matching “

    No results matching “

    134021

     

    转载链接:https://getfullstack.com/web_client/javascript/script-tag.html