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="width:222px"/><br /> <input id="txt2" type="text" style="width: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 | |
