1. 程式人生 > >JS 從入門到精通

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

//三秒後執行彈框“三秒”,只執行一次