33歲轉職者的前端筆記-DAY 20 Javascript 基本知識筆記

2021 iThome 鐵人賽

DAY 20

Modern Web

33歲轉職者的前端筆記系列第 20 篇

13th鐵人賽 javascript 前端新手村

a841722

2021-09-20 13:19:07

975 瀏覽

寫Javascript前必要小知識

1.<!DOCTYPE html> 為 HTML 5 的語言格式
2.head 是網路爬蟲爬的區塊，可以放很多資訊，如meta、css、Javascript…等等。
3.<script src="檔案名稱"></script> 放head跟body的差異為:

放body可抓取 id 區塊，不用加 window.onload

window.onload = function() {
 // 程式碼內容
}

放 head 如果要抓取 body裡面的內容，則要加 window.onload

4.設計資料一定要賦予值給變數，值就是設計的資料。

// 例如:

const bmiStatesData = {
  "overThin": {
    "state": "過輕",
    "color": "藍色"
  },
  "normal": {
    "state": "正常",
    "color": "紅色"
  }
};

5.設計資料是由最外面的範圍設計到最裡面的範圍(最大->最小)。

let company = {
  comName: "創見",
  department: [
    {
      departmentName: "SMT",
      cName: "黃曉明",
      rName: "黃大銘",
      staff: [
        {
          name: "員工1"
        },
        {
          name: "員工2"
        },
        {
          name: "員工3"
        }
       ]
     },
     {
      departmentName: "生產部",
      cName: "黃曉明",
      rName: "黃大銘",
      staff: [
        {
          name: "員工1"
        },
        {
          name: "員工2"
        },
        {
          name: "員工3"
        }
      ]
    }
  ]
};

6.在 Html 裡，要先給id或class，JS才抓的到 html 的區塊

例如:



<div id="block"></div>

<scrtip>
    document.querySelector("#block");
</scrtip>

7.forEach的前面一定是陣列，裡面的函式第一個位子是資料內容，第二個位子是陣列的第幾筆，第三個是原本的陣列內容。
寫forEach的目的是資料的處理，例如印在畫面上。

例：

let company = {
    department: [ ...內容 ]
};

company.department.forEach(function (item, index, arr) {
  console.log("item", item); // 印出資料內容
  console.log("index", index); // 印出陣列的第幾筆資料
  console.log("arr", arr); // 印出原本的陣列內容
});

8.宣告變數目的是取代很長的資料內容。

9.不知道變數內容就用 console.log 做小步測試。

AJAX 基本小知識

1.axios要先引入套件，官方文件網址是(https://github.com/axios/axios)，套件網址為：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

2.html也要引入

寫法範例：


let apiUrl = "api網址";

axios.get(apiUrl)
  .then(function (response) {
    console.log(response);
  });

forEach

官方文件: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

const items = ['item1', 'item2', 'item3'];

items.forEach(function(item){
  console.log(item)
});
innerHTML寫法

document.querySelector("#resBlock").innerHTML = `<div>內容</div>`;