<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>
