前言:
本人之前在博客园写过一遍关于MVC基础的一个小文章,由于当时各种原因没能继续坚持写下去,最近本人在学习JavaScript,想用自己的方式整理出来,主要是为了加深自己的印象,我还是一个前端的小学生,希望各位前端的前辈多指点。我会吧每一章节学到的看到的整理到我的博客园里,虽然这本书前面讲的很基础,我也会坚持发表文章。好了废话说到这里开始进入正题。
Content:
本人现在准备要看的第一本书是《JavaScript高级编程》[第三版],这是一本比较经典的JS书籍,即使前面几章比较简单基础。
这本书一共25章,下面我简单罗列一下这本书的目录。
1-10章
《JavaScript简介、在HTML中使用JavaScript、基本概念、变量-作用域-和内存问题、引用类型、面向对象的程序设计、函数表达式、BOM、客户端检测、DOM》
11-20章
《DOM扩展、DOM2和DOM3、事件、表单脚本、使用Canvas、HTML5脚本编程、错误处理与调试、JavaScript和XML、E4X、JSON》
21-25章
《Ajax与Comet、高级技巧、离线应用与客户端存储、最佳实践、新兴API》
以上就是本书的所有章节。好了在这里我就不多介绍第一章JavaScript简介了,有兴趣的朋友可以查看相关资料。
下面我从第二章《在HTML中使用JavaScript》开始整理。
1.《Script元素》
一、 在HTML4.01为<Script>定义了6个元素,分别为以下几种
1.async:可选,表示立即下载脚本,但不妨碍页面其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
2.charset:可选,表示通过src属性制定代码的字符集。大多数浏览器会忽略它的值,不建议使用。
3.defer:可选,表示脚本可以延迟到文档完全被解析和限制之后在执行。只对外部脚本文件有效。IE7以下脚本支持,(不建议使用,如果JS文件较大,会影响页面的加载度)。
4.language:已废弃。原来用于编写代码的脚本语言,大多数浏览器都会忽略language属性,所以建议不使用。
5.src:可选。表示包含要执行的外部文件。
6.type:可选。可以看成language的替代属性,表示编写代码使用脚本语言内容类型,也成MIME类型。<script type="text/javascript"></script> type类型不是必须的,如果不填写默认type=“text/javascript”
二、在使用<Script>元素的方式有两种:
1.直接在页面嵌入JS
如:<script type="text/javascript"> function XX (){........} </script>
注: JS代码是从上之下依次解释的,用一个例子来说:<script type="text/javascript"> function XX (){........} </script>,解释器会解释一个函数,然后保存到自己的环境中。 再解释对<script>元素所有代码之前,页面其余的内容都不会被浏览器加载或显示。
在使用<script>嵌入代码时,代码内容不要在任何地方出现</Script>,当浏览器解析JS代码时遇到字符串</Script>就代表结束的JS代码段。 比如:function XX(){ alert("</script>") }这是严重错误的。但如果你真的想这么做,可以通过转译 简写:alert("<\ /Script>")
2.包含外部的JS文件
如:<script src="...../xxx.js"></srcipt>
注: 上面的例子是一个加载xxx.js外部文件,完整的例子,<script type="text/javascript" src="xxx.js"></script>与嵌入的js代码一样,在加载或者处理时,页面的处理也会暂停。 如果是XHEML文档可以忽略</Script> 如:<script type="text/javascript" src="xxx.js"/>,但是不能在HTML文档中使用,因为浏览器不能正确解析,(尤其是IE)。
三、注意,外部的js文件都是带有.JS文件后缀名的,但这个不是必须的,以为浏览器不会检查后缀,这样一来使用其他服务器语言就可以动态生成JS,如果不使用后缀,就要确保服务器正确返回MIME类型(建议大家按照常规使用后缀)。
另外 src属性还可以访问外部域 <script src="http://../../../XX.js"> 这样一来外部的js也会被正常解析,但是要各位注意,访问外部域是有风险的,如果有恶意程序员是可以替换文件代码的。(如果这样访问建议官网)。
无论如何包含代码,只要不存在defer和async属性,浏览器都会按照顺序执行,换句话说就是第一个<script></script>执行完毕才会执行地二个<script></script>
四、标签位置,<scripr>标签是放在<head>标签内部的,这样一来就意味着要等在所有的js加载完毕后在呈现页面,如果加载过多会影响速度,因为浏览器遇到<Body>标签才会解析内容,所以建议放在<body>后面如 :简例 <html> <head> <title>XXXX</title></head><body> ..................<script></script></body></html>
或者使用延迟脚本,<script defer="defer" src="XXX.js"></script> HTML5实现会忽略defer,IE4--IE7还是支持的,(执行顺序会改变)IE8及以后完全按照HTML5的规范,所以建议延迟脚本放在页面的最底部是最佳的。
异步脚本:async:只适用于外部脚本,告诉浏览器立即下载,不按照顺序,简例<script async src="XX.js"></script> 目的是为了告诉不让页面等待2个脚本下载和执行,建议不要在异步脚本加载期间修改DOM
五、在XHTML中用法
XHTML要比HTML语法严格得多,比如
<scripr> function com (a,b){ if(a>b)alert("XXXX") } </script> 在XHTML里 > 会被认为是一个新的标签,在HTML是有效的,
避免XHTML a>b这种语法错误,可以采用 a < b 这种会让代码不好理解,还可以用CData片段 <scripr> <![CData[........]]></script> CData片段支持任何符号,但是有的浏览器不兼容XHTML 怎么办呢? 吧CData片段判断注释掉就可以了 这种方式支持各种浏览器
不推荐使用的语法:因为有些浏览器不支持js 最经典的就是Mosaic, 所以要加上HTML注释来忽略JS脚本 <script><!-- function()........ --></script> 这种方法不是不推荐的 现在的浏览器基本支持js 。
六、嵌入外部代码与外部文件
虽然在HTML里了一写JS,但 建议使用外部文件, 原因:可维护,可缓存(两个页面使用相同的JS文件,那么这个文件就只加载一次),适应未来(无需担心XHTML或HTML)在外部文件里语法是互通的。
七、文档模式, IE分为混杂模式和标准模式,默认混杂模式(不推荐与其他浏览器差异较大)基本没有一致性可言。
八、<noscript> 当加载js失败 1、浏览器不支持脚本 2.浏览器支持脚本,但脚本被禁用 都会呈现<noscript>
例子<noscript>加载脚本失败。。。</noscript>
总结
这一章讲的主要是JS如何引用,和相关的属性,以及简单介绍了在页面可直接嵌入JS,和一些规范,和各浏览器解析属性问题。
收尾
在这里本人重申一下,这些相关信息是关于书本的,本人只是采用本书重要的知识,并整理出来,也是为了加深自己的阅读印象。
先关书籍来之《JavaScript高级编程》[第三版]
就像前面说的,也希望各位前端前辈,多指点。也希望能给别人带来小知识点,本人会不断更新博客。多谢大家支持。