JavaScript

1、JavaScript是轻量级的编程语言，运行在浏览器端的脚本语言。

JavaScript分为ECMAScript，DOM，BOM三部分

ECMAScript：JavaScript的基本语法

BOM：Browser Object Model :浏览器对象模型，可以对浏览器窗口进行访问和

操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与

页面内容不直接相关的动作。

DOM:   Document Object Model：文档对象模型，是 HTML 和 XML 的应用程序

接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或XML

页面的每个部分都是一个节点的衍生物。

2、JS的基本语法

a、区分大小写：

b、弱变量类型语言：（与Java不同）

ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化

为任意值

   * JavaScript:

  * var i = 3;

   * var s = “abc”;

c、变量命名：

第一个字符必须是字母、下划线（_）或美元符号（$）

  余下的字符可以是下划线、美元符号或任何字母或数字字符

d、JS的数据类型

在 ECMAScript 中，变量可以存在两种类型的值，即原始值和引用值。

原始值

存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的

位置。

引用值

存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针

（point），指向存储对象的内存处。

原始类型：

    * undefined：未定义类型

    * boolean:布尔类型

    * number:数字类型

   * string:字符或字符串.

    * null：空

引用类型：

    * 对象类型.对象类型默认值是null.

f、类型转换：

     转换成字符串：

          3 种主要的原始类型 Boolean 值、数字和字符串都有 toString() 方法，可以

把它们的值转换成字符串

Boolean 类型的 toString() 方法只是输出 "true" 或 "false"

Number 类型的 toString(n)：输出当前数的n进制值，默认输出十进制值

     转换成数字：

ECMAScript 提供了两种把非数字的原始值转换成数字的方法，即 parseInt()

和 parseFloat()。前者把值转换成整数，后者把值转换成浮点数。只有对

String 类型调用这些方法，它们才能正确运行；对其他类型返回的都是

NaN。

g、== 与 ===

    等号由双等号（==）表示，当且仅当两个运算数相等时，它返回 true。非等号由

感叹号加等号（!=）表示，当且仅当两个运算数不相等时，它返回 true。为确定

两个运算数是否相等，这两个运算符都会进行类型转换。

   执行类型转换的规则如下：

如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false

转换成 0，true 为 1。

如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串

转换成数字。

如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转

换成字符串。

如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换

成数字。

  全等号由三个等号表示（===），只有在无需类型转换运算数就相等的情况下，才

返回 true。

h、JS的通常开发的步骤

JS通常都由一个事件触发

触发一个函数,定义一个函数

获得操作对象的控制权

修改要操作的对象的属性或值（进行方法内的运算）

       i、JS的引入方式

通常两种方式：

一种：页面内直接编写JS代码,JS代码需要使用.

二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.

3、BOM对象

对象	描述
Window	JavaScript 层级中的顶层对象，表示浏览器窗口。
Navigator	包含客户端浏览器的信息。
Screen	包含客户端显示屏的信息。
History	包含了浏览器窗口访问过的 URL。
Location	包含了当前 URL 的信息

     a、  Window

        * alert();      --弹出对话框

        * setInterval();

        * setTimeout();

        * clearInterval();

        * clearTimeout();

        * confirm();    --弹出一个确认窗口

        * prompt();     --弹出一个可输入的对话框

        * open();       --打开一个新窗口

    b、  Navigator ：包含的是浏览器的信息     c、  Screen:用来获得屏幕信息:

    d、 History:浏览器的历史对象:

    e、  Location:包含URL信息的对象

4、DOM对象

    a、  什么是DOM

        DOM：Document Object Model：文档对象模型.

        将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.

    b、 DOM的使用：

        document，element，attribute中的属性和方法

    c、获得元素：

        * document.getElementById();       -- 通过ID获得元素.

        * document.getElementsByName();    -- 通过name属性获得元素.

        * document.getElementsByTagName(); -- 通过标签名获得元素.

    d、 创建元素：

        * document.createElement();        -- 创建元素

        * document.createTextNode();       -- 创建文本

    e、  添加节点：

        * element.appendChild();           -- 在最后添加一个节点.

        * element.insertBefore();          -- 在某个元素之前插入.

    f、 删除节点：

        * element.removeChild();           -- 删除元素

【使用DOM完成对ul中添加一个li元素】

            function addElement(){

                var city = document.getElementById("city");

                // 创建一个元素:

                var liEl = document.createElement("li");

                // 创建一个文本节点:

                var text = document.createTextNode("深圳");

                // 添加子节点:

                liEl.appendChild(text);

                city.appendChild(liEl);

            }

5、JavaScript的内置对象

    简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：     Object     Function     Array     String     Boolean     Number     Date     RegExp     Error     EvalError         RangeError     ReferenceError     SyntaxError     TypeError     URIError

6、JavaScript的全局函数

    * parseInt();

        * parseInt(“11”);

    * parseFloat();

        * parseFloat(“32.09”);

    * 编码和解码的方法：

    // 解码

        * decodeURI();

        * decodeURIComponent();

    // 编码

        * encodeURI();

        * encodeURIComponent();

    eval函数：

        * 将一段内容当成是JS的代码执行.

        //var sss = “alert(‘aaaa’)”;

        //eval(sss);

7、案例

  a 注册校验

*设置事件，onsubmit,onfocus,onblur

οnsubmit="return check()"

*得到元素(值)，document.getElementById("ID名称").value;判断是否满足条

件，  str.match("正则表达式")

*在页面上标签中显示结果   document.getElementById("id

名").innerHTML=("HTML语句")

b 图片轮转

*触发事件 onload

1>  写 οnlοad="函数名(参数)"，在script里面写函数

2>  不写1>，直接在script里写window.οnlοad=function(){ 语句; }

*设置时间(定时)

window.setInterval("执行的函数名及参数method()",毫秒值);//一直执行

window.setTimeout("执行的函数名及参数method()",毫秒值);//只执行一 次

取消定时： clearInterval(v);

clearTimeout(v);

*得到图片的属性，改变图片的src属性

  c 广告的定时弹出与关闭

*设置一个隐藏的的div

*先定时再取消    通过改变div的style的dispaly属性值

  d 复选框的全选或全不选（包括隔行换色）

*设置一个全选的复选框 ，单独设置一个id属性

设置多个复选框，采用相同的name属性

*得到全选复选框的状态，改变其他复选框的check属性值

var box = document.getElementsByName("name名称");

box[0]-box[box.lengtj-1]

*隔行换色 tbody的对象.rows[0-len].style.backgroundColor="color";

  e 省市联动

*设置两个下拉列表，一个列表里是省份，当省份选择后，另一个列表里是其

对应的城市

*事件 onchange()，得到选择的是哪个省份

*创建二维数组，记录不同省份的城市

*先清空第二个列表

//fu.options.length = 1;

for(var i = fu.options.length-1; i >0; i--){

fu.options[i] = null;

}

*省份确认后，建立新节点，创建新文本，在select父节点后加入子节点，把

城市都加进去