1. 首頁 > 生活百科 > >

day05-JavaScript02( 二 )

生活百科day05-JavaSc


day05-JavaScript02

文章插圖
  • 練習
  1. 要求：編寫一個函數，用于計算所有參數相加的和并返回，如過實參不是number就過濾掉
  2. 提示使用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>
day05-JavaScript02

文章插圖
9.JS自定義對象
  • 自定義對象方式1：Object形式
  1. 對象的定義
var 對象名=new Object();//對象實例（空對象）對象名.屬性名=值;//定義一個屬性對象名.函數名=function(){}//定義一個函數
  1. 對象訪問
對象名.屬性對象名.函數名();
如果一個屬性沒有定義賦值就直接使用 ， 該屬性值就是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//增加一個屬性nameperson.name = "老虎";person.age = 35;//增加一個方法person.say = function () {//這里的this就是當前的personconsole.log("person="+this.name+" "+this.age);}//調用person.say();//person=老虎 35//如果一個屬性沒有定義賦值就直接使用 ， 該屬性值就是undefinedconsole.log(person.email);//undefined</script></head><body></body></html>
day05-JavaScript02

文章插圖
  • 自定義對象方式2：{}形式
  1. 對象的定義
var 對象名={////多個屬性和方法之間都要用逗號隔開屬性名:值,//定義屬性屬性名:值,//定義屬性，注意后面有逗號,函數名:function(){}//定義函數};
  1. 對象訪問
對象名.屬性對象名.函數名();
例子
<!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>
day05-JavaScript02

文章插圖
10.事件JavaScript 事件 (w3school.com.cn)
10.1事件介紹什么是事件？事件是電腦輸入設備與頁面進行交互的響應 。我們稱之為事件 。
HTML 事件可以是瀏覽器行為，也可以是用戶行為 。
HTML 事件是發生在 HTML 元素上的“事情” 。
當在 HTML 頁面中使用 JavaScript 時，JavaScript 能夠“應對”這些事件 。
  • 事件一覽表
    https://www.w3school.com.cn/jsref/dom_obj_event.asp
    day05-JavaScript02

    文章插圖
10.2事件的分類
  1. 事件的注冊（綁定）
    事件注冊（綁定）：當事件響應（觸發）后要瀏覽器執行哪些操作代碼，叫事件注冊或事件綁定
  2. 靜態注冊事件
    通過html標簽的事件屬性直接賦于事件響應后的代碼，這種方式叫做靜態注冊
  3. 動態注冊事件
    通過js代碼得到標簽的dom對象 ， 然后再通過dom對象.事件名=function(){}，這種方式叫做動態注冊
    js編程可以將瀏覽器整個頁面的所有組件都映射成dom對象
  • 動態注冊事件步驟
  1. 獲取標簽對象/dom對象
  2. dom對象.事件名=function(){}
10.3常用事件10.3.1onload加載完成事件onload：某個頁面或圖像被完成加載
例子
【day05-JavaScript02】<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>onload加載完成事件</title><script type="text/javascript">//定義函數// function sayOK() {//alert("靜態注冊 onload 事件sayOK");// }//1.在js中，將頁面窗口映射成window dom對象//2.window對象有很多的屬性和函數，可以使用//3.window.onload表示頁面被加載完畢//4.后面的function(){}表示頁面加載完畢后 ， 要執行的函數/代碼window.onload = function () {alert("動態注冊 onload 事件");}</script></head><body>hello~~~<input type="text" value="https://www.huyubaike.com/biancheng/測試"/></body></html>

推薦閱讀