JavaScript 複習03 – wordpress

JavaScript 必修篇 – 前端修練全攻略

陣列教學

為什麼要學陣列物件?

資料集合。

筆刷工具介紹

Mac 電腦 – ScreenBrush

陣列寫法教學

// 陣列 array
let colors = ['blue', 'red', 'black'];

陣列不只能放字串，也能放數字與混合資料

// 陣列 array
let ary = ['blue', 5, false];
console.log(ary);

let books = [5, 30, 400, 100];
console.log(books);

let data = [];
console.log(data);

字串
數字
混合
空的

陣列讀取教學

陣列第一筆資料是從 0 開始。

// 陣列 array
let colors = ['blue', 'red', 'black'];

// 讀取陣列資料，瞭解陣列長度
// 陣列資料從0開始
// 第一筆資料: 0
// 第二筆資料: 1
// 第三筆資料: 2
console.log(colors[0]);
console.log(colors[1]);
console.log(colors[2]);

讀取陣列資料，並賦予新變數流程

// 陣列 array
let colors = ['blue', 'red', 'black'];

let likeColor = colors[2];

console.log(likeColor);

length 讀取陣列長度流程

// 陣列 array
let colors = ['blue', 'red', 'black', 'pink'];

console.log('colors.length:' + colors.length);

let colorsNum = colors.length;
console.log('colorsNum:' + colorsNum);

陣列預設寫入資料

// 陣列 array
let colors = [];

// 寫入
colors[0] = "blue";

colors[4] = "pink";

console.log(colors);
console.log(colors.length);

push 寫入資料流程

新增 push 最後一筆資料

// 陣列 array
let colors = ['blue', 'red', 'black'];

colors.push('pink');
colors.push('yellow');

console.log(colors);

unshift 寫入資料流程

新增 unshift 最前一筆資料

// 陣列 array
let colors = ['blue', 'red', 'black'];

colors.unshift('pink');

console.log(colors);

push – 新增在最後一筆資料
例如: 列表
unshift 新增在最前一筆資料
例如: 留言板

pop 與 shift 刪除資料

刪除 pop 最後一筆資料

刪除 shift 最前一筆資料

// 陣列 array
let colors = ['blue', 'red', 'black'];

colors.shift();
colors.shift();
colors.shift();

console.log(colors);

splice 刪除指定資料

第一個數字: 起始位置
第二個數字: 要往後刪除幾筆資料

// 陣列 array
let colors = ['blue', 'red', 'black'];

// 第一個數字: 起始位置
// 第二個數字: 要往後刪除幾筆資料

colors.splice(0, 1);

console.log(colors);

其他陣列總結

文件補充

JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]

物件教學

為什麼要有物件

寫程式常用物件去撰寫。

物件描述一個東西裡面有哪些資訊。

舉例 – 房子
游泳池、兩樓、頂樓設施、煙囪、陽台

陣列有幾筆資料在裡面。

物件格式教學

// 物件
// 描述家庭
let home = {
  // 屬性: "值"
  motherName: "Mary",
  fatherName: "Tom",
  dogsNum = 3,
  isWakeUp: false
};

console.log(home);

物件格式寫法

{ 屬性: “值” };

如何讀取物件的值

let home = {
  motherName: "Mary",
  fatherName: "Tom",
  dogsNum: 3,
  isWakeUp: false
};

console.log(home);
console.log(home.motherName);
console.log(home.fatherName);
console.log(home.dogsNum);
console.log(home.isWakeUp);

let tomDogsNum = home.dogsNum;

console.log(tomDogsNum);

新增物件屬性

let home = {};

console.log(home);

home.motherName = "Mary";
home.dogsNum = 3;
home.isWakeUp = false;

console.log(home);

Q: 資料會一起直接組好，還是自己需要去組資料?

兩者都有。

從別人伺服器抓取完整資料
網頁上做新增功能

修改物件值

let home = {
  motherName: "Mary",
  fatherName: "Tom",
  dogsNum: 3,
  isWakeUp: false
};

home.motherName = "Jane";
home.dogsNum += 1;
home.dogsNum = home.dogsNum + 1;

console.log(home);

刪除物件資料

let home = {
  motherName: "Mary",
  fatherName: "Tom",
  dogsNum: 3,
  isWakeUp: false
};

delete home.dogsNum;
delete home.motherName;

console.log(home);
console.log(home.motherName);

另一種讀取物件屬性方法

let home = {
  motherName: "Mary",
  fatherName: "Tom",
  dogsNum: 3,
  isWakeUp: false
};

