js第一课

一，数据类型和值

1.基本认识

　　js丰富的，轻量级的，无类型的程序设计语言。js与JScript都相容ECMAScript，并包含超出的功能。

2.数据类型和值

　　基本：数字，字符串，布尔值

　　特殊：null，undefined。

　　复合数据类型：对象，数组，函数。

3.数字

　　js不区分整型和浮点，所有数字都为浮点型表示。

　　Infinity : 无穷大。（专函数 isFinity() 来检测）

　　Number.NaN ：特殊的非数字值(当数值的运算产生了未定义的结果或发生错误后，专函数 isNaN() 来检测）

　　Number.MAX_VALUE : 最大值 1.7976931348623157e+308 ==1.7976931348623157x10的308次方

　　Number.MIN_VALUE : 最小值 5e-324 == 5x10的负324次方

　　Number.NEGATIVE_INFINITY : 负无穷大的特殊值 -Infinity

　　Number.POSITIVE_INFINITY : 正无穷大的特殊值。 Infinity

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('txt1').value = Number.MAX_VALUE ;
            document.getElementById('txt2').value = Number.MIN_VALUE ;
            document.getElementById('int').innerHTML += Number.NEGATIVE_INFINITY+'<br/>';
            document.getElementById('int').innerHTML += Number.POSITIVE_INFINITY;
        }
    </script>
</head>
<body>
    <div id="int">
        <input id="txt1" type="text" style="222px"/><br />
        <input id="txt2" type="text" style="127px"/><br />        
    </div>
</body>
</html>

4.字符串

　　单或双引号（注意配对：双中有单，单中有双，必要时用转义字符“\”,括起来的unicode字符序列。js没有char的单个字符数据类型。

序列	字符表示
\0	NUL字符
\b	退格符
\t	水平制表符
\n	换行
\v	垂直制表符
\f	换页
\r	回车
\"	双引号
\'	单引号
\\	反斜杠
\xXX	2位十六进制数XX指定的Latin-1字符
\uXXXX	4位十六进制数XXXX的unicode字符

5.布尔值

　　true 或者 false "=="

    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var a,b;
            if (isNaN(a/b))
                alert('Error!');
            else
                alert('Yes!')
        }
    </script>

6.函数

　　function 函数名(arg1,arg2,...){

　　　　//code

}

js中函数是种数据类型。当做数据用。可以被保存在对象的属性中。

<head>
    <title></title>
    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        var person = new Object();
        person.name = 'Bugs Bug';

//给对象person添加一个属性值

        person.getName = function () { //给person添加一个getName方法；
            return this.name;
        }
        function go() {
            alert(person.getName());
        }
    </script>
</head>
<body>
    <div id="int">
        <input id="Button1" type="button" value="button" onclick="go()"/>
    </div>
</body>

6.对象

　　已命名的数据的集合。通常被作为对象的属性来使用。名称是对象的属性名。值是对象的属性值。

    <script type="text/javascript">
        var person = new Object();
        person.name = 'Bugs Bug'; //给对象person添加一个属性值
        //或者
        var person = {
            name: 'Bugs Bug'
        }
    </script>

对象还可以作为关联数组使用

        var name = person.name;
        //或者
        var name = person['name'];
    </script>

7.数组

js没有多维数组。但数组中的元素可以为其它数组，不需要有相同的类型。

　　数组参数：

　　　　一个整数->数组长度，

　　　　一个数（非整数）->发生错误。

　　　　非数字或者参数个数大于1-> 作为数组元素依次保存下来。

    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        var array = new Array();
        array[0] = 'Bugs';
        array[1] = ' ';
        array[2] = 'Bug';
        //或者
        var array = ['Bugs', ' ', 'Bug'];
        //亦或
        var array = new Array('Bugs', ' ', 'Bug');
    </script>

8.null 特殊的值“没有值”，通常用于判断目标对象是否有意义。

