JavaScript高级编程笔记(1)

1、JavaScript是什么?

  JavaScript实现由以下3个不同部分组成：
  1、核心(ECMAScript) 2、文档对象模型(DOM) 3、浏览器对象模型(BOM)

  ECMAScript -- 并不与任何具体浏览器相绑定，为不同种类的宿主环境提供核心的脚本编程能力
  WEB浏览器对于ECMAScript来说是一个宿主环境，但并不是唯一的宿主环境。例如flash中的ActionScript可以容纳ECMAScript实现。

  ECMAScript主要内容：
  语法、类型、语句、关键字、保留字、运算符、对象、
 
  ECMAScript仅仅是一个描述，定义了脚本语言的所有属性、方法和对象。 

  DOM -- 是HTML和XML的应用程序接口(API).
  DOM 将整个页面规划成由节点层级构成的文档。 

  BOM -- 主要处理浏览器窗口和框架。

-------------------------------------
2、ECMAScript基础

  1、语法  
  区分大小写，
  变量是弱类型、
  每行结尾的分号可有可无、
  注释与Java,C,PHP语言相同 (// /* */)
 
  5 原始值和引用值
  在ECMAScript中，变量可存放两种类型的值，原始值和引用值。
  原始值(primitive value) 是存储在栈(stack)中的简单数据段，直接存储在变量可访问的位置。
  引用 值(reference value)是存储在堆(heap)中的对象,存储一个指针。

  6 原始类型
    ECMAScript有5种原始类型 -- Undefined,Null,Boolean,Number,String
    每种原始类型定义了它包含的值范围及字面量表示形式。
    ECMAScript提供了tpyeof运算符来判断一个值是否存在某种类型的范围内，判断一个值是否有原始类型。
 
  6.1 typeof运算符
     var sTemp = "test string";
     alert(typeof sTemp);  --检查变量类型
  6.2 Undefined类型 -- 未初始化的变量
  6.3 Null类型
  
  7 转换
   toString(),parseInt(),parseFloat(),
   强制类型转换
    Boolean(value) -- 非0数字或对象时，返回true;
    Number(value)  --
    string(value)  --

  8 引用类型 -- Object类,Boolean类,Number类,String类,instanceof运算符
    在使用typeof运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回"object",ECMAScript引入另一个Java运算符instanceof来解决这个问题。
    var temp = new String("test string");
    alert(temp instanceof String);  --返回true  
    
  10 语句
   break -- 立即退出循环，continue -- 只退出当前循环。

  ECMAScript 中的函数不能重载。

-----------------------------------
3、对象基础

  对象的类型：
  1、本地对象  -- 独立于宿主环境的ECMAScript实现提供的对象。
  Object,Function,Array,String,Boolean,Number,Date,RegExp,Error
  EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError

  Array类： -- var temp = new Array(20); temp[0] = "red";

  2、内置对象  -- Global和Math
  eval()方法 -- 整个ECNAScript语言中最强大的方法，该方法接受一个参数，即要执行的字符串
  eval("alert('hi')");

 
----------------------------
5、浏览器中的JavaScript

  BOM(浏览器对象模型)，它提供了独立于内容而浏览器窗口进行交互的对象。
 
  window对象表示整个浏览器窗口，但不必表示其中包含的内容。
  如果页面使用框架集合，每个框架都有它自己的window对象表示，存放在frames集合中。

  访问Window对象的name属性，它存储的是框架的名字。
 
   self一个更加全局化的窗口指针，它总是等于window。如果页面没有框架，window和self就等于top,frames集合的长度为0。

   1、窗口操作
   moveBy(dx,dy) -- 把浏览器窗口水平，垂直移动
   moveTo(x,y)   -- 移动浏览器窗口
   resizeBy(dw,dh) -- 相对于浏览器窗口的当前大小。
   resizeTo(w,h)   -- 把窗口的宽度调整为w,高度调整为h,不能使用负数。

   IE提供了 window.screenLeft和window.screenTop对象来判断窗口的位置。
   Mozila提供了window.screenX和window.screenY属性来判断窗口的位置。

   建议尽量少用移动窗口的功能。

   2、导航和打开新窗口
    window.open()方法打开新窗口。
    window.open("http://sina.com","newFrame");
   
   3、对话框
    除弹出新窗口，还可使用其它方法向用户弹出信息，利用window对象的alert(),confirm(),prompt()方法。
    alert("hello") -- 接受一个参数，即要显示给用户的信息。 只有OK按钮
    confirm("Are you sure?")  -- 有OK和取消按钮。点OK返回true。
    prompt() -- 提示用户输入信息。

   4、状态栏   -- 是底部边界内的区域，用于向用户显示信息。
    可用window对象的两个属性设置它的值，即status和defaultStatus属性。
    window.defaultStatus = "You are surfing";
 
   5、时间间隔和暂停
    用window对象的setTimeout()方法设置暂停。
 setTimeout("alert("hello")",1000);
    在调用setTimeout()时，它创建一个数字暂停ID，可调用clearTimeout()暂停ID。

   6、历史
    可访问浏览器窗口的历史，用户访问过的站点列表。
    go()方法只有一个参数，即前进或后退的页面数。负数为后退。
    window.history.go(-1);   --后退一页。

  document对象：  -- window对象的属性，
   这个对象的独特之处是它是唯一一个既属于BOM又属于DOM的对象 。
  
  location对象： -- 表示载入窗口的URL，是BOM中最有用的对象之一。
    它是window对象和document对象的属性。
 
   location.reload()方法，可重新载入当前页面。
   location.reload(true) --从服务器载入当前页面。
   location.reload(false) --从本地缓存中重载。

 navigator对象： -- 检测浏览器及操作系统信息。

 screen对象： -- 用于获取某些用户屏幕的信息。屏幕的高度和宽度。

 
----------------------------
6、DOM基础

  DOM是针对XML的基于树的API。
  DOM是语言无关的，它的实现并不与javaScript或其它语言绑定。
  使用DOM：
  1、访问相关的节点：
  var temp = document.documentElement;
  2、检测节点类型：
 document.notetype,
  3、处理特性
     getNamedItem(name) -- 返回nodeName 属性值等于name的节点。
     removeNamedItem(name) -- 删除节点。
     setNamedItem(node) -- 将node添加到列表中。
     item(pos) -- 返回pos位置的节点。

  4、访问指定节点：
     getElementsByTagName() -- 返回一个包含所有标签名的集合。
     var temp = getElementsByTagName("img");

     getElementsByName() -- 用来获取所有name特性等于值的元素。
     getElementsById()  -- 返回id我等于指定值的元素。
 

创建和操作节点：
   1、创建新节点：
     createDocumentFragment(),createElement(),createTextNode();
     例：要使用DOM来添加下面代码到页面中。
     <p>hello</p>
      第一步 创建<p/>元素
        var oP = document.createElement("p");
      第二步 创建文本节点：
        var oText = document.createTextNode("hello");
      第三步 将文本节点添加到元素中
        oP.appendChild(oText);
      现在已创建一个<p>元素和一个文本节点，并将它们关联在一起，但必须将这个元素附加到document.body元素或其中任意子节点上。
        document.body.appendChild(oP); 

     removeChild() --删除节点
     replaceChild() -- 替换一个节点
     insertBefore() -- 让新消息出现在旧消息之前。

遍历DOM
  NodeIterator对象： 使用document对象的createNodeIterator()方法。
  有四个参数：  1、root 从树中那个节点开始搜索
  2、whatToShow 那些节点需要访问
  3、filter -- NodeFilter对象，用来过滤那些节点。
  4、entityReferenceExpansion --布尔值，表示是否需要扩展实体引用。
 
   var iterator = document.createNodeIterator(document,NodeFilder.SHOW_ALL,NULL,FALSE)
   iterator.nextNode() --向前搜索
   iterator.previousNode() --向后搜索。

  
  TreeWalker对象： --包含NodeIterator对象所有功能，添加了一些遍历方法。
    parentNode() -- 进入当前节点的父节点
    firstChild() -- 进入当前节点的第一个子节点
    lastChild()  -- 进入当前节点的最后子节点
    nextSibling()-- 进入当前节点的下一个兄弟节点
    previousSibling() -- 进入当前节点的前一个兄弟节点