【笔记】菜鸟教程-JavaScript

深藏阁楼爱情的钟 2022-06-14 11:27 481阅读 1赞

**一、javaScript输出**  
1、javaScript可以通过不同的方式来输出数据。  
（1）window.alert()弹出警告框。  
（2）document.write()方法将内容写到html文档中。  
（3）innerHTML写入到html元素。  
（4）console.log()写入到浏览器的控制台。  
**二、javaScipt语法**  
1、在编程语言中，一般固定值为字面量。  
（1）javaScript字面量：①数字（Number）字面量。②字符串（String）字面量。③表达式字面量。④数组（Array）字面量。⑤对象（Object）字面量。⑥函数（Function）字面量。  
（2）在指令式语言中，变量是一个名称，变量通常是可变的；字面量是一个值。  
2、（1）JavaScript 关键字必须以字母、下划线（\_）或美元符（$）开始。  
（2）后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开关键字和数字）  
**三、javaScript数据类型**  
（1）①javaScript数据类型：字符串（String）、数字（Number）、布尔（Boolean）、数组（Array）、对象（Object）、空（Null）、未定义（Undefined）。  
②（aSuncat外注）：5种原始类型（primitive\['prɪmɪtɪv\] type):String、Number、Boolean、Undefined、Null  
（2）创建数组的3种方式  
①常规方式

var cars=new Array();
    cars[0]='Saab';
    cars[1]='Volvo';

②condensed array（简洁方式）

var cars=new Array('Saab','Volvo');

③literal array（字面）

var cars=['Saab','Volvo'];

（3）对象属性有2种寻址方式：

①name=person.lastname;
    ②name=person["lastname"];

（4）对象的赋值  
（aSuncat外注）如果定义一个变量，要用这个变量给对象赋值，就得用`person[y]="1"`。如下：

var person={}
    var y=id1;
    person[y]="1";//不能用person.y="1";

得到的是：

person={id1:"1"};

（5）JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。  
①当您声明新变量时，可以使用关键词 “new” 来声明其类型：

var carname=new String;
    var x=      new Number;
    var y=      new Boolean;
    var cars=   new Array;
    var person= new Object;

（6）①访问person对象的fullName方法

name = person.fullName();

②访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回：

name = person.fullName;

**四、javaScript函数**  
1、（1）在使用 return 语句时，函数会停止执行，并返回指定的值。  
函数调用将被返回值取代：

function myFunction(){
        var x=5;
        return x;
    }
    var myVar=myFunction();

（2）仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的。

function myFunction(a,b){
        if (a>b)
        {
            return;
        }
        x=a+b
    }

如果a>b，则上面的代码将退出函数，并不会计算a和b的总和。

**五、javaScript作用域**  
1、在 JavaScript 中, 对象和函数同样也是变量。（aSuncat：对象和函数既是字面量，又是变量）  
2、在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。  
3、在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。  
**六、javaScript字符串**  
1、可以使用索引位置来访问字符串中的每个字符。

var carname = 'Volvo XC60';
    var character = carname[7];

2、字符串长度  
可以使用内置属性 length 来计算字符串的长度

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var sln = txt.length;

3、特殊字符

<table> 
 <thead> 
  <tr> 
   <th>代码</th> 
   <th>全称</th> 
   <th>输出</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>\n</td> 
   <td>new line</td> 
   <td>换行</td> 
  </tr> 
  <tr> 
   <td>\r</td> 
   <td>return</td> 
   <td>回车</td> 
  </tr> 
  <tr> 
   <td>\t</td> 
   <td>tab</td> 
   <td>制表符</td> 
  </tr> 
  <tr> 
   <td>\b</td> 
   <td>backspace</td> 
   <td>退格</td> 
  </tr> 
  <tr> 
   <td>\f</td> 
   <td>form feed</td> 
   <td>换页符</td> 
  </tr> 
 </tbody> 
</table>

4、创建字符串  
（1） JavaScript 字符串是原始值，可以使用字符创建：

var firstName = "John"

（2）也可以使用 new 关键字将字符串定义为一个对象

var firstName = new String("John")

注意：不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用。  
5、（1）①原始值字符串，如 “John”, 没有属性和方法(因为他们不是对象)。  
②原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。  
（2）（aSuncat：外注）  
①原始值  
存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。  
②引用值  
存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。  
6、字符串属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>constructor</td> 
   <td>返回创建字符串属性的函数</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td>返回字符串的长度</td> 
  </tr> 
  <tr> 
   <td>prototype</td> 
   <td>允许您向对象添加属性</td> 
  </tr> 
 </tbody> 
</table>

7、字符串方法

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
   <th align="left">使用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">charAt()</td> 
   <td align="left">返回指定索引位置的字符</td> 
   <td align="left"><code>var n = str.charAt(2);</code></td> 
  </tr> 
  <tr> 
   <td align="left">charCodeAt()</td> 
   <td align="left">返回指定索引位置字符的Unicode值</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">concat()</td> 
   <td align="left">连接两个或多个字符串，返回连接后的字符串</td> 
   <td align="left"><code>var n = str1.concat(str2);</code></td> 
  </tr> 
  <tr> 
   <td align="left">fromCharCode()</td> 
   <td align="left">将Unicode转换为字符串</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">indexOf()</td> 
   <td align="left">返回字符串中检索指定字符第一次出现的位置。如果没有找到对应的字符，函数返回-1。</td> 
   <td align="left"><code>str.indexOf("welcome");</code></td> 
  </tr> 
  <tr> 
   <td align="left">lastIndexOf()</td> 
   <td align="left">返回字符串中检索指定字符最后一次出现的地方</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">localeCompare()</td> 
   <td align="left">用本地特定的顺序来比较两个字符串</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">match()</td> 
   <td align="left">找到一个或多个正则表达式的匹配。如果找到的话，返回这个字符；没有找到则返回null。</td> 
   <td align="left"><code>str.match("World")；//返回World或者null</code></td> 
  </tr> 
  <tr> 
   <td align="left">replace()</td> 
   <td align="left">替换与正则表达式匹配的子串.<code>str.replace("Microsoft","w3cschool");</code></td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">search()</td> 
   <td align="left">检索与正则表达式相匹配的值</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">split()</td> 
   <td align="left">把字符串分割为子字符串数组。</td> 
   <td align="left"><code>txt="a,b,c,d,e"//String; txt.split(",");//使用逗号分隔;输出[a,b,c,d,e]</code></td> 
  </tr> 
  <tr> 
   <td align="left">slice()</td> 
   <td align="left">提取字符串的片段，并在新的字符串中返回被提取的部分</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">substr()</td> 
   <td align="left">从起始索引号提取字符串中指定数目的字符</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">substring()</td> 
   <td align="left">提取字符串中两个指定的索引号之间的字符</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">toLocalLowerCase()</td> 
   <td align="left">根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">toLocalUpperCase()</td> 
   <td align="left">根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">toLowerCase()</td> 
   <td align="left">把字符串转换为小写</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">toString()</td> 
   <td align="left">返回字符串对象值</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">toUpperCase()</td> 
   <td align="left">把字符串转换为大写</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">trim()</td> 
   <td align="left">移除字符串首尾空白</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">valueOf()</td> 
   <td align="left">返回某个字符串对象的原始值</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**七、javaScript运算符**  
在两个字符串之间增加空格的两种方法。  
（1）把空格插入一个字符串之中。

txt1="What a very ";
    txt2="nice day";
    txt3=txt1+txt2;

（2）把空格插入字符串中

txt1="What a very";
    txt2="nice day";
    txt3=txt1+" "+txt2;

2、空文本 + 数字得到的运算结果都是把数字转成字符串，无论文本有多少个空格。

var result1=""+5;         // 得到的结果是"5"
    var result2=" "+5;        // 得到的结果是"5"
    var result3="       "+5;  // 得到的结果是"5"

**八、javaScript比较**  
1、条件运算符（三目运算符）  
variablename=(condition)?value1:value2

var voteable,age;
    voteable=(age<18)?"年龄太小":"年龄已达到";

**九、javaScript循环**  
1、for in循环不仅可以遍历对象的属性，还可以遍历数组。  
**十、javaScript Break和Continue**  
1、break 语句用于跳出循环。  
continue 用于跳过循环中的一个迭代，所以 continue 只能用于循环的代码块。  
2、（1）continue 语句（带有或不带标签引用）只能用在循环中。  
（2）break 语句（不带标签引用），只能用在循环或 switch 中。  
（3）通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。

cars=["BMW","Volvo","Saab","Ford"];
    list: 
    {
        document.write(cars[0] + "<br>"); 
        document.write(cars[1] + "<br>"); 
        document.write(cars[2] + "<br>"); 
        break list;
        document.write(cars[3] + "<br>"); 
        document.write(cars[4] + "<br>"); 
        document.write(cars[5] + "<br>"); 
    }

**十一、javaScript typeof**  
1、用typeof检测null返回是object。  
2、null是一个只有一个值的特殊类型。表示一个空对象引用。  
3、undefined是一个没有设置值的变量。  
4、null和undefined的值相等，但是类型不相等。  
**十二、javaScript类型转换**  
1、Number()转换为数字，String()转换为字符串，Boolean()转换为布尔值。  
2、（1）javaScript中有5种不同的数据类型：string、number、boolean、object、function  
（2）3种对象类型：Object、Date、Array  
（3）2个不包含任何值的数据类型：null、undefined  
3、（1）NaN的数据类型是number  
（2）数组（Array）的数据类型是object  
（3）日期（Date）的数据类型为object  
（4）null的数据类型是object  
（5）未定义变量的数据类型为undefined  
4、如果对象是Array或Date，就无法通过typeof来判断他们的类型，因为都是Object.  
5、constructor 属性返回所有 JavaScript 变量的构造函数。

<table> 
 <thead> 
  <tr> 
   <th>（1）函数</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>“John”.constructor</td> 
   <td>// 返回函数 String() { [native code] }</td> 
  </tr> 
  <tr> 
   <td>(3.14).constructor</td> 
   <td>// 返回函数 Number() { [native code] }</td> 
  </tr> 
  <tr> 
   <td>false.constructor</td> 
   <td>// 返回函数 Boolean() { [native code] }</td> 
  </tr> 
  <tr> 
   <td>[1,2,3,4].constructor</td> 
   <td>// 返回函数 Array() { [native code] }</td> 
  </tr> 
  <tr> 
   <td>{name:‘John’, age:34}.constructor</td> 
   <td>// 返回函数 Object() { [native code] }</td> 
  </tr> 
  <tr> 
   <td>new Date().constructor</td> 
   <td>// 返回函数 Date() { [native code] }</td> 
  </tr> 
  <tr> 
   <td>function () {}.constructor</td> 
   <td>// 返回函数 Function(){ [native code] }</td> 
  </tr> 
 </tbody> 
</table>

（2）可以使用constructor属性来查看对象是否为数组（包含字符串“Array”）

function isArray(myArray) {
        return myArray.constructor.toString().indexOf("Array") > -1;
    }

（3）可以使用constructor属性来查看对象是否为日期（包含字符串“Date”）

function isDate(myDate) {
        return myDate.constructor.toString().indexOf("Date") > -1;
    }

6、  
（1）数字转换为字符串的方法：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>String(x)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>x.toString()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>toExponential()</td> 
   <td>把对象的值转换为指数计数法。</td> 
  </tr> 
  <tr> 
   <td>toFixed()</td> 
   <td>把数字转换为字符串，结果的小数点后有指定位数的数字。</td> 
  </tr> 
 </tbody> 
</table>

（2）日期转换为字符串

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>String(x)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>x.toString()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>getFullYear()</td> 
   <td>从Date对象以四位数字返回年份</td> 
  </tr> 
  <tr> 
   <td>getMonth()</td> 
   <td>从Date对象返回月份（0-11）</td> 
  </tr> 
  <tr> 
   <td>getDate()</td> 
   <td>从Date对象返回一个月中的某一天（1-31）</td> 
  </tr> 
  <tr> 
   <td>getHours()</td> 
   <td>返回Date对象的小时（0-23）</td> 
  </tr> 
  <tr> 
   <td>getSeconds()</td> 
   <td>返回Date对象的秒数（0-59）</td> 
  </tr> 
  <tr> 
   <td>getMilliseconds()</td> 
   <td>返回Date对象的毫秒（0-999）</td> 
  </tr> 
  <tr> 
   <td>getDay()</td> 
   <td>从Date对象返回一周中的某一天（0-6）</td> 
  </tr> 
  <tr> 
   <td>getTime()</td> 
   <td>返回1970年1月1日至今的毫秒数</td> 
  </tr> 
 </tbody> 
</table>

（3）字符串转换为数字

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Number()</td> 
   <td>①全局方法Number()可以将字符串转换为数字。②空字符串转换为0。③其他的字符串会转换为NaN</td> 
  </tr> 
  <tr> 
   <td>parseFloat()</td> 
   <td>解析一个字符串，并返回一个浮点数</td> 
  </tr> 
  <tr> 
   <td>parseInt()</td> 
   <td>解析一个字符串，并返回一个整数</td> 
  </tr> 
  <tr> 
   <td>一元运算符+</td> 
   <td>①可将变量转换为数字。②<code>var y = "5"; // y 是一个字符串； var x = + y;// x 是一个数字</code> ③如果变量不能转换，它仍然会是一个数字，但值为NaN。<code>var y = "John";// y 是一个字符串； var x = + y;// x 是一个数字 (NaN)</code></td> 
  </tr> 
 </tbody> 
</table>

（4）布尔值转换为数字

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Number()</td> 
   <td><code>Number(false)// 返回 0; Number(true) // 返回 1</code></td> 
  </tr> 
 </tbody> 
</table>

（5）日期转换为数字

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Number()</td> 
   <td><code>d = new Date();Number(d)</code></td> 
  </tr> 
  <tr> 
   <td>getTime()</td> 
   <td>日期方法getTime()能将日期转换为数字。<code>d = new Date();d.getTime()</code></td> 
  </tr> 
 </tbody> 
</table>

（6）自动转换类型  
当javaScript尝试操作一个“错误”的数据类型时，会自动转换为“正确”的数据类型。  
①数字+null，null转换为0，+为运算符  
5 + null // 返回 5 ，null 转换为 0  
②字符串+null，null转换为字符串"null"，+为拼接  
“5” + null // 返回"5null" ， null 转换为 “null”  
③字符串+数字，数字转换为字符串，+为拼接  
“5” + 1 // 返回 “51”，1 转换为 “1”  
④字符串-数字，字符串转换为数字，-为运算符  
“5” - 1 // 返回 4，“5” 转换为 5  
（7）自动转换为字符串  
当你尝试输出一个对象或一个变量时，javaScript会自动调用变量的toString()方法

document.getElementById("demo").innerHTML = myVar;
    
    // if myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
    // if myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
    // if myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

**十三、javaScript正则表达式**  
1、正则表达式  
（1）正则表达式是由一个字符序列形成的搜索模式。  
（2）搜索模式可用于文本搜索和文本替换。  
（3）正则表达式可用于所有文本搜索和文本替换的操作。  
2、var patt = /runoob/i  
/runoob/i 是一个正则表达式。  
runoob 是一个正则表达式主体 (用于检索)。  
i 是一个修饰符 (搜索不区分大小写)。  
3、在javaScript中，正则表达式通常用于两个字符串方法：search()和replace()。  
（1）search()方法：用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。  
①正则表达式搜索Runoob，且不区分大小写。

var str='I love Runoob Runoob';
    var n = str.search(/Runoob/i);
    console.log(n);//得到的n为7(第一个Runoob的R的下标)

②search()方法可使用字符串作为参数。字符串参数会转换为正则表达式。

var n = str.search("Runoob");

（2）replace()方法：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。  
①使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

var txt = str.replace(/microsoft/i,"Runoob");

②replace() 方法将接收字符串作为参数。

var txt = str.replace("Microsoft","Runoob");

4、正则表达式修饰符

<table> 
 <thead> 
  <tr> 
   <th>修饰符</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>i</td> 
   <td>执行对大小写不敏感的匹配</td> 
  </tr> 
  <tr> 
   <td>g</td> 
   <td>执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）</td> 
  </tr> 
  <tr> 
   <td>m</td> 
   <td>执行多行匹配</td> 
  </tr> 
 </tbody> 
</table>

5、正则表达式模式  
（1）方括号用于查找某个范围内的字符。

<table> 
 <thead> 
  <tr> 
   <th>表达式</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[abc]</td> 
   <td>查找方括号之间的任何字符</td> 
  </tr> 
  <tr> 
   <td>[0-9]</td> 
   <td>查找任何从0至9的数字</td> 
  </tr> 
  <tr> 
   <td>(x|y)</td> 
   <td>查找任何以|分割的选项</td> 
  </tr> 
 </tbody> 
</table>

（2）元字符是拥有特殊含义的字符

<table> 
 <thead> 
  <tr> 
   <th>元字符</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>\d</td> 
   <td>查找数字</td> 
  </tr> 
  <tr> 
   <td>\s</td> 
   <td>查找空白字符</td> 
  </tr> 
  <tr> 
   <td>\b</td> 
   <td>匹配单词边界</td> 
  </tr> 
  <tr> 
   <td>\uxxxx</td> 
   <td>查找以十六进制数xxxx规定的Unicode字符</td> 
  </tr> 
 </tbody> 
</table>

（3）量词

<table> 
 <thead> 
  <tr> 
   <th>量词</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>m+</td> 
   <td>匹配任何包含至少一个m的字符串:1|n</td> 
  </tr> 
  <tr> 
   <td>m*</td> 
   <td>匹配任何包含零个或多个m的字符串:0|n</td> 
  </tr> 
  <tr> 
   <td>m?</td> 
   <td>匹配任何包含零个或一个m的字符串:0|1</td> 
  </tr> 
 </tbody> 
</table>

6、使用RegExp对象  
在javaScript中，RegExp对象是一个预定义了属性和方法的正则表达式对象。  
7、test()和exec()  
（1）test()  
test()方法是一个正则表达式方法。  
test()方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true，否则返回false.  
①

var patt = /e/;
    var str="The best things in life are free!";
    patt.test(str);

返回true  
②

var str = 'runoob';
    var patt1 = new RegExp('\\w', 'g'); // 有转义作为正则表达式处理
    var patt2 = new RegExp('\w', 'g');  // 无转义作为字符串处理
    var patt3 =/\w+/g;  // 与 patt1 效果相同
    document.write(patt1.test(str)) //输出 true
    document.write("<br>") 
    document.write(patt2.test(str)) //输出 false
    document.write("<br>") 
    document.write(patt3.test(str)) //输出 true

（2）exec()  
exec()方法是一个正则表达式方法。  
exec()方法用于检索字符串中的正则表达式的匹配。  
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为null。

var patt=/e/;
    var str="The best things in life are free!"
    patt.exec(str);

返回e  
**十四、javaScipt错误**  
1、javaScript错误-throw、try和catch  
（1）try语句测试代码块的错误。  
（2）catch语句处理错误。  
（3）throw语句创建自定义错误。  
2、try和catch  
（1）try语句允许我们定义在执行时进行错误测试的代码块。  
（2）catch语句允许我们定义当try代码块发生错误时，所执行的代码快。  
（3）javaScript语句try和catch是成对出现的。

try {
      //在这里运行代码
    } catch(err) {
      //在这里处理错误
    }

（4）catch块会捕捉到try块中的错误，并执行代码来处理它。

3、throw语句  
（1）throw语句创建或抛出异常(exception\[ik’sepʃən\]:异常)。  
（2）throw与try和catch一起使用，能够控制程序流，并生成自定义的错误消息。  
（3）语法

throw exception

异常可以是javaScript字符串、数字、逻辑值或对象。

**十五、javaScript调试**  
1、console.log()  
2、debugger  
debugger关键字用于停止执行javaScript，并调用调试函数。这个关键字与在调试工具中设置断点的效果是一样的。  
**十六、javaScript变量提升**  
1、javaScript中，函数及变量的声明都将被提升到函数的最顶部。

x = 5; // 变量 x 设置为 5
    elem = document.getElementById("demo"); // 查找元素 
    elem.innerHTML = x;                     // 在元素中显示 x
    var x; // 声明 x

2、javaScipt只有声明的变量会提升，初始化的不会。

var x = 5; // 初始化 x
    elem = document.getElementById("demo"); // 查找元素 
    elem.innerHTML = x + " " + y;           // 显示 x 和 y
    var y = 7; // 初始化 y

y输出了undefined，因为变量声明(var y)提升了，但是初始化（y=7）并不会提升，所以y变量是一个未定义的变量。  
上述代码类似于下列代码

var x = 5; // 初始化 x
    var y;     // 声明 y
    elem = document.getElementById("demo"); // 查找元素
    elem.innerHTML = x + " " + y;           // 显示 x 和 y
    y = 7;    // 设置 y 为 7

**十七、javaScript严格模式（use strict）**  
1、严格模式通过在脚本或函数的头部添加 “use strict”; 表达式来声明。“use strict” 指令只运行出现在脚本或函数的开头。  
2、为什么使用严格模式？  
消除javascript语法的一些不合理，不严谨之处，减少一些怪异行为。  
（1）消除代码运行的一些不安全之处，保证代码运行的安全。  
（2）提高编译器效率，增加运行速度。  
（3）为未来新版本的javascript做好铺垫。  
3、同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。  
4、严格模式的限制：  
（1）不允许使用未声明的变量。  
对象也是一个变量。  
（2）不允许删除变量或对象。

"use strict";
    var x = 3.14;
    delete x;                // 报错

（3）不允许删除函数。  
（4）不允许变量重名。  
（5）不允许使用八进制。  
（6）不允许使用转义字符。

"use strict";
    var x = \010;            // 报错

（7）不允许对只读属性赋值。

"use strict";
    var obj = {};
    Object.defineProperty(obj, "x", {value:0, writable:false});
    obj.x = 3.14;            // 报错

（8）不允许对一个使用getter方法读取的属性进行赋值。

"use strict";
    var obj = {get x() {return 0} };
    
    obj.x = 3.14;            // 报错

（9）不允许删除一个不允许删除的属性。

"use strict";
    delete Object.prototype; // 报错

（10）变量名不能使用“eval”字符串。  
（11）变量名不能使用“arguments”字符串。  
（12）不允许使用以下这种语句。

"use strict";
    with (Math){x = cos(2)}; // 报错

（13）由于一些安全原因，在作用域eval()创建的变量不能被调用。

"use strict";
    eval ("var x = 2");
    alert (x);               // 报错

（14）禁止this关键字指向全局对象。

function f(){
    	return !this;
    } 
    // 返回false，因为"this"指向全局对象，"!this"就是false
    
    function f(){ 
    	"use strict";
    	return !this;
    } 
    // 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。

function f(){
    	"use strict";
    	this.a = 1;
    };
    f();// 报错，this未定义

**十八、javaScript使用误区：**  
1、赋值运算符应用错误。  
在javaScript程序中，如果你在if条件语句中使用赋值运算符的等号（=）将会产生一个错误结果，正确的方法是使用比较运算符的两个等号（==）。  
（1）

var x = 0;
    if (x == 10)//返回false（因为x不等于10）

（2）

var x = 0;
    if (x = 10)//返回true(因为条件语句执行为x赋值为10，10为true)

（3）

var x = 0;
    if (x = 0)//返回false（因为条件语句执行为x赋值0，0为false）

赋值语句返回变量的值。  
2、比较运算符常见错误  
这种错误经常会在switch语句中出现，switch语句会使用恒等计算符（===）进行比较。  
3、加法与连接注意事项。  
加法是两个数字相加。  
连接是两个字符串连接。  
javaScript的加法和连接都使用+运算符。  
4、浮点型数据使用注意事项  
javaScript中的所有数据都是以64位浮点型数据（float）来存储。

var x = 0.1;
    var y = 0.2;
    var z = x + y            // z 的结果为 0.3
    if (z == 0.3)            // 返回 false

为解决以上问题，可以用整数的乘除法来解决：

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

5、字符串分行  
（1）javaScript允许我们在字符串中使用断行语句：

var x =
    "Hello World!";

（2）在字符串中直接使用回车换行是会报错的：

var x = "Hello
    World!";

（3）字符串断行需要使用反斜杠（\\）

var x = "Hello \
    World!";

6、return语句使用注意事项。  
不要对 return 语句进行断行。

function myFunction(a) {
        var
        power = 10;  
        return
        a * power;
    }

返回undefind;  
①如果是一个不完整的语句，如：`var`  
②javaScript将尝试读取第二行的语句：`power=10;`  
③但是由于这样的语句是完整的：`return`  
④javaScript将自动关闭语句：`return;`  
由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。  
7、数组中使用名字来索引  
（1）许多程序语言都允许使用名字来作为数组的索引。  
使用名字来作为索引的数组称为关联数组（或哈希）。  
（2）javaScript不支持使用名字来索引数组，只允许使用数字索引。

var person = [];
    person[0] = "John";
    person[1] = "Doe";
    person[2] = 46;
    var x = person.length;         // person.length 返回 3
    var y = person[0];             // person[0] 返回 "John"

（3）在javaScript中，对象使用名字作为索引。  
如果你使用名字作为索引，当访问数组时，javaScript会把数组重新定义为标准对象。  
执行这样的操作后，数组的方法和属性将不能再使用，否则会产生错误。

var person = [];
    person["firstName"] = "John";
    person["lastName"] = "Doe";
    person["age"] = 46;
    var x = person.length;         // person.length 返回 0
    var y = person[0];             // person[0] 返回 undefined

8、undefined不是null  
（1）在javaScript中，null用于对象,undefined用于变量，属性和方法。  
对象只有被定义才有可能为null，否则为undefined；  
（2）如果我们想测试对象是否存在，在对象还没定义时会抛出一个错误。  
错误的使用方式：

if (myObj !== null && typeof myObj !== "undefined")

正确的方式是我们需要先使用typeof来检测对象是否已定义：

if (typeof myObj !== "undefined" && myObj !== null)

**十九、javaScript表单**  
1、数据验证  
（1）服务端数据验证：是在数据提交到服务器上后再验证。  
（2）客户端数据验证（side validation）：是在数据发送到服务器前，在浏览器上完成验证。  
2、约束验证css伪类选择器

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:disabled</td> 
   <td>选取属性为“disabled”属性的input元素</td> 
  </tr> 
  <tr> 
   <td>:invalid</td> 
   <td>选取无效的input元素</td> 
  </tr> 
  <tr> 
   <td>:optional</td> 
   <td>选择没有“required”属性的input元素</td> 
  </tr> 
  <tr> 
   <td>:required</td> 
   <td>选择有“required”属性的input元素</td> 
  </tr> 
  <tr> 
   <td>:valid</td> 
   <td>选取有效值的input元素</td> 
  </tr> 
 </tbody> 
</table>

二十、javaScript验证API  
1、约束验证DOM方法

<table> 
 <thead> 
  <tr> 
   <th>property</th> 
   <th>description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>checkValidity()</td> 
   <td>如果input元素中的数据是合法的返回true，否则返回false</td> 
  </tr> 
  <tr> 
   <td>setCustomValidity()</td> 
   <td>设置input元素的validationMessage属性，用于自定义错误提示信息的方法。</td> 
  </tr> 
 </tbody> 
</table>

<input id="id1" type="number" min="100" max="300" required>
    <button onclick="myFunction()">验证</button>
     
    <p id="demo"></p>
     
    <script>
    function myFunction() {
        var inpObj = document.getElementById("id1");
        if (inpObj.checkValidity() == false) {
            document.getElementById("demo").innerHTML = inpObj.validationMessage;
        }
    }
    </script>

2、约束验证DOM属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>validity</td> 
   <td>布尔属性值，返回input输入值是否合法</td> 
  </tr> 
  <tr> 
   <td>validationMessage</td> 
   <td>浏览器错误提示信息</td> 
  </tr> 
  <tr> 
   <td>willValidate</td> 
   <td>指定input是否需要验证</td> 
  </tr> 
 </tbody> 
</table>

3、validity属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>customError</td> 
   <td>设置为true，如果设置了自定义的validity信息。</td> 
  </tr> 
  <tr> 
   <td>patternMismatch</td> 
   <td>设置为true，如果元素的值不匹配它的模式属性。</td> 
  </tr> 
  <tr> 
   <td>rangeOverflow</td> 
   <td>设置为true，如果元素的值大于设置的最大值。</td> 
  </tr> 
  <tr> 
   <td>rangeUnderflow</td> 
   <td>设置为true,如果元素的值小于它的最小值</td> 
  </tr> 
  <tr> 
   <td>stepMismatch</td> 
   <td>设置为true，如果元素的值超过了maxLength属性设置的长度</td> 
  </tr> 
  <tr> 
   <td>typeMismatch</td> 
   <td>设置为true，如果元素的值不是预期相匹配的类型</td> 
  </tr> 
  <tr> 
   <td>valueMissing</td> 
   <td>设置为true，如果元素（required属性）没有值</td> 
  </tr> 
  <tr> 
   <td>valid</td> 
   <td>设置为true，如果元素的值是合法的。</td> 
  </tr> 
 </tbody> 
</table>

<input id="id1" type="number" min="100" required>
    <button onclick="myFunction()">OK</button>
     
    <p id="demo"></p>
     
    <script>
    function myFunction() {
        var txt = "";
        var inpObj = document.getElementById("id1");
        if(!isNumeric(inpObj.value)) {
            txt = "你输入的不是数字";
        }else if(inpObj.validity.rangeOverflow) {
           txt = "输入的值太大了";
        }else if (inpObj.validity.rangeUnderflow) {
            txt = "输入的值太小了";
        } else {
            txt = "输入正确";
        }
        document.getElementById("demo").innerHTML = txt;
    }
     
    // 判断输入是否为数字
    function isNumeric(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }
    </script>

**二十一、javaScript保留关键字**  
地址：http://www.runoob.com/js/js-reserved.html

**二十二、javaScript JSON**  
1、json语法规则：  
（1）数据为键/值对。  
（2）数据由逗号分隔。  
（3）大括号保存对象  
（4）方括号保存数组  
2、json数据——一个名称对应一个值  
键/值对包含字段名称（在双引号中），后面一个冒号，然后是值：

"name":"Runoob"

3、json字符串转换为javaScript对象  
（1）创建javaScript字符串，字符串为json格式的数据。

var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

（2）使用javaScript内置对象JSON.parse()将字符串转换为javaScript对象：

var obj = JSON.parse(text);

（3）在页面中使用新的javaScript对象：

4、相关函数

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>JSON.parse()</td> 
   <td>用于将一个JSON字符串转换为javaScript对象</td> 
  </tr> 
  <tr> 
   <td>JOSN.stringify()</td> 
   <td>用于将javaScript值转换为JSON字符串</td> 
  </tr> 
 </tbody> 
</table>

**二十三、javaScript void**  
1、javascript:void(0)中最关键的是void关键字，void是javaScript中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。  
2、语法格式如下：

void(0)计算为0，但javaScript上没有任何效果。  
3、href="\#"与href="javascript:void(0)"的区别  
（1）\#包含了一个位置信息，默认的锚是\#top也就是网页的上端。  
（2）javascript:void(0)，仅仅表示一个死链接。  
（3）在页面很长的时候会用\#来定位页面的具体位置，格式为：\#+id  
**二十四、javaScript代码规范**  
1、代码规范通常包括以下几个方面。  
（1）变量和函数的命名规则。  
（2）空格、缩进、注释的使用规则  
（3）其他常用规范…  
2、变量名。  
变量名推荐使用驼峰法来命名（camelCase）。  
3、空格与运算符。  
通常运算符（=±\*/）前后需要添加空格。

var x = y + z;

4、代码缩进  
（1）通常使用4个空格符号来缩进代码块。  
（2）不推荐使用tab键来缩进，因为不同编辑器tab键的解析不一样。  
5、语句规则。  
（1）简单语句的通用规则：  
①一条语句通常以分号作为结束符。  
（2）复杂语句的通用规则。  
①将花括号放在第一行的结尾。  
②左花括号前添加一空格。  
③将右花括号独立放在一行。  
④不要以分号结束一个复杂的声明。

function toCelsius(fahrenheit) {
        return (5 / 9) * (fahrenheit - 32);
    }

6、对象规则  
（1）将左花括号与类名放在同一行。  
（2）冒号与属性值间有个空格。  
（3）字符串使用双引号，数字不需要。  
（4）最后一个属性-值对后面不要添加逗号。  
（5）将右花括号独立放在一行，并以分号作为结束符号。

var person = {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue"
    };

（6）短的对象代码可以直接写成一行。

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

7、每行代码字符小于80  
（1）为了便于阅读每行字符建议小于数80个。  
（2）如果一个javaScript语句超过了80个字符，建议在运算符或者逗号后换行。

document.getElementById("demo").innerHTML =
        "Hello Runoob.";

8、命名规则  
（1）一般很多代码语言的命名规则都是类似的。  
①变量和函数为驼峰法。（camelCase）  
②全局变量为大写（UPPERCASE）  
③变量（如PI）为大写（UPPERCASE）  
（2）html和css的横杠（-）字符  
①css使用-来连接属性名（font-size）。  
②-通常在javaScript被认为是减法，所以不允许使用。  
（3）下划线。  
①SQL数据库。  
②php语言通常都使用下划线。  
（4）帕斯卡拼写法（PascalCase）。  
①单字之间不以空格断开或连接号（-），底线（\_）连接，第一个单字首字母采用大写字母，后续单字的首字母亦用大写字母。  
②帕斯卡命名法也称为“大驼峰式命名法”。  
③帕斯卡拼写法（PascalCase）在C语言中运用较多。

### js函数 ###

**二十五、javaScript函数定义**  
1、函数声明后不会立即执行，会在我们需要的时候调用到。  
2、分号是用来分隔可执行JavaScript语句。  
由于函数声明不是一个可执行语句，所以不以分号结束。  
3、匿名函数：

var x = function (a, b) {return a * b};
    var z = x(4, 3);

匿名函数，函数存储在变量中，不需要函数名称，通常通过变量名来调用。  
4、函数定义的3种方式：  
（1）函数声明：

function myFunction(a, b) {
        return a * b;
    }

（2）函数表达式：

var x = function (a, b) {return a * b};

（3）Function()构造函数

var myFunc = new Function("a", "b", "return a * b");
    
    var x = myFunc(4, 3);

也可以写成：

var myFunction = function (a, b) {return a * b}
    
    var x = myFunction(4, 3);

注意：在 JavaScript 中，很多时候，你需要避免使用 new 关键字。  
5、（1）函数可以通过声明定义，也可以是一个表达式。  
（2）函数可以作为一个值使用，也可以作为一个表达式使用。  
①值：

function myFunction(a, b) {
        return a * b;
    }
    
    var x = myFunction(4, 3);

②表达式：

function myFunction(a, b) {
        return a * b;
    }
    
    var x = myFunction(4, 3) * 2;

6、提升（Hoisting）  
（1）提升是 JavaScript 默认将当前作用域提升到前面去的的行为。  
（2）提升（Hoisting）应用在变量的声明与函数的声明。  
（3）表达式定义函数时无法提升。  
7、自调用函数  
（1）函数表达式可以 “自调用”。  
（2）自调用表达式会自动调用。  
（3）如果表达式后面紧跟 () ，则会自动调用。  
（4）不能自调用声明的函数。  
（5）通过添加括号，来说明它是一个函数表达式。  
（6） 匿名自我调用的函数：

(function () {
        var x = "Hello!!";      // 我将调用自己
    })();

8、函数是对象  
（1）arguments.length 属性返回函数调用过程接收到的参数个数

function myFunction(a, b) {
        return arguments.length;
    }

（2）toString() 方法将函数作为一个字符串返回:

function myFunction(a, b) {
        return a * b;
    }
    
    var txt = myFunction.toString();

9、函数定义作为对象的属性，称之为对象方法。  
函数如果用于创建新的对象，称之为对象的构造函数。

**二十六、javaScript函数参数**  
1、显式参数(Parameters)与隐式参数(Arguments)  
函数显式参数在函数定义时列出。  
函数隐式参数在函数调用时传递给函数真正的值。  
2、默认参数  
如果函数在调用时未提供隐式参数，参数会默认设置为： undefined  
有时这是可以接受的，但是建议最好为参数设置一个默认值：

function myFunction(x, y) {
        y = y || 0;//如果y已经定义 ， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。
    }

3、arguments对象  
JavaScript 函数有个内置的对象 arguments 对象。  
argument 对象包含了函数调用的参数数组。  
4、传递参数的2种途径：  
（1）通过值传递参数  
①在函数中调用的参数是函数的隐式参数。  
②JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。  
③如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。  
④隐式参数的改变在函数外是不可见的。  
（2）通过对象传递参数  
①在JavaScript中，可以引用对象的值。  
②因此我们在函数内部修改对象的属性就会修改其初始的值。  
③修改对象属性可作用于函数外部（全局变量）。  
④修改对象属性在函数外是可见的。  
**二十七、javaScript函数调用**  
1、javaScript4种调用方式：作为函数调用、函数作为方法调用、使用构造函数调用函数、作为函数方法调用函数。  
每种方式的不同方式在于 this 的初始化。

// 1、作为函数调用
    function myFunction(a, b) {
        return a * b;
    }
    myFunction(10, 2);           // myFunction(10, 2) 返回 20

// 2、函数作为方法调用
    var myObject = {
        firstName:"John",
        lastName: "Doe",
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    }
    myObject.fullName();         // 返回 "John Doe"

// 3、使用构造函数调用函数
    // 构造函数:
    function myFunction(arg1, arg2) {
        this.firstName = arg1;
        this.lastName  = arg2;
    } 
    // This    creates a new object
    var x = new myFunction("John","Doe");
    x.firstName;                             // 返回 "John"

// 4、作为函数方法调用
    // call
    function myFunction(a, b) {
        return a * b;
    }
    myObject = myFunction.call(myObject, 10, 2);     // 返回 20
    
    // apply
    function myFunction(a, b) {
        return a * b;
    }
    myArray = [10, 2];
    myObject = myFunction.apply(myObject, myArray);  // 返回 20

2、this  
一般而言，在Javascript中，this指向函数执行时的当前对象。  
3、

function myFunction(a, b) {
        return a * b;
    }
    window.myFunction(10, 2);   //window.myFunction(10, 2) 返回 20

这是调用 JavaScript 函数常用的方法， 但不是良好的编程习惯  
全局变量，方法或函数容易造成命名冲突的bug。  
4、全局对象  
（1）当函数没有被自身的对象调用时， this 的值就会变成全局对象。  
（2）在 web 浏览器中全局对象是浏览器窗口（window 对象）。  
（3）函数作为全局对象调用，会使 this 的值成为全局对象。  
使用 window 对象作为一个变量容易造成程序崩溃。  
5、函数作为方法调用

var myObject = {
        firstName:"John",
        lastName: "Doe",
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    }
    myObject.fullName();         // 返回 "John Doe"

函数作为对象方法调用，会使得 this 的值成为对象本身。  
6、使用构造函数调用函数  
（1）如果函数调用前使用了 new 关键字, 则是调用了构造函数。  
这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象。  
（2）构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。  
（3）构造函数中 this 关键字没有任何的值。  
this 的值在函数调用时实例化对象(new object)时创建。  
7、作为函数方法调用函数  
（1）在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。  
（2）call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。  
（3）

function myFunction(a, b) {
        return a * b;
    }
    myObject = myFunction.call(myObject, 10, 2);     // 返回 20

function myFunction(a, b) {
        return a * b;
    }
    myArray = [10, 2];
    myObject = myFunction.apply(myObject, myArray);  // 返回 20

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。  
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。  
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。  
通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。  
**二十八、javaScript闭包**  
1、JavaScript 变量可以是局部变量或全局变量。  
私有变量可以用到闭包。  
2、变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。  
3、全局和局部变量即便名称相同，它们也是两个不同的变量。修改其中一个，不会影响另一个的值。  
4、（1）闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。

var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
    add();
    add();
    add();
    // 计数器为 3

①add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。  
②这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。  
③计数器受匿名函数的作用域保护，只能通过 add 方法修改。  
（2）闭包就是一个函数引用另一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会增加内存消耗。  
或者说闭包就是子函数可以使用父函数的局部变量，还有父函数的参数。

###  js html dom ###

**二十九、dom简介**  
1、Document Object Model，文档对象模型  
**三十、dom html**  
1、改变html元素的属性：  
document.getElementById(id).attribute=新属性值

document.getElementById("image").src="landscape.jpg";

**三十一、dom css**  
document.getElementById(id).style.property=新样式

document.getElementById("p2").style.color="blue";

**三十二、dom事件**  
1、onload 和 onunload 事件  
onload 和 onunload 事件可用于处理 cookie。  
2、onmousedown、onmouseup 以及 onclick 事件  
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。  
**三十三、dom EventListener**  
1、addEventListener()  
（1）addEventListener() 方法用于向指定元素添加事件句柄。  
（2）addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。  
（3）你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。  
（4）addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。  
（5）当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。  
（6）可以使用 removeEventListener() 方法来移除事件的监听。  
2、语法

element.addEventListener(event, function, useCapture);

（1）第一个参数是事件的类型 (如 “click” 或 “mousedown”).  
（2）第二个参数是事件触发后调用的函数。  
（3）第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。  
3、当用户重置窗口大小时添加事件监听：

window.addEventListener("resize", function(){
        document.getElementById("demo").innerHTML = sometext;
    });

4、事件冒泡或事件捕获  
（1）事件传递有两种方式：冒泡与捕获。  
（2）事件传递定义了元素事件触发的顺序。 如果你将 `<p>` 元素插入到 `<div>` 元素中，用户点击`<p>` 元素, 哪个元素的 “click” 事件先被触发呢？  
（3）在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：`<p>` 元素的点击事件先触发，然后会触发 `<div>` 元素的点击事件。  
（4）在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：`<div>` 元素的点击事件先触发 ，然后再触发`<p>`元素的点击事件。  
（5）addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：  
（6）addEventListener(event, function, useCapture);  
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。  
5、（1） IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
    element.detachEvent(event, function);

（2）跨浏览器解决办法：

var x = document.getElementById("myBtn");
    if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
        x.addEventListener("click", myFunction);
    } else if (x.attachEvent) {                  // IE 8 及更早版本
        x.attachEvent("onclick", myFunction);
    }

