JavaScript高级程序设计学习笔记一在HTML中使用JS

来源:互联网 发布:生活中的大面积数据 编辑:程序博客网 时间:2024/05/16 09:35

1、<script>元素

作用:向HTML中插入js的主要方法。

属性

  • src:可选,如果引入外部js文件则必须有;src属性还可以指向当前HTML所在域之外的某个域中的完整URL;

  • type:可选,如果嵌入js代码,则需要为该元素制定type属性,通常为text/javascript;

  • async:可选,表示立即下载脚本,但不应妨碍页面中其它操作,只适用于外部脚本,但无法保证顺序执行js;该属性的目的是不让页面等待脚本下载和执行,从而异步加载页面其它内容;<script type=...   src=...   async>

  • defer:可选,表示脚本可以延迟到文档完全被解析和显示之后再执行,只适用于外部脚本;把延迟脚本放在页面底部最佳;通常延迟后仍顺序执行js

位置

  • <head>元素中;

  • <body>元素中页面内容的后面;(推荐:在解析包含js代码之前,页面内容完全呈现在浏览器,这样避免必须等到全部js代码都被下载解析和执行后,浏览器再在呈现页面,即避免了浏览器呈现页面之前出现的明显延迟

嵌入与外部文件对比:推荐外部

  • 可维护性;

  • 可缓存:多个页面可使用同一个js文件,该文件只需要下载一次;

  • 适应未来:外部文件无需使用XHTML或注释hack。

不推荐使用:<script><!--

                     //--></script>

       该语法让不支持<script>元素的浏览器能隐藏嵌入的js代码,不支持js的浏览器会忽略js代码,支持的则会进一步确认解析js代码;但在XHTML模式下,脚本包含在XML注释中,所以脚本会被忽略,因此不推荐使用。

2、<noscript>元素

         该元素可以包含能够出现在文档<body>中的任何HTML元素,除了<script>以外。

作用:该元素中的内容只有在浏览器不支持脚本或者浏览器支持但脚本被禁用时,才会将其包含的内容显示出来,否则浏览器不会显示该元素中的内容。

位置:在<body>标签内。

3、在网页中引入js的三种方法:

1、<script>标签

2、js外部文件

3、行内js

例如:<a href="#" onclick="al()">保存</a>

但是不要行内写js是因为这样很不安全,因为用火狐的firebug可以轻松让代码失效,html,css,js分开来,比较容易维护。

0 0
原创粉丝点击