JavaScript高级编程随笔

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript高级编程随笔相关的知识,希望对你有一定的参考价值。

前言:

本人之前在博客园写过一遍关于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 &lt 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高级编程》[第三版]

            就像前面说的,也希望各位前端前辈,多指点。也希望能给别人带来小知识点,本人会不断更新博客。多谢大家支持。

 

以上是关于JavaScript高级编程随笔的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript高级程序编程

JavaScript高级编程学习 一 认识

JavaScript高级程序编程

JavaScript高级程序编程

javascript 高级编程系列 - 函数

javascript 高级编程系列 - 基本数据类型