【學習筆記】JavaScript基礎(二)

標籤：不能   分解   efault   內建函數   內容   應用   運用   標記   顯示   

【學習過程遇到疑問和延伸閱讀】

 總結
變數->數組
代碼塊->判斷分支執行->判斷迴圈執行
嵌套分支、嵌套迴圈的靈活運用
分支類型-if，elseif，switch case
迴圈類型-while，do-while，for

數組和對象聯絡區別

成員vs對象

原型對象 vs 對象原型

 

【新概念，重要概念】

函數對象

延伸閱讀：
http://www.cnblogs.com/huaan011/p/3669599.html

 

【實操知識點脈絡】

1.數組
數組結構，存放一些資料，有邏輯關係的資料（有結構的）

下標-資料的位置

1.1建立數組的方式
var a = new Array();
var b = new Array(size);
var c = new Array(d1,d2,...dn);
var d = [d1,d2,...,dn];

1.2訪問數組
[]運算子，可訪問數組裡的一個資料
a[0]，可以讀可以寫，放在等號左邊是寫，放在等號右邊就是讀。
索引從0開始

undefine

1.3數組長度
.length
表示目前數組佔據了多少長度，數組最大的下標+1

.length可寫，數組長度可修改
即可去掉數組後面某部分的東西或者增加長度

a[a.length]="xx";//可擴充性代碼，不管將來需求怎麼改，都不用改代碼
在數組最後繼續追加一個元素。

1.4轉換數組為字串
整個數組可以做輸出
.toString() / .valueOf()
.join("||")

1.5堆棧
一種資料結構：先進後出
在JavaScript裡面，
堆棧操作
數組實現了兩個函數，
push(),pop()

隊列操作
push(),shift()

排序-從小到大
sort()
把原來的順序倒序
reverse()

數組操作
串連concat()
截取slice(x,x)

splice(開始位置，刪除個數，插入元素...)
刪除、插入、替換

2函數
函數就是一段代碼，我們給它七個名字，
放起來，以後可以用

JavaScript有很多內建函數，
能協助我們實現很多有用的功能
alert(),document.write()

2.1定義函數
function fun_name(){}
function fun_name(a,b){}
當某些事情會很經常地去做。可以定義為函數。
方便調用，反覆地使用。

調用函數

2.2有傳回值的函數
return

2.3函數變數
出了用function這個關鍵字定義函數，
還可以把函數定義成對象，叫做函數對象
var f= new Function("x","y","return x*y");
等價於
function f(x,y){return x*y};

既然可以把一個函數賦給一個變數，
也就是有可能將一個函數看成一個數，一個字串
一樣，傳遞到另一個函數內部去，
然後在另一個函數裡頭做運算。

寫程式的時候，盡量基於自己已經定義好的函數，
來做新的函數。
盡量把你的函數分解為很多小的函數來執行。

2.4變數空間
函數外整個頁面，函數內的變數不同
範圍不同

在函數內定義的變數，與外部無關，
即使和外部的同名。

3對象
3.1JavaScript的對象
對象是JavaScript的一種複合資料型別，
它可以把多個資料集中在一個變數中，
並且給其中的每個資料起名字。

對象是一個屬性集合。

JavaScript並不像其他OOP語言那樣有類的概念，
不是先設計類再製造對象。

直接有對象
往對象加入屬性，
在運行中可以不斷加入屬性。

也可以定義函數，建立對象，看起來就像別的語言建立對象一樣。

具有對象的語言，不是嚴格的物件導向的語言。

3.2建立對象
var o = new Object(); //對象1
var ciclr = {x:0,y:0,radius:2}; //對象2

3.3訪問對象屬性
一旦把對象建立出來以後，去訪問屬性。
和數組不一樣的是，每個元素不是編號，
而是都取了名字。

所以可以用名字來使用它。
var book = new Object();
book.title = "HTML5"; //在左邊的title在此之前，沒有任何地方用過。
我們只要給book.title賦值，就有了title.

就跟數組的做法是一樣的。

-即使構造的時候不存在的屬性也可以在今後隨時增加。
甚至在啟動並執行時候，也可以給隨時"系統對象"加屬性。

3.4刪除對象屬性
delete book.chapter1;
book.chapter1 = null;

3.5遍曆所有屬性
for( var x in o)...
對於o裡面的每一個屬性都取出來，
迴圈的每一遍都把它作為x拿來給我用。
然後我就可以對這個x做些事情。

<script>
var o = new Object();
o.name = "John Mike";
o.age = 30;
alert(o);

for (var x in o){
alert(x);//o的屬性的名字
//如何得到屬性的值？o.x?o的叫x的屬性？
alert(o[x]);//可以像數組一樣用中括弧來獲得屬性的值。
}

</script>

o[x]表明可計算的，我們寫的程式可以很靈活。
x是運行時才知道的值，
o的屬性的名字是動態。

