您的位置：首页 > Web前端 > JavaScript

【javascript高级语言程序设计】二

2016-12-30 21:55 459 查看

一 <script>元素
async:表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。
charset:表示通过src指定的代码的字符集。
defer:表示脚本可以延迟到文档完全被解析和显示之后再执行。
src:表示要执行代码的外部文件
type:表示编写代码使用的脚本语言的内容类型。
二 <script>元素的引用方式:
内嵌的方式:

<script type="text/javascript">
alert(1);
</script>

外部引入的方式:

<script type="text/javascript" src="js/myjs.js" language="uft-8"></script>

把 javascript放在<head>中包含少量的js脚本是可行的，但是当需要加载很多js脚本的时候，这无疑导致浏览器在呈现页面时出现明显的延迟，而延迟期间浏览器窗口中将是一片空白。为了避免这个问题，现代Web应用程序一般都把全部JavaScript引用放在<body>元素页面内容的后面。
延迟加载
如下所示定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造，也就是说脚本会延迟到整个页面都解析完毕后载运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/myjs.js"  defer="defer" language="uft-8"></script>
<script type="text/javascript" src="js/myjs1.js"  defer="defer" language="uft-8"></script>
</head>
<body>

</body>
</html>

异步脚本:
都用于改变处理脚本的行为，async同样只适用于外部脚本文件，并告诉浏览器立即下载文件与defer
不同的是,标记为async的脚本不用按照他们的先后顺序执行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/myjs.js" async language="uft-8"></script>
<script type="text/javascript" src="js/myjs1.js" async language="uft-8"></script>
</head>
<body>

</body>
</html>三外部嵌入js代码的优点：
可维护性：遍及不同HTML页面的JavaScript会造成维护问题。把所有的js脚本放到一个文件夹中，维护起来就轻松了，开发人员也可以部触及html的情况下开发js
可缓存：浏览器能够根据具体的设置缓存链接的所有外部Javascript文件，也就是说，如果有两个页面都使用了同一个文件，那么这个文件只需要下载一次。
适应未来：通过外部文件来包含js，无需使用前面提到的XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航