JavaScript基础

1. JavaScript简介

JavaScript主要用于在页面中编写特效，和HTML/CSS一样都是由客户端浏览器解析。

1.1. 输出

alert("字符串");document.write("字符串");

1.2. 调试

console.log(变量);

1.3. 引入js

• 引入外部js文件。 如。
• 使用将js语句嵌入到HTML中。
• href=”javascript:代码”，form标签的action属性也类似。
• js事件

1.4. 大小写

在js中，严格区别大小写，无论是变量还是函数，都区分大小写。

而在PHP中，变量区分大小写，函数不区分大小写。

1.5. 单引号和双引号

在js中，单引号和双引号没有区别。

1.6. 注释

//        单行注释/*  */    多行注释

2. 变量和数据类型

2.1. 变量

var  变量名称=值;   

变量的命名规则：

• 变量名只能由字母、数字、下划线和$符号组成。
• 不能以数字作为开头。
• 不能使用关键字。
• 不能包含短横线。
• 严格区分大小写。

2.2. 数据类型

typeof(变量名);

可以说js中只有一种数据类型“对象”。

数据类型 描述 string 字符串型。连接两个字符串用+（PHP中用.）。如var str=’ab’+’c’; number 数值型。包含整型、浮点型、双精度浮点型。如var num=10; boolean 布尔型。如var b=true; array 数组型。如var arr=[1,2,3]; 在js中，数组不能指定下标，下标只能是默认索引下标。 object 对象。 function 函数。 undefined 未申明。

2.3. 强制类型转换

parseInt()：将字符串型转换成整型数据。

parseInt('3a241');// 返回3parseInt('a241')// 返回NaN

3. 运算符

重点注意算术运算符中的+。

当+两边都是数值类型时，才会执行加法运算；否则，就执行字符串连接。

3.1. 逻辑运算符

• 逻辑与（&&）
• 逻辑或（||）
• 逻辑非（!）

在js中，逻辑非和PHP中的逻辑非一样，返回的都是布尔值。但是，逻辑与和逻辑或返回的结果就不一定是布尔值，而是整个逻辑表达式的值。这一点很重要。

console.log(!0);    // trueconsole.log(!3);    // falseconsole.log(3&&5);  // 5console.log(3&&0);  // 0console.log(0&&3);  // 0console.log(null&&0);   // nullconsole.log(3||5);  // 3console.log(3||0);  // 3console.log(0||3);  // 3console.log(null||0);   // 0console.log(null||NaN);  // NaN

4. 条件判断和流程控制

同PHP中的语法类型。

5. 函数

函数只有调用时，才会执行。

通过函数名称进行调用（可以在声明之前调用，也可以在声明之后调用）。

函数名后带括号时表示调用；不带括号时，表示这个函数本身。

函数也是一种数据类型，可以当做变量进行处理。

JavaScript是一种基于对象的脚本语言，所有的函数都是基于对象的操作方式。

5.1. 函数的声明

声明一个函数时，可以给多个参数，但不能有默认值。

function foo(a){    console.log(typeof(a));}var a=[1,2];foo(a);

5.2. 局部变量和全局变量

局部变量：在函数内部声明的变量是局部变量。

局部变量的生命周期：从变量声明到函数调用结束。局部变量在函数外部是无法访问的。

全局变量：在函数外部声明的变量是全局变量。

全局变量的生命周期：从变量声明到浏览器关闭。

在js中，函数体内可以直接使用全局变量。而在PHP中，如果想要在函数体内使用全局变量，必须用global在函数体内声明。

6. 数组

6.1. 数组的声明

var 数组名=[元素1,元素2, ...];// 快速声明一个数组var 数组名=new Array（"元素1","元素2", ...);// new一个数组

6.2. 遍历数组

for循环

6.3. 数组的常见操作

var arr = ['a', 'b', 'c'];console.log(arr.length);// length为数组的长度属性arr.push('d');// 将一个或多个元素添加到数组的末尾，并返回新数组的长度。arr.pop();// 删除数组中的最后一个元素，并返回该元素。arr.unshift('aaa');// 将一个或多个元素插入到数组的头部，并返回新数组的长度。arr.shift();      // 删除数组中的第一个元素，并返回该元素。

7. 对象

将相关的操作使用一个对象进行封装，把它们看作是一个整体。

常见的系统对象有：String对象、Math对象、Date对象、Array对象、RegExp对象等。

7.1. 对象中的内容

对象主要由属性和方法组成。

7.2. 对象的使用

先创建一个对象实例，然后使用对象实例的属性和方法。

