<script>标签在HTML中的位置

来源:互联网 发布:物体识别软件 编辑:程序博客网 时间:2024/05/17 23:01

通常,我们把<script>元素都放在页面的<head>元素中,例如:

<!DOCTYPE html >
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function(){//页面所有元素加载完毕
var btn = document.getElementById("btn");  //获取id为btn的元素(button)
btn.onclick = function(){  //给元素添加onclick事件
var arrays = new Array();              //创建一个数组对象
var items = document.getElementsByName("check");  //获取name为check的一组元素(checkbox)
for(i=0; i < items.length; i++){  //循环这组数据
if(items[i].checked){      //判断是否选中
arrays.push(items[i].value);  //把符合条件的 添加到数组中. push()是javascript数组中的方法.
}
}
alert( "选中的个数为:"+arrays.length);
}
}
</script>
</head>
<body>
<form method="post" action="#">
<input type="checkbox" value="1" name="check" checked="checked"/>
<input type="checkbox" value="2" name="check" />
<input type="checkbox" value="3" name="check" checked="checked"/>
<input type="button" value="你选中的个数" id="btn"/>
</form>
</body>
</html>

这样做法的目的是把所有的外部文件的引用都放在相同的位置可是,在文挡的<head>元素中包含所有JavaScript 文

件,意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到

<body>标签时才开始呈现内容) 。对于那些需要很多JavaScript 代码的页面来说,这无疑会导致浏览器在呈现页面

时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现代Web应用程序一般都把全部

JavaScript引用放在<body>元索中,放在页面的内容后面。如下例所示:

<!doctype>
<html>
<head>
<meta charset="utf-8">
<script src="scripts/jquery-1.3.1.js" type="text/javascript"></script>
<title>例子3</title>
</head>
<body>
<input type="checkbox" value="1" name="check" checked>
<input type="checkbox" value="2" name="check" >
<input type="checkbox" value="3" name="check" checked>
<input type="button" value="你选中的个数" id="btn">
<script type="text/javascript">
window.onload = function(){//页面所有元素加载完毕
var btn = document.getElementById("btn");//获取id为btn的元素button
btn.onclick = function(){//给元素添加一个onclick事件
var arrays = new Array();//创建一个数组对象
var item = document.getElementsByName("check");//获取name为check的一组元素
for(i=0;i<items.length;i++){//循环这组数据
if(item[i].checked){//判断是否选中
arrays.push(item[i].value);//把符合条件的添加到数组中。push()是javascript数组中的方法


}
}
alert("选中的个数为:"+arrays.length)
}
</script>
</body>
</html>

这样,在解析包含的JavaScript 代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页

面的时间缩短而感到打开页面的速度加快了。

原创粉丝点击