Javascript上篇_ZenDei技術網路在線

本文章適合具有一定程式編程語言基礎的人士閱讀，最好學完Java基礎再來閱讀本文章更容易理解語言初學者會看起來比較費勁，不易理解一.導入腳本在html導入Javascript的格式是：兩個關鍵屬性：deter,async deter:defer屬性告訴瀏覽器要等整個頁面載入以後、解析完畢才執行該 ...

本文章適合具有一定程式編程語言基礎的人士閱讀，最好學完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>