对象实例.属性   // 可对属性进行取值或赋值对象实例["属性"]  // 这种写法，属性可以为变量名对象实例.方法()// 调用对象实例的方法。with(new Array('a','b')){    console.log(length);}// 简写形式

7.3. 自定义对象

对象的声明：由于js中没有类（class）的概念，所以声明一个对象也是用关键字function。

7.4. 对象的遍历

for(变量 in 对象){

}

var obj=document;for(pro in obj){    console.log("document."+pro+"="+obj[pro]+"<br>");}// 遍历document对象

7.5. 常用的系统内置对象

• Math对象。是一个固有对象，不能用new创建。直接通过 Math.属性 或 Math.方法() 进行操作。如Math.random()。
• String对象。可以通过new创建，也可以直接写一个字符串，只是二者有所不同。
• Array对象。可以通过new创建，也可以直接写一个数组。
• Date对象。需要通过new创建。如var dateObj = new Date();
• RegExp对象。可以通过new创建，也可以直接写一个正则表达式。如 var reg=/^a/i; 等同于 var reg=new RegExp(“^a”,”i”);

注意： 在js中，直接写正则表达式时，不用引号括起来。

7.6. 正则验证

正则验证有两种写法：

• 正则表达式.test(字符串)
• 字符串.match(正则表达式)

8. DOM 对象

DOM（Document Object Model），即文档对象模型。

利用DOM对象，可以操作HTML文档的任何内容。

操作属性（获取值、修改值）：

HTML元素本身有的属性，其对应的元素节点就有相应的属性。

注意：HTML元素的class属性对应元素节点的className属性。

操作内容（获取值、修改值）：

innerText   双标签的内部文本（火狐不支持该属性，可以改用textContent）innerHTML   双标签的内部文本和HTML元素outerTextouterHTMLvalue       表单元素的值

操作样式（获取值、修改值）：

obj.style.backgroundColor     注意：CSS中所有的样式属性遇到"-" 需要转化成小驼峰。而且，这种操作单个style的方式，操作的是内联样式。obj.className   需要操作多个样式时，可以直接通过类名来操作。obj.className="test";   // 设置一个类名obj.className="test demo";   或   obj.className+=" demo";    // 设置多个类名obj.className="";   // 删除所有的类名

8.1. 获取DOM的元素节点

常用的三种方法：

var obj = document.getElementById("id属性值");          单个对象var objs = document.getElementsByTagName("标签名称");   对象的集合var objs = document.getElementsByName("name属性值");    对象的集合

8.2. 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

• 文档本身是文档节点
• 所有 HTML 元素是元素节点
• 所有 HTML 属性是属性节点
• HTML 元素内的文本是文本节点
• 注释是注释节点

父节点                 parentNode子节点（第一个，最后一个）   childNodes   firstChild   lastChild同胞节点（上一个，下一个）   siblings     previousSibling   nextSibling

节点类型（nodeType) ：元素节点（1）、属性节点（2）、文本节点（3）、注释节点（0）、文档节点（9）

节点名称（nodeName）：元素节点的标签名、属性节点的属性名、文本节点的nodeName永远是#text、文档节点的nodeName永远是#document

节点值（nodeValue）：文本节点的文本、属性节点的属性值，nodeValue属性对于元素节点和文档节点不可用。

document.createElement("div")      # 创建元素节点，创建的节点是放在内存中的appendChild(obj)    # 插入节点，在父节点内追加子节点insertBefore(obj,mobj)  # 在父节点内的某一个子节点之前插入子节点removeChild(obj)# 删除节点，在父节点内删除子节点

9. BOM 对象

BOM（Browser Object Model），即浏览器对象模型。

利用BOM对象，可以和浏览器窗口进行交互。

window对象表示浏览器中打开的窗口。window对象是BOM的顶层对象，所有对象都是window的子对象。

window对象的子对象：document、location、history、frames、screen、navigator等。

使用window对象的属性和方法时，可以省略window. 。

9.1. window对象的方法

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

setInterval() 按照指定的时间间隔（以毫秒计）来调用函数或计算表达式。

clearInterval() 取消由 setInterval() 设置的定时器，参数为setInterval()的返回值。

setTimeout() 在指定的毫秒数后，只调用一次函数或计算表达式。

clearTimeout() 取消由 setTimeout() 设置的定时器，参数为setTimeout()的返回值。

close() 关闭浏览器窗口。

10. 错误处理

try 测试代码块的错误。

catch 捕获并处理错误。

finally 无论是否有错误，都会执行的语句。

throw 抛出自定义的错误。

try{        throw new Error('test');}catch(e){    console.log(e.message);}finally{    console.log('always exec');}