Javascript上篇
本文章適合具有一定程序編程語言基礎的人士閱讀，最好學完Java基礎再來閱讀本文章更容易理解語言初學者會看起來比較費勁，不易理解
一.導入腳本
在html導入Javascript的格式是：
<script src="test.js" type="text/javascript"></script>
兩個關鍵屬性：deter,async
deter:defer屬性告訴瀏覽器要等整個頁面載入以後、解析完畢才執行該<script.../>中的腳本。
async:指定async屬性的的<script.../>的腳本會啟動新的線程，異步執行<script.../>導入的腳本文件
語法格式如下：
<script src="test.js" type="text/javascript" defer async></script>
二.數據類型和變量
隱式定義：直接給變量賦值
顯示定義：使用var關鍵字定義變量。顯式聲明變量時，變量沒有初始值，聲明變量的數據類型也不確定，當第一次給變量賦值時，數據類型才確定下來。
變量的作用域：
全局變量：在全局範圍（不在函數內）定義的變量（不管是否使用var）,不是用var定義的變量都是全局變量，全局變量可以被所有的腳本訪問。
局部變量：在函數裏定義，只在函數裏有效
實例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件處理中全局變量和局部變量</title> <script type="text/javascript"> var x="全局變量"; </script> </head> <body> <input type="button" value="局部變量" onclick="var x = ‘局部變量‘; alert(‘輸出x變量的值 ‘+x);"/> <input type="button" value="全局變量" onclick="alert(‘輸出x全局變量的值 ‘+x)"/> </body> </html>
javascript的變量提升機制：所謂變量提升就是不管被不被執行，變量聲明總是會被解釋器提升到函數體頂部。
使用let變量和使用const定義常量
使用let定義的全局變量不會變成window對象的屬性，也不會出現變量提升的情況，彌補了var的缺陷
使用const定義的常量只能在定義時初始化。使用const定義常量以後不允許改變常量值。
基本數據類型
數值類型：包括整型和浮點數，支持科學記數法
布爾類型：只有true和false兩個值
字符串類型：字符串類型必須用雙引號或單引號引起來
undefined類型：專門用來確定一個已經創建但是沒有初值的變量
null類型：表示某個變量的值為空，很多時候，undefined和null相等
三.正則表達式
新建正則表達式
方式一：直接量語法
var reg = /pattern/attributes
方式二：創建 RegExp 對象的語法
var reg = new RegExp(pattern, attributes);
參數說明：
參數 pattern 是一個字符串，指定了正則表達式的模式或其他正則表達式。
參數 attributes 是一個可選的字符串，包含屬性 “g”、”i” 和 “m”，分別用於指定全局匹配、區分大小寫的匹配和多行匹配。ECMAScript 標準化之前，不支持 m 屬性。如果 pattern 是正則表達式，而不是字符串，則必須省略該參數。
兩者區別在於：
1.采用直接量語法新建的正則表達式對象在代碼編譯時就會生成，是平常開發中常用的方式；
2.采用構造函數生成的正則對象要在代碼運行時生成。
正則表達式使用：
正則對象的方法是指這樣使用的： RegExp對象.方法(字符串)
字符串對象的方法是這樣使用：字符串.方法(RegExp對象)
正則對象的屬性和方法
屬性
ignoreCase 返回布爾值，表示RegExp 對象是否具有標誌 i
global 返回布爾值，表示RegExp對象是否具有標誌g
multiline 返回布爾值，表示RegExp 對象是否具有標誌 m。
lastIndex 一個整數，標識開始下一次匹配的字符位置
source 返回正則表達式的源文本（不包括反斜杠）
i 執行對大小寫不敏感的匹配
g 執行全局匹配（查找所有匹配而非在找到第一個匹配後停止）。
m 執行多行匹配
正則表達式作用
通常用於兩種任務：
1.驗證
用於驗證時，通常需要在前後分別加上^和$，以匹配整個待驗證字符串；
2.搜索替換
搜索/替換時是否加上此限定則根據搜索的要求而定，此外，也有可能要在前後加上\b而不是^和$
字符類匹配
[…] 查找方括號之間的任何字符
[^…] 查找任何不在方括號之間的字符
[a-z] 查找任何從小寫 a 到小寫 z 的字符
[A-Z] 查找任何從大寫 A 到大寫 Z 的字符
[A-z] 查找任何從大寫 A 到小寫 z 的字符
. 查找單個字符，除了換行和行結束符
\w 查找單詞字符，等價於[a-zA-Z0-9]
\W 查找非單詞字符，等價於[^a-zA-Z0-9]
\s 查找空白字符
\S 查找非空白字符
\d 查找數字，等價於[0-9]
\D 查找非數字字符，等價於[^0-9]
\b 匹配單詞邊界
\r 查找回車符
\t 查找制表符
\0 查找 NULL 字符
\n 查找換行符
重復字符匹配
{n,m} 匹配前一項至少n次，但不能超過m次
{n,} 匹配前一項n次或更多次
{n} 匹配前一項n次
n？ 匹配前一項0次或者1次，也就是說前一項是可選的，等價於{0，1}
n+ 匹配前一項1次或多次，等價於{1，}
n* 匹配前一項0次或多次，等價於{0，}
n$ 匹配任何結尾為 n 的字符串
^n 匹配任何開頭為 n 的字符串
?=n 匹配任何其後緊接指定字符串 n 的字符串
?!n 匹配任何其後沒有緊接指定字符串 n 的字符串
匹配特定數字
^[1-9]\d*$ 匹配正整數
^-[1-9]\d*$ 匹配負整數
^-?[0-9]\d*$ 匹配整數
^[1-9]\d*|0$ 匹配非負整數（正整數 + 0）
^-[1-9]\d*|0$ 匹配非正整數（負整數 + 0）
^[1-9]\d*.\d*|0.\d*[1-9]\d*$ 匹配正浮點數
^-([1-9]\d*.\d*|0.\d*[1-9]\d*)$ 匹配負浮點數
^-?([1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0)$ 匹配浮點數
^[1-9]\d*.\d*|0.\d*[1-9]\d*|0?.0+|0$ 匹配非負浮點數（正浮點數 + 0）
^(-([1-9]\d*.\d*|0.\d*[1-9]\d*))|0?.0+|0$ 匹配非正浮點數（負浮點數 + 0）
匹配特定字符串
^[A-Za-z]+$ 匹配由26個英文字母組成的字符串
^[A-Z]+$ 匹配由26個英文字母的大寫組成的字符串
^[a-z]+$ 匹配由26個英文字母的小寫組成的字符串
^[A-Za-z0-9]+$ 匹配由數字和26個英文字母組成的字符串
^\w+$ 匹配由數字、26個英文字母或者下劃線組成的字符串
方法
test方法
檢索字符串中指定的值。返回 true 或 false。
如果字符串 string 中含有與 RegExpObject 匹配的文本，則返回 true，否則返回 false。
示例：
<script type="text/javascript"> alert(/^<a href=(\‘|\")[a-zA-Z0-9\/:\.]*(\‘|\")>.*<\/a>$/.test("<a href=‘http://www.crazyit.org‘>瘋狂Java聯盟</a>")); function trim(s){ return s.replace(/(^\s*)|(\s*$)/g,""); } alert(trim(‘ hello,JavaScript ‘)); </script>
四.數組
數組是一系列的變量，有以下三個特征：
1）Javascript的數組長度可變，數組長度總等於所有元素索引最大值加1.
2）同一個數組中的元素類型可以互不相同
3）訪問數組元素時不會產生數組越界，訪問並未賦值的數組元素時，該元素的值為undefined。
Javascript數組棧使用的兩個方法如下：
push():元素入棧，返回入棧後數組的長度
pop():元素出棧，返回出棧的數組元素
JavaScript數組作為隊列使用的兩個方法如下：
unshift(ele):元素入隊列，返回入隊列後的數組的長度
shift():元素出隊列，返回出隊列的數組元素
arrays對象還定義了如下方法：
concat(value,...)：為數組添加一個或多個元素，返回追加元素後的數組。
join([separator]):將數組的多個元素拼接在一起，組成字符串後返回
示例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>數組</title> <script type="text/javascript" defer async> var stack = [] ; stack.push("孫悟空"); stack.push("豬八戒"); stack.push("白骨精"); arrays=stack.concat("人","動物"); function demo1(){ for(let i=0;i<arrays.length;i++){ alert(arrays[i]); } return 0; }; demo1(); var queue = []; queue.unshift("瘋狂Java講義"); queue.unshift("輕量級JavaEE企業應用實戰"); queue.unshift("Java前端開發講義"); console.log(queue.shift()); console.log(queue.shift()); </script> </head> <body> </body> </html>
五.函數
函數的語法格式如下：
function functionName(param1,param2){
}
六.運算符
Javascript支持的運算符與java非常類似，還有一些獨特用法的運算符：
1）逗號運算符。逗號運算符允許多個表達式排在一起，整個表達式返回最右邊表達式的值
<script type="text/javascript"> var a,b,c,d; a = (b = 5,c = 8,d = 56); document.write(‘a=‘+a+‘ b=‘+b+" c="+c+‘ d=‘+d); </script>
輸出：a=56 b=5 c=8 d=56
2）void運算符，用於強行指定表達式不會發揮值，如
a = void(b = 5,c = 8,d = 56);
輸出a的值等於undefined
3)typeof和instanceof運算符。typeof用於判斷某個變量的數據類型，也可作為函數使用。instanceof用於返回某個變量是否為指定類的實例。
七.語句
異常拋出語句
Javascript所有的異常都是error對象，語法格式
throw new Error(errorString);
看如下實例：
<script type="text/javascript"> for(let i = 0 ; i < 10 ; i++){ document.writeln(i+"<br/>"); if( i > 4 ) throw new Error(‘用戶自定義錯誤‘); } </script>
異常捕捉語句，語法格式如下：
try
{
staments
}
catch(e)
{
staments
}
finally
{
staments
}
Javascript是弱類型語言，所以try塊後面只有一個catch塊。
with語句
with語句的主要作用是避免重復書寫同一個對象：實例如下：
<script> document.writeln(‘Hello<br/>‘); document,writeln(‘HelloWorld<br/>‘); document.writeln(‘javascript<br/>‘); //上面語句等同於 with(document) { writeln(‘Hello<br/>‘); writeln(‘HelloWorld<br/>‘); writeln(‘javascript<br/>‘); } </script>
for-in循環語句
<script> for(element in elements){ staments } </script>
Javascript上篇