JS-網站互動設計程式進化之道-Functions, Methods & Objects

發表於

Thai Airways International Boeing 747-4D7 at Munich Airport departing 26L.

JavaScript&JQuery-網站互動設計程式進化之道-Functions, Methods & Objects

學習筆記(2)

成功的秘訣，在永不改變既定的目的 - 盧梭

引言

原文書名：JavaScript & JQuery: Interactive Front-End Web Development
作者：Jon Duckett
譯者：謝銘倫
出版社：碁峰
出版日期：2017/02/24

三、函式(Functions), 方法(Methods), & 物件(Objects)

函式(Functions)

  • 函式：
1
2
3
4
5
6
7
8
9
10
11
// Create a variable called msg to hold a new message
var msg = 'Sign up to receive our newsletter for 10% off!';

// Create a function to update the content of the element whose id attribute has a value of message
    function updateMessage() {
        var el = document.getElementById('message');
        el.textContent = msg;
}

// Call the function
updateMessage();
  • 命名函式：
1
2
3
4
5
6
7
function getSize(width, height, depth){
    var area = width * height;
    var volume = width * height * depth;
    var sizes = [area, volume];
    return sizes;

var areaOne = getSize(3, 2, 3)[0];
  • 匿名函式：
1
2
3
4
var area = function(width, height){
    return width * height;
}
var size = area(3, 4);
  • 立刻執行函式運算式(IIFE)：
1
2
3
4
5
var area = (function(){
    var width = 3;
    var height = 2;
    return width * height;
}());

物件(Objects)

  • 關鍵字 this：參考上一層的物件

  • 建立物件：實字標示法

1
2
3
4
5
6
7
8
9
10
11
12
// Set up the object
var hotel = {
    name : 'Quay',
    rooms : 40,
    booked : 25,
    checkAvailability : function() {
        return this.rooms - this.booked; // Need "this" because inside function
    }
};
// Update the HTML
var elName = document.getElementById('hotelName'); // Get element
    elName.textContent = hotel.name;               // Update HTML with property of the object
  • 建立物件：建構子語法（先建立物件再加入特性與方法）
1
2
3
4
5
6
7
8
9
10
11
12
// Set up the object
var hotel = new Object();

hotel.name = 'Park';
hotel.rooms = 120;
hotel.booked = 77;
hotel.checkAvailability = function() {
    return this.rooms - this.booked;
};

var elName = document.getElementById('hotelName'); // Get element
    elName.textContent = hotel.name;               // Update HTML with property of the object
  • 建立物件：建構子語法（建立同時定義特性與方法）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Create the template for objects that are hotels
function Hotel(name, rooms, booked) {
    this.name = name;
    this.rooms = rooms;
    this.booked = booked;
    this.checkAvailability = function() {
        return this.rooms - this.booked;
    };
}

// Create two hotel objects
var quayHotel = new Hotel('Quay', 40, 25);
var parkHotel = new Hotel('Park', 120, 77);

// Update the HTML for the page
var details1 = quayHotel.name + ' rooms: ';
    details1 += quayHotel.checkAvailability();
var elHotel1 = document.getElementById('hotel1');
    elHotel1.textContent = details1;

內建物件

  • 瀏覽器物件模型：
1
2
3
4
5
6
7
8
9
10
window.document //目前頁面內容
window.navigator //瀏覽器相關資訊
window.innerHeight //視窗高度
window.innerWidth //視窗寬度
window.pageXOffset //水平捲動距離
window.pageYOffset //垂直捲動距離
window.screenX //滑鼠X座標
window.screenY //滑鼠Y座標
window.screen.width //螢幕寬度
window.screen.height //螢幕高度
  • 文件物件模型：
1
2
3
4
5
6
7
8
document.write() //將文字寫入文件
document.getElementById() //取得符合ID值的元件
document.querySelectorAll() //取得所有符合CSS設定值的元件
document.creataElement() //建立新元件
document.createTextNode() //建立新的文字節點提供內容

document.domain //頁面所屬網域
document.lastModified //頁面最後修改日期

全域 Javascript 物件

  • String物件：
1
2
3
4
length //取得字元數量
split() //指定字串分割字元
trim() //移除頭尾空白字元
replace( , ) //搜尋取代功能
  • Number物件：
1
2
3
isNaN() //檢查是否為數值
toFixed() //四捨五入至 小數點後指定位數(回傳字串)
toPrecision() //四捨五入至 整數指定位數(回傳字串)
  • Math物件：
1
2
3
Math.random() //隨機產生 0~1 之間數值
Math.ceil() //向上取整數(取得大於等於的整數)
Math.floor() //向下取整數(取得小於等於的整數)
  • Date物件：
1
2
3
4
5
6
7
getFullYear() //回傳年份(4位數)
getMonth() //回傳月份(0-11)
getDate() //回傳日期(1-31)
getHours() //回傳小時(0-23)
getMinutes() //回傳分鐘(0-59)
getSeconds() //回傳秒數(0-59)
toDateString() //回傳可讀性的日期字串(Wed Apr 16 1975)