一、JavaScript基础
1. JavaScript入门
<script> </script>
<script type="text/javascript" src="xxx.js"> </script>
//单行注释
/* 多行注释
Uniconde字符集
大小写敏感
驼峰命名法
代码格式化:js一般会忽略分隔符,如空格符、制表符和换行符
标签:由一个合法字符加一个冒号组成,标签可以放在任意行的起始位置。结构体中使用break、continue等语句跳出循环结构
关键字:JavaScript默认定义具有特殊含义的词汇,如指令名、语句名、函数名、方法名、对象名、属性名。
保留字:预留以后作为关键字使用
*/
- 对象
// 使用点号可以引用对象的属性和方法,在调用对象方法时应在函数名称后面补加小括号。
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关键字声明的变量就是私有变量】
- 表达式
// 表达式是指可以运算,且必须返回一个确定的值的句子。表达式一般由常量、变量、运算符、子表达式构成
// 运算符:连接表达式的符号
2. 语句
语句就是JavaScript指令,通过这些指令可以设计程序的逻辑执行顺序
- 表达式语句和语句块
// 如果在表达式的尾部添加一个分号就会形成一个表达式语句,默认独立一行的表达式也是一个表达式语句,解析时会自动补加分号。
var a,b,c; //表达式语句
{ // 语句块
a=b=c=1
a = b + c
}
- 条件语句
// 程序的基本逻辑结构包括3种:顺序、选择和循环。大部分控制语句属于顺序结构,而条件语句则属于选择结构。主要包括if语句和switch语句两种
// if 语句
if (condition)
statements1
else
statements2
// switch语句
switch (expression) {
case label1 :
statement1;
break;
case label2 :
statement2;
break;
...
default : statementn;
- 循环语句
// 循环语句就是能够重复相同操作的语句:while 、 for
// while 语句
while (condition) {
statements
}
// while语句特殊变体
do
statement
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和b
return 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()