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高级编程》[第三版]

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

时间: 2024-10-03 22:52:03

JavaScript高级编程随笔的相关文章

读javascript高级编程11-事件

一.事件流 事件流指从页面中接收事件的顺序. 1.事件冒泡(常用) IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素. 2.事件捕获(少用) Netscapte采用事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件. 3.DOM事件流 DOM2级事件包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 二.事件处理程序 事件处理程序就是响应某些事件的函数,如onclick等. 1. DOM0级事件处理程序 每个元素都有自己的事件处理程序属性,如o

JavaScript高级编程

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/07/05/writing-advanced-javascript.html Web应用程序(Web Applications)        从计算机纪元的黎明刚刚来临開始,不同平台间软件的互用性就一直是关注的焦点.为了尽可能实现用户的最大要求,软件公布者往往将流行软件从一个机器移植到另外一个机器上,这通常要花费数月的辛苦劳动,有时甚至是整个软件在新的硬件或者操作系统上的全然重写.随着计算机功能的不断强

JavaScript高级编程II

原文地址: http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1 在前面的文章中,我们介绍了两类JavaScript小工具及其源代码:浮动文本和弹出菜单.本文中,我们将继续介绍另外几个实用的JavaScript小工具,并着重说明其工作原理,因此你能够简单改动后应用到自己的程序中.本文中的JavaScript代码应该不用做不论什么改动就能够在当前全部主流浏览器上执行.所以,不用再费周折…… 

读javascript高级编程02-变量作用域

一. 延长作用域链 有些语句可以在作用域前端临时增加一个变量对象,该变量对象在代码执行完成后会被移除. ①with语句延长作用域. function buildUrl(){ var qs="?debug=true"; with(location){ var url=href+qs; } return url; } buildUrl(); //result:http://www.fanxbao.com/?debug=true ②try...catch...中的catch语句块延长作用域链

读javascript高级编程07-引用类型、Object、Array

一.引用类型 ECMAScript是支持面向对象的,可以通过引用类型描述一类对象所具有的属性和方法. 创建对象实例的方法时是用new 操作符加构造函数:var p=new Person(). 二.Object类型 1.创建Object实例两种方式: 使用new操作符跟Object构造函数. var o = new Object(); o.name = 'dami'; o.age = 25; 使用对象字面量表示法,推荐这种方式,代码量小而且看上去有封装的感觉. var o = { name: 'd

javascript高级编程笔记01(基本概念)

1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选,通过src属性指定代码的字符集,大多浏览器会忽略这个值,所以很少人使用 language:已放弃 src:可选,外部脚本的地址 type:可选,现在不推荐用“text/javascript”,考虑到约定俗成和最大限度的浏览器兼容,目前type属性的值还是text/javascript,不过,这个属性并不是必需

读javascript高级编程10-DOM

一.节点关系 元素的childNodes属性来表示其所有子节点,它是一个NodeList对象,会随着DOM结构的变化动态变化. hasChildNodes():是否有子节点. var headlines=document.getElementById("headline_block"); var childs=headlines.childNodes; childs.length;//1 childs[0];//取第一个子节点 childs.item(0);//取第一个子节点 pare

读javascript高级编程08-引用类型之Global、Math、String

一.Global 所有在全局作用域定义的属性和方法,都属于Global对象. 1.URI编码: encodeURI():主要用于对整个URI编码.它不会对本身属于URI的特殊字符进行编码. encodeComponentURI():主要用于对URI中的某一部分进行编码,很常用的是对查询字符串参数进行编码.它会对所有非标准字符进行编码. 对应的解码方法是decodeURI()和decodeURIComponent. var uri='http://www.cnblogs.com?a=1 2&b=陈

读javascript高级编程03-函数表达式、闭包、私有变量

一.函数声明和函数表达式 定义函数有两种方式:函数声明和函数表达式.它们之间一个重要的区别是函数提升. 1.函数声明会进行函数提升,所以函数调用在函数声明之前也不会报错: test(); function test(){ alert(1); } 2.函数表达式不会进行函数提升,函数调用在函数声明之前的话会报错: test(); // test is not a function var test=function(){ alert(1); } 二.递归函数 递归函数是通过在函数内部调用自身实现的