JavaScript学习笔记

简介：

　　JavaScript 被用来改进设计、验证表单、检测浏览器、创建Cookies、网页游戏、页面交互设计等等...

　　是互联网上最流行的脚本语言。JavaScript自身存在几个相对的弊端，即复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发，调试工具。

　　代码位置：Head区、Body区、外部文件引用。（注意html中代码是从上到下，逐句实现，此时JavaScript代码中若使用了前面未出现的定义会出错）

　　注释：// 或 /* */

　　CDATA避免解析html实体: //<![CDATA[

　　　　　　　　　　　　　　　　　代码 ;

　　　　　　　　　　　　　　//]]>

　　调试工具：Firefox的Firebug插件

可以点击行号旁边设置断点，然后单步执行，调试。

变量：

　　JavaScript中的标识符由字母、下划线和$ 符号组成。

不能用以下字符作为变量名：

　关键字： break、 else、 new、 var、 case、 finally、 return、 void、 catch、 for、 switch、 while、 continue、 function、 this、 with、default、 if、 throw、 delete、 in、 try、 do、 instanceof、 typeof。

　ECMA 262规范的保留字：abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public。

浏览器典型的保留字：alert、eval、location、open、array、focus、math、outerHeight、blur、function、name、parent、boolean、history、navigator、parseFloat、date、image、number、regExp、document、isNaN、object、status、escape、length、onLoad、string。

声明变量：

　　var varName1 [,varName2]; //局部变量声明方式

　　varName = varValue; //window对象下的属性，可用window.varName引用

数据类型：

　　简单的数据类型：null、 boolean、number、string、undefined //存储在栈中

　　复杂的数据类型：Object //存储在堆中

　　var varObj = new Object();

　　varObj.m_Age = 12; //给varObj设置一个属性并赋值12。

　　typeof varName //查看变量varName的类型

字符串：

　　eg：var str = "Hello ";

　　　　str = str + "world"; //str的值为"Hello world", 也可以使用 “+=”

转义字符：

　　\b 　　　　　　回退
　　\f 　　　　　　换页
　　\n　　　　　　换行
　　\r 　　　　　　回车符
　　\t 　　　　　　制表符
　　\’ 　　　　　　单引号
　　\” 　　　　　　双引号
　　\\ 　　　　　反斜杠
　　\xNN 　　　 NN是一个十六位进制的数，表示拉丁字符集中的一个字符
　　\uDDDD 　　 DDDD是一个十六进制的数，表示一个Unicode字符

布尔型：

　　true 、 false

　　注：如果省略value参数，或者设置为0、-0、null、""、false、undefined或NaN，则该对象设置为false，否则为true。

　　详细：http://www.w3school.com.cn/js/jsref_obj_boolean.asp

数值型：

　　可以使用isNaN(varName),判断varName是否是数字。

　　详细：http://www.w3school.com.cn/js/jsref_obj_number.asp

null与undefined：

　　undefined == null; //结果为true，不判断数据类型

　　undefined === null; //结果为false，全等判断数据类型；只有在无需类型转换运算数就相等的情况下，才返回 true。

不同数据类型转换：

　　详细：http://www.w3school.com.cn/js/jsref_obj_global.asp

内置对象：Array、Boolean、Date、Math、Number、String、RegExp、Functions、Events

　　查看帮助文件可以看到有许多自带的方法函数。

Array:

　　创建数组：

<script type="text/javascript">
var mycars = new Array();
mycars[0] = "Hello";
mycars[1] = "World";

for (i=0;i<mycars.length;i++)
{
document.write(mycars[i] + "<br />")
}
</script>

　另一种不用0,1...序号：

View Code

<script type="text/javascript">

var mycars = new Array()
mycars["Name"] = "Adom";
mycars["age"] = 25;

document.write(mycars["Name"] + "<br />")
document.write(mycars["age"] + "<br />")

</script>

　　常用方法：push()、pop() 、slice()和属性length。

