JavaScript基础

JavaScript基本概念

JavaScript由ECMAScript、DOM和BOM组成

  • 语法
  • 关键字,保留字
  • 变量
  • 数据类型
  • 操作符
  • 语句
  • 函数

语法

  • 区分大小写
    ECMAScript中的一切(变量、函数名和操作符)都区分大小写,变量Test和变量test是两个不同的变量
  • 标示符
    标示符是指变量、函数和属性的名字,或者函数的参数,标示符命名规则:
    第一个字符必须是字母、下划线(_)或者美元符号($)
    其他字符可以是字母、下划线、数字或美元符号
    ECMAScript标示符推荐采用驼峰大小写格式,也就是第一个字母小写,剩下的每个单词的首字母大写
  • 注释
    // 单行注释
    /*
    这是一个多行(块级)注释
    */
  • 语句
    ECMAScript中的语句以一个分号结尾,如果省略分号,则由解释器确定语句的结尾。虽然语句结尾的分号不是必须的,但建议任何时候都不愿省略。

    关键字和保留字

  • 关键字有:
    break case catch continue default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with
  • 保留字有:
    abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile
    关键字和保留字在不同的版本中会有不同,在定义变量时,一定不要将变量名使用系统的关键字或保留字,否则会出现一些莫名其妙的错误!

    变量

    ECMAScript的变量是松散类型的,也叫弱类型的,通俗来说就是变量可以用来保存任何类型的数据。
    var 操作符定义变量,后面跟一个变量名,如下所示:
    1
    2
    3
    var message;
    var message = 100;
    var message = 100,hello = 1000;

数据类型

ECMAScript中有5种数据类型(也称为基本数据类型) Undefined、Null、Boolean、Number、String,还有一种复杂的数据类型——Object。
我们可以使用 typeof 操作符来检测数据类型

1
2
3
4
5
6
7
8
9
10
11
12
13
console.log(typeof message);  //undefined 未定义
var boolValue = true;
console.log(typeof boolValue); //boolean 布尔值
var stringValue = "I'm a string";
console.log(typeof stringValue); //string 字符串
var numberValue = 100;
console.log(typeof numberValue); //number 数值
var objValue = new Object();
console.log(typeof objValue); //object 对象或null
function hehe(){
// do something
}
console.log(typeof hehe); //function 函数

Undefined类型只有一个值,在使用 var 声明变量但未对其初始化时,这个变了的值就是undefined

1
2
3
4
5
6
7
console.log(typeof message);
var message;
console.log(typeof message);
var message;
console.log(message == undefined);
var message = 100;
console.log(typeof message);

Null类型是第二个只有一个值的数据类型,这个特殊的值就是null,从逻辑角度来看,null值表示一个空对象指针,这也就是使用typeof操作符检测其类型时返回object的原因

1
2
var car = null;
console.log(typeof car);

实际上,undefined值是派生自null值的,因此

1
console.log(null == undefined);

Boolean类型是使用比较多的类型之一,该类型只有两个字面量值true和false
虽然Boolean类型的值只有两个,但ECMAScript中所有类型的值都与这两个值等价的值

数据类型 true false
Boolean true false
String 任何非空字符串 “”(空字符串)
Number 任何非零数字值 0和NaN
Object 任何对象 null
Undefined 没有意义 undefined

这些转换规则对理解流程控制语句自动执行相应的Boolean转换非常重要

Number类型是比较重要的类型之一,最基本的数值字面格式是十进制数,可以向下面这样直接使用:

1
var numberValue = 100;

除了十进制表示外,整数还可以通过八进制或十六进制的字面值来表示。

String类型用于表示字符串,字符串可以由双引号或单引号来表示,如下所示:

1
2
var string1 = "fsdfsfsdf";
var string2 = 'weewewe';

下面这样不行

1
var string1 = "fsdfsfsdf';

Object类型
ECMAScript中的对象其实就是一组数据和功能的集合。可以通过new操作符来生成一个对象实例:

1
var obj = new Object();

操作符

常用的操作符有+ - * / % ++ – ! && || < > <= >= == === != !== = ,

语句

if语句

1
2
3
4
5
if (condition) {
//do something true
} else {
//do something false
}

do-while语句

1
2
3
4
5
var i = 0;
do {
i = i +2;
} while(i < 10)
console.log(i);

while语句

1
2
3
4
5
var i = 0;
while(i < 10) {
i = i +2;
}
console.log(i);

for语句

1
2
3
for (var i = 0; i < 10; i++) {
console.log(i);
}

for-in语句

1
2
3
for (var i in window) {
console.log(i);
}

break和continue语句

1
2
3
4
5
6
for (var i = 0; i < 10; i++) {
if (i == 7) {
break;
};
console.log(i);
};

1
2
3
4
5
6
for (var i = 0; i < 10; i++) {
if (i == 7) {
continue;
};
console.log(i);
};

switch语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var i = 15;
switch (i) {
case 25:
console.log(25);
break;
case 15:
console.log(15);
break;
case 5:
console.log(5);
break;
default:
console.log("Other");
}

函数

函数对于任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方、任何时候调用执行。ECMAScript中的函数使用function关键字来说明,后跟一组参数以及函数体。

1
2
3
function function_name (argument) {
// body...
}

return语句执行之后停止并立即退出
函数通过function_name加上()来执行,通过unction_name直接传递
ECMAScript中的函数没有重载,对于同名的函数,后面定义的会覆盖前面定义的

