JavaScript之<script>标签简介

向html页面中插入JavaScrpt的主要方法,就是使用<script>元素,下面是Html 4.01为<script>定义的6个属性。

1、async:可选表示应该立即下载脚本,但是不妨碍页面中的其他操作,比如下载比如下载其他资源或等待加载其他脚本。这个属性只对外部脚本有效

2、charset:可选。表示脚本通过src属性指定的代码的字符集。大多数浏览器会忽略它的值,所以这个属性也很少用。

3、defer:可选。表示脚本可以延迟到文档完全被解析和显示之后在执行。只对外部脚本有效。代码如下:

aaa.js文件

alert(document.getElementById("div"));

html文件:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="aaa.js"></script>
</head>
<body>
<div id="div"></div>
</body>
</html>

输出:null

现在给外部<script>标签加上defer属性

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="aaa.js" defer="defer"></script> //加上了defer属性
</head>
<body>
<div id="div"></div>
</body>
</html>

输出:[object HTMLDivElement]  这个属性很重要!

4、Lanuage:废弃,表示编写代码使用的脚本语言(如JavaScript,VBScript等)。现在大多数浏览器会忽略这个属性。

5、scr:表示要执行外部代码的外部文件。

6、type:可选。表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。虽然text/javascript和text/ecmascript都已经不被推荐使用,但我们大多数都会用text/javascript。实际上,服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript,但在type中设置这个值可能导致脚本被忽略。另外在非IE下可以使用以下值:application/javascript和application/ecmascript。考虑到约定俗成和最大限度的浏览器兼容性,目前type的属性值依然是text/javascript。不过,这个属性不是必须的,如果没有指定这个属性,则其默认值仍为text/javascript。

关于<script></script>元素的使用有下面几点需要注意的

(1)带有src属性的<script>元素不应该在其<script></script>标签之间在出现JavaScript代码,如果出现了,浏览器会下载并执行外部脚本文件,嵌入的代码会被忽略。

(2)<script>元素的src属性还可以包含来自外部域的JavaScript文件。代码如下:

<script src="http://www.tongli.con/test.js" defer="defer"></script>

这样位于外部域中的JavaScript代码也会被加载和解析,用这种方法加载Js文件看似强大,但是要注意安全性。

(3)<script>元素,只要不存在defer和async属性,浏览器都会按照文档流的形式依次对html文件里面的元素进行解析。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏自由而无用的灵魂的碎碎念

去掉windows8.1鸡肋的开始按钮

可以使用我分享的链接下载startisgone: http://download.csdn.net/detail/wangallan/8972885

952
来自专栏腾讯云serverless的专栏

使用腾讯云 SCF 云函数压缩 COS 对象存储文件

如何处理 COS 对象存储中的大量文件打包需求?或许 SCF 无服务器云函数能助你一臂之力!

1.8K2
来自专栏小狼的世界

如何在iOS 7.0中隐藏状态栏

使用Cordova做了一个小项目,在原来iOS6的时候显示挺好,升级为iOS7后,每次App启动后都会显示状态栏,而且状态栏和App的标题栏重叠在一起,非常难看...

812
来自专栏Golang语言社区

go语言读取csv文件并输出的方法

本文实例讲述了go语言读取csv文件并输出的方法。分享给大家供大家参考。具体实现方法如下: package main import ( "encodi...

3778
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.5 HTML5程序调试

假设有一个网页,由debug.html何debug.js构成,其中debug.html内容如下:

1143
来自专栏cnblogs

Webpack+Vue如何导入Jquery和Jquery的第三方插件

创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; win...

26310
来自专栏jojo的技术小屋

原 Vue.js、vue安装步骤、单文件组

2025
来自专栏计算机编程

SNS项目笔记<五>--content滚动の坑

1083
来自专栏web编程技术分享

【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面

3948
来自专栏微信小程序开发

小程序中滚动条的使用,wx.pageScrollTo和&lt;scroll-view&gt;的对比

知晓程序员,专注微信小程序开发的程序员! 前言:近期小程序项目中用到了滚动条功能,官方文档中提供两种方式。即wx.pageScrollTo滚动到page页面的指...

7237

扫码关注云+社区

领取腾讯云代金券