赞
踩
<script>
元素使用javascript,只需要在HTML中引入
使用方式有两种,一种是在页面中嵌入Jascript代码,一种是包含外部Javascript文件,代码如下:
内部引用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<!--直接使用-->
<script type="text/javascript">
function printMsg(){
alert("这是外部引用");
}
</script>
</html>
外部引用 (文件 sourceOuter.html sourceOuter.js)
sourceOuter.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<!--这是外部引用-->
<script type="text/javascript" src="sourceOuter.js">
</script>
</html>
sourceOuter.js
function printMsg(){
alert("这是外部引用");
}
<script>
元素的属性<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script async="" charset="UTF-8" defer="defer" language="" src="" type="">
//1 async属性 可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作。只对外部脚本有效
//2 charset属性 可选。指定字符集,一般都为UTF-8
//3 defer 可选 表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效
//4 language 已废弃
//5 src 可选。 表示要引用的外部地址路径
//6 type 可选 表示编写代码使用的脚本语言的内容类型,通常为text/javascript
</script>
</html>
注意:五菱如何包含代码,只要不存在defer和async顺序ing,浏览器都会安装<script>
元素在页面中出现的顺序进行解析
第一种,放在页面中的<head>
元素中,
在文档的<head>
元素中包含所有的Javascript文件,意味着必须等到全部JavaScript代码都被下载、解析、执行完成之后,才能开始呈现页面的内容。这个无疑会导致页面呈现效果的延迟
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="example01.js"></script>
<script type="text/javascript" src="example02.js"></script>
</head>
<body>
<!--这里是内容区域-->
</body>
</html>
第二种,放在<body>
元素中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这里是内容区域-->
<script type="text/javascript" src="example01.js"></script>
<script type="text/javascript" src="example02.js"></script>
</body>
</html>
在script元素的里面添加属性defer=”defer”,这个属性的用途是表名脚本在执行是不会影响的页面的构造,示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--defer.js 使用了defer属性,这个脚本不会影响页面的构造,脚背会被延迟到整个页面都解析完毕后再执行 -->
<script type="text/javascript" defer="defer" src="defer.js"></script>
<script type="text/javascript" src="outer.js"></script>
</head>
<body>
</body>
</html>
<script>
元素定义了async属性,此属性只因用于外部脚本文件,并告诉浏览器立即下载文件,但是标记为async的脚本并不保证安装指定他们的先后顺序执行
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--两个文件执行不能确保先后顺序,-->
<!--注意:在xhtml文档中,要把async改成async="async"-->
<script type="text/javascript" async src="example01.js"></script>
<script type="text/javascript" async src="example02.js"></script>
</head>
<body>
<-- content-->
</body>
</html>
。。。待补充
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。