**三十四、dom元素**  
1、`var para=document.createElement("p");`  
2、`var node=document.createTextNode("这是一个新段落。");`  
3、`para.appendChild(node);`  
4、`parent.removeChild(child);`  
5、`child.parentNode.removeChild(child);`

### js高级教程 ###

**三十五、javaScript对象**  
1、javaScript中的所有事物都是对象：字符串、数值、数组、函数…  
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。  
2、对象的属性和方法：  
（1）访问对象属性的语法是：

objectName.propertyName

（2）方法是能够在对象上执行的动作。  
可以通过以下语法来调用方法：

objectName.methodName()

3、创建对象的2种方法：  
（1）定义并创建对象的实例

person=new Object();
    person.firstname="John";
    person.lastname="Doe";
    person.age=50;
    person.eyecolor="blue";

（2）使用函数来定义对象，然后创建新的对象实例

//使用对象构造器
    function person(firstname,lastname,age,eyecolor){
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    }
    var myFather=new person("John","Doe",50,"blue");
    var myMother=new person("Sally","Rally",48,"green");

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）  
4、JavaScript 是面向对象的语言，但 JavaScript 不使用类。  
在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。  
JavaScript 基于 prototype，而不是基于类的。  
5、JavaScript for…in 语句循环遍历对象的属性。

