Web前端开发 - 5 - JavaScript基础

一、JavaScript基础

1. JavaScript入门

<script>  </script>
<script type="text/javascript" src="xxx.js"> </script>

//单行注释
/* 多行注释
Uniconde字符集
大小写敏感
驼峰命名法
代码格式化：js一般会忽略分隔符，如空格符、制表符和换行符
标签：由一个合法字符加一个冒号组成，标签可以放在任意行的起始位置。结构体中使用break、continue等语句跳出循环结构
关键字:JavaScript默认定义具有特殊含义的词汇，如指令名、语句名、函数名、方法名、对象名、属性名。
保留字:预留以后作为关键字使用
*/

JavaScript常用关键字
26个关键字解析

• 对象

// 使用点号可以引用对象的属性和方法，在调用对象方法时应在函数名称后面补加小括号。
var me = {name:"张三",say:function() {return "Hi, world!";}
}
document.write("<h1>" + me.name + " : " + me.say() + "</h1>");

• 数组

var me = ["Charlie",function(){return "Hi,world!";}]document.write("<h1>" + me[0] + " : " + me[1]() + "</h1>");

• 全局变量和局部变量（私有变量）

// 全局变量：在整个页面中可见，并在页面中任何位置允许访问。【在域外，或者域内不使用var定义】
// 局部变量：只能在指定函数中可见，函数外面是不可见的，也不允许访问。【使用var关键字声明的变量就是私有变量】

• 表达式

// 表达式是指可以运算，且必须返回一个确定的值的句子。表达式一般由常量、变量、运算符、子表达式构成
// 运算符：连接表达式的符号

• JavaScript运算符

2. 语句

语句就是JavaScript指令，通过这些指令可以设计程序的逻辑执行顺序

• 表达式语句和语句块

// 如果在表达式的尾部添加一个分号就会形成一个表达式语句，默认独立一行的表达式也是一个表达式语句，解析时会自动补加分号。
var a,b,c;		//表达式语句
{				// 语句块a=b=c=1a = b + c 
}

• 条件语句

