1. 程式人生 > >JavaScript知識點歸納之教程(二)

JavaScript知識點歸納之教程(二)

一、JavaScript作用域

在JavaScript中,作用域可作為訪問變數、物件、函式的集合。

JavaScript函式作用域:作用域在函式內修改。

全域性變數是window變數:

//這樣顯示
document.getElementById("demo").innerHTML = carName;
//和這樣顯示
document.getElementById("demo").innerHTML = window.carName;
二、事件

1.修改id元素裡面展示的內容

<p id="demo">我這裡展示時間</p>
<button onclick="getElementById('demo').innerHTML=Date()">點選展示時間</button>

2.直接在控制元件上展示內容

<button onclick="this.innerHTML=Date()">在這裡展示時間</button>

3.通過事件函式改變id元素裡面內容

<p id="demo"></p>
<button onclick="showDate()">事件函式</button>
<script>
function showDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>

4.常見的HTML事件

onchange HTML元素改變
onclick 使用者點選HTML元素
onmouseover 使用者在一個HTML元素上移動滑鼠
onmouseout 使用者從一個HTML元素上移開滑鼠
onkeydown 使用者按下鍵盤按鍵
onload 瀏覽器已完成頁面的載入

三、字串

1.可以使用索引位置來訪問字串中每一個字元。索引從0開始。

2.字串長度可以用內建屬性length來計算字串的長度

<script>
var spa = "helloworld"
document.write(spa.length);
</script>

3.使用使用(\)反斜槓來進行轉義

\' 單引號
\" 雙引號
\\ 反斜槓
\n 換行
\r 回車
\t tab(製表符)
\b 退格符
\f 換頁符
4.===是絕對相等,意思是資料型別與值必須都相等。

<p id="demo"></p>
<script>
var x = "John";              // x 是字串
var y = new String("John");  // y 是一個物件
document.getElementById("demo").innerHTML = x===y;
</script>

5.字串屬性

constructor 返回建立字串
length 返回字串長度
prototype 執行您向物件新增屬性和方法
6.字串方法

方法 描述
charAt() 返回指定索引位置的字元
charCodeAt() 返回指定索引位置字元的 Unicode 值
concat() 連線兩個或多個字串,返回連線後的字串
fromCharCode() 將 Unicode 轉換為字串
indexOf() 返回字串中檢索指定字元第一次出現的位置
lastIndexOf() 返回字串中檢索指定字元最後一次出現的位置
localeCompare() 用本地特定的順序來比較兩個字串
match() 找到一個或多個正則表示式的匹配
replace() 替換與正則表示式匹配的子串
search() 檢索與正則表示式相匹配的值
slice() 提取字串的片斷,並在新的字串中返回被提取的部分
split() 把字串分割為子字串陣列
substr() 從起始索引號提取字串中指定數目的字元
substring() 提取字串中兩個指定的索引號之間的字元
toLocaleLowerCase() 根據主機的語言環境把字串轉換為小寫,只有幾種語言(如土耳其語)具有地方特有的大小寫對映
toLocaleUpperCase() 根據主機的語言環境把字串轉換為大寫,只有幾種語言(如土耳其語)具有地方特有的大小寫對映
toLowerCase() 把字串轉換為小寫
toString() 返回字串物件值
toUpperCase() 把字串轉換為大寫
trim() 移除字串首尾空白
valueOf() 返回某個字串物件的原始值

四、運算子

1.算術運算子

(1)自增

x++和++x

如果單純執行++y和y++其結果都是一樣的,都等價於 y=y+1;如果聯合別的語句就不一樣的 如x=++y 和 x=y++是不一樣的
x=++y等價於 先執行 y=y+1 然後執行 x=y
x=y++ 等價於 先執行 x=y然後執行 y=y+1

(自創口訣:x=++y是先加後等於,x=y++是先等於後加)

<button onclick="demoFunction1()">x=y++</button>
<p id="demo1"></p>
<script>
function demoFunction1()
{
	var y1=5;
	var x1=y1++;
	var demoP=document.getElementById("demo1")
	demoP.innerHTML="x1=" + x1 + ", y1=" + y1;
}
</script>
	
<button onclick="demoFunction2()">x=++y</button>
<p id="demo2"></p>
<script>
function demoFunction2()
{
	var y2=5;
	var x2=++y2;
	var demoP=document.getElementById("demo2")
	demoP.innerHTML="x2=" + x2 + ", y2=" + y2;
}
</script>

