首页 > 代码库 > JS高级程序设计（1-3章笔记）

JS高级程序设计（1-3章笔记）

2024-07-23 07:40:35   219人阅读

第一章    JavaScript简介

1.1    JavaScript简史
1995.02-
公司：Netscape
主要人物：就职于Netscape的Brendan Eich(布兰登.艾奇)
事件：为Netscape Navigator 2开发一种名为LiveScript的脚本语言
1995.02-前夕
公司：Netscape
事件：临时将LiveScript改名为JavaScript
1995.02+
JavaScript1.0获得巨大成功
1996.08
公司：微软
IE3加入名为JScript的JavaScript实现
1997
组织：ECMA
事件：以JavaScript1.1为蓝本的建议被提交给欧洲计算机制造商协会（ECMA），ECMA-262诞生。
1998
组织：国家标准化组织和国际电工委员会（ISO/IEC）
事件：ISO/IEC采用ECMAScript作为标准，即ISO/IEC-16262
1.2    JavaScript实现?
说明：JavaScript的含义比ECMAScript包含的要多。
  • 核心（ECMAScript）
  • 文档对象模型（DOM）
  • 浏览器对象模型（BOM）
    1.2.1    ECMAScript
    说明：ECMAScript-262没有参照WEB浏览器
  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 操作符
  • 对象
     1.    版本
  • ECMAScript第一版：本质上与Netscape JavaScript1.1相同（针对浏览器的部分除外）
  • ECMAScript第二版：主要是班级加工的结果，没有任何增删改。
  • ECMAScript第三版：标志着ECMAScript成为一门真正的语言
    • 字符串处理
    • 错误定义
    • 数值输出
    • 正则表达式
    • 新控制语句
    • try-catch
    • 国际化
    • ECMAScript第四版：正式发布前被废弃
    • 强类型变量
    • 新语句
    • 新数据结构
    • 真正的类
    • 经典继承
    • 数据交互新方式   
  • ECMAScript第五版：ECMAScript3.1，在第三版的基础上进行小幅修改   
    • 澄清第三版中已知的歧义
    • 增添新的功能
    • 原生JSON对象（用于解析和序列化JSON数据）
    • 继承的方法
    • 高级属性定义
    • 严格模式
    • 对引擎解释和执行代码进行补充说明
    2.    什么是ECMAScript兼容
       基本 定义：
  • 支持ECMA-262
  • 支持Unicode字符标准
        扩展定义：
  • 标准中没有规定的新对象和对象的心新属性
  • 修改扩展内置的正则表达式语法
    3.    WEB浏览器对ECMAScript的支持

    1.2.2    文档对象模型（DOM）
    1.    为什么要使用DOM
        问题：IE4和Navigator4支持不同形式的DHTML，需要加以控制。
        解决：负责制定Web通信标准的W3C开始着手规划DOM.
    2.    DOM级别
        注意：DOM0级表准不存在，只是一种参照说法，指IE4和Na4最初支持的DHTML
DOM1:    映射文档的结构
  • DOM Core:    如何映射基于XML的文档结构
  • DOM HTML：    扩展添加针对HTML的对象和方法
DOM2:    扩充鼠标用户界面事件、范围、遍历等，增加对CSS的支持
  • DOM视图：    定义跟踪不同文档视图的接口；
  • DOM事件:    定义事件和事件处理的接口；
  • DOM样式：    定义基于CSS应用样式接口
  • DOM遍历和范围：    定义遍历和操作文档树的接口
DOM3:    引入以统一方式加载和保存文档的方法，开始支持XML1.0规范
    3.    其他DOM标准 （W3C推荐）
  • SVG1.0(可伸缩矢量图)   
  • MathML1.0(数学标记语言)
  • SMIL(同步多媒体集成语言)
    4.    WEB浏览器对DOM的支持
 
        
    1.2.3    浏览器对象模型（BOM）
    基本：
  • 处理浏览器和框架；
    扩展：
  • 弹出新浏览器窗口的功能；
  • 移动、缩放和关闭浏览器窗口的功能；
  • 提供浏览器详细信息的navigator对象；
  • 提供浏览器所加载页面的详细信息的location对象；
  • 提供用户分辨率详细信息的screen对象；
  • 对cookies的支持；
  • 像XMLHttpRequest和ActiveXObject这样的自定义对象；