for (variable in object){
    	执行的代码……
    }

for…in 循环中的代码块将针对每个属性执行一次。  
**三十六、javaScript Number对象**  
1、JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。  
2、javaScript中，所有的数字都是浮点型类型。  
3、精度  
（1）整数（不使用小数点或指数计数法）最多为 15 位。

var x = 999999999999999;   // x 为 999999999999999
    var y = 9999999999999999;  // y 为 10000000000000000

（2）小数的最大位数是 17，但是浮点运算并不总是 100% 准确：

var x = 0.2+0.1; // 输出结果为 0.30000000000000004

4、八进制和十六进制  
（1）如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 “x”，则解释为十六进制数。

var y = 0377;
    var z = 0xFF; 
    document.write(y + "<br>");//255
    document.write(z + "<br>");//255

绝不要在数字前面写零，除非您需要进行八进制转换。  
（2）默认情况下，JavaScript 数字为十进制显示。  
但是你可以使用 toString() 方法 输出16进制、8进制、2进制。

var myNumber=128;
    myNumber.toString(16);   // 返回 80
    myNumber.toString(8);    // 返回 200
    myNumber.toString(2);    // 返回 10000000

5、无穷大（infinity）  
无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。  
6、NaN  
NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

var x = 1000 / "Apple";
    isNaN(x); // 返回 true
    var y = 100 / "1000";
    isNaN(y); // 返回 false

