美文网首页我爱编程
第2章 在HTML中使用JavaScript

第2章 在HTML中使用JavaScript

作者: meiqiuyang | 来源:发表于2018-04-13 02:28 被阅读0次
本章内容
  • 使用<script>元素
  • 嵌入脚本与外部脚本
  • 文档模式对JavaScript的影响
  • 考虑禁用JavaScript的场景

1 <script>元素
<script>的一些属性:

  • async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作。脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行),只对外部脚本文件有效。
  • charset:可选。表示通过src属性制定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少有人用。
  • defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
  • language:可选。已废弃。
  • src:可选。表时包含要执行代码的外部文件。
  • type:可选。表示编写代码使用的脚本语言的内容类型(也曾MIME类型)。如果没有指定这个属性,则其默认值是text/javascript。

按照惯例,外部JavaScript文件都会带有.js扩展名。但是呢,这个扩展名其实不是必须的,因为浏览器不会检查包含JavaSrcipt文件的扩展名,很皮。这样一来,使用服务器端语言动态生成JavaScript代码也就成为了可能。但是,服务器端还需要确保返回正确的MIME类型。

1.1 标签的位置
如果把所有的外部文件都放在<head>中,且没有设置async或者defer属性,那么根据浏览器解析文档从上往下的机制,只有当<head>中的内容全部被下载、解析和执行后,才能开始呈现页面的内容(<body>)。但<head>标签中的多或者下载的慢,这个时候无疑会导致浏览器在呈现页面的时候出现明显的延迟(浏览器窗口是一片空白)。
怎么避免呢?
1,将js代码或者引用的文件都放在<body>的里面且放在最后;
2,<script>的async属性;
3,等等等。。。。

1.2 延迟脚本
<script>的defer属性。相当于告诉浏览器立刻下载,但是要等到页面出来后才会执行。

1.3 异步脚本
<script>的async属性。相当于告诉浏览器立刻下载,但是浏览器自己也不知道执行脚本的先后顺序。

2 <noscript>元素
顾名思义,用在浏览器不支持JavaScript的情况和JavaScript被禁用的情况。

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <p>Hello World!</p>
    <noscript>
        <p>本页面需要浏览器支持(启用)JavaScript。</p>
    </noscript>
</body>
</html>

3 小结
把JavaScript插入到HTML页面中需要使用<script>元素。这个元素呢,可以把JavaScript嵌入到HTML页面中,让脚本与标记混合在一起;
需要注意的有:

  • 在包含外部JavaScript文件的时候,必须将src属性设置为指向相应文件的URL。(不然找不到呀)
  • 所有<script>元素都会按照他们在页面中出现的先后顺序来解析(在么有设置async和defer属性的情况下)
  • 由于浏览器会先解析完不使用defer属性的<script>元素中的代码,然后在解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,</body>前面。(为了提高页面展现内容的速度)
  • 使用defer属性可以让脚本在文档完全呈现后在执行。延迟脚本总是按照指定他们的顺序执行。
  • 使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照他们在页面中的顺序执行。

另外,使用<noscript>元素可以制定在不支持脚本的浏览器中显示替代内容。

相关文章

  • JavaScript高级程序设计 读书笔记(一)

    在HTML中使用JavaScript 元素向HTML页面中插入JavaScript的主要方法,就是使用 元素。这个...

  • JS 笔记-002-基本语句

    如需在 HTML 页面中插入 JavaScript,请使用 标签。 和 会告诉 JavaScript 在何...

  • 在HTML中使用Javascript

    把Javascript插入到HTML页面中要使用 元素。使用这个元素可以把Javascript嵌入到HTML页面中...

  • 如何在HTML中使用JavaScript

    把JavaScript插入到HTML页面中需要使用 元素。使用这个元素可以把JavaScript嵌入到HTML中,...

  • JS高程(一)

    复习 JavaScript 高程, 基本上 是 摘抄原文。 在 HTML 中 使用 JavaScript JS 包...

  • 在 HTML 中使用 JavaScript

    1.