9.undefined 特殊的值“未声明或声明了未定义的亦或使用并不存在的对象的属性、方法。” 注意undefined==null为true 要比较他们两个使用“===”

二，js的变量

1.类型

　　js无类型语言，可以存放任何类型的值。

<head>
    <title></title>
    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        window.onload = function str() {
            var a1 = 1;
            var a = 'Bugs';
            var b1 = 2;
            var b = ' ';
            var c1 = 3;
            var c = 'Bug';
            var str = a1 + a + b1 + b + c1 + c;
            document.getElementById("int").innerHTML = str;
            //1Bugs2 3Bug
        }
    </script>
</head>
<body>
    <div id="int">
    </div>
</body>

2.声明

            var Bugs_Bug; //如果未初始化默认为undefined
            var Bugs_Bug = 'Bugs Bug';
        }
    </script>

3.作用域
　　全局变量，局部变量

    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
//        var Bugs_Bug = 'Bugs Bug';
        var a = 'Bugs Bug';//全局变量被隐藏
        function str() {

            alert(a); //undefined
            var a = 'Bugs Bug';
            alert(a); //Bugs Bug

            c = 'Bugs Bug';
            var Bugs_Bug;
//            //alert(Bugs_Bug);//undefined 同名时优先级：局部 > 全局
        }
        str();
////////        alert(a); //Error: 'a' is undefined

////        //            str();//隐式声明为全局变量
////        //            alert(c);//Bugs Bug
    </script>
</head>
<body>
    <div id="int">
        <input id="Button1" type="button" value="button" onclick="str()" />
    </div>
</body>

4.基本类型和引用类型
　　基本类型在内存中有固定的大小。引用类型没有固定的大小。基本类型变量储存的是值本身，引用变量储存值的引用（内存地址、指针）。

数字,布尔，是基本类型

    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        function str() {
            var a = 'Bugs';
            var b = a;
            a += " Bug";
            alert(a); //Bugs Bug
            alert(b); //Bugs
        }
    </script>

对象，数组，函数,字符串(长度可变)是引用类型，但是：字符串(长度可变)通常作为基本类型来理解使用

    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        function str() {
            var a =new Object();
            var b = a;//b获得a的引用，a,b指向同一个地址（对象）
            a.name = "Bugs Bug";
            alert(a); //[object object]
            alert(b.name); //Bugs Bug
        }
    </script>

三，表达式运算符

1.表达式：关键字，变量，常量，和运算符的组合，最简单的是一个变量名，或是直接量。

