JS 從入門到精通
Javascript.輸出
JavaScript向網頁的輸出方式是通過document物件的write方法:
document.write(something);
或者帶有換行的
document.writeln(something);
JS輸出內帶有變數的:
d = "Hello World!";
document.write(d+"!!");
JS輸出內也可以帶有函式
function a(){return "Hello World!";}
document.write(a); //Hello World!
Javascript.函式
JS函式分為匿名函式與帶有名字的函式。
匿名函式通常是自執行,有名函式是通過函式名使用。
匿名函式:
(function(){
document.write("Hello World!");
}()); //大括號結尾的()就代表自執行
帶有名字的函式:
function a(){
document.write("Hello World!");
}
a(); //使用函式名執行
函式也可以存在一個變數當中
例如:
var a = function(){ //匿名函式
document.write("Hello World!");
};
a();
使用變數中的函式也可以使用變數名+();來使用。
Javascript.變數
變數就是存放字串或者函式、物件、陣列等的容器
就好比你把字寫在紙上,並且使用一個瓶子(相當於變數)來裝
變數的宣告:
var a;
多變數宣告:
var a,b,c,d...;
變數宣告(函式內)不使用var就表明他是區域性變數,函式外無法訪問
例如
(function(){
a=10;
var b=20;
}()); //a=undefined | b=20
函式內不可以這樣宣告:
a,b,c,d,e...;
正確為a=""; b="";...
變數的增加
如果這個變數是一個數字,可以使用++。
a=1;
a++; //2
如果是一個字串,你想要在尾部增加:
a="Hello ";
a=a+"World!"; //Hello World!
更簡單的方法:
a="Hello ";
a+="World!"; //Hello World!
變數未宣告前與聲明後沒有賦值的值都是undefined或者null
Javascript.替換html中的內容
假設有一個p標籤,id為abc,你想替換他的內容:
document.getElementById('abc').innerHTML=something;
使用了document物件的getElementById方法,再將innerHTML的值替換為其他的。
替換css
document.getElementById('abc').style.color='red';
將css字型顏色替換為紅色
總結:
替換css:
document.getElementById(ID).style.[styleName] = [Value];
替換內容:
document.getElementById(ID).innerHTML = [Value];
Javascript.數字、陣列、字串
數字大家都知道,就是阿拉伯數字,而中國漢字的數字型別只能為字串
字串表示一段字元,比如你的習作,轉移到js來就是一長段字串。
數字也有最大,js使用了Number物件中的無限♾來表示無限
陣列可以分為鍵與值(Key=>Value)
陣列的宣告:
a=[];
a=new Array();//new Array(這裡可以寫陣列的大小或內容)
a.length; //陣列的長度
陣列如果你不宣告鍵名他會自動為0-...
例如
a=['Hello','Hi'];//Hello鍵名為0,Hi鍵名為1
使用方法:
document.write(a[0]+a[1]); //HelloHi
當你想要知道數組裡所有的變數,請使用for
for有兩種形式:
1.0-陣列結尾遍歷法
for(i=0; i < x.length; i++){
//x[i]代表值,i代表鍵名
}
這種方法只能使用於鍵名為數字的陣列,通用方法為
for(key in x){
//x[key]代表值,key代表鍵名
}
這樣一來,陣列就可以變為字串
但是字串怎麼變成數字?
使用split方法!
a="1,2,3,4,5";
arr=a.split(",");//以“,”為分割線,如果分割失敗則返回該字串
成功後:[1,2,3,4,5];
變成了一個數組,如果split("");將會把字串每一個字都分割下來
Javascript.物件
物件可以指任何一個事物,物件和陣列一樣可以存放東西,也有鍵與值。
比如我們經常用的document、navigator都是物件。
物件的建立:
a = new Object();
或者
a = {};
物件內可以包含函式,比如
a={
myName : function(){
alert("my Name is a");
}
};
a.myName(); //my Name is a
物件內也可以包含字串以及陣列、數字、布林值:
a={
a:true,b:123,c:"String",d:["1","2","3"]
}; //a.a = true || a.b = 123 || a.c = "String" || d = ["1","2","3"]
訪問物件內的變數使用
a[鍵名];
或者
a.鍵名
當監控是一個變數時只能使用第一種方法
你還可以通過其他方法給物件賦值:
a={};
a['name'] = 'jerry'; //陣列的賦值方法
a.name = 'jerry'; //第二種賦值方法
如果你想將物件化成字串,可以使用物件JSON提供的方法:stringify
a={name:'jerry',age:20};
b=JSON.stringify(a); //'{"name":"jerry","age":20}'
如果你想將JSON字串化成物件,還可以使用JSON提供的方法:parse
a='{"name":"jerry","age":20}';
b=JSON.parse(a); //[Object object]
除此之外,還有一個構建物件的方法——使用函式構建
function a(name,age){
this.name = name;
this.age = age;
this.say = function(){alert('我叫'+this.name+',今年'+this.ahe);};
}
pepole = new a("Jerry",20);
people.say(); //我叫Jerry,今年20
這個類似於IE的Ajax構建方法(new XMLHttpRequest();)
Javascript.Ajax
Ajax是一個...額...怎麼說呢,相當於一個抓取網頁內容的外掛
每一個瀏覽器都自帶Ajax
比如a.html輸出“<h1>你好世界</h1>”,b.html通過Ajax抓取a.html的內容,
也會顯示“<h1>你好世界</h1>”
下面來講Ajax的用法:
因為每個瀏覽器構建Ajax的方法不同,所以要分兩步構建
try{ //Safari,火狐等
xmlHttp = new XMLHttpRequest();
}catch(e){ //IE構建方法,好像也有360瀏覽器
try{
xmlHttp = new ActiveXObjex('Msxml2.XMLHTTP');
}catch(e){
try{//新版IE
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){alert('您的瀏覽器需要更新!\n錯誤:不支援AJAX的瀏覽器'); return;}//實在找不到了
}
}
現在xmlHttp物件已經建立好了,接下來是設定函式
xmlHttp.onreadystatechange = function(){ //當已經得到了資訊後的反應
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ //確認Ajax成功獲取資訊
//然後就是你自己寫了,返回的資訊在"xmlHttp.responseText"
}
};
xmlHttp.open(傳送方式,要獲取資訊的連結,true);
xmlHttp.send();//傳送
傳送方式可以為POST或者GET
如果是連結要加http://
如果你熟知了Ajax你可以寫一個線上的聊天系統
Javascript.計時器與倒計時
計時器: setInterval(匿名函式或者"xxx()",隔幾秒執行);
計時器會返回一個專屬ID,可以使用clearInterval刪除計時器
例如:
function x(){
alert('三秒');
}
a = setInterval("x()",3000); //3000指的是三千毫秒,以毫秒為單位
clearInterval(a); //刪除計時器
倒計時: setTimeout(匿名函式或者"xxx()",隔幾秒執行);
同樣,引數2也是以毫秒為單位
function s(){
alert('三秒');
}
setTimeout('s()',3000);
//三秒後執行彈框“三秒”,只執行一次