javascript Learning
javascript can be roughly divided into 3 different parts: Core (ECMAscript), Text Object (DOM), Browser Object (BOM)
Core (ECMAscript): Keywords, Statements, Operators, Object
Text Object (DOM) : DOM will plan the entire page into a document composed of node levels.
Parsing follows the W3C html dom standard:
W3C dom reference pays special attention to DOM Node description
BOM browser object. Cookie, pop-up new browser, browser setting size
Core (ECMAscript) Global built-in object;
Methods: parseInt(), isNan(), encodeURI()...etc. are all methods of this object
Pay special attention to eval(); a symbol of dynamic language such as: eval("alert('hi')"); but this method is very evil (security aspect)
Text object (DOM) description:
<bookstore> <book category="cooking"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price > </book> </bookstore>
1. ECMAscript basics
$ Variable weak type; Hungarian type designation: var iOuouValue=100;
$ can end the line with or without a semicolon; but then onsubmit="javascript:function();return false;"
$ keyword; special attention
"typeof" var test=1; alert(typeof testX); //output "undefined"
"NaN" - not a number -> isNan("blue"); //output "true" ->isNan("123") ; //output "false"
$ object; var o = new Object(); var a = {}
Here is a special explanation that a function we usually write is an object.
This var a = {name:"Liu Kaiyi"} is equivalent to var a = function(){this.name="Liu Kaiyi"};
let's do {name:"test" ,pass:"123456",addr:"bj"} //What is this? ! json
When var str = '{name:"test",pass:"123456",addr:"bj"}'
var objectBean = eval(str); //Here is the object objectBea.name using
the domain concept:
<SCRIPT type= text/javascript>
var sMessage = 'Hello';
function setSomething() {
sColor = 'red';
sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello World!
alert(sColor); //red
</SCRIPT> <SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
var sColor = 'red';
sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello World!
alert(sColor); // nothing
</SCRIPT>
<SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
var sColor = 'red';
var sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello
alert(sColor); // nothing
</SCRIPT>
Laying the foundation for object-oriented: object application of object prototype type. Reference
// The simplest inheritance
Object.prototype.inObj = 1;
function A()
{
this.inA = 2;
}
A.prototype.inAProto = 3;
B.prototype = new A; // Hook up A into B's prototype chain
B.prototype.constructor = B;
function B()
{
this.inB = 4;
}
B.prototype.inBProto = 5;
x = new B;
document.write(x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto);
//1, 2, 3, 4 , 5
//Increase some confidence http://www.json.org/json.js
Object.prototype.toJSONString = function (filter) { return JSON.stringify(this, filter); }; Then we can use bean.toJSONString( ) isn’t it?
$ arguments ;
function getFun(){alert(arguments.length);} ;
getFun("xx") //output 1
getFun("xx",23) //output 2
$ statement; under special instructions for
for(var i=0i<iCount;i++) or for(attr in object);
If you are bored, you can for( sProp in window ){alert(sProp+"Hey, please!");} //Look at the reflection of javascript
Object-oriented:
var bean = new Bean();
1.Factory method
function getAttr(){
alert(this.attr)
}
function Bean(tattr){
var bean = new Object;
bean.attr = tattr;
bean.getAttr = getAttr;
return bean;
}
It’s basically a copycat version of object-oriented
2. Construct
function Bean(tattr){
this.attr = tattr;
bean.getAttr = function(){
alert(this.attr);
}
}
Above 2, when the Bean object is created, the method will "repeatedly generate the function"!
3. Prototype mode
function Bean(){}
Bean.prototype.attr = "";
Bean.prototype.getAttr=function(){alert(this.attr);}
Solve the "duplicate generated function" problem, but new problem Bean.prototype.getArray = new Array();
Its new objects bean1 and bean2 will share the new Array space (which we don't want to see)
4. Mixed model:) Haha
function Bean(){
this.attr= "";
this.getArray=new Array;
}
Bean.prototype.getAttr=function(){alert(this.attr);}
5. Dynamic prototype (note that from now on, it is truly object-oriented!!!)
function Bean(){
this.attr= "";
this.getArray=new Array;
//classload when loading
if(typeof Bean._initialized == "undefined" ){
Bean.prototype.getAttr=function(){alert(this.attr);};
Bean._initialized= true ;
}
}
/****************************************************** ***************/
Object inheritance
1. Object impersonation! ! (Can support multiple inheritance, copycat is very powerful)
function classA(sstr){
this.color = sstr;
this.sayColor = function(){
alert(this.color);
};
}
function classC(){}
function classB(){
this.newMethod =ClassA;
this.newMethod();
delete this.newMethod;
this.newMethod =ClassC ;
this.newMethod();
delete this.newMethod ;
this.arrt = "google";
}
2.call() apply() is also a copycat,
function classA(sstr){
this.color = sstr;
this.sayColor = function(str){
alert(str+this.color);
};
}
function classB(){
// this.newMethod =ClassA ;
// this.newMethod();
// delete this.newMethod ;
classA.call(this,"red");
//classA.apply(this,new Array( "red"))
this.arrt = "baidu";
}
3. Orthodox inheritance prototype chain (but does not support multiple inheritance)
function classA(){this.oo="test";}
classA.prototype.color = "red";
function classB(){}
classB.prototype = new classA;
classB.prototype.sayName = function(){
alert( this.color );
}
varbb = new classB;
bb.sayName(); // output red
alert(bb.oo); //output test
alert(bb instanceof classA); //output true
alert(bb instanceof classB); //output true
4. If you want more inheritance! ! And also supports instanceof
Mixing method:
function classA(){}
function classB(){}
function classC(){
classA.call(this);
classC.call(this);
}
classC.prototype = new classA;//Note that instanceof can only be used for A