社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
向HTML中插入JavaScript的主要方法,就是使用script标签
HTML 4.01为script标签定义了6个属性
使用script标签的方式:直接在页面中嵌入JavaScript代码和包含外部文件
在使用script标签嵌入JavaScript代码时,需要为该标签指定type属性,然后将JavaScript代码放入即可
<script>
function sayHi(){
alert("Hi~")
}
<script>
注意:
如果要使用外部JavaScript文件,则script标签的src属性就是必须的,这个属性的值就是一个指向外部JavaScript文件的链接
<script type="text/javascript" src="example.js"></script>
在使用嵌入式JavaScript代码时,切忌不要在任何地方出现“script”字符串,因为浏览器会将其解析为结束标签
eg:错误的写法(会报错)
<script>
function sayScript(){
alert("</script>");
}
</script>
eg:正确的写法(通过转义字符转义)
<script>
function sayScript(){
alert("</script>");
}
</script>
按照传统的做法,所有的script标签都要放在页面的head标签中。
这种做法意味着页面要等全部的JavaScript代码都被下载和执行完成以后,才开始呈现页面的内容。这无疑会导致页面页面在加载的时候出现延迟。影响用户体验。为避免这个问题,现代的web应用程序一般把全部的JavaScript放在
标签的最后面<!DOCTYPE>
<html>
<head>
<title>Example Html page</title>
</head>
<body>
//...内容区
<script type="text/javascript" src="example1.js" ></script>
<script type="text/javascript" src="example2.js" ></script>
</body>
</html>
defer属性:脚本会被延迟到整个页面都解析完成之后再运行,因此,在script标签中设置该属性,等于告诉浏览器,立即下载,延迟执行
async:只适用于外部脚本文件,并告诉浏览器立即下载文件,但是并不保证按照指定它们的先后顺序执行
一般认为最好的做法还是尽可能使用外部文件来包含JavaScript代码
外部文件含有如下优点:
noscript
元素包含noscript
的元素只有在以下情况下才会显示出来
只有符合以上条件,noscript
标签中的内容才会显示出来
<!DOCTYPE>
<html>
<head>
<title>Example Html page</title>
<script type="text/javascript" src="example1.js" ></script>
<script type="text/javascript" src="example2.js" ></script>
</head>
<body>
<noscript>
<p>
本页面需要浏览器支持(启用)JavaScript
</p>
</noscript>
</body>
</html>
这个页面会在脚本无效的情况下向用户展示一条信息。而在启用了脚本的浏览器中,用户永远也不会看到它,即使它是页面的一部分
script
标签必须使用src属性指定外部文件链接script
标签之后,才会解析后面的noscript
标签可以指定在不支持脚本的浏览器中显示替代的内容,但是在启用了脚本的浏览器中,浏览器不会显示该标签中的任何内容如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!