iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

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

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

寫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>`;

上一篇
33歲轉職者的前端筆記-DAY 19 練習寫一個計算機
下一篇
33歲轉職者的前端筆記-DAY 21 英吋轉公分單位轉換器練習筆記
系列文
33歲轉職者的前端筆記30

尚未有邦友留言

立即登入留言