2.运算符 (注：第一个红色扩展未验证是否正确）

　　　　　　更加完全权威的参考：http://technet.microsoft.com/zh-cn/sysinternals/ce57k8d5(en-us,vs.85).aspx

符号	意思	解释	扩展
+	加法	数字：1+1=2	字符：Bugs+' '+Bug=Bugs Bug
-	减法	1-1=0
*	乘法	1*1=1
/	除法	1/1=1
%	求余(取整)	1%1=0
++	递增	++1=2	1++=1
——	递减	——1=0	1——=1
==	相等	1==2 false null==undefined true 'Bugs,Bug'==['Bugs','Bug'] true	引用类型比较地址数字和字符将字符->数字再比较布尔和其它类型先将布尔->数字再比较 true=1（除了null，undefined，0都是1），false=0 对象与其它比较，将对象->为简单类型再比较对象->valueOf()->toString() Date->toString() 两个值类型不同时，也有可能相等
===	等同	null===undefined false	两个值类型不同时，不相等
!=	不等	1!=2 true
!===	不等同	null!===undefined true
>	大于	1>2 f	运算数可以是任意类型，运算限于数字和字符（对象->数字优先 ->字符串次之 return false 否则）数字和字符将字符->数字再比较(若字符串->数字失败会转换为NaN 返回 false)
<	小于	1<2 t
>=	大于等于	1>=2 f
<=	小于等于	1<=2 t
in		第一个运算数是否为第二个运算数的属性名 var a = { 1:'Bugs', 2:'Bug'}; alert(1 in a);//true alert(3 in a);//false	若：第二个运算数为数组，检查第一个运算数是否为数组包含的索引之一 var b = ['Bugs', 'Bug']; alert('Bugs' in a);//false alert(1 in a);//true
instanceof	实例	检查第一个运算数是否为第二个运算数的实例	<script type="text/javascript" src="JS/JScript.js"></script> <script type="text/javascript"> function str() { var a = new Date(); alert(a instanceof Date);//true alert(a instanceof String);//false }</script>
=	a+=1	a=a+1
	a—=1	a=a—1
	a*=1	a=a*1
	a/=1	a=a/1
	a%=1	a=a%1
	<<=	左移赋值	二进制左移补0
	expression1>>=	有符号右移赋值	expression1的符号位被用来填充右移后左边空出的位 (The sign bit of expression1 is used to fill the digits from the left)
	>>>=	无符号右移赋值	二进制右移补0
	&=	按位“与”赋值	二进制，任何时候，只要两个表达式的某位都为 1，则结果中的该位为 1。否则，结果中的该位为 0
	\|=	按位“或”赋值	二进制，任何时候，只要两个表达式中的一个表达式的某位为 1，则结果中的该位为 1。否则，结果中的该位为 0。
	^=	按位“异或”赋值	二进制，当且仅当只有一个表达式的某位为 1 时，结果中的该位才为 1。否则，结果中的该位为 0。
&&	逻辑与
\|\|	逻辑或
!	逻辑非

3.语句

大括号“{}”将多个语句括起来，以“;”结束

4.声明变量

var 一个或多个用“,”隔开，

5. 语句

if(){} ,if(){}...else{},else if(){},switch中有default是可选的。break跳出整个switch(){case a: code;break;default:code;}。

while(){}, do{} while();for(){},

遍历：for(a in b){}对象的每一个属性

<head>
    <title></title>
    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        function str() {
            var person = { name: 'Bugs Bug', sex: 'Man', age: 21, grow: function () { this.age++; } }
            for (var l in person) {
                document.write(l + '=' + person[l] + '</br>');
            }
        }
    </script>
</head>
<body>
    <div id="int">
        <input id="Button1" type="button" value="button" onclick="str()" />
    </div>
</body>

for /in 并不能列举出对象的所有属性，一些对象的属性被标记成了只读的，永久的，不可列举的，for/in语句不能列举出来，虽然用户自定义的属性都可以被列举，但是许多内部属性/方法都是不可列举的。

break；另一种用法，和标签搭配，js允许标示符和“:”标识语句，语法：break 标签名;之间不能换行，

<head>
    <title></title>
    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        function str() {
            var person = { 1: "Bugs", 2: ' ', 3: 'Bug' };
            outloop:
            for (var i in person) {
                innerloop:
                for (var j in person) {
                    if (person[i] == 'Bug')
                        break outloop;
                    if (person[j] == 'Bugs')
                        break innerloop;
                }
            }
            document.writeln(person[j] + person[i]); //BugsBug 
        }
    </script>
</head>
<body>
    <div id="int">
        <input id="Button1" type="button" value="button" onclick="str()" />
    </div>
</body>

continue:跳出当前循环而进入下一次循环，只能用在while，do/while, for，for/in 语句中。和break一样，可以单独使用可以和标签搭配。
语法：continue 标签名;

<head>
    <title></title>
    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        function str() {
            var person = { 1: "Bugs", 2: ' ', 3: 'Bug' };
            outloop:
            for (var i in person) {
                innerloop:
                for (var j in person) {
                    if (person[i] == 'Bug')
                        continue outloop;
                    if (person[j] == 'Bugs')
                        continue innerloop;
                }
            }
            document.writeln(person[j] + person[i]); //BugBug 
        }
    </script>
</head>
<body>
    <div id="int">
        <input id="Button1" type="button" value="button" onclick="str()" />
    </div>
</body>

function ,return 指定当前函数的返回值，并跳出当前函数，也可以不带返回值单独使用，这时返回值为undefined。
throw ：语法：throw 异常信息; 网页出现错误，不再正常运行！

throw new Error('无法定义Bugs Bug');

try{}catch(){}finally{}

finally可选（有，一定执行），若try出现异常会将异常赋值给catch执行catch，否则不执行catch。

<head>
    <title></title>
    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        function checked(age) {
            if (age < 18)
                throw new Error('未成年！');
           return age;
        }
        try {
            var age = checked(17);
        }
        catch (e) {
            document.writeln(e); //Error:未成年！
            document.writeln(e.Message);//undefined
        }
        finally {
            if (typeof age == 'undefined')
                age = 18;
            document.writeln(age);
        }  
    </script>
</head>

空语句。，在某些情况下很有作用。

 <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        var a = new Array(1, 2, 3, 4, 5, 6);
        for (var i = 0; i < a.length; a[i++] = 0);
    </script>

四，js函数

1.定义调用。

function 函数名(arg1，...){

　　//code;

}

var 函数名=function(arg1,...){

　　//code;

}

Function构造函数定义：

var 函数名 = new Function('arg1', 'arg2', '...', '函数体');

调用：函数名(arg1,arg2,...);

<head>
    <title></title>
    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        function go() {
            //var 函数名 = new Function('arg1', 'arg2', '...', '函数体');
            var compare = new Function('x', 'y', 'if(x>y)return 1;else if(x==y)return 0;else return -1;');
            document.writeln(compare(1, 2));//-1
        }
    </script>
</head>
<body>
    <div id="int">
        <input id="Button1" type="button" value="button" onclick="go()"/>
    </div>
</body>

匿名函数的调用。

 <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        alert(function (a, b) {
            return (a + b);
        } (1, 2));
    </script>

实际参数列表：arguments属性的使用。

arguments 对象:http://technet.microsoft.com/zh-cn/magazine/2b36h1wa(VS.90).aspx

　　　　虽然定义函数时有形参列表。但是传入参数十可以不与参数表一致。实际传入的参数会被储存到arguments属性中，他像一个数组

但不是真正的数组，有数组的length属性，arguments[1]为第一个参数，以此类推...

 <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        function add() {
            for (var i = 0, sum = ''; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }
        document.writeln(add('Bugs', ' ', 'Bug')); //Bugs Bug 
        //  sum1=0      document.writeln(add(1, 2, 3, 4)); //10
    </script>

arguments的callee属性(实现递归)：保存当前函数的引用,该属性仅当相关函数正在执行时才可用,callee 属性的初始值是正被执行的 Function 对象。这将允许匿名函数成为递归的.

递归性将十进制转换为二进制

    <script type="text/javascript" src="JS/JScript.js"></script>
    <script type="text/javascript">
        function recursion(x) {
            if (typeof arguments[1] == 'undefined')
                var num = '';
            else
                var num = arguments[1];

            var y = parseInt(x / 2);
            num = x % 2 + num;

            if (y == 1)
                return '1' + num;
            else
                num = arguments.callee(y, num); //返回正被执行的 Function 对象，即指定的 Function 对象的正文(自身)。
            return num;
        }
        document.writeln(recursion(10)); //10->1010
    </script>

js大小写敏感。

注释单行：”//“或”/*多行*/“

js保留字:保留字不能作为变量，函数名，或标签名。

目前使用的保留字
break	do	if	switch	typeof	case
else	in	this	var	catch	false
instanceof	throw	void	continue	finally	new
true	while	default	for	null	try
with	delete	function	return
预留的保留字
abstract	goto	package	extends	interface	volatile
enum	double	synchronized	byte	short
import	implements	class	static	boolean
protected	private	float	long	export
transient	throws	native	final	int
debugger	const	super	char	public