javascript学习总结

 <script type="text/javascript">
/** 定义数组 */
/*
var a1 = new Array(1,2,3);
var a2 = [1,2,3];
var a3 = new Array(3);//当只有一位数字时，则定义的为数组的长度
a3[3] = "js的数组是没有定长限制的";
alert(a3[3]); //从这里可以看出js的数组是没有定长的
*/

/** null 与 undefined的关系 */
/*
alert(null == undefined);//返回true
alert(null === undefined);//返回false
*/

/** javascript 数据类型 */
/*
alert(typeof null); //object
alert(typeof 999);  //number
alert(typeof "字符串");    //string
alert(typeof function(){});//function
alert(typeof true);//boolean
alert(typeof new String('字符串'));//object
*/

/** 声明与附值结果 */
/*
var un ;
alert(un);//声明但没附值则为undefined而不是null 
alert(un2);//出错
un3 = "success"; //未声明但可以附值，javascript会先将un3声明为全局,再进行附值
*/

/** javascript 解析器运行前做的事 */
/*
javascript 解析器运行前会先创建一个全局对象，这个对象的属性就是javascript的全局变量，
在程序中声明一个全局变量实际上就是声明这个对象的一个属性。
*/

/** in 运算符 */
/*
in 运算符要求左边为一个字符串或可以转换为字符串的值，
右边为一个对象或数组。如果左边的值是右边对象的属性名，则为true;
*/

/** instanceof 运算符 */
/*
左边为对象，右边为对象类名，如果返回true;
*/

/** delete 运算符 */
/*
删除对象属性，数组元素或变量，如果不能删除则返回false;
1:用var 声明的变量不能delete
2:如果delete不存在的变量或不是属性、数组元素或变量时，返回true
*/

/** void 运算符 */
/*
返回undefined值
*/

/** 把对象的属性名存入数组 */
/*
var obj = {x : 1,y : 2}
var a = new Array();
var i = 0;
for(a[i++] in obj);
for (var att in a)
	alert(a[att]);//输出'x','y'
*/

/** 每个函数中都有apply与call方法　*/

/** 为String 类添加一个新的方法　*/
/*
String.prototype.format = function(){
	alert(this);
}

var m = "hahah";
m.format();
*/

/** 类属性与类方法　*/
/*
function Area(h,w){
	this.height = h;
	this.width = w;
}
alert(Area.height);//undefined
Area.MAX = 2000;
alert(Area.MAX); //2000
*/

/** 关联数组　*/
/* 
使用数组下标为字符串形式访问对象属性
如：a['xxx']
*/

/** constructor 属性　*/

/** 数组的length属性是可写的　*/
/*
如果改变length的值，当length小于原来的值时，
则数组会被截断，如果大于原来的值时，数组将增加新的元素到末尾。
*/

/** 通过delete删除数组属性时，数组的length并不会减少 */

/** 一段代码中的定义会被解析器先执行　*/


/** eval 函数可以把一个json字符串转化为一个javascript对象 */