(2)自減

(自創口訣:x=--y是先減後等於,x=y--是先等於後減)

<button onclick="demoFunction1()">x=y--</button>
<p id="demo1"></p>
<script>
function demoFunction1()
{
	var y1=5;
	var x1=y1--;
	var demoP=document.getElementById("demo1")
	demoP.innerHTML="x1=" + x1 + ", y1=" + y1;
}
</script>
	
<button onclick="demoFunction2()">x=--y</button>
<p id="demo2"></p>
<script>
function demoFunction2()
{
	var y2=5;
	var x2=--y2;
	var demoP=document.getElementById("demo2")
	demoP.innerHTML="x2=" + x2 + ", y2=" + y2;
}
</script>

2.賦值運算子

+= 先加後等於
-= 先減後等於
*= 先乘後等於
/= 先除以後等於
%= 這裡有點搞不清楚
http://www.runoob.com/try/try.php?filename=tryjs_oper_modequal
3.加法運算

兩個數字相加,返回數字相加的和。

一個數字和一個字串相加,返回字串。

<button onclick="myFunction()">點選這裡</button>
<p id="demo"></p>
<script>
function myFunction()
{
	var x=5+5;
	var y="5"+5;
	var z="Hello"+5;
	var demoP=document.getElementById("demo");
	demoP.innerHTML=x + "<br>" + y + "<br>" + z;
}
</script>

五、比較或邏輯運算子

!= 不等於
!== 不絕對等於

六、if....else if...else

if (condition1)
{
    當條件 1 為 true 時執行的程式碼
}
else if (condition2)
{
    當條件 2 為 true 時執行的程式碼
}
else
{
  當條件 1 和 條件 2 都不為 true 時執行的程式碼
}


七、迴圈
for 迴圈一定次數
for/in 迴圈遍歷物件的屬性
while 當指定條件為true時迴圈指定程式碼塊
do/while 當指定條件為true是迴圈指定程式碼塊

八、將數字、布林值、日期轉換為字串

(1)使用String()方法,例如

String(123);

(2)使用toString()方法,例如

(123).toString();


九、將字串、布林值轉換為數字

Number("99");

Number(false);//返回0

如果變數不能轉換,它仍然會是一個數字,但值為NaN(不是一個數字)


十、JavaScript正則表示式

1.字串方法

(1)使用search()方法:用於檢索字串中指定的子字串,或檢索與正則表示式相匹配的子字串,並且返回子串的起始位置。

<button onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
function myFunction() {
    var str = "Hello World!"; 
    var n = str.search(/w/i);
    document.getElementById("demo").innerHTML = n;
}
</script>

(2)replace()方法:用於在字串中用一些字串替換另一些字元,或替換一個與正則表示式匹配的子串。

<button onclick="myFunction()">點我</button>
<p id="demo">請訪問Hello!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/hello/i,"world");
    document.getElementById("demo").innerHTML = txt;
}
</script>

(3)正則表示式修飾符

修飾符 描述
i 執行對大小寫不敏感的匹配。
g 執行全域性匹配(查詢所有匹配而非在找到第一個匹配後停止)。
m 執行多行匹配。
(4)正則表示式模式,方括號用於查詢某個範圍內字元

表示式 描述
[abc] 查詢方括號之間的任何字元。
[0-9] 查詢任何從 0 至 9 的數字。
(x|y) 查詢任何以 | 分隔的選項。

元字元是擁有特殊含義的字元:

元字元 描述
\d 查詢數字。
\s 查詢空白字元。
\b 匹配單詞邊界。
\uxxxx 查詢以十六進位制數 xxxx 規定的 Unicode 字元。

量詞:

量詞 描述
n+ 匹配任何包含至少一個 n 的字串。
n* 匹配任何包含零個或多個 n 的字串。
n? 匹配任何包含零個或一個 n 的字串。
(3)使用test()方法,用於檢測一個字串是否匹配某個模式,如果字串中含有匹配的文字,則返回true,否則返回false

<script>
var patt1=new RegExp("e");
document.write(patt1.test("Hello World"));
</script>

(4)使用exec()方法,用於檢索方法字串中的正則表示式的匹配。該函式返回一個數組,其中存放匹配結果,如果未找到匹配,則返回null

<script>
var patt1=new RegExp("e");
document.write(patt1.exec("wolrd"));
</script>