3.6 建構函式
在之前，我們建立一個對象，
是通過new Object()得到，
然後再往裡面加上各種屬性。

但是如果你要做很多個對象，
然後每個對象裡面都要加各種屬性。
這樣，代碼就很繁瑣。

所以我們做一個構造方法的事情。

建構函式
(1)不直接製造對象
(2)通過this來定義成員
(3)沒有return
例子：
function Rect(w,h){
this.width = w;
this.height = h;//
this.area = function(){ return this.width * this.height;};
};//在建構函式裡面裡面，除了可以有成員的屬性以外，還可以有成員方法

var r = new Rect(5,10);
alert(r.area());

-一旦定義了建構函式，就可以構造任意數量的對象

3.7原型對象

做一個Person的建構函式；
在Person裡面，我們就可以寫Person.prototype.name
做出一個有原型的建構函式
而不用this，用建構函式名.prototype.屬性名稱

通過有原型的建構函式裡，
new兩個對象，訪問他們的同一個屬性名稱，
得到同一個屬性值。

實際上，所有的用prototype建構函式，
new 出來的對象，它裡面的prototype的屬性值是共用的。
是只有一份的。

除非你改寫了某個對象，那麼它就具有了自己的資料了。

原型prototype的會產生一些問題
比如說，我們看這個例子
這個原型有一點點複雜，
我們可以看到裡面多個friends屬性
這個屬性的值是個數組

同樣地，new兩個對象後，
改寫其中一個對象，
往數組push多一個元素後，
另一個對象的friends也同樣被修改了。

push與賦值不同，不能改寫，還是原來的數組。
沒有讓friends等於另外一個數組。

這樣，就會產生一些問題，因為像數組這樣的東西，
我們不希望它在幾個成員之間是共用的，怎麼辦呢？

我們可以結合一下，【組合原型和構造方法】
我們可以讓Person是有自己的東西，
比如說，我們現在這個寫法
Person的這個構造器呢，
它this.xx,this.xx...這些都是對象自己的，它和別人不共用。
然後我們再給Person加個prototype

prototype說它有函數，那些函數是成員共用的。
因此之後，我們new一些person出來後，
在這些person裡面，name,age,job,friend是自己的，
那個sayName()函數，是共用的。

person1的friends數組加入元素，
person2是不會變的。

當然，JavaScript的對象還有很多更細節的使用方法。
很多的使用是和具體的應用相關的，
所以在今後的開發當中，隨著你需求的代入呢，
你會體會到各種方法使用的需要。

 

3.8瀏覽器中的JS
3.8.1全域對象
現在我們來看看在瀏覽器中的JavaScript
之前我們一直研究的是JavaScript本身語言的特性。

沒有深入地去瞭解JavaScript與瀏覽器有什麼樣的關係。
它能夠怎麼樣地操縱瀏覽器，怎麼樣操縱我們的頁面。
我們之前做過的那些變數，
那些全域變數，實際上他不是真正的全域變數。

任何一個JavaScript的運行環境，都會提供一個
全域對象。
所以所謂的全域變數實際上是那個全域對象的成員變數，
因為和其他的語言不一樣，我們要在JavaScript對象加入
新的成員是非常簡單的。

那麼，對於瀏覽器來說，它的全域對象是window

所以說，我們做的全域變數實際上就是window這個全域對象
的成員。

所以在瀏覽器中所有的東西，實際上都是window的成員。

3.8.2document
window.document表示瀏覽器視窗中的HTML頁面
docment.write()將內容寫入頁面
頁面中的元素就是docment裡的成員
for(x in document){
document.write(x+ "<br/>");
}

document model
可以改變這裡面的element，就可以看到頁面的動態效果。

3.8.3HTML中的JavaScript
-在<script></script>標記中
-在<script>的scr屬性或archive指定的外部檔案中
-在某個HTML標記的事件處理器中

外部JavaScript檔案
-比如<script src="util.js"></script>//告訴瀏覽器，找到叫util的js檔案
-一個純粹的代碼檔案，沒有HTML標記
(如果代碼中是定義函數的，那麼頁面就可以用；如果是執行
代碼的話，檔案載入進來就會執行。)

 

4事件處理器
在HTML中會有一些事件的處理器。
<p onMouseOver="alert(‘hi‘);">
onMouseOut

4.1body事件
onLoad
onUnload被關掉前

4.2簡單對話方塊
alert()
confirm()
prompt()

4.3狀態列
status =
defaultStatus =
<p onMouseOver="status=‘網易雲學習‘";></p>

4.4定時器
可以調用window的函數
setInterval()
這個函數，可以給兩個參數，
第一個參數是你讓它做什麼動作。通常是個函數
第二個參數是事件間隔是多少。

我們把定時器做在了body onload事件上
然後在setInterval()裡是一個update()的函數，
定義了update()會在count>0時，減1，並顯示在status上。
做倒計時。
在head裡定義update()和count全域變數。

 

【學習筆記】JavaScript基礎(二)