7、数字属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>MAX_VALUE</td> 
   <td>最大值</td> 
  </tr> 
  <tr> 
   <td>MIN_VALUE</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>NEGATIVE_INFINITY</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>POSITIVE_INFINITY</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>NaN</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>prototype</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>constructor</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

8、数字方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>toExponential()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>toFixed()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>toPrecision()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>valueOf()</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**三十七、javaScript String**  
**三十八、javaScript日期**  
1、4种初始化日期方式：

new Date() // 当前日期和时间
    new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
    new Date(dateString)
    new Date(year, month, day, hours, minutes, seconds, milliseconds)

上面的参数大多数都是可选的，在不指定的情况下，默认参数是0。  
2、设置日期  
将日期对象设置为 5 天后的日期：

var myDate=new Date();
    myDate.setDate(myDate.getDate()+5);

注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。  
**三十九、javaScript 数组**  
1、可以在一个数组中包含对象元素、函数、数组。

myArray[0]=Date.now;
    myArray[1]=myFunction;
    myArray[2]=myCars;

2、`var y=myCars.indexOf("Volvo");// "Volvo" 值的索引值`

**四十、javaScript Boolean**  
1、定义一个名为 myBoolean 的布尔对象：

var myBoolean=new Boolean();

2、如果布尔对象无初始值或者其值为:  
0、-0、null、""、false、undefined、NaN  
那么对象的值为 false。  
否则，其值为true。（即使是字符串“false”）  
**四十一、javaScript Match**  
1、JavaScript 提供 8 种可被 Math 对象访问的算数值：  
Math.E  
Math.PI  
Math.SQRT2  
Math.SQRT1\_2  
Math.LN2  
Math.LN10  
Math.LOG2E  
Math.LOG10E  
2、算术方法。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>round()</td> 
   <td>对一个数进行四舍五入。</td> 
  </tr> 
  <tr> 
   <td>random()</td> 
   <td>返回一个介于 0 和 1 之间的随机数。(0&lt;=x&lt;1)</td> 
  </tr> 
  <tr> 
   <td>floor()</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>ceil()</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**四十二、javaScript RegExp对象**  
