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>
頁面內容 by doriswowo
<script type="text/javascript" src="js1.js"></script>
<script type="text/javascript" src="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="js1.js"></script>
<script type="text/javascript" defer="defer" src="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="js1.js"></script>
<script type="text/javascript" async="async" src="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&lt;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>

时间: 2024-10-18 07:11:57

JavaScript_process01的相关文章