/** javascript 面向对象思想 */
/*
1:一个json代表一个对象
2:函数也是一个对象
*/
/*
以下是一个完整的面向对象的例子

 function Person(name)   //基类构造函数 
      { 
         this.name = name; 
     }; 

     Person.prototype.SayHello = function()  //给基类构造函数的prototype添加方法 
      { 
        alert("Hello, I'm " + this.name); 
      }; 

    function Employee(name, salary) //子类构造函数 
     { 
         Person.call(this, name);    //调用基类构造函数 
         this.salary = salary; 
     }; 

     Employee.prototype = new Person();  //建一个基类的对象作为子类原型的原型，这里很有意思 

     Employee.prototype.ShowMeTheMoney = function()  //给子类添构造函数的 prototype添加方法 
    { 
        alert(this.name + " $" + this.salary); 
     }; 

     var BillGates = new Person("Bill Gates");   //创建基类 Person 的BillGates 对象 
     var SteveJobs = new Employee("Steve Jobs", 1234);   //创建子类 Employee的 SteveJobs对象 

     BillGates.SayHello();       //通过对象直接调用到prototype的方法 
     SteveJobs.SayHello();       //通过子类对象直接调用基类 prototype的方法，关注！ 
     SteveJobs.ShowMeTheMoney(); //通过子类对象直接调用子类 prototype的方法 

     alert(BillGates.SayHello == SteveJobs.SayHello); //显示：true，表明 prototype的方法是共享的 

*/
/** "甘露模型" */
/*
  //语法甘露： 
    var object =    //定义小写的 object 基本类，用于实现最基础的方法等 
    { 
        isA: function(aType)   //一个判断类与类之间以及对象与类之间关系的基础方法 
        { 
            var self = this; 
            while(self) 
            { 
                if (self == aType) 
                  return true; 
                self = self.Type; 
            }; 
            return false; 
        } 
    };  

    function Class(aBaseClass, aClassDefine)    //创建类的函数，用于声明类及继承关系 
    { 
        function class_()   //创建类的临时函数壳 
        { 
            this.Type = aBaseClass;    //我们给每一个类约定一个 Type属性，引用其继承的类 
            for(var member in aClassDefine) {
                this[member] = aClassDefine[member]; //复制类的全部定义到当前创建的类 
			}				
        }; 
        class_.prototype = aBaseClass; 
        return new class_(); 
    }; 

    function New(aClass, aParams)   //创建对象的函数，用于任意类的对象创建 
    { 
        function new_()     //创建对象的临时函数壳 
        { 
            this.Type = aClass;    //我们也给每一个对象约定一个 Type属性，据此可以访问到对象所属的类 
            if (aClass.Create) 
              aClass.Create.apply(this, aParams);   //我们约定所有类的构造函数都叫 Create，这和 DELPHI 比较相似 
        }; 
        new_.prototype = aClass; 
        return new new_(); 
    }; 

    //语法甘露的应用效果：     
    var Person = Class(object,      //派生至 object 基本类 
    { 
		sex : '0',
        Create: function(name, age) 
        { 
            this.name = name; 
            this.age = age; 
        }, 
        SayHello: function() 
        { 
            alert("Hello, I'm " + this.name + ", " + this.age + " years old."); 
        } 
    }); 

    var Employee = Class(Person,    //派生至 Person 类，是不是和一般对象语言很相似？ 
    { 
        Create: function(name, age, salary) 
        { 
            Person.Create.call(this, name, age);  //调用基类的构造函数 
            this.salary = salary; 
        },  

        ShowMeTheMoney: function() 
        { 
            alert(this.name + " $" + this.salary); 
        } 
    }); 

    var BillGates = New(Person, ["Bill Gates", 53]); 

    var SteveJobs = New(Employee, ["Steve Jobs", 53, 1234]); 
    BillGates.SayHello(); 
	alert(BillGates.name);
    SteveJobs.SayHello(); 
    SteveJobs.ShowMeTheMoney(); 

    var LittleBill = New(BillGates.Type, ["Little Bill", 6]);   //根据 BillGate的类型创建 LittleBill 
    LittleBill.SayHello(); 

    alert(BillGates.isA(Person));       //true 
    alert(BillGates.isA(Employee));     //false 
    alert(SteveJobs.isA(Person));       //true 
    alert(Person.isA(Employee));        //false 
    alert(Employee.isA(Person));        //true 
*/

/****************************** | WEB 浏览器环境 | *******************************/

/** Window全局对象　*/
/*
引用Window全局对象的两个属性
 1: window
 2: self

::window 包含了一个frames[]数组，代表当前窗口的框架。
::parent属性，每个iframe都有parent属性表示父窗口或框架
::如果不是框架而且而是一个顶级窗口，则parent指向自己self
::对于顶级窗口的直接子窗口，top与parent相同

操作：
1:window.open()打开窗口,方法有四个参数
　1>URL(string),窗口中的url
  2>target(string),新打开窗口的名字，如果是"_self"则在当前窗口打开
  3>参数列表(string),指定窗口大小与外观的参数列表，下面是打开一个只有状态栏的窗口
	window.open("about:blank","yourtarget","height=400,width=500,status=yes,resizable=yes");
	注意：当指定第三个参数时，所有没有明确的定义的属性都会被忽略。
　4>(boolean)这个参数只有在target指定的是一个已经存在的窗口时才有效，决定创建历史记录还是不创建。
@这个方法将返回这个新打开的window对象供我们引用;
@新打开的window可通过opener引用打开它的window;
@如果窗口是用户打开的，而不是通过javascript打开的，则它的opener属性为null;

2:window.close()关闭窗口
  1>可通过window.closed属性判断窗口是否已经关闭
*/
/** document 对象　*/
document对象的方法：close(),open(),write(),writein();
document对象属性：

每个document都有一个forms[] 数组


/** Form 对象　*/
每个form对象都有一个elements[]数组，包含出现在表单中的各种元素的数组。

：：点击submit按钮才会触发onsubmit事件，调用Form.submit()则不会触发；
：：表单元素可通过this.form.xx访问其兄弟元素；

/** 将javascript设为文件中唯一使用的脚本语言　*/
<meta http-equiv="Content-Script-Type" content-text="javascript" />
/** select 元素　*/
>:type = 'multiple'指定为多选
>:selectedIndex 属性为选中项的索引
>:text属性改变显示的文本
>:value属性改变提交的值
>: 删除一个option -- document.address.country.options[10] = null;
>: 添加一个option --
// Create a new Option object

var zaire = new Option("Zaire",  // The text property

                       "zaire",  // The value property

                       false,    // The defaultSelected property

                       false);   // The selected property


// Display it in a Select element by appending it to the options array:

var countries = document.address.country;  // Get the Select object

countries.options[countries.options.length] = zaire;


/** Navigator 对象　*/
包含web浏览器的总体信息，有５个重要的特性
１：appName　浏览器名
２：appVersion 版本
３：userAgent　USER-AGENT http 中的字符串
４：appCodeName 代码名
５：platform　平台

/** Screen 对象　获取客户端显示器信息*/

/** Location对象　当前文档的URL*/

/** History 对象　*/