1.3    JavaScript版本（Netscape/Mozilla）

第二章    在HTML中使用JavaScript
2.1    <script>元素
    历史：    由Netscape创造并在Netscape Navigator 2中首先实现。之后被加入HTML规范。
    元素（HTML4.01）:    6个，全部非必需
  • async：    异步方式下载脚本
  • charset：    使用src属性指定的字符集，大多数浏览器会忽略这个值，很少用
  • defer:   立即下载，但 延迟到文档被完全解析和显示之后（遇到</html>）执行。只对外部文件有效
  • language:    使用的脚本语言，已废弃
  • src：执行代码的外部文件
  • type:    默认死type/javascript
    使用方式：
  • 直接嵌入：指定type属性，js代码中不能出现‘</script>‘
  • 包含外部文件：src属性必需，可以跨域，不能混合嵌入代码，在xhtml中可以自闭合（不推荐）
    2.1.1    标签的位置
        惯例：<head>元素中（浏览器遇到<body>标签时才会开始呈现内容，因而会有延迟）
        推荐：<body>元素中页面的内容后面
    2.1.2    延迟脚本
        方式：
  • <script type="text/javascript"defer></script>    ----HTML
  • <script type="text/javascript"defer="defer"></script>     ----XHTML  
        规范行为（HTML5）：
  • 脚本会延迟到浏览器遇到</html>标签后再按照出现的顺序执行，但都先于DOMContentLoaded事件触发前执行；
  • 只适用于外部脚本文件；
        现实行为：
  • 延迟的脚本不一定会在DOMContentLoaded事件触发前执行，也不一定按照顺序执行，为了避免加载顺序的混乱，建议只有一个defer脚本；
  •  IE4-IE7支持对嵌入脚本的defer属性，IE8等支持HTML5实现的浏览器则会忽略这个属性。
   2.1.3    异步脚本 (HTML5)
方式：
  • <script type="text/javascript" async></script>    ----HTML
  • <script type="text/javascript" async="async"></script>     ----XHTML  
          行为：  
         只是用外部文件；
  • 立即异步下载，页面不会等待下载完毕和执行；
  • 不保证顺序，因此确保异步脚本之间彼此不依赖；
  • 页面load事件前执行，DOMContentLoaded事件之前或之后；
          支持情况：
    2.1.4    在XHTML中的用法（可以跳过这一节，因为HTML5标准正快速占领市场）     
        错误方式：<(小于号)在XHTML中被当作开始一个新标签来解析。                                                                                                     
                       
         正确方式      
  • 方式一：    使用HTML实体替代尖括号（比如&lt替换<）          
                               
  • 方式二：    CData片段+JavaScript注释
                                                                                                                                                                            
    2.1.5    不推荐使用的语法（早期）     
                     
2.2    嵌入代码与外部文件
    外部文件优点
  • 可维护性
  • 可缓存（复用）
  • 适应未来：    HTML和XHTML包含的外部文件的语法相同
2.3    文档模式（IE提出，其它效仿）
    注意：主要影响css呈现，某些情况下也会影响js。
    类型：
  • 混杂模式：   不推荐，如果不适用hack技术，不同浏览器差异可能非常大 
<!--在文档开始处没有文档类型声明，所有浏览器默认开启混杂模式-->
 
  • 标准模式：    行为相对一致
<!-- HTML 4.01严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<!-- XHTML 1.0  严格型-->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!-- HTML 5 -->
<!DOCTYPE html>
 
  • 准标准模式：    有两种触发方式，和标准模式非常接近，行为符合标准（处理图片间隙除外）