1、正则表达式（regular expression）  
2、语法：  
（1）var patt=new RegExp(pattern, modifiers);//modifiers修饰符：是否全局，是否大小写。  
（2）var patt=/pattern/modifiers;

### JS浏览器BOM ###

**四十三、javaScript window**  
1、浏览器对象模型BOM（Browser Object Model）  
2、document也是window对象的属性之一。  
3、window尺寸。  
（1）对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：  
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)  
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)  
（2）对于 Internet Explorer 8、7、6、5：  
document.documentElement.clientHeight  
document.documentElement.clientWidth  
或者：  
document.body.clientHeight  
document.body.clientWidth

//所有浏览器窗口的宽度和高度（不包括工具栏/滚动条）
    var w=window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    
    var h=window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;

4、其他window方法  
（1）window.open()-打开新窗口  
（2）window.close()-关闭当前窗口  
（3）window.moveTo()-移动当前窗口  
（4）window.resizeTo()-调整当前窗口的尺寸  
**四十四、javaScript window screen**  
1、window.screen对象包含有关用户屏幕的信息。  
2、screen.availWidth - 可用的屏幕宽度。以像素计，减去界面特征，比如窗口任务栏。  
screen.availHeight -可用的屏幕宽度  
**四十五、javascript window location**  
1、window.location对象用于获得当前页面的地址（url），并把浏览器重定向到新的页面。

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>作用</th> 
   <th>example</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>location.pathname</td> 
   <td>返回当前页面的路径和文件名。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>location.href</td> 
   <td>返回当前页面的url</td> 
   <td>http://www.runoob.com/js/js-window-location.html</td> 
  </tr> 
  <tr> 
   <td>location.protocol</td> 
   <td>返回所使用的web协议</td> 
   <td>http://或https://</td> 
  </tr> 
  <tr> 
   <td>location.hostname</td> 
   <td>返回web主机的域名</td> 
   <td>www.runoob.com</td> 
  </tr> 
  <tr> 
   <td>location.port</td> 
   <td>返回web主机的端口</td> 
   <td>80（https默认端口为443）</td> 
  </tr> 
  <tr> 
   <td>location.pathname</td> 
   <td>返回url的路径名</td> 
   <td>/js/js-window-location.html</td> 
  </tr> 
  <tr> 
   <td>location.assign()</td> 
   <td>加载新的文档</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

