JS入門
23139 ワード
JS高級と階段
ディレクトリ=========================================================================基礎2 Web API 45 オブジェクト指向プログラミング170 ケース:貪食蛇179 継承179 関数階段223 正規表現284 ディレクトリ=========================================================================
1.基礎
ディレクトリ=========================================================================
1.基礎
1.1.
1.1.1 var
1.2.
1.2.1 ; number string boolean null undefined
1.2.2 object function
1.3.
1.3.1 typeof （ ：typeof || ）
"number" "string" boolean "boolean"
object
null object function function
1.3.2 instancof
： instancof
true || false
1.3.3 constructor
：obj.constructor
1.3.4 Object.prototype.toString.call（）；
："[object String]"
："[object Number]"
null ："[object Null]"
undefined ："[object Undefined]"
object ："[object Object]"
boolean ："[object Boolean]"
："[object Array]"
1.4
1.4.1 number ：Number()、parseInt() 、parseFloat() NAN
1.4.2 ：string ：.toString()、String、 +
1.4.3 boolean Boolean() 、!!
：0 '' null undefined NaN // false true
1.5
1.5.1 +-/*
1.5.2 ++ -- ！
1.5.3 = += -+ /+ *+
1.5.4 && ||
1.5.5 > < >= <=
1.5.6 == != !== ===
1.5.7 () > > > > ( && ||) >
：
boolean （++ -- ）
bool
x y = = = = =
0 false true false
"" false true false
"" 0 true false
"0" 0 true false
"17" 17 true false
null undefined true false
null 0 false false
null false false false
undefined false false false
0 NaN false false
"foo" NaN false false
NaN NaN false false
1. null == undefined true
2. null undefined ,
3. NaN , NaN NaN boolean false . NaN != NaN true;
1.6
1.6.1
1：if(){...}else {..}
2.switch (){
case value:
break;
default:
break;
}
1.6.2
： ? 1 : 2
1.6.3
for(var i=0;i<10;i++){ }
for(var key in obj){}
while( ){ }
do{ }while ( ); //
1.7
1.7.1
1、 var arr = [];
2、 var arr = new Array();
1.7.2.
1.8
1.8.1
1.8.2.
1. var fn = function（a,b,c）｛return｝
2. function fn(){}
3. ()
arguments arguments
1.9.
1.9.1. ： ，
1. var obj = {};
2. var obj = new Object();
3.
：function createP(name, age) {
var o = new Object();
o.name = name;
o.age = age;
o.sayUrl= function() {
alert(this.age);
}
return o;
}
var obj = createP("OTT","18");
4.
：function P(name ,age){
this.name = name;
this.age = age;
}
：
1.9.2
1.
obj.name obj["name"]
2.delete obj.key
1.10.
1.10.1 Array
array.push(value);// ， length
array.pop();//
array.unshift(value);// length
array.shift();// ,
array.reverse();// ,
array.sort();// Unicode .sort(function (a,b){return }); <=0 0
concat： ， ，
join(str); str
slice(begin, end): ，
splice(begin,num,val); begin num val
forEach(function(ele,i){ });
map(function(ele,i){ }); （ ( null undefined...) ）
filter(functiong( ele ,i){}); true
reduce(functin(a,b){ return a;},a); a a
1.10.2 String
charAt(" ") //
charCodeAt(index) // ASCII
indexOf: ， ， -1
lastIndexOf: 。 ， -1
trim();// ，
toUpperCase()//
toLowerCase()//
concat +
slice（start，end） ,end
substring(start，end) ,
substr( start ， length )( )
split: , （ ）
replace(searchValue, replaceValue)// ：searchValue: replaceValue:
1.10.3 Data ：var d = new Data(); Data.now();
d.getTime() // valueOf() ，valueOf() getTime()
d.getMilliseconds()
getSeconds() // 0-59
getMinutes() // 0-59
getHours() // 0-23
getDay() // 0 6 6
getDate() //
getMonth() // ，*** 0 ***
getFullYear() // 4 2016
1.10.4 Math
Math.PI //
Math.random()//
Math.floor()/Math.ceil()// /
Math.round()// ，
Math.abs() //
Math.max()/Math.min()//
Math.sin()/Math.cos() // /
Math.power()/Math.sqrt() // /
Math new
1.11
1. ： ， ，
2. ： ， ，
2.1
1.Application Programming Interface,
2.web api API(BOM DOM)
2.2 DOM
1.DOM
Document Object Model
W3C 。 ， web 。DOM API ，
2.DOM
id document.getElementById("id") id dom
class document.getElementsByClassName("" )
document.getElementsByTageName(“ ”)
name document.getElementsByName("name "); name
css document.querySelector(" css ") dom
document.querySelectorAll()
2.
1.
、 、
2.
.onclick = function(){} //
.addEventListener("click",function(){ }，boolean)// ：
false true ,
：IE 8 IE ，Opera 7.0
3.attachEvent("" ""，function（）｛｝，boolean)
IE8
3.
1. .onclick = null;
null
2..removeEventListener(' ', , false);
：IE 8 IE ，Opera 7.0
3.detachEvent('onclick', ) IE
4.
1.
function addEventListener(element, type, fn) {
if (element.addEventListener) {
element.addEventListener(type, fn, false);
} else if (element.attachEvent){
element.attachEvent('on' + type,fn);
} else {
element['on'+type] = fn;
}
}；
2.
function removeEventListener(element, type, fn) {
if (element.removeEventListener) {
element.removeEventListener(type, fn, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, fn);
} else {
element['on'+type] = null;
}
}
5.
1.
href、title、id、src、className、innerHTML innerText
2.
value (option innerText)
type input ( )
disabled （ture||false）
checked （ture||false）
selected （ture||false）
3.
getAttribute()
setAttribute()
removeAttribute()
element. :
element.
dellete element.property
4.
1. style
“px”
//ES5 document.getComputedStyle( ,null)
5.
1.element.className =“” \ class
element.removeClass()
2.//ES5 element.classList
ele.classList.add();
.classList.remove();
.classlist.toggle();
6.
1.document.write
2.element.innerHTML = """"; ，
3.document.createElement(" ");
7.
1.
A.appendChild(B) B A B
A.insertBefore(B) B A
A.removeChild(B) B A
A.replaceChild(B) A
A.cloneNode() boolean
appendChild
2.
parentNode
childNodes
children
nextSibling/previousSibling /
nextElementsibling/previousElementSibling /
firstChild/lastChild /
8.
1.onclick = function (e){e. }
2.
e= e || window.event;
3.
1. type
2. event.screenX/e.screenY
3. clientX/clientY
4. pageX/pageY IE8 ， window.pageX
5. event.target || event.srcElement
6. event.preventDefault()
7. eventPhase
8. event.stopPropagation();
IE event.cancelBubble = true;
4.
1.
2. （ ）
3.
9.
1. ：
e.target || e.srcElement
2.3 BOM
2.3.1
BOM(Browser Object Model) ， 、 。BOM ， Window BOM ，
2.3.2
alert()
prompt()
confirm()
onload
setTimeout() clearTimeout()
2.3.3 window.location
1.location.href = ""; || ( js ）
2.location.search
3.location.reload(); (true/false)
4.url
scheme://host:port/path?query#fragment
scheme: http,ftp,maito
host: ( ) (DNS) IP 。
port: ， ， ， http 80。
path: '/' ， 。
query: ， ， ， '&' ， '=' 。 ：name=zs
fragment: ， .
2.3.4.history
history.back();
history.forward();
history.go(1); 1 -1 0
2.3.5.navigator
userAgent
platform .
2.3.6.screen
screen.width
screen.height
screen.availWidth
screen.availHeight
2.3.7.offset
ele.offsetWidth height + paddnig + border
ele.offsetHeight ( : ) style.Width
ele.offsetParent
ele.offsetLeft left left + margin
ele.offsetTop top top + margin
2.3.8.scroll
ele.scrollHeight
ele.scrollWidth
ele.scrollLeft
ele.scrollTop
function scroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
2.3.9.client
1.
ele.clientHeight/.clientWidth
clientleft\clienttop border clientWidth scrollWidth
2.
window.innerWidth
window.innerHeight
//IE678 document.documentElement.clientWidth
3.
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}3.1.
3.1.1. ？
， ， c ， ； ；
3.1.2. ？
， ， ， ，
3.1.3.
1. ，
2. ， ， ，
3. 。 ：
3.2.
3.2.1. Object
var obj = new Object();
3.2.2.
var obj = {};
3.2.3.
function p (x,y){
retrun {name : x,age : y}
}
3.2.4.
：
new
1.new
( obj)
this var this = obj;
this
3.3.
3.3.1. prototype
1.prototype
2. prototyoe
3. ：
3.3.2. 、 、
1. prototype
2. .prototype == .__proto__ constructor
3.3.3.__proto__
1. __proto__ prototype
2. .prototype == .__proto__ Array.prototype == [].__proto__
3.3.4.
1
null delete
2. __proto__ undefined
3.3.5.constructor
1. prototype constructor
3.4.
3.4.1.
Object Object.prototype.__proto__ ==null
3.4.2.Object.prototype
1.constructor Object
2. .hasOwnProperty( )
1."" ""in"" "" in true
3. .prototype.isPrototypeOf( )
4. .propertyIsEnumerable( )
： ， .__proto__.propertyIsEnumerable();
Object.defineProperty( ， ，{value : "",enumerable : false})
5.A.isPrototypeof(B), A B
6.toString() [object ]
Object.prototype.toString.call("");
7.toLocaleString() toString Date String ..
8.valueOf() toString
3.4.3.Object ( )
1.Object.keys( )
2.Object.getOwnPropertyNames()
3.Object.getPrototypeOf( )
3.4.4.instanceof
5.1.
、
5.2.
:
var ott = {
name : ""OTT"",
extend : function (object){
if(object && (object instanceof Object)){
for(var key in object){
this[key] = object[key];
}
}
}
};
ott.extend({});
5.3.
5.3.1. ：
5.3.2. ：
function OTT(){
this.name = ""ott"";
}
//
OTT.prototype = {
// constructor
constructor : OTT，
say : function (){ ...}
}
5.4. +
extent
5.5.
ES5 Object.create(); A B B A
var pp = {x:d};
var pp = Object.create(pp);
5.6.
：
：
.function Person(name, age){
var o = new Object();
o.name = name;
o.age = age;
o.sayName = function(){
alert(this.name);
};
return o;
}
var p1 = new Person(""Nicholas"", 29);
p1.sayName(); //""Nicholas""
5.7. ||
function MyArray(){ }
MyArray.prototype = [];
MyArray.prototypr.push = function (){console.log(""hehe"");}
var arr = new MyArray();
arr.push();//hehe
6.1.
6.1.1. var fn = function (){}
6.1.2. function fn(){}
6.1.3. ：（ ）
// （arg1,arg2...., ）
//
var fn = new Function(""a"",""a"",""console.log(a+b)"");
(function (){})();
(function (){}());
!function (){}(); //
6.2.eval
6.2.1
1.
2. json js
6.2.2 eval JSON js
eval(""(""+json+"")"");
6.2.3.JSON
：JSON
JSON JSON.stringify( ) json
JSON.parse(json) js
6.3. this
6.3.1 this window
： ();
6.3.2 this
： obj.fn();
6.3.3. this
var obj = new ();
6.3.4. call apply bind
1. call ： this
：fn.call(this,arg1,agr2...); window
2.
1、 length
2、 0 1 2 3....
3、
push
Array.prototype.push.call( ，“ ”)；
;[].join.call( ,""-"");
3.apply
： this
4.bind this this this
：var newfn = fn.bing(obj);
6.4
1.Function.prototype == fn.__proto__;
fn.__proto__.__proto__== Object.prototype;
Funtion.__proto__ == Funtion.prototype
6.5 Function.prototype
1.arguments
2.length
3.name
4.caller
6.6
6.6.1
1. :( ) 55 “55”true [] ｛｝
2. ：
***
6.6.2
1.
2.
6.7.3.
1.
1、
2、
3、
2.
1、
2、
3、
4、
6.7
6.7.1 ：
：
：
6.7.2.
6.7.3.
1、
2、
3、
4、
1、
2、 ( )
6.8
6.8.1
6.9
1. ：
2. ： [ ]
6.10
1. A B A
function fn1(){
var num = 1;
function fn2(){
num++;
}
return f2;
}
var temp = fn1();
2
3
7.1.
7.1.1. ：
7.1.2. ：
7.1.3.
7.1.3.1 var reg = new RegExp(/\d/,g);
7.1.3.2 var reg = /^\d/g;
7.2.
7.2.1 . [^
]
7.2.2 \. .
7.2.3 \d [0-9]
7.2.4 \D [^0-9]
7.2.5 \w [a-zA-Z0-9_]
7.2.6 \W [^a-zA-Z0-9_]
7.2.7 \s [\t
]
7.2.8 \S [^\t
]
7.2.9 | () []
7.2.10 [^] ^ $ /^abc$/
7.2.11.
* 0 0 {0,}
+ 1 1 {1,}
? 0 1 {0,1}
{n,m} n m
() $1 $2
7.3.
7.3.1.reg.test(str);
7.3.2.
g global
i ignore
7.4.
7.4.1.str.replace(//g,"""");
7.5.
str.match(reg)