　　多维数组：

    var arr = [ "adam", "yukee", "tom", [ "@", "$", "&",[ "163.com", "yahoo.com", "126.com" ] ] ];

　　通过firebug调试看到多维数组中变量的序号：

eg：arr[0] 的值为“adam”

arr[3][0] 的值为：“@”

　　详细：http://www.w3school.com.cn/js/js_obj_array.asp

函数：

　　创建方式（3种）：

function  functionName(arg0, arg1, ...) {
statements
}

var functionName = new  Function (arg1, arg2, ..., argN, function_body );

functionName = function (arg0, arg1, ...) {
  statements
}

声明并直接调用：

(function(arg){
            document.write("匿名函数 - " + arg);
            document.write("<br/>");
        })("function");

函数定义后可以在任意地方调用（定义前，定义后）...//JavaScript 执行是一块一块解释和执行的代码。

<script type="text/javascript">
function fun()
{
document.write("Hello World!");
}
fun();
function fun()
{
document.write("Hello World!");
}
fun();
</script>
//结果为：Hello World!Hello World!

ECMAScript arguments 对象：http://www.w3school.com.cn/js/pro_js_functions_arguments_object.asp

　　在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。

带参函数：

<script type="text/javascript">
function myfunction(txt)
{
      alert(txt)
}

myfunction('您好！');
</script>

带参并有返回值：

<script type="text/javascript">
function product(a,b)
{
return a*b
}
</script>

<script type="text/javascript">
//printf 30
document.write(product(6,5))
</script>

JavaScript 变量的生存期：

　　当您在函数内声明了一个变量后，就只能在该函数中访问该变量。当退出该函数后，这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量，这是因为只有声明过变量的函数能够识别其中的每个变量。如果您在函数之外声明了一个变量，则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始，在页面关闭时结束。

闭包：

var iBaseNum = 10;

function addNum(iNum1, iNum2) {
  function doAdd() {
    return iNum1 + iNum2 + iBaseNum;
  }
  return doAdd();
}

　　这里，函数 addNum() 包括函数 doAdd() （闭包）。内部函数是一个闭包，因为它将获取外部函数的参数 iNum1 和 iNum2 以及全局变量 iBaseNum 的值。 addNum() 的最后一步调用了 doAdd()，把两个参数和全局变量相加，并返回它们的和。这里要掌握的重要概念是，doAdd() 函数根本不接受参数，它使用的值是从执行环境中获取的。

　　函数详细：http://www.w3school.com.cn/js/js_functions.asp

JavaScript——面向对象语言的特性

　　JavaScript编程语言中没有类的概念，它是一门基于原型(prototype)的面向对象编程的语言，JavaScript编程语言中的一切都是对象。

　　在JavaScript语言中只有object 和function 两种东西有对象化的能力。

　　JSON为创建对象提供了简单的方法,JSON(JavaScript Object Notation),中文称JavaScript对象表示法。

创建对象：

　　var obj = { }; //创建一个没有任何属性的对象

　　var obj = new Object (); //与上一语句一样

//创建一个对象并设置属性及初始值
var person = {
    name: "Angel", 
    age: 18, 
    married: false,
};

//创建一个对象并设置属性和方法
var speaker = {
    text: "Hello World", 
    say: function(){
        alert(this.text);
    }
};

