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 | 換頁符 |
<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 | 執行您向物件新增屬性和方法 |
方法 | 描述 |
---|---|
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.賦值運算子
+= | 先加後等於 |
-= | 先減後等於 |
*= | 先乘後等於 |
/= | 先除以後等於 |
%= | 這裡有點搞不清楚 |
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 | 執行多行匹配。 |
表示式 | 描述 |
---|---|
[abc] | 查詢方括號之間的任何字元。 |
[0-9] | 查詢任何從 0 至 9 的數字。 |
(x|y) | 查詢任何以 | 分隔的選項。 |
元字元是擁有特殊含義的字元:
元字元 | 描述 |
---|---|
\d | 查詢數字。 |
\s | 查詢空白字元。 |
\b | 匹配單詞邊界。 |
\uxxxx | 查詢以十六進位制數 xxxx 規定的 Unicode 字元。 |
量詞:
量詞 | 描述 |
---|---|
n+ | 匹配任何包含至少一個 n 的字串。 |
n* | 匹配任何包含零個或多個 n 的字串。 |
n? | 匹配任何包含零個或一個 n 的字串。 |
<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>