<!-- 过渡型 -->
<!-- HTML 4.01 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!-- 框架集型 -->
<!-- HTML 4.01 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01  Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Frameset   //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2.4    <noscript>元素：    不支持JS的浏览器平稳退化的方式
用法：    <body>中的任何标签中都可以使用
行为：    下列情况下浏览器才会显示其中的内容
  • 浏览器不支持脚本；
  • 浏览器支持脚本但脚本被禁用；
2.5    小结
第3章    基本概念
3.1    语法
    3.1.1    区分大小写
    3.1.2    标识符
第一个字母：    字母、_、$?
其它字母：     字母、_、$、数字
驼峰大小写格式（ECMAScript惯例但不强制）
 
    3.1.3    注释
    3.1.4    严格模式
    启用方式
  • 在整个脚本中启用
//在顶部添加
"use strict"
 
  • 指定某些函数在严格模式下执行
function doSomething(){
    "use strict"
    //函数体
}
 
    行为特点
  • 在ECMAScript 5中开始支持严格模式
  • 严格模式下ECMAScript3的一些不确定行为将会处理
  • 某些不安全的操作会抛出错误
    3.1.5    语句
        1.    分号结尾（不推荐省略分号）
  • 避免不完整的输入；
  • 可以放心地通过删除多余的空格来压缩ECMAScript代码；
  • 在某些情况下会增进性能；
        2.    代码块使用{}(可以省略的情况下也不推荐省略)
  • 编码意图更加清晰；
  • 降低修改代码时出错的几率；
3.2    关键字和保留字
    关键字(26)
breakcasecatchcontinuedebugger*default
deletedoelsefinallyforfunction
ifininstanceofnewreturnswitch
thisthrowtrytypeofvar void
whilewith    

    保留字（第三版全部+第五版let、yield）(31?)

 
abstractbooleanbytecharclassconst
debuggerdoubleenumexportextendsfinal
floatgotoimplementsimportintinterface
longnativepackageprivateprotectedpublic
shortstaticsupersynchronizedthrowstransient
volatile    ?
    保留字（第五版 严格模式 8）
classconstenumextendssuperexportimport
    保留字（第五版 严格模式 额外施加限制的部分）
implementspackagepublicinterfaceprivateprotectedletstaticyield
3.3    变量
特点：松散类型（可以保存任何类型的数据）
使用：
            1.    局部变量
//函数内部定义+var
function test(){
    var message = "hi";//函数退出时销毁
}
 
            2.    全局变量
/*
*函数外部定义+var
*/
var message = ‘hi‘;
/*函数内部定义+省略var(不推荐)+赋值
*只要调用一次test函数，globalVar就有了定义，就可以在函数外部的任何地方被调用
*严格模式下给未经声明的变量赋值会抛出ReferenceError错误
*/
function test(){
    globalVar = "hi";
}
        注意：
  • 可以使用一条语句定义多个变量，初始化和不初始化均可；
//通过换行和缩进提高可读性
var message = "hi", 
      found = false, 
      age = 29;
 
  • 在严格模式下，不能定义名为eval或arguments的变量，否则会导致语法错误
3.4    数据类型
    基本数据类型（简单数据类型）（5）
UndefinedNullBooleanNumberString
 
    复杂数据类型（1）
    Object
    3.4.1    typeof操作符
    说明：检测给定变量的数据类型，返回字符串
    注意：
  • null被认为是一个空对象；
  • 函数是特殊的对象，typtof对函数和普通对象进行了区分；
  • Sfari 5-、Chrome 7-在对正则表达式调用typeof是返回"function"，其它返回"Object"
    使用：
var message = "some string";
alert(typeof message);//变量或直接量都可以
    返回值：
未声明"undefined"
布尔值"boolean"
字符串"string"
数值"number"
对象或null"object"
函数“function”
    
    3.4.2    Undefined类型（派生自Null）
两种情况：
//1.    声明后默认取得undefined
var message;
//2    下面这个变量没有声明
//var age;
 
//不同点：两种变量从技术角度看有本质区别
alert(message);//"undefined"
alert(age);//产生错误
 