**四十六、javaScript window history**  
1、windwo.history对象包含浏览器的历史

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>history.back()</td> 
   <td>加载历史列表的前一个url，与在浏览器点击后退按钮相同</td> 
  </tr> 
  <tr> 
   <td>history.forward()</td> 
   <td>与在浏览器中点击按钮向前相同</td> 
  </tr> 
 </tbody> 
</table>

**四十七、javaScript window navigator**  
1、

<table> 
 <thead> 
  <tr> 
   <th>对象名</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>window.navigator</td> 
   <td>包含有关访问者浏览器的信息</td> 
  </tr> 
  <tr> 
   <td>navigator.appCodeName</td> 
   <td>浏览器代号</td> 
  </tr> 
  <tr> 
   <td>navigator.appName</td> 
   <td>浏览器名称</td> 
  </tr> 
  <tr> 
   <td>navigator.appVersion</td> 
   <td>浏览器版本</td> 
  </tr> 
  <tr> 
   <td>navigator.cookieEnabled</td> 
   <td>启用Cookie</td> 
  </tr> 
  <tr> 
   <td>navigator.platform</td> 
   <td>硬件平台</td> 
  </tr> 
  <tr> 
   <td>navigator.userAgent</td> 
   <td>用户代理</td> 
  </tr> 
  <tr> 
   <td>navigator.systemLanguage</td> 
   <td>用户代理语言</td> 
  </tr> 
 </tbody> 
