<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
<title>JS Study</title>
<meta charset="utf-8">
<style>
.userData {behavior:url(#default#userdata);}
</style>
<script type="text/javascript">
//组合使用构造函数模式和原型模式
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.friends=["Shelby","Court"];
}
Person.prototype={
constructor:Person,
sayName:function(){
alert(this.name);
}
}
var person1=new Person("test",20,"software");
var person2=new Person("test2",22,"software2");
person1.friends.push("Van");
alert(person1.friends);
alert(person2.friends);
alert(person1.friends===person2.friends);//false
alert(person1.sayName===person2.sayName);//true
/*
//原型对象问题
function Person(){
}
Person.prototype={
constructor:Person,
name:"test",
age:20,
job:"IT",
friends:["Shelby","Court"],
sayName:function(){
alert(this.name);
}
};
var person1=new Person();
var person2=new Person();
person1.friends.push("Van");
alert(person1.friends);//Shelby,Court,Van
alert(person2.friends);//Shelby,Court,Van
alert(person1.friends===person2.friends);//true
*/
/*
//构造函数模式
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
alert(this.name);
};
}
var person1=new Person("test",20,"IT");
person1.sayName();
*/
/*
//Math对象
var max=Math.max(3,54,32,16);
alert(max);
var min=Math.min(3,54,32,16);
alert(min);
//Math舍入方法
//ceil()向上舍入
//floor()向下舍入
//round()四舍五入
alert(Math.ceil(25.9));//26
alert(Math.floor(25.5));//25
alert(Math.round(25.6));//26
*/
/*
//Global全局对象
//eval()方法
eval("alert('hi')");
eval("function sayHi(){alert('hi')}");
sayHi();
*/
/*
//编码
var uri="http://www.english hello.com";
//编码后除了空格之外的其他字符都原封不动,只有空格被替换成了%20 http://www.english%20hello.com
alert(encodeURI(uri));
//对所有非字母数字编码
alert(encodeURIComponent(uri));//http%3A%2F%2Fwww.english%20hello.com
//解码
var uri2="http%3A%2F%2Fwww.english%20hello.com";
alert(decodeURI(uri));
alert(decodeURIComponent(uri));
*/
/*
var text="cat, bat, sat, fat";
var pos=text.search(/at/);
alert(pos);//1
*/
/*
//String中的slice()、substr()和substring()方法
var stringValue="hello world";
alert(stringValue.slice(3));//lo world
alert(stringValue.slice(3,7));//lo w
alert(stringValue.substring(3,7));//lo w
alert(stringValue.substr(3,7));//lo worl
*/
/*
//call()、apply()方法最强大的地方是能够扩充函数赖以运行的作用域
window.color="red";
var o={color:"blue"};
function sayColor(){
alert(this.color);
}
sayColor();//red
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue
*/
/*
//call()方法
function sum(num1,num2){
return num1+num2;
}
function callSum(num1,num2){
return sum.call(this,num1,num2);
}
alert(callSum(10,10));
*/
/*
//apply方法
function sum(num1,num2){
return num1+num2;
}
function callSum1(num1,num2){
return sum.apply(this,arguments);//传入arguments对象
}
function callSum2(num1,num2){
return sum.apply(this,[num1,num2]);//传入数组
}
alert(callSum1(10,10));//20
alert(callSum2(10,10));//20
*/
/*
//compare排序
function compare(value1,value2){
if(value1<value2){
//return 1;
return -1;
}else if(value1>value2){
//return -1;
return 1;
}else{
return 0;
}
}
var values=[0,5,2,7,10];
values.sort(compare);
alert(values);
*/
/*
//重排序方法
var values=[1,2,3,4,5];
values.reverse();
alert(values);//5,4,3,2,1
var values2 = [0,5,2,7,3];
values2.sort();
alert(values2);//0,2,3,5,7
*/
/*
//数组(队列方法)
var colors = new Array();
var count=colors.unshift("red","green");//推入两项
count=colors.unshift("black");
var item=colors.pop();
alert(item);//green
alert(colors.length);
*/
/*
//数组(队列方法)
var colors = new Array();//创建一个数组
var count=colors.push("red","green");//推入两项
alert(count);
count=colors.push("black");//推入另一项
alert(count);
var item=colors.pop();//取得最后一项
alert(item);
var item2=colors.shift();//取得第一项
alert(item2);
*/
/*
//数组
var colors=["red","blue","green"];
colors.length=4;
colors[3]="yellow";
//alert(colors[3]);
//alert(colors.toString());
//alert(colors.valueOf());
//alert(colors);
alert(colors.join("||"));
*/
/*
//定义对象(方法一)
var person={
"name":"test",
"age":28
};
//定义对象(方法二)
var person={};
person.name="test";
person.age=28;
*/
/*
//模块模式(闭包)
function BaseComponent(){
}
function OtherComponent(){
}
var application=function(){
//私有变量和函数
var components=new Array();
//初始化
components.push(new BaseComponent());
//公共
return {
getComponentCount:function(){
return components.length;
},
registerComponent:function(component){
if(typeof component == "object"){
components.push(component);
}
}
};
}();
application.registerComponent(new OtherComponent());
alert(application.getComponentCount());
*/
/*
//闭包错误定义
function(){
//这里是块级作用域
}();//出错
//闭包正确定义
(function(){
//这里是块级作用域,里面的变量用完就销毁了
})();
*/
/*
//闭包
function createFunctions(){
var result = new Array();
for(var i=0;i<10;i++){
result[i] = function(num){
return function(){
return num+num2;
};
}(i);//定义并立即调用了一个匿名函数
}
return result;
}
var funcs=createFunctions();
//输出数组
for(var i=0;i<funcs.length;i++){
document.write(funcs[i]()+"<br/>");
}
*/
/*
//UserData文本框标记的应用(只支持window+IE,其他的不支持)
function fnSaveInput(){
var oPersist=oPersistForm.oPersistInput;
oPersist.setAttribute("sPersist",oPersist.value);//将oPersist.value存储为sPersist属性中
alert(0);
oPersist.save("oXMLBranch");//存储在名为oXMLBranch的UserData存储区
alert(1);
}
function fnLoadInput(){
var oPersist=oPersistForm.oPersistInput;
oPersist.load("oXMLBranch");//载入在名为oXMLBranch的UserData存储区
oPersist.value=oPersist.getAttribute("sPersist");//将oPersist属性赋值给oPersist.value
}
*/
/*
//私有域
function dwn(s){
document.write(s+"<br/>");
}
var a,b;
(function(){
//(function(){...})();的写法利用闭包构成一个私有域
showAB=function(){
dwn(a);
dwn(b);
}
var a=10;
var b=20;
})();
a=-10;
b=-20;//外部改写a,b
dwn(a);
dwn(b);
showAB();//不会破坏showAB()得到的内部的a,b的值
*/
/*
//闭包和面向对象
function dwn(s){
document.write(s+"<br/>");
}
//定义一个Foo类型
function Foo(a){
function _pc(){//私有函数
return a;
}
//公有的函数,通过它产生的闭包可以访问对象内部的私有方法_pc()
this.bar=function(){
dwn("foo "+_pc()+"!");
}
}
var obj=new Foo("bar");
obj.bar();
*/
/*
//闭包的封闭性
function dwn(s){
document.write(s+"<br/>");
}
(function(){
//封闭的私有域
var innerX = 10,innerY = 20;
//开放的公共域
outerObj = {x:innerX,y:innerY};
})();
try{
dwn(innerX);//内部数据无法访问
}catch(ex){
dwn("内部数据无法访问");
}
dwn(outerObj.x);//通过外部接口访问
*/
/*
//装箱和拆箱
function dwn(s){
document.write(s+"<br/>");
}
//Number的装箱
Number.prototype.foo=function(){
dwn(this instanceof Number);//true
dwn(typeof(this));//object
}
//定义一个基本类型Number的对象
var num=10;
//num.foo()执行时自动装箱为Number对象
num.foo();
//Number的拆箱
//定义一个包装类型Number的对象
var objNum = new Number(10);
//调用valueOf可以得到拆箱后的数值
dwn(objNum.valueOf() instanceof Number);//false
dwn(typeof(objNum.valueOf()));//number
//String的装箱
String.prototype.foo=function(){
dwn(this instanceof String);//true
dwn(typeof(this));//object
}
//定义一个基本字符串变量str
var str = "www.51js.com";
//str.foo()执行自动装箱为String对象
str.foo();
//String的拆箱
//定义一个包装类型String的对象
var objStr = new String("abc");
//调用toString()可以得到拆箱后的字符串
dwn(objStr.toString() instanceof String);//false
dwn(typeof(objStr.toString()));//string
*/
/*
//值和引用
function dwn(s){
document.write(s+"<br/>");
}
//va是数值类型,vb是布尔类型
var va=10,vb=true;
//ra是数组,rb是对象
var ra=[1,2,3],rb={x:1,y:2};
//参数为值类型的函数例子
function ValueType(x,y){
x++;
y=false;
dwn(x);
dwn(y);
}
//参数为引用类型的函数例子
function ReferTypes(x,y){
x.push(4);
delete y.x;
dwn(x);
dwn(y.x);
}
ValueType(va,vb);
dwn(va);
dwn(vb);
ReferTypes(ra,rb);
dwn(ra);
dwn(rb.x);
//运行结果:
//11
//false
//10
//true
//1,2,3,4
//undefined
//1,2,3,4
//undefined
*/
/*
//多态
function dwn(s){
document.write(s+"<br/>");
}
//定义一个Animal类型
function Animal(){
this.bite = function(){
dwn("animal bite!");
}
}
//定义一个Cat类型,继承Animal类型
function Cat(){
this.bite = function(){
dwn("Cat bite");
}
}
Cat.prototype = new Animal();
//定义一个Dog类型,继承Animal类型
function Dog(){
this.bite = function(){
dwn("dog bit!");
}
}
Dog.prototype = new Animal();
//定义一个AnimalBite多态方法
function AnimalBite(animal){
if(animal instanceof Animal){
animal.bite();
}
}
//构造一个Cat对象
var cat = new Cat();
//构造一个Dog对象
var dog = new Dog();
//Cat和Dog都是Animal,AnimalBite是一个多态函数
AnimalBite(cat);
AnimalBite(dog);
*/
/*
//实现接口
IPoint = {x:undefined,y:undefined}
var Point = {}
Point.prototype = new IPoint();
var p = new Point();
for(var each in p){
alert(each);//包含有属性x和y,因为Point实现了IPoint接口
}
*/
/*
//多重继承
Function.prototype.extends = function(obj){
for(var each in obj){
this.prototype[each] = obj[each];
}
}
function Transportation(){
}
function Motorcar(){
}
//Motorcar继承Transportation
Motorcar.extends(new Transportation());
function Ship(){
}
//Ship继承Transportation
Ship.extends(new Transportation());
function TwoRoosts(){
}
TwoRoosts.extends(new Motorcar());
TwoRoosts.extends(new Ship());//TwoRoosts同时继承Motorcar和Ship
*/
/*
//混合继承法
function Point2D(x,y){
this.x=x;
this.y=y;
}
function ColorPoint2D(x,y,c){
Point2d.call(this,x,y);//这里是构造继承,调用了父类的构造函数
this.color=c;
}
//这里用了原型继承,让ColorPoint2D以Point2D对象为原型
ColorPoint2D.prototype = new Point2D();
*/
/*
//实例继承法
function dwn(s){
document.write(s+"<br/>");
}
function MyDate(){
var instance=new Date();//instance是一个新创建的日期对象
instance.printDate = function(){
document.write("<p>"+instance.toLocaleString()+"</p>");
}//对instance扩展printDate()方法
return instance;//将instance作为构造函数的返回值返回
}
var md = new MyDate();
dwn(md.toGMTString());
md.printDate();
*/
/*
//原型继承法
function dwn(s){
document.write(s+"<br/>");
}
//定义一个Point类型
function Point(dimension){
this.dimension = dimension;
}
//定义一个Point2D类型,继承Point类型
function Point2D(x,y){
this.x=x;
this.y=y;
}
Point2D.prototype.dimension=function(){
return Math.sqrt(this.x*this.x+this.y*this.y);
}
Point2D.prototype=new Point(2);//Point2D继承Point
//定义一个Point3D类型,也继承Point类型
function Point3D(x,y,z){
this.x=x;
this.y=y;
this.z=z;
}
Point3D.prototype=new Point(3);//Point3D也继承了Point
//构造一个Point2D对象
var p1=new Point2D(0,0);
var p2=new Point3D(0,1,2);
dwn(p1.dimension);
dwn(p2.dimension);
dwn(p1 instanceof Point2D);//p1是一个Point2D
dwn(p1 instanceof Point);//p1也是一个Point
dwn(p2 instanceof Point);//p2也是一个Point
*/
/*
//构造继承法
function dwn(s){
document.write(s+"<br/>");
}
//定义一个Collection类型
function Collection(size){
this.size=function(){return size};//公有方法,可以被继承
}
Collection.prototype.isEmpty=function(){//静态方法,不能被继承
return this.size()==0;
}
//定义一个ArrayList类型,它继承Collection类型
function ArrayList(){
var m_elements = [];
m_elements=Array.apply(m_elements,arguments);
//ArrayList类型继承Collection
this.base=Collection;
this.base.call(this,m_elements.length);
this.add=function(){
return m_elements.push.apply(m_elements,arguments);
}
this.toArray=function(){
return m_elements;
}
}
ArrayList.prototype.toString=function(){
return this.toArray().toString();
}
//定义一个SortedList类型,它继承ArrayList类型
function SortedList(){
//SortedList类型继承ArrayList
this.base=ArrayList;
this.base.apply(this,arguments);
this.sort=function(){
var arr=this.toArray();
arr.sort.apply(arr,arguments);
}
}
//构造一个ArrayList
var a=new ArrayList(1,2,3);
dwn(a);
dwn(a.size());//a从Collection继承了size()方法
dwn(a.isEmpty);//a没有继承到isEmpty()方法
//构造一个SortedList
var b=new SortedList(3,1,2);
b.add(4,0);//b从ArrayList继承了add()方法
dwn(b.toArray());//b从ArrayList继承了toArray()方法
b.sort();//b自己实现的sort方法
dwn(b.toArray());
dwn(b);
dwn(b.size());//b从Collection继承了size方法
*/
/*
function dwn(s){
document.write(s+"<br/>");
}
//定义一个类型ClassA
function ClassA(){
this.a=[];
}
//定义一个类型ClassB
function ClassB(){
this.b=function(){}
}
//ClassB以ClassA的对象为原型
ClassB.prototype=new ClassA();
//创建两个ClassB类型的对象
var objB1=new ClassB();
var objB2=new ClassB();
//改变objB1对象中的a属性的值(引用类型传)
objB1.a.push(1,2,3);
dwn(objB2.a);
*/
/*
//prototype的实质
function dwn(s){
document.write(s+"<br/>");
}
//定义Point2D对象
function Point2D(x,y){
this.x=x;
this.y=y;
}
Point2D.prototype.x=0;
Point2D.prototype.y=0;
//定义ColorPoint2D对象
function ColorPoint2D(x,y,c){
this.x=x;
this.y=y;
}
//ColorPoint2D以Point2D对象为原型
ColorPoint2D.prototype=new Point2D();
ColorPoint2D.prototype.x=1;
ColorPoint2D.prototype.y=1;
//构造一个ColorPoint2D对象
var cp=new ColorPoint2D(10,20,"red");
dwn(cp.x);//10 先查找cp本身的属性
delete cp.x;
dwn(cp.x);//1 删除后查找上层原型链上的属性
delete ColorPoint2D.prototype.x;
dwn(cp.x);//0 删除后继续查找更上层原型链上的属性
*/
/*
//用prototype巧设getter
function Point(x,y){
if(x) this.x=x;
if(y) this.y=y;
}
Point.prototype.x=0;
Point.prototype.y=0;
function LineSegment(p1,p2){
//私有成员
var m_firstPoint = p1;
var m_lastPoint=p2;
var m_width={
valueOf:function(){return Math.abs(p1.x-p2.x)},
toString:function(){return Math.abs(p1.x-p2.x)}
}
var m_height={
valueOf:function(){return Math.abs(p1.y-p2.y)},
toString:function(){return Math.abs(p1.y-p2.y)}
}
this.getFirstPoint=function(){
return m_firstPoint;
//function GETTER(){};//定义一个临时类型
//将m_firstPoint设为这个类型的原型
//GETTER.prototype=m_firstPoint;
//构造一个这个类型的对象返回
//return new GETTER();
}
this.getLastPoint = function(){
return m_lastPoint;
}
this.length={
valueOf:function(){return Math.sqrt(m_width*m_width+m_height*m_height)},
toString:function(){return Math.sqrt(m_width*m_width+m_height*m_height)}
}
}
//构造p1,p2两个Point对象
var p1=new Point;
var p2=new Point(2,3);
//用p1、p2构造line1一个LineSegment对象
var line1=new LineSegment(p1,p2);
var lp=line1.getFirstPoint();
lp.x=100;
alert(line1.getFirstPoint().x);
alert(line.length);
*/
/*
//带默认值的Point对象
function dwn(s){
document.write(s+"<br/>");
}
function Point(x,y){
if(x) this.x=x;
if(y) this.y=y;
}
//设定Point对象的x、y默认值为0
Point.prototype.x=0;
Point.prototype.y=0;
//p1是一个默认(0,0)的对象
var p1=new Point;
//p2赋值(1,2)
var p2=new Point(1,2);
dwn(p1.x+','+p1.y);
dwn(p2.x+','+p2.y);
*/
/*
//给原型对象添加属性
function dwn(s){
document.write(s+"<br/>");
}
function Point(x,y){
this.x=x;
this.y=y;
}
var p1=new Point(1,2);
var p2=new Point(3,4);
Point.prototype.z=0;//动态为Point的原型添加属性
dwn(p1.z);
dwn(p2.z);
*/
/*
//三种基本构造方法
//第一种
var a=new Object();
a.x=1,a.y=2;
//第二种
var b={x:1,y:2};
//第三种
function Point(x,y){
this.x=x;
this.y=y;
}
var p=new Point(1,2);
*/
//=====数据类型=================================================================
/*
//Math.floor取比当前数值小的最大整数
document.writeln(Math.floor(12.5));
document.writeln(Math.floor(-7.6));
//Math.round四舍五入
document.writeln(Math.round(12.5));
document.writeln(Math.round(-7.6));
//Math.ceil取比当前数值大的最小整数
document.writeln(Math.ceil(12.5));
document.writeln(Math.ceil(-7.6));
//toFixed(n)保留n位小数
var a=12.3456;
document.writeln(a.toFixed(2));
*/
/*
//强制类型转换
function dwn(s){
document.write(s+"<br/>");
}
//var str='100';//字符串类型强制转换
//var str=100;//数值类型的强制转换
var str = {};//对象类型强制转换
var s = String(obj);
dwn(typeof(s)+':'+str);
var num=Number(str);
dwn(typeof(num)+':'+num);
var obj=Object(str);
dwn(typeof(obj)+':'+obj);
var bool = Boolean(str);
dwn(typeof(bool)+':'+bool);
var fun=Function(str);
dwn(typeof(fun)+':'+fun);
*/
/*
var a=110,b="50",c=40,d="123.95";
var c1=a+b;//11050
var c2=a-b;//60
var c3=a+parseInt(b);//160
var c4=a.toString()+c.toString();//11040
var c5=a+parseFloat(d);//233.95
document.write(c1+"<br/>"+c2+"<br/>"+c3+"<br/>"+c4+"<br/>"+c5);
*/
/*
//引用类型
var a=[1,2,3];
var b=a;
b[0]=99;
alert('a='+a+', b='+b);
*/
/*
//函数和闭包
function parabola(a,b,c){
var ret = function(x){
return a*x*x+b*x+c;
}
ret.toString = function(){
return a+"a^2+"+b+"x+"+c;
}
return ret;
}
var p1 = parabola(2,3,4);
document.write(p1+"-->"+p1(15)+"<br/>");
var p2 = parabola(2,-3,14);
document.write(p2+"-->"+p2(15));
*/
/*
//构造函数
function Point(x,y){
this.x=x;
this.y=y;
//定义方法
this.getDistance = function(){
return Math.sqrt(this.x*this.x+this.y*this.y);
}
//重写toString方法
this.toString = function(){
return "("+this.x+","+this.y+")";
}
}
//构造Point对象
var pointA = new Point(1,2);
var pointB = new Point(3,4);
var pointC = new Point(-1,-2);
//重载过的toString()方法显示它们
document.write(pointA+"<br/>");
document.write(pointB+"<br/>");
//调用getDistance方法
document.write(pointC.getDistance());
*/
//数组
/*var table = [100,110,120,130,140,150];
alert(table[1]);*/
/*var x=33;
var y=x.toString(2);
alert(y);
var z = (255).toString(16);
alert(z);*/
//======================================================================
/*
//提交数据并响应服务器端应答
function submit(url){
alert(1);
//创建XmlHttp对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
//以GET方式同info.xml交互
xmlHttp.open("GET",url,true);
xmlHttp.send();
//回调dataReady,处理返回的数据
xmlHttp.onreadystatechange = function(){
dataReady(xmlHttp);
}
return false;
}
//对服务器应答的数据进行处理
function dataReady(xh){
if(xh.readyState==4){
if(xh.status==200){
//返回xml文本内容
var resText = xmlHttp.responseText;
alert(resText);
}
}
}
*/
</script>
</head>
<body>
<form id="oPersistForm">
<input class="userdata" type="text" id="oPersistInput"/>
<input type="button" value="load" οnclick="fnLoadInput()"/>
<input type="button" value="save" οnclick="fnSaveInput()"/>
</form>
</body>
</html>