JavaScript(概述篇)

JavaScript是一种基于对象和事件驱动的客户端脚本语言，需要注意的是，JavaScript 是一种解释性语言，就是说，代码执行不进行预编译。由浏览器内嵌的 JavaScript 引擎来执行。

附件图片是JavaScript的架构图：

https://files.cnblogs.com/files/skyislimit/JavaScript.bmp

JS 功能：
   基本语法+API
   JS API（JS 对象）
      1 内置对象和全局函数
      2 BOM浏览器对象(window对象)  
      3 DOM（分为W3C DOM 和 HTML DOM ），document对象
      4 自定义对象

=======================================================================

常用内置对象

因为JavaScript 中的所有事物都是对象，我们可以把 JavaScript 中的对象分为三类：

简单对象：String、Number、Boolean

组合对象：Array、Math、Date

复杂对象：Function、Regex、Object等

 

常用的全局函数有：parseInt/parseFloat、isNaN、eval、decodeURI/encodeURI等。

 

DOM，即文档对象模型，用来操作文档。其中定义了访问和操作 HTML 文档的标准方法。应用程序通过对 DOM 树的操作，来实现对 HTML 文档数据的操作。

BOM，即浏览器对象模型 ，用来访问和操纵浏览器窗口，使 JavaScript 有能力与浏览器“对话”。通过使用BOM，可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作。不过，BOM 目前虽然被绝大多数的浏览器支持，但是它并没有相关标准。

 

事件 指 DHTML 对象在状态改变、操作鼠标或键盘时触发的动作。

事件分为三类：

• 鼠标事件：如 onclick、ondblclick、onmouseover、onmouseout等；
• 键盘事件：如 onkeydown、onkeyup等；
• 状态改变事件：如 onblur、onfocus、onload、onchange 等。

事件触发后将会产生一个 event 对象，该对象用于记载事件相关的所有信息，如引发事件的节点对象、位置等信息。

=========================================================================

DOM 定义了所有文档元素的对象和属性，以及访问它们的方法（接口）。
W3C DOM 被分为 3 个不同的部分/级别（parts / levels）：
核心 DOM  用于任何结构化文档的标准模型
XML DOM   用于 XML 文档的标准模型
HTML DOM用于 HTML 文档的标准模型

DHTML 对象模型如图－1所示：

window 对象的常用属性有：

    document：窗口中显示的 HTML 文档对象
    history：浏览过窗口的历史记录对象
    location：窗口文件地址对象
    navigator：有关浏览器的信息
    event：事件对象
    screen：屏幕对象
    name：窗口名称
    opener：打开当前窗口的 window 对象

window 对象的常用方法有：

    alert(),confirm,prompt()：对话框
    close(),open()：关闭、打开窗口
    focus(),blur()：窗口获得焦点或者失去焦点
    moveBy(),moveTo()移动窗口
    resizeBy(),resizeTo()：调整窗口大小
    scrollBy(),scrollTo()：滚动窗口中网页的内容

所谓动态HTML（Dynamic HTML，简称DHTML），其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成，
即一个页面中包括html+css+javascript（或其它客户端脚本），其中css和客户端脚本是直接在页面上写而不是链接上相关文件。
DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，
制作出能在下载后仍然能实时变换页面元素效果的网页设计概念。

DHTML 不是 W3C 标准

DHTML 指动态 HTML（Dynamic HTML）。

DHTML 不是由万维网联盟（W3C）规定的标准。DHTML 是一个营销术语 - 被网景公司（Netscape）和微软公司用来描述 4.x 代浏览器应当支持的新技术。

===================================================================================================================

DOM ：HTML页面经过浏览器解析显示的结果，DOM是内存中动态的对象。访问DOM重document对象开始。
document 上提供了DOM对象操作的API，增删改查：节点，属性，内容等。影响显示效果。
 
w3c DOM API 是标准DOM操作，可以以统一的方式操作任何的节点。
HTML DOM 是早期标准，不太统一。不同的浏览器不一样，简洁方便。
   
元素属性有两种修改方式：
    1 标准DOM方式修改
      后期 w3c 组织提供了标准化
       li.setAttribute(属性名，属性值) 方式修改属性
       li.setAttribute("class", "show")
       W3C 属性修改方法，适合通用属性修改

    2 HTML DOM 方式修改
      使用专用属性修改
      li.className = "show"
    className是HTML DOM属性，早期 1995年时候
    由 Nestcape 公司发明的
    优点：简洁方便，书写简单，适合少数专用属性
    a.href          a.setAttribute("href", "url")
    input.value  a.setAttribute("value", "val")
    input.name  a.setAttribute("name", "pwd")
    img.src        ...
    e.className


    a.href = "demo.jpg"
    a.setAttribute("src". "demo.jpg")

设置属性：
    w3c DOM: setAttribute(属性名，属性值)
                      a.setAttribute("href", 属性值)
                      img.setAttribute("src", 属性值)
                      input.setAttribute("value", 属性值)
                      e.setAttribute("class", 属性值)
    html DOM:  a.href = 属性值
               img.src = 属性值
               input.value = 属性值
                           e.className=属性值
工作中是混合编程的，那个方便用那个！

W3c DOM 增加、删除节点 
    创建元素节点 document.createElement(元素名)
    添加元素到DOM 
        insertBefore
        appendChild

HTML DOM 可以创建节点的！

创建img节点
w3c DOM 
    var img = document.createElement("img")
    img.setAttribute("src", "logo.png")
    p.appendChild(img); //显示到界面
HTML DOM
    var img = new Image();
    img.src = "logo.png";
    p.appengChild(img);

w3c DOM 
    var o =  document.createElement("option")
    o.innerHTML = "Java";
    o.setAttribute("value", i);
    select.appengChild(o);
HTML DOM
    var o = new Option("Java", i);
    select.appengChild(o);