/** Image对象的事件与属性　*/
1:onload
2:onerror 加载出错
3:onabort 中断，如点击浏览器stop按钮

4:complete 属性，是否加载完图像

/** 链接--网络爬虫程序*/

/** cookie 对象　*/
1:每个cookie都有四个可选的性质，分别控件生存周期，可见性，安全性；
　a>:expires  cookie的生命周期，默认情况下，当浏览器退出时，这些值就消失啦
  b>:path 指定与cookie关联在一起的网页
  c>:domain 默认情况下只有位于同一web服务器的网页才能访问，domain可以改变这一点
  d>:secure(boolean) 指定在网络上如何传输cookie

2:cookie的限制性：
　最多300个cookie;每个服务器最多20个cookie;cookie的容量不超过4K;


/** 一个加载xml与创建table的Demo */
/*
<head><title>Employee Data</title>

<script>

// This function loads the XML document from the specified URL and, when

// it is fully loaded, passes that document and the URL to the specified

// handler function. This function works with any XML document.

function loadXML(url, handler) {

    // Use the standard DOM Level 2 technique, if it is supported

    if (document.implementation && document.implementation.createDocument) {

        // Create a new Document object

        var xmldoc = document.implementation.createDocument("", "", null);

        // Specify what should happen when it finishes loading

        xmldoc.onload = function(  ) { handler(xmldoc, url); }

        // And tell it what URL to load

        xmldoc.load(url);

    }

    // Otherwise, use Microsoft's proprietary API for Internet Explorer

    else if (window.ActiveXObject) { 

        var xmldoc = new ActiveXObject("Microsoft.XMLDOM");   // Create doc

        xmldoc.onreadystatechange = function(  ) {              // Specify onload

            if (xmldoc.readyState == 4) handler(xmldoc, url);

        }

        xmldoc.load(url);                                     // Start loading!

    }

}


// This function builds an HTML table of employees from data it reads from

// the XML document it is passed

function makeTable(xmldoc, url) {

    // Create a <table> object and insert it into the document

    var table = document.createElement("table");

    table.setAttribute("border", "1");

    document.body.appendChild(table);


    // Use convenience methods of HTMLTableElement and related interfaces

    // to define a table caption and a header that gives a name to each column

    var caption = "Employee Data from " + url;

    table.createCaption(  ).appendChild(document.createTextNode(caption));

    var header = table.createTHead(  );

    var headerrow = header.insertRow(0);

    headerrow.insertCell(0).appendChild(document.createTextNode("Name"));

    headerrow.insertCell(1).appendChild(document.createTextNode("Job"));

    headerrow.insertCell(2).appendChild(document.createTextNode("Salary"));



    // Now find all <employee> elements in our xmldoc document

    var employees = xmldoc.getElementsByTagName("employee");


    // Loop through these <employee> elements

    for(var i = 0; i < employees.length; i++) {

        // For each employee, get name, job, and salary data using standard DOM

        // methods. The name comes from an attribute. The other values are

        // in Text nodes within <job> and <salary> tags.

        var e = employees[i];

        var name = e.getAttribute("name");

        var job = e.getElementsByTagName("job")[0].firstChild.data;

        var salary = e.getElementsByTagName("salary")[0].firstChild.data;


        // Now that we have the employee data, use methods of the table to

        // create a new row and then use the methods of the row to create

        // new cells containing the data as Text nodes

        var row = table.insertRow(i+1);

        row.insertCell(0).appendChild(document.createTextNode(name));

        row.insertCell(1).appendChild(document.createTextNode(job));

        row.insertCell(2).appendChild(document.createTextNode(salary));

    }

}

</script>

</head>

<!-- 

The body of the document contains no static text; everything is dynamically

generated by the makeTable(  ) function. The onload event handler starts

things off by calling loadXML(  ) to load the XML data file. Note the use of

location.search to encode the name of the XML file in the query string. Load

this HTML file with a URL like this: DisplayEmployeeData.html?data.xml.

-->

<body onload="loadXML(location.search.substring(1), makeTable)">

</body>

*/


/** IE4及以后版本的专有api */
注意：IE专有的api中没有Text节点。
1:children[]数组,所有的Document及HTMLElement对象都有这一数组，与标准的childNodes[]数组不同的是，文本在children[]
  数组中是不以节点的形式出现的，要访问文本节点需通过innerText属性。
2:all[]数组,表示文档中的所有元素或元素中包含的所有元素。
  document.all["xxx"]或document.all.xxx相当于标准的document.getElementById("xxx");
  document.all.tags("DIV")可获取div块的一个数组;


/** CSS 中visibility与display的区别 */
1:前者不显示时保留占位，后者不保留
2:前者只有visible与hidden两属性，而后者则可以指定显示的类型如：block，none为不显示 

/** CSS clip 属性 */
设置元素显示的部分

/** CSS中的命名规范 */
font-family = fontFamily //下划线
float = cssFloat         //关键字 + css前缀
class = className        //关键字（特殊）


/** 两完全不同的this引用 */
button.onclick = o.f;				//f函数中的this指向botton
button.onclick = function(){o.f};	//f函数中的this指向o
</script>