</table>

2、来自navigator对象的信息具有误导性，不应该被用于检测浏览器版本，因为：  
（1）navigator数据可被浏览器使用者更改。  
（2）一些浏览器对测试站点会识别错误。  
（3）浏览器无法报告晚于浏览器发布的新操作系统。  
3、只有opera属性支持window.opera，可以由此识别出opera

if (window.opera) {...some action...}

**四十八、javascript弹窗**  
1、可以在javascript中创建三种消息框：警告框，确认框，提示框。  
2、警告框经常用于确保用户可以得到某些信息。  
当警告框出现后，用户需要点击确定按钮才能继续进行操作。  
3、确认框  
确认框通常用于验证是否接受用户操作。  
当确认框弹出时，用户可以点击“确认”或者“取消”来确定用户操作。  
当你点击“确认”，确认框返回true，如果点击“取消”，确认框返回false。  
4、提示框  
提示框通常用于提示用户在进入页面前输入某个值。  
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。  
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为null。  
5、换行。  
弹窗使用反斜杠（\\n）来设置换行。  
**四十九、 计时事件**  
1、setInterval()-间隔指定的毫秒数不停地执行指定的代码。  
2、setTimeout()-暂停指定的毫秒数后执行指定的代码。  
3、clearInterval()  
要使用clearInterval()方法，在创建计时方法时你必须使用全局变量。

