hzdtf

  如何在网页中使用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>

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2022-02-08
  • 2022-02-08
猜你喜欢
  • 2021-12-27
  • 2022-02-08
  • 2021-08-23
  • 2022-02-08
  • 2022-12-23
  • 2022-12-23
  • 2022-02-08
相关资源
相似解决方案