JavaScript的函式,事件(常用事件,事件物件),內建物件(字串,陣列,Date,Nath)超超超級詳解!!!
阿新 • • 發佈：2021-01-26
技術標籤：前端Web字串javascriptjs
文章目錄
函式
函式的概念
1.函式是定義一次但卻可以呼叫任意多次的一段完成某種特定功能的JS程式碼;
2.函式的語句是一個獨立的部分,它不會在外部指令碼執行時被執行,而只是作為函式的定義而存在,只有呼叫它時才執行;
3.函式呼叫指通過函式名來使用這段程式碼;
4.函式在定義以後可以被重複呼叫,以此通常將常用的功能寫成一個函式.
定義函式
函式定義的基本語法
function functionName([arguments]){
javascript statements;
[return expression;]
}
function: 表示函式定義的關鍵字;
functionName: 表示函式名;
arguments: 表示傳遞給函式的引數列表,各個引數之間用逗號隔開,可以為空;
statements: 表示實現函式功能的函式體;
return expression: 表示函式將返回expression的值,可選.
//定義簡單的函式
function fun(){
alert("函式體");
}
函式呼叫
1.由函式來呼叫
<script type="text/javascript">
function fun1(){
alert("test");
}
fun1();//函式名呼叫
function fun2(){
fun1();//在其它函式中呼叫
alert("fun2");
}
</script>
2.事件驅動
function fun(){
alert("test");
}
....
<body>
<input onclick="fun()" value= 程式碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js_2</title>
<script type="text/javascript">
function fun1(){
alert("fun1");
}
function fun2(){
fun1();
alert("fun2");
}
</script>
</head>
<body>
<input type="button" value="按鈕" onclick="fun2()" />
</body>
</html>
變數的作用域
1.全域性變數:在函式外部定義的變數,它在聲明後,任何程式段都可用.
2.區域性變數:在函式內部定義的變數,作用範圍為函式內部.
<script type="text/javascript">
var str = "全域性變數";
function test(){
var str = "區域性變數";
alert(str);
}
alert(str);
test();
</script>
全域性函式
1.parseInt(arg): 把括號內的內容轉換成整數之後的值, 如果括號內為字串, 則字串開頭的數字部分轉換成整數, 如果以字母開頭, 則反回"NAN"即not a number.
var x = 10;
var y = "20";
var z = "30as3";
var t = "a30";
console.log(x+y);//1020
console.log(x+parseInt(y));//30 括號內為字串,把括號內的內容轉換成整數之後的值
console.log(x+parseInt(z));//40 如果括號內為字串, 則字串開頭的數字部分轉換成整數,
console.log(x+parseInt(t));//NAN 如果以字母開頭, 則反回"NAN"
2.parseFloat(arg): 把括號內的字串轉換成浮點數之後的值,字串開頭的數字部分被轉換成浮點數,如果以字母開頭,則返回"NAN".
var x = 10;
var y = "20.111";
var z = "30.123as3";
var t = "a30.12";
console.log(x+y);//1020.111
console.log(x+parseFloat(y));//30.111
console.log(x+parseFloat(z));//40.123000000000005
console.log(x+parseFloat(t));//NAN
3.typeof(arg): 返回arg值的資料型別.
var date = new Date();
console.log(typeof(date));//Object
4.eval(arg): 可運算某個字串.
var x = 10;
var y = "20.111";
var z = "1+x+y";
console.log(eval(z));//1120.111
事件
常用事件
| 事件 | 事件描述 |
|---|---|
| onclick | 滑鼠點選事件 |
| ondblclick | 滑鼠雙擊時 |
| onfocus | 標籤獲得獲得焦點 |
| onblur | 標籤失去焦點 |
| onmouseover | 滑鼠被移到某標籤之上 |
| onmouseout | 滑鼠從某標籤移開 |
| onload | 當網頁內容載入完畢觸發,一般載入body |
| onchange | 當前標籤失去焦點並且標籤的內容發生改變時觸發事件處理程式 |
| onkeydown | 鍵盤按下 |
| onkeyup | 鍵盤抬起 |
程式碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js_5</title>
<script type="text/javascript">
function fun(){
console.log("函式被執行");
}
</script>
</head>
<body onload="fun()">
<!-- onclick():滑鼠點選 -->
<input type="button" value="按鈕" onclick="fun()" />
<hr />
<!-- ondblclick:滑鼠雙擊鍵 -->
<input type="button" value="按鈕" ondblclick="fun()" />
<hr />
<!-- onfocus:滑鼠獲得焦點 onblur:滑鼠失去焦點-->
<input type="text" onfocus="fun()" onblur="fun()" />
<hr />
<!-- onmouseover:滑鼠被移到某標籤上 onmouseout:滑鼠從某標籤移開 -->
<div style="background-color: aqua;" onmouseover="fun()" onmouseout="fun()">標籤</div>
<hr />
<!-- onchange: 是指當前標籤內容發生改變且失去焦點時觸發 -->
<input type="text" value="123" onchange="fun()" />
<hr />
<!-- onkeydown:鍵盤按下 onkeyup:鍵盤抬起 -->
<input type="text" onkeydown="fun()" onkeyup="fun()" />
</body>
</html>
Event物件(事件物件)
Event物件代表事件的狀態, 比如鍵盤按鍵的鍵位、滑鼠的位置.
| 事件型別 | 事件型別 |
|---|---|
| Button | 被點選的滑鼠鍵位, 0-左鍵 1-滾輪 2-右鍵 |
| altKey | 按下alt鍵返回true |
| ctrlKey | 按下ctrl鍵返回true |
| shiftKey | 按下shift鍵返回true |
| keyCode | 返回被按下的鍵位編碼 |
| offsetX | 當前標籤內的滑鼠X軸 |
| offsetY | 當前鍵盤內的滑鼠Y軸 |
| clientX | 滑鼠在瀏覽器內部X軸 |
| clientY | 滑鼠在瀏覽器內部Y軸 |
| screenX | 滑鼠在顯示器內的X軸 |
| screenY | 滑鼠在顯示器內的Y軸 |
程式碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js_6</title>
<script type="text/javascript">
function fun(e){//e 就是事件物件
console.log(e); //事件型別
console.log(e.button); //0-左鍵 1-滾輪 2-右鍵
console.log(e.keyCode);
console.log(e.ctrlKey+":"+e.keyCode==true);
console.log(e.offsetX+":"+e.offsetY);//獲得滑鼠在標籤內的位置
console.log(e.clientX+":"+e.clientY);//獲得滑鼠在瀏覽器內位置
console.log(e.screenX+":"+e.screenY);//滑鼠在顯示器內的位置
}
</script>
</head>
<body>
<input type="button" value="按鈕" onclick="fun(event)" />
<hr />
<input type="txt" onkeyup="fun(event)" />
<hr />
<div style="background-color: aqua; width: 200px;height: 200px;" onclick="fun(event)">
</div>
</body>
</html>
內建物件
String字串
1.屬性: length 返回該字串的長度
2.方法
(1)charAt(n) : 返回索引值為n的字元;
(2)indexOf(char) : 返回指定字元首次出現位置 ;
(3)lastIndexOf(char) : 跟indexOf()一樣,只是從後面開始找;
(4)substring(strat,end) : 返回原字串的子串, 從start開始到end結束;
(5)substr(start,length) : 返回原字串子串, 從start開始長度為length;
(6)toLowerCase():返回原字串,所有大寫字母全變成小寫;
(7)toUppeerCase():返回原字串子串,所有小寫字母變成大寫;
(8)split(分隔符字元):返回一個數組，該陣列是從字串物件中分離開來的.
程式碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js_7</title>
<script type="text/javascript">
var str1 = "asdfghjk";
//length:返回字串長度
console.log(str1.length);//8
//charAt(n):返回索引值為n的字元
console.log(str1.charAt(4));//g
//indexOf(char) : 返回指定字元首次出現位置
console.log(str1.indexOf('d'));//2
//lastIndexOf(char) : 跟indexOf()一樣,只是從後面開始找
console.log(str1.lastIndexOf('k'));//7
//substring(strat,end) : 返回原字串的子串, 從start開始到end結束;
console.log(str1.substring(2,5));//dfg
//substr(start,length) : 返回原字串子串, 從start開始長度為length
console.log(str1.substr(2,4));//dfgh
//toLowerCase():返回原字串,所有大寫字母全變成小寫
var str2 = "asqwAFWDafadw"
console.log(str2.toLowerCase());
//toUppeerCase():返回原字串子串,所有小寫字母變成大寫
console.log(str2.toUpperCase());
//split(分隔符字元):返回一個數組，該陣列是從字串物件中分離開來的，
//<分隔符字元>決定了分離的地方,它本身不會包含在所返回的陣列中。
var str3 = "adq&dq&JIOkda&qwd";
console.log(str3.split('&'));//["adq", "dq", "JIOkda", "qwd"]
</script>
</head>
<body>
</body>
</html>
Array陣列
建立
建立陣列物件,長度不用給定,可以放置任意型別.
陣列定義方法1
var <陣列名> = new Array();
新增陣列元素:<陣列名>[下標] = 值;
陣列定義方法2:在定義陣列時直接初識化資料
var <陣列名> = new Array(<元素1>,<元素2>,<元素3>...);
或
var <陣列名> = [<元素1>,<元素2>,<元素3>...]
程式碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>內建物件_陣列</title>
<script type="text/javascript">
var arr = new Array();
arr[0]=1;
arr[1]="abc";
arr[2]=true;
console.log(arr);
var arr1 = new Array(1,"qwe",true,new Date());
console.log(arr1);
var arr2 = [1,"qsd",new Date()];
for(var i=1;i<arr2.length;i++){
console.log(arr2[i]);
}
</script>
</head>
<body>
</body>
</html>
使用
1.屬性: length 陣列的長度,即數組裡有多少個元素
2.方法
concat() 用於連線兩個或多個數組;
pop() 用於刪除並返回陣列的最後一個元素;
push() 可向陣列的末尾新增一個或多個元素，並返回新的長度;
shift() 用於把陣列的第一個元素從其中刪除，並返回第一個元素的值;
slice() 可從已有的陣列中返回選定的元素,不會改變原陣列;
splice() 從陣列中新增/刪除專案，然後返回被刪除的專案,該方法會改變原始陣列,splice(index,many(為0不刪除),item1,.....,itemX(插入的元素));
join(<分隔符>) ：返回一個字串，該字串把陣列中的各個元素串起來，用<分隔符>置於元素與元素之間;
reverse() 使陣列中的元素順序反過來;
sort() ：使陣列中的元素按照一定的順序排列。對數字排序需要呼叫排序函式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js_8</title>
<script type="text/javascript">
var arr = [1,2,3,4,5,"asd","qwe",true,false]
var arr1 = [4,5,6,7,8]
//length 求陣列長度
console.log(arr.length);//9
//concat() 用於連線兩個或多個數組;
console.log(arr.concat(arr1).length);//14
//pop() 用於刪除並返回陣列的最後一個元素;
console.log(arr.pop());//false
//push() 可向陣列的末尾新增一個或多個元素，並返回新的長度。
console.log(arr.push('a','b','c'));//11
//shift() 用於把陣列的第一個元素從其中刪除，並返回第一個元素的值;
console.log(arr.shift());//1
//slice(a,b) 可從已有的陣列中返回選定的元素,不會改變原陣列,a必須,b可選。
console.log(arr.slice(3,4));//5
//splice() 從陣列中新增/刪除專案，然後返回被刪除的專案,該方法會改變原始陣列;
console.log(arr.splice(2,5),"插","入","的")
//join(<分隔符>):返回一個字串，該字串把陣列中的各個元素串起來，用<分隔符>置於元素與元素之間。
console.log(arr.join('+'));//2+3+a+b+c
//reverse() 使陣列中的元素順序反過來;
console.log(arr1.reverse());//[8, 7, 6, 5, 4]
//sort() 使陣列中的元素按照一定的順序排列。對數字排序需要呼叫排序函式。
var w = ['d','y','n','w','a'];
console.log(w.sort());//["a", "d", "n", "w", "y"]
var z = [12,1,43,2,3];
function sortNum(a,b){
return a-b;
}
console.log(z.sort(sortNum));//[1, 2, 3, 12, 43]
</script>
</head>
<body>
</body>
</html>
Date
獲取日期
new Date() 返回當日的日期和時間
getFullYear() 返回四位數字年份
getDate() 返回一個月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一週中的某一天 (0 ~ 6)
getHours() 返回 Date 物件的小時 (0 ~ 23)
getMinutes() 返回 Date 物件的分鐘 (0 ~ 59)
getSeconds() 返回 Date 物件的秒數 (0 ~ 59))
程式碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js_9</title>
<script type="text/javascript">
/*
new Date() 返回當日的日期和時間
getFullYear() 返回四位數字年份
getDate() 返回一個月中的某一天 (1 ~ 31)
getMonth() 返回月份 (0 ~ 11)
getDay() 返回一週中的某一天 (0 ~ 6)
getHours() 返回 Date 物件的小時 (0 ~ 23)
getMinutes() 返回 Date 物件的分鐘 (0 ~ 59)
getSeconds() 返回 Date 物件的秒數 (0 ~ 59))
*/
var date =new Date();
console.log(date);
console.log(date.getFullYear());//2021
console.log(date.getDate());//25
console.log(date.getMonth());//0
console.log(date.getDay());//1
console.log(date.getHours());//2
console.log(date.getMinutes());//17
console.log(date.getSeconds());//28
</script>
</head>
<body>
</body>
</html>
設定日期
setDate() 設定 Date 物件中月的某一天 (1 ~ 31))
setMonth() 設定 Date 物件中月份 (0 ~ 11))
setYear() 設定 Date 物件中的年份（兩位或四位數字）
程式碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js_10</title>
<script type="text/javascript">
var date = new Date();
// setDate() 設定 Date 物件中月的某一天 (1 ~ 31))
console.log(date.setDate(1));
// setMonth() 設定 Date 物件中月份 (0 ~ 11))
console.log(date.setMonth(1));
// setYear() 設定 Date 物件中的年份（兩位或四位數字）
console.log(date.setYear(2021));
</script>
</head>
<body>
</body>
</html>
Math
Math物件,提供對資料的數學計算
1.屬性:PI返回π(3.1415926535…)
2.方法
Math.abs(x) 絕對值計算；
Math.pow(x,y) 數的冪；x的y次冪
Math.sqrt(x) 計算平方根；
Math.ceil(x) 對一個數進行上舍入
Math.floor(x) 對一個數進行下舍入。
Math.round(x) 把一個數四捨五入為最接近的整數
Math.random() 返回 0 ~ 1 之間的隨機數
Math.max(x,y) 返回 x 和 y 中的最大值
Math.min(x,y) 返回 x 和 y 中的最小值
程式碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js_11</title>
<script type="text/javascript">
var a = -11;
var b = 10;
// Math.abs(x) 絕對值計算；
console.log(Math.abs(a));//11
// Math.pow(x,y) 數的冪；x的y次冪
console.log(Math.pow(b,2));//100
// Math.sqrt(x) 計算平方根；
console.log(Math.sqrt(b));//3.1622776601683795
// Math.ceil(x) 對一個數進行上舍入
var x = 30.98123
console.log(Math.ceil(x));//31
// Math.floor(x) 對一個數進行下舍入。
console.log(Math.floor(x));//30
// Math.round(x) 把一個數四捨五入為最接近的整數
console.log(Math.round(Math.PI));//3
// Math.random() 返回 0 ~ 1 之間的隨機數
console.log(Math.random());//0.24310217792555688
// Math.max(x,y) 返回 x 和 y 中的最大值
console.log(Math.max(a,b));//10
// Math.min(x,y) 返回 x 和 y 中的最小值
console.log(Math.min(b,x));//10
</script>
</head>
<body>
</body>
</html>