JS-網站互動設計程式進化之道-JavaScript Instructions

發表於

A group of astronomers were observing the centre of the Milky Way using the laser guide star facility at Yepun

JavaScript&JQuery-網站互動設計程式進化之道-JavaScript Instructions

學習筆記(1)

真正迅速的人，並非事情僅僅做得快，而是做得成功而有效的人 - 弗蘭西斯·培根

引言

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

簡介

  • 如何運用JavaScript添加網頁互動性：
    • 存取 (Access) 網頁內容、調整 (Modify) 網頁內容、
      計畫 (Program) 運作規則、回應 (React) 網頁事件
    • 例子：頁面部分內容更新
      • 回應：按下連結觸發腳本
      • 存取：取得按下的連結
      • 計畫：載入該連結對應的資訊
      • 存取：找到要更新的區塊處
      • 調整：於該區塊以新內容取代原內容

一、編程的基礎

  • 流程圖：定義目標＞設計程式碼＞編寫程式步驟(重點圖示)
  • 物件：代表事物，擁有特性(properties)、事件(event)、方法(methods)，
    • 事件觸發方法改變特性
    • 特性：物件的特徵（ex. 特性名稱：屬性值）
    • 事件：與物件的互動，觸發方法（ex. 事件名稱：發生情境）
    • 方法：擷取或更新物件的特性（ex.　方法：執行工作）
    • 例子：document物件
      • 特性：URL 頁面網址
      • 事件：load 頁面完成下載
      • 方法：getElementById() 指定id屬性取得元件

二、基本的JavaScript指令

  • 相關範例 - Chapter 2: Basic JavaScript Instructions
  • var：var 變數會加到全域物件 window 下，會自動Hoisting
  • let：let 變數範圍只作用在區塊範圍內，且同一區塊內不能重複宣告同一變數
  • const：const 變數是唯獨的(物件與陣列除外)會讓變數不能重新被指派，只作用在區塊範圍內
  • 變數規則：
    1.名稱不能以數字開頭
    2.不能使用破折號(-)或是句點(.)
    3.用名稱來描述變數儲存的資訊(有意義的命名)
  • 字串運算：將數值與字串資料相加，數值將變成字串的一部分；字串做算術運算將得到NaN
  • 陣列寫法:
1
2
3
4
5
6
7
var colors;
        colors = ['white',
                'black',
                'custom'];
//陣列項目數量
var numColors;
    numColors = colors.length;