如何在网页中使用javascript?有2种方式:1.直接嵌入script代码。2:引入外部JS代码。
第1种:在网页中使用JS代码,代码如下:
<html>
<head>
</head>
<body>
</body>
</html>
<script type="text/javascript">
// 这里开始写JS代码
alert(\'hello world!\');
</script>
第2种:引入外部JS文件,格式如下:
<script type="text/javascript" defer="defer" async="async" src="test.js"></script>
几点属性说明:
script:脚本标签,必写,表示这里引入脚本。<script表示开始引入,遇到</script>表示结束脚本。注:最好不能出现<script ... />,因为很多浏览器尤其是IE不支持 />写法,所以最好统一写</script>为结束。
type:脚本类型,可选,现在大部分浏览器会忽略此属性,可填可不填写
defer:立即下载并延迟加载,可选。表示浏览器会立即下载JS文件,但会在网页呈现内容结束后(如执行到</html>)才执行。引入外部文件才有效。如果多次使用defer,浏览器并不完全保证执行顺序,所以一个网页最好只出现一次defer。
async:异步下载,可选。表示此JS会立即下载,但不会停止当前解析流程(如网页呈现)。此属性跟defer最好不要同时出现。引入外部文件才有效。异步下载并不能保证多个JS的执行顺序,所以此属性必须保证多个JS文件不会相互依赖。
注:所有引入外部文件正常情况下都会按照顺序执行,当页面遇到<script>,会暂停呈现内容,执行完JS后,才会继续往下执行。 除了使用了defer或async。
早期人们都习惯把引入JS文件标识放到<head></head>之间,与引入CSS文件一起。但如果JS文件有访问到HTML元素,因为执行顺序问题,HTML未加载完就执行访问,会导致找不到元素或者出错的问题,虽然用defer可以决定这一问题,但通常不推荐使用defer和async属性。解决办法是放到HTML后引入,如
<html>
...
</html>
<script type="text/javascript" src="test.js"></script>
不过现代WEB程序都推荐放到<body>后引入,如:
<html>
<body>
</body>
<script type="text/javascript" src="test.js"></script>
</html>
通常外部JS文件的扩展名是.js,但大部分浏览器没有做特别限制(如.htc也可执行),不过在服务器端需要有相对应的执行类型,如遇到.htc,服务端也能返回正常的MIME类型,如IE是:application/x-javascript,非IE:application/javascript或application/ecmascript。
引入外部文件src是支持跨域的,如果引入跨域,必须确保跨域脚本是安全的,如引入谷歌jquery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
如果JS内部代码中包含“</script>”会报错,如:
<script>
alert("</script>");
</script>
因为解析器遇到</script>会认为脚本结束。这时应该通过转义符,如:alert("<\/script>");
引入外部JS文件有如下优点:
1.可维护性:因为可以把相关JS放在文件夹里,与HTML代码分离,修正只需要对相应JS文件修改就可以了,不必对与HTML内容混淆的HTML文件修改。
2.可复用性:把JS逻辑放在公共JS文件里,可以让多个HTML文件引用,如C语言的include。
3.可缓存:一个JS文件只需要下载一次就可以了,浏览器自动会缓存起来,下次会自动从缓存里读取。
4.便于压缩:可以压缩为min.js文件,可以占用空间小,网络下载小,使得下载速度更快。
另,如浏览器不支持script或禁止了脚本,可以用<noscript>标识显示内容,如下:
<body>
<noscript>您的浏览器不支持javascript</noscript>
</body>