常用数学函数

  • 关于 Math对象
    Math 对象并不像 DateString 那样是对象的类,因此没有构造函数 Math(),像 Math.floor() 这样的函数只是函数,不是某个对象的方法。直接调用即可。
  • 绝对值 - Math.abs()
  • 向上取整 - Math.ceil()
  • 向下取整 - Math.floor()
  • 取最大值 - Math.max()
  • 取最小值 - Math.min()
  • 四舍五入 - Math.round()
  • 随机数 - Math.random()
    random() 方法可返回介于 0 ~ 1 之间的一个随机数,位数不确定。

定时器

  • setTimeout(code,millisec) 方法用于在指定的毫秒数后调用函数或计算表达式
    参数 code 必需。要调用的函数或要执行的代码串
    参数 millisec 必需。在执行代码前需等待的毫秒数
  • clearTimeout() 方法可取消由 setTimeout() 设置的定时器
  • setInterval(code,millisec) 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
    参数 code 必需。要调用的函数或要执行的代码串
    参数 millisec 必需。周期性执行或调用 code 之间的时间间隔,以毫秒计
  • clearInterval() 方法可取消由 setInterval() 设置的定时器
  • 可以使用setTimeout(code,millisec)实现setInterval(code,millisec)
    1
    2
    3
    4
    setTimeout(function(){
    //要执行的代码
    setTimeout(arguments.callee, interval);
    }, interval);

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,我们称之为JavaScript对象表示法

另外,也有针对大部分编程语言(包括C++,C#, ColdFusion、Java、Perl、PHP和Python)的JSON库,这些库能将上述语言格式化数据转换成JSON格式

JSON建构于两种结构:

  • 对象——名称/值对的集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔
  • 数组——值的有序列表。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔

相关方法

  • eval 函数将JSON字符串转换为对象(由于安全性问题,不推荐)

    1
    var obj = eval('(' + JSONTest + ')');
  • 目前,Chrome、Firefox、Opera、IE8以上版本也提供了本地JSON支持。JSON解释器提供 JSON.parse (将JSON文本转换为对象)和 JSON.stringify (将对象转换为JSON字符串)

  • 对于那些并不提供本地JSON支持的浏览器可以引入脚本json2.js,来实现JSON转换功能。json2.js脚本可到https://github.com/douglascrockford/JSON-js/blob/master/json2.js

JSON已经是JavaScript标准的一部分。目前,主流的浏览器对JSON支持都非常完美,应用JSON,我们可以从XML的解析中摆脱出来,对那些应用 Ajax 的Web2.0网站来说,JSON确实是目前最灵活的轻量级方案

获取元素的样式

元素的样式由CSS来控制,CSS样式可分为三类——内联样式、内部样式表和外部样式表

当用JavaScript获取这三种样式时,style只能获取内联样式,获取不到内部样式表和外部样式表的样式,因此要用currentStyle属性,而currentStyle在FF下不支持,用getComputedStyle可以解决

1
2
3
4
5
6
7
function getStyle (obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj, false)[attr];
}
}

Cookie不是曲奇饼干,而是浏览器提供的一种机制,它将Document对象的Cookie属性提供给JavaScript。可以由JavaScript对其进行控制,而并不是JavaScript本身的性质。Cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个Cookie可用。因此,Cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。

Cookie机制将信息存储于用户硬盘,因此可以作为全局变量,这是它最大的一个优点。它可以用于以下几种场合

  • 保存用户登录状态
  • 跟踪用户行为
  • 定制页面
  • 创建购物车

当然,上述应用仅仅是Cookie能完成的部分应用,还有更多的功能需要全局变量。Cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种

  • Cookie可能被禁用
  • Cookie是与浏览器相关的
  • Cookie可能被删除
  • Cookie安全性不够高
  • 设置Cookie
    每个Cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie

    1
    document.cookie="uid=12";
  • 给Cookie设置终止日期
    到现在为止,所有的Cookie都是单会话Cookie,即浏览器关闭后这些Cookie将会丢失,在实际开发中,Cookie常常需要长期保存,例如保存用户登录的状态。这可以用下面的选项来实现

    1
    document.cookie="uid=12; expiress=GMT_String";

其中GMT_String是以GMT格式表示的时间字符串,这条语句就是将uid这个Cookie设置为GMT_String表示的过期时间,超过这个时间,Cookie将消失,不可访问

  • 删除Cookie
    为了删除一个Cookie,可以将其过期时间设定为一个过去的时间
  • 指定可访问Cookie的路径
    为了控制Cookie可以访问的目录,需要使用path参数设置Cookie,语法如下
    1
    document.cookie="name=value; path=CookieDir";

其中CookieDir表示可访问Cookie的目录。例如

1
document.cookie="userId=320; path=/shop";

就表示当前Cookie仅能在shop目录下使用

指定可访问Cookie的主机名
和路径类似,主机名是指同一个域下的不同主机,例如:www.google.com和gmail.google.com就是两个不同的主机名。默认情况下,一个主机中创建的Cookie在另一个主机下是不能被访问的,但可以通过domain参数来实现对其的控制,其语法格式为

1
document.cookie="name=value; domain=CookieDomain";

以google为例,要实现跨主机访问,可以写为

1
document.cookie="name=value; domain=.google.com";

这样,所有google.com下的主机都可以访问该Cookie

JavaScript基础知识还有许多需要学习的,水深!

Fork me on GitHub