JavaScript02
8.JavaScript函式
-
JavaScript函式介紹
函式是由事件驅動的，或者當它被呼叫時，執行的可重復使用的代碼
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函式快速入門</title>
<script type="text/javascript">
//定義一個簡單的函式
//如果不呼叫函式，該函式不會執行
//在js中如果要執行函式，有兩種方式：1.主動呼叫 2.通過一個事件去觸發該函式
function hi() {
alert("hi~~~");
}
//hi();主動呼叫
</script>
</head>
<body>
<!--
這里表示給按鈕button系結了一個onclick事件，
當用戶點擊了該button，就會觸發hi()函式
-->
<button onclick="hi()">點擊這里</button>
</body>
</html>
8.1JS函式的定義方式
方式一：function關鍵字來定義函式
基本語法：
function 函式名(形參串列){
函式體
return 運算式
}
//呼叫 函式名(實參串列);
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函式使用方式1</title>
<script type="text/javascript">
//1.定義沒有回傳值的函式
function f1() {
alert("f1被呼叫")
}
f1();//f1被呼叫
//2.定義有形參的函式
//這里的形參不需要指定型別,name的資料型別是由實參決定的
function f2(name) {
alert("hi" + name);
}
f2("你好嗎？");//hi你好嗎？
f2(800);//hi800
//3.定義有形參和回傳值的函式,不需要指定回傳的型別，回傳型別由回傳的資料來決定
function f3(n1, n2) {
return n1 + n2;
}
alert("f3(\"hi\",200)="+f3("hi",200));//f3("hi",200)=hi200
</script>
</head>
<body>
</body>
</html>
方式二：將函式賦給變數
基本語法：
var 函式名=fuction(形參串列){
函式體
return 運算式
}
//呼叫 函式名(實參串列);
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用函式的第二種方式</title>
<script type="text/javascript">
//可以理解成f1指向了函式
var f1 = function () {
alert("老師你好");
}
console.log(typeof f1);//f1的資料型別是 function
f1();//呼叫函式-老師你好
var f3 = f1;//將f1指向的函式賦給其他變數
f3();//老師你好
var f2 = function (name) {
alert("hi" + name);
}
f2("小紅帽");//hi小紅帽
var f4 = function (n1, n2) {
return n1 + n2;
}
alert(f4(100, 50));//150
</script>
</head>
<body>
</body>
</html>
8.2JS函式注意事項和細節
- JS中函式的多載會覆寫掉上一次的定義
- 函式的arguments隱形引數(作用域在fuction函式內)，隱形引數是一個物件陣列
- 隱形引數：在function函式中不需要定義，可以直接用來獲取所有引數的變數
- 隱形引數特別像java的可變引數一樣 public void fun(int ...args)，操作類似陣列
- 如果函式有形參，在傳入實參的時候，仍然按照順序匹配，如果實參個數大于形參個數，就將匹配上的數賦給形參，忽略沒有匹配上的實參，但是仍然會把所有的實參都賦給arguments
- 如果形參個數大于實參個數，沒有匹配的形參的值就是undefined
例子1：JS中函式的多載會覆寫掉上一次的定義
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函式使用的注意事項</title>
<script type="text/javascript">
//1.1js中函式的多載會覆寫掉上一次的定義
function f1() {
alert("ok f1")
}
function f1(name) {
alert("hi " + name);
}
//1.2當呼叫方法f1()的時候，實際上呼叫的是f1(name)方法
//呼叫f1(name)時，如果沒有傳入實參，那么這個形參name就是undefined
f1();//hi undefined
</script>
</head>
<body>
</body>
</html>
例子2：隱形引數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函式使用的注意事項</title>
<script type="text/javascript">
function f2() {//隱形引數是一個物件陣列
//遍歷函式的arguments隱形引數
//arguments是一個陣列
//注意：如果希望通過console.log輸出物件的資料，使用逗號,來連接，而不是加號+
console.log("arguments=", arguments);//arguments=Arguments { 0: 10, 1: 20, 2: "50", 3: "nihao", … }
console.log("arguments長度=", arguments.length);//arguments長度= 4
}
f2(10, 20, "50", "nihao");
//如果函式有形參，在傳入實參的時候，仍然按照順序匹配
//如果實參個數>形參個數，就就將匹配上的數賦給形參，忽略沒有匹配上的實參
//但是仍然會把所有的實參都賦給arguments
function f3(n) {
console.log("n=", n)//n= 100
console.log("arguments=", arguments)//arguments=Arguments { 0: 100, 1: 300, 2: 788, … }
}
f3(100, 300, 788);
//如果形參個數大于實參個數，沒有匹配的形參的值就是undefined
function f4(a, b, c, d) {
console.log("d=", d);//d= undefined
}
f4(100, 200, 300);
</script>
</head>
<body>
</body>
</html>
- 練習
- 要求：撰寫一個函式，用于計算所有引數相加的和并回傳，如過實參不是number就過濾掉
- 提示使用typeof來判斷引數型別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//撰寫一個函式，用于計算所有引數相加的和并回傳，如過實參不是number就過濾掉
function sum() {
var res = 0;
for (i = 0; i < arguments.length; i++) {
if (typeof arguments[i] == "number") {//注意arguments陣列放的是物件
res += arguments[i];
}
}
alert("引數相加的和=" + res);
}
sum(100, "nihao", 500, null, 200, undefined);
</script>
</head>
<body>
</body>
</html>
9.JS自定義物件
- 自定義物件方式1：Object形式
- 物件的定義
var 物件名=new Object();//物件實體（空物件）
物件名.屬性名=值;//定義一個屬性
物件名.函式名=function(){}//定義一個函式
- 物件訪問
物件名.屬性
物件名.函式名();
如果一個屬性沒有定義賦值就直接使用，該屬性值就是undefined（變數提升）
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義物件</title>
<script type="text/javascript">
//自定義物件的方式
//person是一個空物件，沒有自定義的函式和屬性
var person = new Object();
console.log(typeof person);//object
//增加一個屬性name
person.name = "老虎";
person.age = 35;
//增加一個方法
person.say = function () {
//這里的this就是當前的person
console.log("person="+this.name+" "+this.age);
}
//呼叫
person.say();//person=老虎 35
//如果一個屬性沒有定義賦值就直接使用，該屬性值就是undefined
console.log(person.email);//undefined
</script>
</head>
<body>
</body>
</html>
- 自定義物件方式2：{}形式
- 物件的定義
var 物件名={////多個屬性和方法之間都要用逗號隔開
屬性名:值,//定義屬性
屬性名:值,//定義屬性，注意后面有逗號,
函式名:function(){}//定義函式
};
- 物件訪問
物件名.屬性
物件名.函式名();
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義物件方式2：{}形式</title>
<script type="text/javascript">
//演示自定義物件方式2：{}形式
var person = {//多個屬性和方法之間都要用逗號隔開
name: "孫悟空",
age: 999,
hi: function () {
console.log("person資訊=" + this.name + " " + this.age);
},
sum: function () {}
};
//使用
console.log("外部訪問 name=" + person.name);
console.log("外部訪問 age=" + person.age);
person.hi();
</script>
</head>
<body>
</body>
</html>
10.事件
JavaScript 事件 (w3school.com.cn)
10.1事件介紹
什么是事件？事件是電腦輸入設備與頁面進行互動的回應，我們稱之為事件，
HTML 事件可以是瀏覽器行為，也可以是用戶行為，
HTML 事件是發生在 HTML 元素上的“事情”，
當在 HTML 頁面中使用 JavaScript 時，JavaScript 能夠“應對”這些事件，
-
事件一覽表
https://www.w3school.com.cn/jsref/dom_obj_event.asp
10.2事件的分類
-
事件的注冊（系結）
事件注冊（系結）：當事件回應（觸發）后要瀏覽器執行哪些操作代碼，叫事件注冊或事件系結
-
靜態注冊事件
通過html標簽的事件屬性直接賦于事件回應后的代碼，這種方式叫做靜態注冊
-
動態注冊事件
通過js代碼得到標簽的dom物件，然后再通過dom物件.事件名=function(){}，這種方式叫做動態注冊
js編程可以將瀏覽器整個頁面的所有組件都映射成dom物件
- 動態注冊事件步驟
- 獲取標簽物件/dom物件
- dom物件.事件名=function(){}
10.3常用事件
10.3.1onload加載完成事件
onload：某個頁面或影像被完成加載
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload加載完成事件</title>
<script type="text/javascript">
//定義函式
// function sayOK() {
// alert("靜態注冊 onl oad 事件sayOK");
// }
//1.在js中，將頁面視窗映射成window dom物件
//2.window物件有很多的屬性和函式，可以使用
//3.window.onload表示頁面被加載完畢
//4.后面的function(){}表示頁面加載完畢后，要執行的函式/代碼
window.onload = function () {
alert("動態注冊 onl oad 事件");
}
</script>
</head>
<body>
hello~~~
<input type="text" value="https://www.cnblogs.com/liyuelian/archive/2022/10/31/測驗"/>
</body>
</html>
10.3.2onclick點擊事件
onclick：滑鼠點擊某個物件
動態注冊 onclick 事件
- 先拿到id=btn01的button對應的dom物件
- 通過dom物件動態系結onclick事件
- 通過document的getElementById方法來獲取對應的dom物件
注意：要獲取某個標簽的dom物件，就應該先加載完畢該標簽后再獲取，
一般使用window.onload讓整個頁面加載完畢后再動態注冊
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick 單擊事件</title>
<script type="text/javascript">
function sayOK() {
alert("你點擊了sayOK按鈕");
}
//當頁面加載完畢之后，我們再進行動態注冊
window.onload = function () {//因此想要成功獲取button的dom物件，就應該讓button加載完畢再獲取，
//動態注冊 onclick 事件
//1.先拿到id=btn01的button對應的dom物件
//2.通過dom物件動態系結onclick事件
//3.通過document的getElementById方法來獲取對應的dom物件
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
alert("你點擊了sayHi按鈕");
}
}
</script>
</head>
<body>
<!--靜態注冊-->
<button onclick="sayOK()">sayOK按鈕</button>
<!--動態注冊-->
<button id="btn01">sayHi按鈕</button>
</body>
</html>
10.3.3onblur失去焦點事件
onblur 事件會在物件失去焦點時發生，
onblur 經常用于Javascript驗證代碼，一般用于表單輸入框，
例子
創建兩個輸入框，分別使用靜態注冊和動態注冊的方法，將輸入框中的小寫英文變為大寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblur 失去焦點事件</title>
<script type="text/javascript">
//靜態系結
function upperCase() {
//1.先得到fname輸入框的value值-->得到對應的dom物件
//因為靜態系結是通過html標簽的事件屬性直接賦于事件回應后的代碼，
// 本身就是默認的頁面加載完畢再執行的
var fname = document.getElementById("fname");
fname.value = https://www.cnblogs.com/liyuelian/archive/2022/10/31/fname.value.toUpperCase();
}
//動態系結
//在頁面加載完畢之后再進行動態系結
window.onload = function () {
//1.得到fname2對應的dom物件
var fname2 = document.getElementById("fname2");
fname2.onblur = function () {
fname2.value = https://www.cnblogs.com/liyuelian/archive/2022/10/31/fname2.value.toUpperCase();
}
}
</script>
<body>
靜態：輸入英文單詞
10.3.4onchange內容發生改變事件
當元素的值發生改變時，會發生 onchange 事件，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/523894.html
標籤：其他
下一篇：Gateway