02.在HTML中使用JavaScript

在HTML中使用JavaScript

<script>元素

通过<script>元素插入JavaScript

HTML4.01为<script>定义了以下6个属性:
  1. async
  • 可选
  • 表示应该立即下载脚本,但不应妨碍页面中的其他操作
  • 只对外部脚本有效
  1. charset
  • 可选
  • 表示通过src属性指定的代码的字符集
  1. defer
  • 可选
  • 表示脚本可以延迟到文档完全被解析和显示之后再执行
  • 只对外部脚本有效
  1. language
  • 已废弃
  • 表示用于表示代码使用的脚本语言
  1. src
  • 可选
  • 表示包含要执行代码的外部文件
  1. type
  • 可选
  • 可以看成language的替代属性,表示编写代码使用的脚本语言的内容类型(MIME类型)
  • 人们使用的是text/javascripttext/ecmascript(不推荐)
  • 实际服务器传送JavaScript文件时使用的MIME类型通常是application/x-javascript
  • 不过,这个属性不是必需的,默认值为text/javascript
使用<script>元素的方式有两种
  1. 直接在页面中嵌入JavaScript代码

    <script type="text/javascript">
        function sayHi(){ 
            alert("Hi!");
        }
    </script>
    
  2. 通过src包含外部JavaScript文件

    <script type="text/javascript" src="example.js"></script>
    

    带有src属性的<script>元素不应该在其<script></script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码,则只会下载并执行脚本文件,嵌入的代码会被忽略

标签的位置

按照惯例,所有<script>元素都应该放在页面的<head>元素中

意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容。

为了避免这个问题,现代Web应用程序一般都把全部JavaScript引用放在<body>元素中,放在页面的内容后面

  1. 延迟脚本

通过defer属性,告诉浏览器立即下载,但延迟执行。最好只包含一个延迟脚本。只适用于外部脚本文件。

<script type="text/javascript" defer="defer" src="example1.js"></script>
  1. 异步脚本

async只适用于外部脚本文件,并告诉浏览器立即下载文件。

<script type="text/javascript" async src="example1.js"></script>

嵌入代码与外部文件

使用外部文件的优点:

  1. 可维护性
  2. 可缓存
  3. 适应未来

文档模式

  • 混杂模式

  • 标准模式

    <!-- HTML 5 -->
    <!DOCTYPE html>
    
  • 准标准模式

<noscript>元素

用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>中的任何HTML元素——<script>元素除外。包含在<noscript>元素中的内容只有在下列情况下才会显示出来:

  • 浏览器不支持脚本;
  • 浏览器支持脚本,但脚本被禁用。

小结

把JavaScript插入到HTML页面中要使用<script>元素。使用这个元素可以把JavaScript嵌入到HTML页面中,让脚本与标记混合在一起;也可以包含外部的JavaScript文件。而我们需要注意的地方有:

  • 在包含外部JavaScript文件时,必须将src属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。

  • 所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用deferasync属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码。

  • 由于浏览器会先解析完不使用defer属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,</body>标签前面。

  • 使用defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。

  • 使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。

另外,使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本的情况下,浏览器不会显示<noscript>元素中的任何内容。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值