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文件里面的元素进行解析。
相关文章
- 《JavaScript Dom编程艺术》读书笔记(二)
- Javascript Prototypes之旅(A Plain English Guide to JavaScript Prototypes译文)
- javascript获取表单值的7种方式
- javascript按键盘上/右/下/左箭头加速运动
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] Compose multiple functions for new behavior in JavaScript
- [Javascript] Manipulate the DOM with the classList API
- [Javascript] Safe Nested Object Inspection
- [Javascript] An Introduction to JSPM (JavaScript Package Manager)
- [Javascript] Use requestIdleCallback to schedule JavaScript tasks at an optimal time
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Decorators in JavaScript
- [Javascript] Hoisting in JavaScript
- JavaScript易错知识点整理
- javascript: 复制对象时的深拷贝及浅拷贝(chrome 105.0.5195.125)
- javascript面向对象之Javascript 继承
- Javascript 知识点简介
- Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制
- JavaScript是什么?JavaScript简介
- 【华为OD机试 2023】最小调整顺序次数 / 特异性双端队列(C++ Java JavaScript Python)
- leetcode 077. 链表排序 JavaScript
- Javascript undefined 和 null
- python web py入门(20)- javascript的变量
- JavaScript 函数语法
- Javascript this关键字