首页 > 代码库 > JavaScript_process01
JavaScript_process01
JavaScript_process01
和html使用css一样，使用js也有两种途径，其一为内嵌js代码，其二是外部引用.js文件。
******************************************************************
需要注意的是，带有src属性的<script>元素，即采用外部引用方式，不应该在其<script>和</script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码，则只会下载并执行脚本文件，嵌入的代码会被忽略。 另外，通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。这一点既使<script>元素倍显强大，又让它备受争议。位于外部域中的代码也会被加载和解析，就像这些代码位于加载它们的页面中一样。利用这一点就可以在必要时通过不同的域来提供JavaScript文件。不过，在访问自己不能控制的服务器上的JavaScript文件时则要多加小心。考虑到如今网络安全hack事件遍布大街小巷，安全意识一定不能放轻，因此，如果想包含来自不同域的代码，则要么你是那个域的所有者，要么那个域的所有者值得信赖。
******************************************************************
一 标签的位置
传统来说，<script></script>应该位于head内部，虽然规范化了，但针对现在的网页复杂性，会产生很大的延迟，因为在.js加载完全之前Body元素不会得到展现。
所以，现在web应用程序一般都采用把.js放在内容后面，即：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>with a js page</title>
</head>
<body>
頁面內容 ｂｙ ｄｏｒｉｓｗｏｗｏ
<script type="text/javascript" src="http://www.mamicode.com/js1.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js2.js"></script>
</body>
</html>
这样的话页面就会优先加载内容显示，用户体验得到提升~
二.延迟脚本
#使用defer属性，使得在页面加载完全之后，即</body>之后，脚本才执行
#defer属性要求只能用于外部引用脚本，但是IE4~7仍支持内部嵌入脚本，8以后完全支持html5规范
#chrome，firefox，ie4，safari是最早支持该属性的，但还是有些浏览器不支持，所以最好还是放在页底咯~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>with a js page</title>
<script type="text/javascript" defer="defer" src="http://www.mamicode.com/js1.js"></script>
<script type="text/javascript" defer="defer" src="http://www.mamicode.com/js2.js"></script>
</head>
<body>
頁面內容
</body>
</html>
*html5要求脚本按照顺序执行，即js1先于js2,但实际中不是很有效，所以为了避免错乱，最好是只设定一个延迟加载
三 异步脚本
#和defer类似，用于改变脚本的执行行为的，但是该属性不保证脚本顺序执行，所以要注意脚本之间的依赖关系
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>with a js page</title>
<script type="text/javascript" async="async" src="http://www.mamicode.com/js1.js"></script>
<script type="text/javascript" async="async" src="http://www.mamicode.com/js2.js"></script>
</head>
<body>
頁面內容
</body>
</html>
四 在xhtml,html中注意点
如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>with a js page</title>
<script type="text/javascript">
function cmp(a,b){
if(a < b )
alert("a<b啦")
}
</script>
</head>
<body>
頁面內容
</body>
</html>
#在html中可以正常运行，但用于xhtml的特殊严格规则，对于<会解析为一个标签开始，之间不能有空格，会报错误
解决方法为：将a<b改为a<b
五 不推荐使用script时
#若浏览器不支持script元素，则使用html的注释<!-- -->将其<script></script>内注释掉，以免浏览器将其解释为内容而影响页面排版
六 文档格式
#html5之前的文档格式声明都是一大串，我也记不住，但html5写出来就是分分钟的事啦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>with a js page</title>
</head>
<body>
頁面內容
</body>
</html>
七 浏览器不支持javascript时：noscript
#最后说一个noscript，当浏览器压根不支持javascript，或者脚本被禁用时，采用noscript给用户友好的提示
#当然了，如果不存在上述问题就忽略啦，相当于没有该元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>with a js page</title>
</head>
<body>
頁面內容
<noscript>wow~该浏览器不支持javascript，请换个浏览器或者解除脚本禁用选项~</noscript>
</body>
</html>
JavaScript_process01