//创建一个更复杂的对象,嵌套其他对象和对象数组等
var company = {
    name: "Microsoft",
    product: "softwares",
    chairman: {name: "Bill Gates", age: 53, Married: true},
    employees: [{name: "Angel", age: 26, Married: false},                   
{name: "Hanson", age: 32, Marred: true}],
    readme: function() {document.write(this.name + " product 
" + this.product);}
};

　除了上面的定义方法，还可以直接定义一个空的对象，然后将属性和方法赋给这个对象。

this关键字：

　　详细参考http://www.w3school.com.cn/js/pro_js_object_scope.asp

　　直接使用this关键字时，this表示的是根对象Window。

　　每次使用this关键字时，this将表示当前所在的对象。

　　定义类时，加上this关键字的属性和函数是公有的。

View Code

<script type="text/javascript">
    //<![CDATA[
    
    //声明一个WhoAmI函数
    function WhoAmI(){
        document.write("<h1>I'm " + this.name + " of " + typeof(this) + ".</h1>");
    }
    //只是this是根对象window,window对象声明一个成员属性name
    //输出:I'm of object.
    WhoAmI();

    var Adam = { 
        name: "Adam Yu",
        WhoAmI: WhoAmI      //将WhoAmI函数作为Adam对象的方法
    }
    //this就是Adam
    //输出:I'm Adam Yu of object.
    Adam.WhoAmI();

    var Yukee = { name: "Yukee Liu"}
    Yukee.WhoAmI = WhoAmI;      //将WhoAmI函数作为Yukee对象的方法
    //this就是Yukee
    //输出:I'm Yukee Liu of object.
    Yukee.WhoAmI();

    WhoAmI.call(Adam);      //直接将Adam对象作为this,调用WhoAmI函数
                            //输出:I'm Adam Yu of object.

    WhoAmI.call(Yukee);      //直接将Yukee对象作为this,调用WhoAmI函数
                             //输出:I'm Yukee Liu of object.

    Yukee.WhoAmI.call(Adam);    //将Adam对象作为this,调用Yukee对象的成员方法
                                //输出:I'm Adam Yu of object.

    Yukee.WhoAmI.call(Yukee);    //将Adam对象作为this,调用Adam对象的成员方法
                                 //输出:I'm Yukee Liu of object.

    WhoAmI.name = "WhoAmI";
    WhoAmI.WhoAmI = WhoAmI;     //将WhoAmI函数设置成自身的方法
    WhoAmI.WhoAmI();            //输出:I'm WhoAmI of object.

    ({
        name: "Hello", 
        WhoAmI: WhoAmI
    }).WhoAmI();                //输出:I'm Hello of object.


    //]]>
    </script>

所有对象都由Object 这个对象继承而来，Object 对象中的所有属性和方法都会出现在其他对象中。

DOM文档对象模型

　　DOM 是一个表达XML 文档的标准( 由W3C 制定) ，它未必是最快捷效率最高的方式，但是应用却是最广泛的，大部分开发语言比如(PHP，Perl，Ruby，Python 和JavaScript) 都提供了相应的DOM实现，HTML文档从浏览器角度来说就是XML 文档。

　　详细参考：http://www.w3school.com.cn/htmldom/index.asp

访问文档：

View Code

//获取html元素节点    
document.write("<h1>" + document.documentElement + "</h1>");    

//获取head元素节点    
document.write("<h1>" + document.getElementsByTagName('head')[0] + "</h1>");    
    
//获取body元素节点    
//document.write("<h1>" + document.getElementsByTagName('body')[0] + "</h1>");
 document.write("<h1>" + document.body + "</h1>");

获取元素节点：

View Code

    //获取h1元素节点
    var h1 = document.getElementsByTagName('h1')[0];
    //获取h1元素节点下面的第一个子节点
    document.write("<h1>" + h1.firstChild.nodeName + "</h1>");
    //获取h1元素节点下面的最后一个子节点
    document.write("<h1>" + h1.lastChild.nodeValue + "</h1>");
    //获取strong元素节点与文本节点的父级元素节点
    document.write("<h1>" + h1.firstChild.parentNode.nodeName + "</h1>");
    document.write("<h1>" + h1.lastChild.parentNode.nodeName + "</h1>");
    document.write("<h1>" + h1.childNodes[0].nodeValue + "</h1>");    
    //获取strong元素标签的第一个子节点与最后一个子节点
    document.write("<h1>" + h1.firstChild.firstChild.nodeValue + "</h1>");
    document.write("<h1>" + h1.firstChild.lastChild.nodeValue + "</h1>");

    //获取body元素节点下面的所有子节点
    //var nodes = document.body.childNodes;

详细可查阅：http://www.w3school.com.cn/js/index.asp