JavaScript是面向Web的编程语言,也是前端开发工程师必须掌握的三种技能之一(描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript)。
JavaScript是一门高端的、动态的、弱类型的编程语言,非常适合面向对象和函数式的编程风格。JavaScript的语法源自Java,它的一等函数(first-class-function)来自于Scheme,它的基本原型(prototype-based)继承来自Self。
1.1、JavaScript语言核心
1.1.1、注释 :用双斜线标示注释,所有双斜线之后的内容都是注释。
1.1.2、变量:JavaScript是弱类型语言,仅有几种基本类型变量(数值、字符串、布尔类型、对象、数组、空)。
1.1.2.1、变量的定义
变量通过var关键字来指明之后的字符串是一个变量。变量的类型,通过给定的值,通过字面值来确定类型。
1.1.2.2、基本类型变量定义
//变量是表示值的一个符号名字
//变量通过var关键字声明的
var x; //声明一个变量x
//值可以通过等号肤质给变量
x=0; //现在变量的值为0
x //=>0:通过变量获得值
//JavaScript支持多种类型数据类型
x=1; //数字
x=0.01; //整数和实数共用一种数据类型
x="hello JavaScript"; //由双引号内的文本构成的字符串
x='JavaScript'; //由单引号内的内容构成的字符串
x=true; //布尔值true
x=false; //布尔值false
x=null; //null是一个特殊的值,意思是"空"
x=undefined; //undefined和null非常类似
1.1.2.3、对象
//JavaScript中的最重要的类型就是对象
//对象是名/值对的集合,或字符串到值映射的集合
var book={ //对象是由花括号括起来的
topic:"JavaScript", //属性"topic"的值是"JavaScript"
fat:true //属性"fat"的值是true
}; //右花括号标记对象的结束
//对象的属性和值,通过冒号(:)赋值
//对象各个属性之间,通过逗号(,)分隔
//通过"."或"[]"访问对象属性
book.topic //=>"JavaScript"
bool["fat"] //=>true:另外一种获取属性的方式
book.author="Flanagan"; //通过赋值创建一个新的属性
book.centents={}; //{}是一个空对象,它没有属性
1.1.2.4、数组
//JavaScript同样支持数组(以数字为索引的列表)
var primes=[2,3,5,7]; //拥有4个值的数组,由一对中括号括起。
primes[0] //=>2:数组中的第一个元素(索引号为0)
primes.length //=>4:数组中的元素个数
primes[primes.length-1] //=>7:数组的最后一个元素
primes[4]=9; //通过赋值来添加新元素,再也没有烦人的边界问题以及哪些固定数组、可变数组等
primes[4]=11; //通过赋值改变原来已有元素
var temp=[]; //[]是空数组,它具有0个元素
empty.length //=>0
1.1.2.4、复杂的对象和数组
//数组和对象中都可以包含另一个数组或对象
var points=[ //具有两个元素的数组
{x:1,y:0}, //每个元素都是一个对象
{x:1,y:1}
];
var data={ //一个包含两个元素的对象
trial1:[[1,2],[3,4]], //每个元素都是数组
trial2:[[2,3],[4,5]] //数组的元素也是数组
};
1.1.3、运算符
1.1.3.1、算术运算 :加 + 减 - 乘 * 除 / 自增 ++ 自减 --
3+2 //=>5:加法
3-2 //=>1:减法
3*2 //=>6:乘法
3/2 //=>1.5:除法
var count=0; //定义变量count,赋予初始值0
count++; //运行后自增1;
count--; //运行后自减1;
count+=2; //自增2:和“count=count+2;”写法一样
count*=3; //自乘3:和"count=count*3;"写法一样
count //=>6:变量名本身也是一个表达式
1.1.3.2、关系运算:大于 >;大于等于>=;小于<;小于等于 <=;不等于!=;相等 ==
var x=2,y=3; //定义两个变量,分别赋予初始值。注意,多个变量的定义,各个变量之间以逗号分隔。
x==y //=>false:相等判断。x和y不相等,故返回false
x!y //=>true:不相等判断。x和y不相等,故返回true
x<y //=>true:小于判断.x小于y,故返回true
x<=y //=>true:小于等于判断
x>y //=>false:大于判断
x>=y //=>false:大于等于判断
"two"=="three" //=>false:字符相等判断。两个字符串不相等,故返回false
"two">"three" //=>true:字符大于判断。"tw“在字母表中的索引大于"th"
false==(x>y) //=>true:false和false相等
1.1.3.3、逻辑运算:与 &&;或 ||;非!
var x=2,y=3; //定义两个变量,分别赋予初始值。
(x==2)&&(y==3) //=>true:两个比较都是true,&&表示"与"
(x>3)||(y<3) //=>false:两个比较都是false
!(x==y) //=>true:!求反
1.1.3.4、字符串:连接 +
"3"+"2" //=>"32"
"hello"+" "+"JavaScript //=>"hello JavaScript"
1.1.4、判断语句
1.1.4.1、if
格式一:简单格式
if(表达式为true) 语句;
格式二:复杂格式
if(表达式为true){
语句块
};
格式三:else格式
if(表达式) {
表达式为true执行的语句
} else {
表达式为false执行的语句
};
格式四:else if 格式
if (表达式1){
表达式1为true执行的语句
} else if (表达式2) {
表达式2为真执行的语句
} else if() ...{
};
1.1.4.2、switch
基本语句:
switch(表达式){
语句
}
用法示例:
switch(n){
case 1: //如果n==1,则从这里开始执行
case 2: //如果n==2,则从这里开始执行。注意这两行
//执行代码块 1
break; //停止执行switch
case 3: //如果n==3,则从这里开始执行
//执行代码块 2
break; //停止执行switch
case 4: //如果n==4,从这里执行
//执行代码块 3
break;
default: //如果所有条件都不匹配
//执行代码块 4
break;
}
1.1.5 循环语句
1.1.5.1、while
var count=0;
while (count<10){
console.log(count);
count++;
}
1.1.5.2、do/while
var a=[2,3,4,5,6],i=0;
var len=a.length;
if (len==0)
console.log("Empty Array");
else {
do {
console.log(a[i]);
} while (i++<len);
1.1.5.3、for
for(var count=0;count<10;count++)
console.log(count);
var i,j,sum=0;
for(i=0,j=0;i<10;i++,j--)
sum+=i*j;
console.log(sum);
1.1.5.4、 for/in
var o={x:1,y=2,z:3};
var a=[],i=0;
for(a[i++] in o)
1.1.6、其它控制语句
1.1.6.1、break
1.1.6.2、continue
1.1.6.3、return
1.1.6.4、throw
1.1.6.5、try/catch/finally
1.1.7、函数
function abs(x){
if (x>0) {
return x;
} else {
return -x;
}
}
1.2、客户端JavaScript