//相同点：无论哪种变量都无法执行有意义的操作
alert(typeof message);//"undefined"
alert(typeof age);//"undefined"

    3.4.3 Null类型

特点：    只有一个值（null）得数据类型
null:    空对象指针
var car = null;
alert(typeof car);//"object"
使用：    如果定义的变量将来用来白村对象，最好将该变量初始化为null,方便判断该变量是否已经保存了一个对象的引用
if(car != null){
    //执行体
}
          null和undefined:    
  •  联系：
alert(null == undefined);//true
  •  区别：无论在什么情况下都没有必要把一个变量的值显式设置为undefined，同样的规则对null不适用。
    3.4.4    Boolean类型
两个字面值:    true和false区分大小写
各种类型转换为Boolean类型：
    3.4.5    Number 类型
    特点：使用IEEE754格式来表示整数和浮点数（双精度数值），存在舍入误差
    整数分类：在进行计算时都被转成十进制计算
  • 十进制
  • 八进制（在严格模式下不支持）：第一位必须为0
  • 十六进制  ：前两位必须是0x
    1.    浮点数值（最该精度17位小数）
        写法
var floatNum1 = 1.1;
var floatNum2 = .1;//表示0.1,不推荐
var floatNum3 = 1.;//表示1.0，会被解析为整数1，不推荐
var floatNum4 = 3e-2;//0.03，科学记数法，小数点后带有6个0以上会被自动转为科学记数法表示
    2.    数值范围
  • 最小数
Number.MIN_VALUE(5e-324)
  • 最大数
Number.MAX_VALUE(1.7976931348623157e+308)
  • 查出范围的值（无法继续参与运算）
        -Infinity(负无穷)    Infinity(正无穷)
        或
        Number.NEGATIVE_INFINITY(负无穷)    Number.POSITIVE_INFINITY(正无穷)    
        检测数值是否有效
var result = NUmber.MAX_VALUE+Number.MAX_VALUE;
alert(isFinate(result));    //false
    3.    NaN（Not a Number）
    特点：
  • 任何涉及NaN的操作都返回NaN;
  • NaN和任何值都不想等，包括其本身
alert(NaN == NaN);//false
  • isNaN(val)    ----检测一个值是否是NaN
    4.    数值转换（非数值->数值）
  • 任何类型->数值：    Number()
        
  • 字符串->整数：    parseInt()
  • 字符串->浮点数：    parseFloat()
    3.4.6    String类型
    说面：    用于表示由零个或多个16位Unicode字符组成的字符序列
    注意：以单引号开头必需以单引号结尾，双引号亦。
    1.    字面直接量

    2.    字符串的特点
  • 不可变的
    3.    转换为字符串
        toString():    null和undefined以外的所有数据类型都包含该方法
  • 非数字调用toString()：    没有参数
  • 数字调用toString():    可以传递一个参数，指定输出任意有效进制格式的字符串
var num =10;
alert(num.toString());//"10"
alert(num.toString(2));//"1010"    
alert(num.toString(8));//"12"   
alert(num.toString(10));//"10"   
alert(num.toString(16));//"a"   
        String():    不知道要转换的值是不是null和undefined的情况下使用
  • 有toString()方法直接调用；
  • 值是null，返回“null”;
  • 值是undefined，返回"undefined"；
        val+"":    隐式调用toString()
    3.4.7    Object 类型
        注意：ECMA-262不负责定义宿主对象，因此BOM和DOM中的宿主对象可能会也可能不会继承Object。
       Object的每个实例都具有下列属性和方法：
  • Constructor：    保存着用于创建当前对象的函数；
  • hasOwnProperty(propertyName):    用于检查传入的对象是否是另一个对象的原型；
  • propertyIsEnumerable(propertyName):    用于检查给定的属性能否使用for-in枚举；
  • toLocaleString():    返回对象的字符串表示，该字符串与执行环境的地区对应；
  • toString():    返回对象的字符串表示
  • valueOf():    返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。
3.5    操作符
    3.5.1    一元操作符（只能操作一个值）
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


JS高级程序设计（1-3章笔记）


联系
我们