// 程序的基本逻辑结构包括3种：顺序、选择和循环。大部分控制语句属于顺序结构，而条件语句则属于选择结构。主要包括if语句和switch语句两种
// if 语句
if (condition)statements1
elsestatements2// switch语句
switch (expression) {case label1 :statement1;break;case label2 :statement2;break;...default : statementn;

• 循环语句

// 循环语句就是能够重复相同操作的语句：while 、 for
// while 语句 
while (condition) {statements
}
// while语句特殊变体
dostatement
while (condition);// for 语句
for ([initial-expression;] [condition;] [increment-expression]) {statements
}
// for语句特殊形式
for (variable in object) {statements
}

• 跳转语句

// 跳转语句能够从所在的分支、循环或从函数调用返回的语句跳出 : break 、 continue 、 return
// break语句 : 退出循环或者switch语句
break;
// continue语句 : 重新执行循环语句
continue;
// return语句 : 指定函数的返回值，只能够用在函数或者闭包重。
return [expression]

• 异常处理语句

// 抛出(throw)异常，捕捉(catch)异常。 try、catch、finally
try {				// 执行语句CreateException();
}					
catch(ex) {			// 捕捉异常alert(ex.number + "/n" + ex.description);
}
finally {			// 最后必须执行的语句alert("end");
}

• var语句和function语句

// var : 声明一个或多个变量，也可以在声明变量时进行初始化。默认状态下，初始值为underfined
// function : 定义函数
function [name]([param][,param][...,param]) {statements
}

• with语句和空语句

// with语句能够为一组语句创建缺省的对象 (能够破坏变量的作用域链，一般不建议使用)
with (object) {statements
}// 示例
<div id="box"></div><script>document.getElementById("box").style.borderColor="red";document.getElementById("box").style.borderWidth="1px";document.getElementById("box").style.borderStyle="solid";document.getElementById("box").style.width="400px";document.getElementById("box").style.height="200px";</script>
// 使用with语句简化 :
<div id="box"></div><script>with(document.getElementById("box").style){borderColor="red";borderWidth="1px";borderStyle="solid";width="400px";height="200px";}</script>// 空语句就是只有一个独立的分号，作用是创建一个主体为空的条件或循环，如：
while(true) {;
}

3. 数据类型

js中数据存在两种存储方式，一种直接存储数据，称为值类型数据；另一种存储数据的空间地址来间接保存数据，称为引用型数据

• 基本数据类型 ： 数值、字符串、布尔型
• 特殊类型 ： null、undefined
• 引用数据类型 ： 数组、对象、函数

4. 函数

• 定义函数

// 定义函数方法有两种：function语句声明函数；Function对象构造函数
//function定义函数方式一 ： 命名函数(声明式函数)
function f() {// 函数体
}
// function定义函数方式二 ： 匿名函数(引用式函数/函数表达式)
var f = function() {// 函数体
}
// Function对象构造函数(仅用于特定的动态环境中，一般不建议使用)
var function_name = new Function(arg1,arg2,...,argN,function_body)

• 调用函数

function f() {return "Hello World! ";		// 设置函数返回值
}
document.write(f());			// 调用函数，并输出返回值
// 一个函数可以包含多个return函数，但是调用函数时只有第一个return语句被执行，且该语句后面的表达式的值被作为函数的返回值被返回，return语句后面的代码将被忽略掉
// 函数的返回值没有类型限制，可以返回任意类型的值

• 函数参数

//参数：形参、实参。形参：定义函数时传递给函数的参数，形式上参数；实参：函数被调用时传递给函数的参数。
function add(a,b) {		//形参a和breturn a+b;
}
alert(add(23,34));		//实参23,34
// arguments.length可以获取实参个数

• 函数应用

// 在实际开发中函数常被当作表达式来处理，用户可以把函数视为一个值赋给变量，或者作为一个参数传递给另一个函数

• 闭包函数

// 闭包函数就是外部函数被调用后，它的变量不会消失，仍然被内部函数所使用，而且所有的内容部函数都拥有对外部函数的访问权限。

5. 对象

对象(Object)是面向对象编程的核心概念，它是已经命名的数据集合，也是一种更复杂的数据结构。

• 创建对象

// 在js中，对象是由new运算符生成，生成对象的函数被称为类(或称构造函数、对象类型)，生成的对象被称为类的实例，简称为对象
var o = new Object();		// 构造原型函数
var date = new Date();		// 构造日期对象
var ptn = new RegExp("ab+c","i");	// 构造正则表达式对象
var xxx = {					// 定义对象直接量name : value,			// 属性、值name1 : value1,......
}

• 访问对象

// 可以通过点号运算符(.)来访问对象的属性
// 也可以使用集合运算符([])来访问对象的属性，此时可以使用字符串下标来表示属性。

6. 数组

对象是无序的数据集合，而数组(Array)是一组有序数据集合，他们之间可以相互转换，但是数组拥有大量方法，适合完成一些复杂的运算。

• 定义数组

// 定义数组通过构造函数Array()和运算符new来实现
// 1. 定义空数组
var a = new Array();
// 2. 定义带有参数的数组
var a = new Array(1,2,3,"4","5");
// 3. 定义指定长度的数组
var a = new Array(6);
var a = Array(6);
// 4. 定义数组直接量
var a = [1,2,3,"4","5"];

• 存取元素

// 使用[]运算符可以存取数组元素的值，
var str = "";                           //声明临时变量
var a = [1,2,3,4,5];                    //定义数组
for(var i = 0 ; i < a.length; i++) {    //遍历数组，把数组元素串连成一个字符串str += a[i] + "-";
}
document.write(a + "<br />");           //读取数组的值
document.write(str);                    //显示串连的字符串// 数组的大小不是固定的，可以动态增加或删除数组元素
// 通过改变数组的length属性来改变
// 使用push()和pop()方法来操作数组
var a = [];
a.push(1,2,3);		//得到a[1,2,3]
a.push(4,5);		//得到a[1,2,3,4,5]
a.pop();			//得到a[1,2,3,4]
// 使用unshift()和shift()方法
var a = [];
a.unshift(1,2,3);	//得到a[1,2,3]
a.unshift(4,5);		//得到a[4,5,1,2,3]
a.shift();			//得到a[5,1,2,3]
// 使用splice()方法 : 通用删除和插入元素的方法，可以在数组指定的位置开始删除或插入元素
// splice(插入的起始位置，要删除元素的个数，插入的具体元素)
var a = [1,2,3,4,5,6];
var b = a.splice(2,2);
document.write(a + "<br />");	//输出[1,2,5,6]
document.write(b);				//输出[3，4]var a = [1,2,3,4,5,6];
var b = a.splice(2,2,7,8,9);
document.write(a + "<br />");	//输出[1,2,7,8,9,5,6]
document.write(b);				//输出[3，4]

• 数组应用

// 利用数组对象包含的众多方法，可以对数组进行更加复杂的操作
// 数组与字符串转换:join()/split()
// 数组排序 : reverse()/sort()
// 连接数组 : concat()
// 截取子元素 : slice()