HTML中的 JavaScript 运行模式

导读:

在前面章节中,我们提到了,JavaScript在诞生初期,主要用途是代替Perl等服务器端语言处理输入验证,但如今 JavaScript,已经被广泛应用在了 WEB 开发领域,所以本章节就和大家聊聊,JavaScript,是如何应用在 HTML 网页中的,并且它是如何,发挥特定的作用的。


要将 JavaScript 引入网页,首先要解决它与网页的主导语言HTML的关系问题。在 JavaScript 早期,网景公司的工作人员希望在将 JavaScript 引入HTML页面的同时,不会导致页面在其他浏览器中渲染出问题。通过反复试错和讨论,他们最终做出了一些决定,并达成了向网页中引入通用脚本能力的共识。当初他们的很多工作得到了保留,并且最终形成了HTML规范


HTML中的 JavaScript 运行模式_第1张图片

。比如,下面的代码会导致浏览器报错:

<script>
  function sayScript() {
    console.log("");  //不能出现 
  }
  sayScript()
</script>

这是因为浏览器解析行内脚本的方式决定了它在看到字符串时,会将其当成结束的标签,造成代码运行异常终止。

第二种

如果要使用包含外部文件中的 JavaScript 脚本,就必须使用src属性。这个属性的值是一个URL,指向的是包含JavaScript 代码的文件,比如:

 <script src="./Separation/index.js"></script>

这与解释行内J avaScript 脚本一样,在解释外部JavaScript文件时,页面也会阻塞。(阻塞时间也包含下载文件的时间。)

扩展补充

按照惯例,外部JavaScript文件的扩展名是.js。这不是必需的,因为浏览器不会检查所包含JavaScript文件的扩展名。这就为使用服务器端脚本语言动态生成JavaScript代码,或者在浏览器中将JavaScript扩展语言(如TypeScript,或React的JSX)转译为JavaScript提供了可能性。不过要注意,服务器经常会根据文件扩展来确定响应的正确MIME类型。如果不打算使用.js扩展名,一定要确保服务器能返回正确的MIME类型。

需要注意

一但使用了src属性的标签中再包含其他JavaScript代码。如果两者都提供的话,则浏览器只会下载并执行脚本文件,从而忽略行内代码。

你可能感兴趣的:(JavaScript,javascript,html,前端,html5,ecmascript)