首頁 > 開發者 > JavaScript
標籤：需要 gets 指令碼 工具 教程 new sub 意義 個數
javascript
**********本章大量樣本和內容引用自w3cschool的javascript教程**************
本來已經快寫完90%左右了，結果不小心跑了個js，不小心把瀏覽器弄死，不小心沒儲存草稿T-T一切都要從頭開始寫過了orz。好吧再寫一遍！
■ 概述
js是一種輕量級的瀏覽器指令碼語言，其相容性很好（幾乎可以用在所有的瀏覽器上）這也就意味著從PC到智能手機所有可以用瀏覽器的裝置都可以運行js指令碼了。所以說js是互連網上最受歡迎&最常用的指令碼語言不為過。
js被互連網所青睞的原因在於它可以嵌入html檔案中，並且可以和html中的各種元素進行互動。在html檔案的<head>或者<body>中，可以加入<script>標籤，而<script></script>裡面就可以寫js指令碼的內容了。如果想引用外部指令碼的話可以在script中加上src屬性指向一個外部指令碼，這樣<script>裡面就不用寫任何內容直接</script>就好了
由於js沒有一個專門的編譯器或者整合較好的IDE之類的工具，測試js略顯麻煩一點，在下面的大部分執行個體中，為了看到js的效果我們暫時會用document.write(...)這個js裡的方法，它牽扯到HTML DOM,意思是網一個網頁上寫html代碼，暫時把它當成是其他語言裡的print語句，用來列印出結果就好了。
■ 基本文法
● 注釋
js和其他語言一樣可以注釋，其注釋的形式和C或者java很像。注釋內容用/*comment*/的形式表現，另外也可以用//comment的形式來進行一整行的注釋
● 語句規則
瀏覽器等軟體會對js語句進行解釋。js是一種解釋型語言，解譯器對語句逐條進行解釋而不是事先編譯再運行。
js的語句後面可以加上分號。但是這不是文法要求而是很多程式員的習慣（像我這種寫慣了python的話就經常不加分號。。）。
當然不用多說，js的語句是對大小寫敏感的，不像sql一樣大小寫一樣。
此外和C以及java一樣，js用大括弧來括起一些語句組成一個代碼塊。在函數，迴圈，條件陳述式中就要用到這些代碼塊了。
和python一樣js可以用"\"進行代碼的折行，即用這個符號跟在一行最後面，解釋時下一行代碼會緊跟著這一行進行解釋。
在js的語句中，多餘的空格都不會被解釋，和python一樣。所以在書寫的時候可以適當地加入些空格來美化代碼，比如var = 1和var=1效果是一樣的。
● 變數賦值和初始化
js中有各種內建的資料類型，包括Number（包括傳統意義上的int型，float型等）,Boolean（true和false），String（雙引號或單引號都可以表示字串）, Null（空值），Array（數組），Object（對象）
變數聲明時用var關鍵字，聲明時不必特地指出變數的類型，當聲明卻不賦值時（如var x）預設變數的值為undefined，即變數沒有值（注意undefined和null的區別，undefined是說變數根本就沒有賦過值，而null說的是變數的值是空值）。js支援在一行裡聲明多個變數並賦值：
var city = "北京";var count = 100var namevar firstname = "Frank", lastname = "Takanashi"
對於Array和Object這兩種類型稍微有點不同。
Array是類似於python的list，有下列幾種初始化的方法：
var cars=new Array("Audi","BMW","Volvo");var cars=new Array();cars[0]="Audi";cars[1]="BMW";cars[2]="Volvo";var cars=["Audi","BMW","Volvo"];
而Object類似於python的dict，可以如下初始化：
*可以看到，object的key不用打引號，這點和python是不一樣的。
var person={firstname:"Bill", lastname:"Gates", id:5566};/*初始化時可以換行，讓格式更清晰*/var person={firstname : "Bill",lastname : "Gates",id : 5566};
如果想要清空變數的值，可以把null賦值給變數。再次強調，null值和undefined不一樣，null是空值，而undefined是沒有值。
聲明變數時如果不想賦值可以用new關鍵字+類型名字：
var carname=new String;var x= new Number;var y= new Boolean;var cars= new Array;var person= new Object;
這樣聲明出來的變數其值是null
● 對象的方法和屬性
這個對象是廣義上的對象，在js裡面，和python一樣，一切皆對象，然後對象有方法和屬性可供調用。調用方式是用符號"."。我們可以自訂對象，js中也有很多內建的對象。總而言之，對象有點像一個類，但是js中沒有類這個概念，所以我們用對象來指代這麼一種實體。下文中有些時候我可能會說類怎麼樣怎麼樣，那其實是在說對象的事情。更多內建對象的詳細方法和屬性也會在下面講到。
● 函數
js中可以定義函數
function funcName(para1,para2){ //some code}
定義函數時不必特地指出傳回值的類型，函數中用return語句來規定函數的傳回值。
js可以在函數中聲明變數，在函數中聲明的變數當然是個函數內部的局部變數。在函數外聲明的一般就是全域變數了
* 在聲明變數時，前面不加var關鍵字也可以聲明，這麼聲明的變數預設是個全域變數，整個檔案都可以訪問它。
● 運算子
js中大多數運算子都和我們所知道的經典編程中的運算子是一致的，下面我把一些我不太熟悉，看到之後覺得是js中比較特殊的運算子相關的東西寫一下：
等性運算：
js中的"=="不是經典意義上的等於。js中用==會把比較的兩個對象做一個自動的類型轉換，比如5 == "5"在js中是true因為它會把Number類型的5轉化成String類型的"5"再和右邊比較，自然對比出的結果是真。另一方面，如果不想讓它自動轉換類型，可以用"==="，三個等號在js中指完全相等。
加減運算：
和上面等性中提到的類似，js中會把和字串相加的類型自動轉化成字串再來相加，比如5 + "5"不會報錯而得到結果"55"，5 + 5得到10。
條件運算：
js中支援類似於(condition)?value1:value2這樣的三元條件運算。
邏輯運算：
js中的邏輯運算用的是經典的&& ; || ; !而不是and ; or ; not
■ 常用語句
● if/else語句
if (條件 1) { 當條件 1 為 true 時執行的代碼 }else if (條件 2) { 當條件 2 為 true 時執行的代碼 }else { 當條件 1 和 條件 2 都不為 true 時執行的代碼 }
● switch語句
switch(n){case 1: 執行代碼塊 1 break;case 2: 執行代碼塊 2 break;default: n 與 case 1 和 case 2 不同時執行的代碼}
● for迴圈
js中可以用兩種形式的for迴圈，第一種是比較經典的java和C裡面那樣的三條件陳述式的for迴圈：
for (var i=0; i<5; i++) { x=x + "The number is " + i + "<br>"; }
可以看到在第一個條件陳述式裡面我們可以進行變數的聲明，聲明出的變數可以用於這個迴圈當中
第二種形式是像python中的for/in迴圈。但是需要注意的是，js中的for/in迴圈和python中的for/in迴圈是有很大區別的。也別忘了js中的for/in是有個小括弧的。
當for/in遍曆一個Object（類似dict）的時候，和python中類似，key是代表了Object中各個key的內容：
var person={fname:"John",lname:"Doe",age:25};for (key in person) { txt=txt + person[key]; }
當用for/in遍曆一個Array的時候就不一樣了：
var list = ["a","b","c"]for (index in list){ document.write(list[index])}
這裡for/in中寫的index不是list中各個成員的內容"a","b"和"c",而是指代這個list的index 0,1和2。換句話說，js中for/in處理一個數組的時候，實際上是先擷取數組的長度，然後把這個長度從0到最後一次次賦給index，用這樣的一個index進入迴圈執行的語句。所以在訪問list中各個成員的時候，我們不是直接用index而是用list[index]
● while迴圈
js中有while迴圈和do/while迴圈兩種：
while (條件) { 需要執行的代碼 }
do/while迴圈的執行體一定被執行一遍：
do { 需要執行的代碼 }while (條件);
以上兩種，for迴圈和while迴圈都可以再迴圈體中用break語句跳出迴圈，continue語句跳過迴圈
● 異常處理
js中可以進行異常處理如：
try { //在這裡運行代碼 }catch(err) { //在這裡處理錯誤 }
在合適的地方，可以用throw語句來拋出異常：
throw "some exception message"
■ 對象的說明&內建對象
正如上面所說，對象是一個類似於別的語言中的類的一個存在。因為js中一切皆對象，包括函數和各種複雜的資料結構，所以構造一個對象時可以像下面這個函數一樣。這個函數也被稱為一個物件建構器（有點像一個類的構造方法）
function person(firstname,lastname,age,eyecolor){this.firstname=firstname;this.lastname=lastname;this.age=age;this.eyecolor=eyecolor;
function changeName(name){this.lastname=name;}this.changeName=changeName;
}
下面來詳細說明一下各個內建類型對象的屬性和方法。直屬於該種類型方法或屬性，其調用方法是類型名.屬性或方法名，下面說明中首碼是其類型名字（事實上也是實際調用時候的寫法）。如果是這種類型對象的一個執行個體的屬性或方法的話，就用類型對象首字母小寫來代表一個執行個體
● Number類型對象
屬性：
Number.MAX_VALUE js所能表示的最大數，大約是1.7976931348623157 x 10308。
Numebr.MIN_VALUE js所能表示的最小數
Number.NaN 表示一個非數字對象，在調用Number(...)初始化一個對象的時候如果失敗了就會返回這個值
Number.NEGATIVE_INFINITY 負無窮大，溢出時會返回此值
Numebr.POSITIVE_INFINITY 正無窮大，溢出時返回此值
方法：
n.toString(r) 返回數字以r進位表示的字串，比如2.toString(2)是10
n.toFixed(p) 返回數位字串，取小數點後p位
n.valueOf() 返回數字值
● String類型對象 http://www.w3school.com.cn/jsref/jsref_obj_string.asp
屬性：
s.length 返回字串的長度
方法：（String類的方法較多，可以參見上面的網址，下面列出幾個常用的）
s.indexOf(...) 檢索字串，返回找到第一個字串的位置，沒找到返回-1
s.split(sep) 以sep為分隔字元分割字串，返回得到的數組。和python的split不同的是sep是必須的，而且當sep寫""的時候不會報錯，而是把字串所有字元都分割開
s.match(pattern) 檢索字串，支援Regexpattern。返回的不是索引而是匹配到的內容，另外pattern也可以是個RegExp對象。同時match的行為和pattern的具體形式（比如帶不帶g屬性）有關，下面的RegExp對象中會詳細說到。*當寫Regex的時候不能加引號，比如match("/\d/g")是不會按照你的預期匹配數位，而應該寫match(/\d/g)，而匹配子字串的時候要加引號，如match("123")。
s.search(pattern) search方法專門用來做正則匹配，而且忽略屬性g，不管你有多少個匹配項我只返回傳現的第一個。並且返回的是索引不是內容。
s.replace(pattern,replacement) 替換指定的子字串或者正則式匹配到的內容。
此外，因為js要和瀏覽器介面互動，所以String類還有一大票修飾輸出字串的方法比如bold(),italics(),strike()（刪除線輸出）,toLowerCase(),toUpperCase(),link()（超連結樣式輸出）,fontSize(size),fontColor(color)等等。
● Date類型對象 http://www.w3school.com.cn/jsref/jsref_obj_date.asp
Date類型的屬性全部都封裝在對象裡面不允許直接調用，可以通過調用相關的方法來擷取和設定屬性。很多方法都是顧名思義的，不詳述
方法：
Date() （不需要首碼加類名或執行個體）返回當前的Date對象
d.toString() 返回時間字串，格式如Fri Apr 07 2017 17:18:47 GMT+0800
d.getTime() 返回時間戳記（毫秒為單位）
d.getDate() 返回日期 1~31
d.getMonth() 0~11
d.getDay() 0~6
d.getFullYear() 返回四位年份
d.getHours() 0~23
d.getMinutes() 0~59
d.getSeconds() 0~59
以上所有get方法都有相對應的set方法來設定一個Date類型對象的屬性的值
● Array類型對象 http://www.w3school.com.cn/jsref/jsref_obj_array.asp
屬性：
a.length 返回數組的長度
方法：
a.pop() 從數組末尾刪除並返回一個值
a.push(...) 在數組末尾加上一個值（注意，不是append哦）
a.shift() 從數組開頭刪除並返回一個值
a.unshift(...) 在數組開頭加上一個或多個值（以逗號隔開即可）
a.sort() 返回一個排序好的數組（注意和python裡不一樣，這裡是返回而不是在a本身上排序哦，reverse也是這樣）
a.join([sep]) 以sep為分隔字元串連起數群組成員，返回串連後的字串。當sep未指定時預設用逗號
a.reverse() 返回一個倒序的數組
● Math類型對象 http://www.w3school.com.cn/jsref/jsref_obj_math.asp
之前基本上沒怎麼提到過Math類型，因為與其說Math是一個類型對象，不如說它是個模組或庫。它的屬性和方法都由類直接調用：
屬性：
Math.PI 圓周率
Math.SQRT2 根號2
Math.SQRT1_2 根號1/2
Math.LN2 2的自然對數
Math.LN10 10的自然對數
方法：
Math.abs(x) 求絕對值
Math.ceil(x) 對數字x上舍入（返回比x大的最小整數）
Math.floor(x) 對x下舍入
Math.Max(x,y) 返回x和y中的大者（自然Min也有）
Math.random() 返回0~1間隨機一個實數
Math.round(x) 對x四捨五入
Math.sqrt(x) 求x方根
此外還有一大票的三角函數方法
● RegExp類型對象 http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
RegExp是Regular Expression的縮寫，即Regex。關於正則，之前也說到過了，但是這裡說的是Regex對象。就好比是python裡re.compile返回的對象一樣。
首先關於js中的Regex，其基本格式是/pattern/attribute。pattern就是個和python等裡面一樣的Regex，規則譬如.（萬用字元）{}（重複次數規定）\d（數字字元）等一樣的。而後面的attribute是js中特有的一個屬性，其可選項有i,g,m三種。
i表示ignore case，即匹配的時候忽略大小寫區別
g表示global，預設情況下，Regex總是只匹配到第一個就完了，但是設定屬性g之後，它就會把所有的都匹配出來。具體怎麼匹配請看下面具體方法的說明。
m表示multiline，具體什麼意思不知道。。
屬性：
r.ignoreCase 判斷這個正則對象是否設定了i屬性，下面兩個也是類似的。
r.global
r.multiline
r.lastIndex 和設定g屬性時匹配的方式有關，下面會講到
方法：
RegExp(pattern,attribute) 正則對象的構造方法，和String.match方法不同，這裡的pattern應該用引號引起來，attribute則是寫"g","i"這種。
r.test(str) 用正則對象匹配str，如果匹配到了內容就返回true，否則false
r.compile("new pattern","new attribute") 編譯正則對象，通常用於更新一個正則對象的運算式或屬性
r.exec(str) exec方法分成兩種情況，加入r對象沒有設定g屬性，那麼exec返回一個數組array，array[0]是第一次匹配得到的內容，array[1]，array[2]這些是這個內容裡對應Regex的第一、二子模式，以此類推。如果r對象設定了g屬性，那麼exec會返回匹配到的內容數組（如沒有設定g屬性時一樣），並且將r.lastIndex設定為當前匹配內容結束時的索引位置，然後下一次再調用exec的時候，就從這個lastIndex開始繼續匹配，如此一直匹配到尾巴上如果沒有匹配到就返回一個null並重設lastIndex為0。所以我們可以手動設定一個迴圈，讓r.exec一口氣輸出所有可匹配的內容。比如：
var str = "Visit W3School, W3School is a place to study web technology."; var patt = new RegExp("W3Sc(.*)ool","g");var result;while ((result = patt.exec(str)) != null) { document.write(result); document.write("<br />"); document.write(patt.lastIndex); document.write("<br />"); }/****結果*****W3School,h14W3School,h24*/
【JS】 Javascript 入門
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
