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');
// 返回3

parseInt('a241')
// 返回NaN

3. 运算符

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

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

3.1. 逻辑运算符

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

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

console.log(!0);    // true
console.log(!3);    // false

console.log(3&&5);  // 5
console.log(3&&0);  // 0
console.log(0&&3);  // 0
console.log(null&&0);   // null

console.log(3||5);  // 3
console.log(3||0);  // 3
console.log(0||3);  // 3
console.log(null||0);   // 0
console.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元素
outerText
outerHTML
value       表单元素的值

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

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');
}