console.log(home["motherName"];
console.log(home['motherName']);

let momName = "motherName";
console.log(home[momName]);

物件讀取資料判斷時間

let home = {
  motherName: "Mary",
  fatherName: "Tom",
  dogsNum: 3,
  isWakeUp: false,
  "001": "hello"
};

// JSON 格式
// 點記法無法讀取特殊字元，例如:數字

console.log(home["motherName"]);
console.log(home["001"]);

陣列與物件整合運用

陣列與物件混合應用

陣列和物件的集合。

透過情境知道何時使用陣列、何時使用物件、以及陣列物件集合在一起該怎樣去有效運用。

// 有兩個水果攤
// 第一個水果攤，老闆 Tom ，香蕉有6個、蘋果有5個、還沒關店
// 第二個水果攤，老闆 John，香蕉有9個，蘋果有8個，還沒關店

// 陣列來說，他都是放幾筆幾筆 [0] [1]

let market = [
  {
    bossName: "Tom",
    bananaNum: 6,
    appleNum: 5,
    isClose: false
  },
  {
    bossName: "John",
    bananaNum: 9,
    appleNum: 8,
    isClose: false
  }
];

console.log(market);
console.log(market.length);

一次搞懂陣列與物件混合讀取教學

陣列 []
最外層為 [] 中括號的為陣列
尋找陣列第幾筆，用中括號[]裡面填寫數字尋找
舉例: console.log(market[0]);
物件 {}
最外層為 {} 大括號的為物件
尋找物件裡面屬性的值，用點.找屬性資料
舉例: console.log(market[0].bossName);

let market = [
  {
    bossName: "Tom",
    bananaNum: 6,
    appleNum: 5,
    isClose: false
  },
  {
    bossName: "John",
    bananaNum: 9,
    appleNum: 8,
    isClose: false
  }
];

console.log(market[0]);

console.log(market[0].bossName);

// 測驗1
console.log(market[1].appleNum);
// 測驗2
console.log(market[0].isClose);

JSON 格式介紹

Wiki – JSON
mdn web docs – 使用 JSON 資料

JavaScript Object Notation (JSON) 為將結構化資料 (structured data) 呈現為 JavaScript 物件的標準格式，常用於網站上的資料呈現、傳輸 (例如將資料從伺服器送至用戶端，以利顯示網頁)。

安裝 JSON 檢視 Chrome 套件

下載 JSON 格式資料

Download – 電動車資訊.json

備註：原網站已無提供 JSON 格式，請直接下載上方附件的 JSON 檔案進行練習。

// 下載方式
// 右鍵檢視網頁原始碼，全部複製到自己的程式碼
// 全選 Ctrl + a
// 複製 Ctrl + c

// 方法一 - 在 VS Code 執行
// 方法二 - 使用 Chrome Console 執行

// let data = [{}, {}, {},...];

// console.log(data);
// console.log(data.length);

JSON 讀取方式教學 – 以充電站為例

// let data = [{}, {}, {},...];

console.log(data[0].Charge);
console.log(data[0].Address);
console.log(data[2].Location);

物件裡面還能包物件

let home = {
  motherStatus: {
    age: 30,
    name: "Mary"
  },
  fatherStatus: {
    age: 38,
    name: "Mark"
  },
  dogsNum: 3
};

console.log(home.motherStatus.name);
console.log(home.fatherStatus.age);

物件包物件讀取流程 – 以活動公告 open data 為例

Download – 公告資料.json

公告 OPEN DATA 網址: JSON 網址

// let data = {paging: {}, entries: [{}, {}, {},...]};

console.log(data.paging);
console.log(data.paging.total);
console.log(data.entries);
console.log(data.entries[1].title);

如何篩選出自己想要的資料格式，並賦予到特定變數上

// let data = {paging: {}, entries: [{}, {}, {},...]};

console.log(data);

let ary = data.entries;

console.log(ary);
console.log(ary.length);
console.log(ary[0].title);

小魔王題目: 複雜 JSON 格式，你/妳撈得到嗎?

Download – 高雄旅遊網.json

高雄旅遊網線上網址: 線上 JSON 網址

// let data = {};

console.log(data);
console.log(data.isImage);
console.log(data.data.XML_Head.Listname);
console.log(data.data.XML_Head.Infos.Info);
console.log(data.data.XML_Head.Infos.Info[0].Name);

物件搭配 if 練習

流程判斷圖線上版本

let tomStatus = {
  name: "Tom",
  age: "30",
  status: ""
};

tomStatus.degree = 36.5;

if(tomStatus.degree >= 37.5) {
  console.log("您不得進入");
  tomStatus.status = "您不得進入";
} else {
  console.log("您可以進入");
  tomStatus.status = "您可以進入";
}

console.log(tomStatus);

陣列物件搭配 if 流程判斷練習

let peopleStatus = [
  {
    name: "Tom",
    age: 30,
    status: ""
  }
];

// 偵測客人體溫
peopleStatus[0].degree = 38.5;

console.log(peopleStatus[0]);

if(peopleStatus[0].degree >= 37.5) {
  peopleStatus[0].status = "您不得進入";
  console.log("您不得進入");
} else {
  peopleStatus[0].status = "您可以進入";
  console.log("您可以進入");
}

console.log(peopleStatus[0]);