myVar=setInterval("javascript function",milliseconds);
    function myStopFunction(){
    	clearInterval(myVar);
    }

4、clearTimeout()  
要使用clearTimeout()方法，你必须在创建超时方法中（setTimeout）使用全局变量。  
如果函数还未执行，你可以使用clearTimeout()方法来停止执行函数代码。

var myVar;
    function myFunction(){
    	myVar=setTimeout(function(){alert("hello")},3000);
    }
    function myStopFunction(){
    	clearTimeout(myVar);
    }

**五十、JavaScript cookie**  
1、cookie是一些数据，存储在你电脑上的文本文件中。  
2、cookie的作用就是用于解决“如何记录客户端的用户信息”：  
（1）当用户访问web页面时，他的名字可以记录在cookie中。  
（2）在用户下一次访问该页面时，可以在cookie中读取用户访问记录。  
3、cookie以名/值对形式存储，如下所示：  
username=John Doe  
4、1）创建cookie  
（1）创建cookie

document.cookie="username=John Doe";

（2）可以为cookie添加一个过期时间（以UTC或GMT时间）。默认情况下，cookie在浏览器关闭时删除：

document.cookie="username=John Doe;expires=Thu, 18 Dec 2013 12:00:00 GMT";

（3）可以使用path参数告诉浏览器cookie的路径。默认情况下，cookie属于当前页面。

document.cookie="username=John Doe;expires=Thu,18 Dec 2013 12:00:00 GMT;path=/"

2）读取cookie

var x=document.cookie;

3)使用js修改cookie  
在js中，修改cookie类似于创建cookie，如下：

document.cookie="usrname=John Smith;expires=Thu,18 Dec 2013 12:00:00 GMT;path=/"

旧的cookie将被覆盖。  
4）js删除cookie  
删除cookie非常简单。您值需要设置expires参数为以前的时间即可。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当你删除时不必指定cookie的值。  
5、cookie字符串  
document.cookie属性看起来像一个普通的文本字符串，其实它不是。  
6、(1）设置cookie值的函数：

function setCookie(cname,cvalue,exdays)
    {
      var d = new Date();
      d.setTime(d.getTime()+(exdays*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }

(2)获取cookie值的函数

function getCookie(cname)
    {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for(var i=0; i<ca.length; i++) 
      {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
      }
      return "";
    }

（3）检测cookie值的函数：

### js库 ###

**五十一、javaScript测试jQuery**  
1、jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。  
2、jQuery 对象拥有的属性和方法，与 DOM 对象的不同。  
3、不能在 jQuery 对象上使用 HTML DOM 的属性和方法。  
4、jQuery允许链接（链式语法）。  
链接（chaining）是一种在同一对象上执行多个任务的便捷方法。  
**五十二、javaScript测试prototype**

function myFunction(){
    $("h01").insert("Hello Prototype!");}
    Event.observe(window,"load",myFunction);

1、event.observe()接受三个参数：  
（1）您希望处理的html dom或bom对象。  
（2）您希望处理的事件。  
（3）您希望调用的函数。

### js实例 ###

**五十三、javaScript实例**  
1、创建对象的实例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
    document.write(person.firstname + " is " + person.age + " years old."

2、创建用于对象的模板

function person(firstname,lastname,age,eyecolor){
    	this.firstname=firstname;
    	this.lastname=lastname;
    	this.age=age;
        this.eyecolor=eyecolor;
    }
    myFather=new person("John","Doe",50,"blue");
    document.write(myFather.firstname + " is " + myFather.age + " years old.");

**五十四、javaScript对象实例**  
1、javaScript对象实例：  
String（字符串）对象  
Date（日期）对象、  
Array（数组）对象、  
Boolean（布尔）对象、  
Math（算术）对象  
**五十五、javaScript浏览器对象实例**  
1、JavaScript Browser 对象 实例：  
Window对象  
Navigator对象  
Screen对象  
History对象  
Location对象  
**五十五、javaScript html dom实例**  
1、JavaScript 对象 实例：使用内置JavaScript的对象实例。  
Document对象  
Anchor对象  
Area对象  
Base对象  
Button对象  
Form对象  
Frame/Iframe对象  
Image对象  
Event对象  
Option和Select对象  
Table, TableHeader, TableRow, TableData 对象

### js函数 ###

**五十七、javaScript 参考手册**  
1、javaScript对象： https://www.runoob.com/jsref/jsref-tutorial.html  
2、HTML DOM对象： https://www.runoob.com/jsref/dom-obj-document.html