iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
Software Development

從餐飲業轉職成小白工程師的所見所學系列 第 7

JavaScript入門,基本語法、變數 Day7

  • 分享至 

  • xImage
  •  

JavaScript是一種網頁編程語言,用於使網頁具有互動性和動態性。
它能夠讓網頁動起來! 讓用戶與網頁互動,並根據不同情境動態地變化。

這一塊當初在學的時候覺得這水真深... 超多不懂的語法、條件、方法等等...
最侯得出一個結論,就只有多做題目才能夠更深入的了解他。
這邊推薦一個網站 https://www.codewars.com/ 每天做個三題到五題,相信會有所進步的!

JavaScript 的用處?

  1. 互動性:
    JavaScript 能夠創建各種交互元素,例如按鈕、表單、彈出視窗等,使用戶能夠與網頁互動。
  2. 動態內容:
    可以使用JavaScript來動態更新網頁上的內容,而無需重新載入整個頁面。
    這可以實現更流暢的用戶體驗。
  3. 瀏覽器操作
    JavaScript可以用於操控網頁上的各種元素,例如改變樣式、新增或刪除元素,甚至發送網絡請求。

簡言之,學會 JavaScript 可以讓網頁更豐富、自由度也更高。

變數與常數

這兩個是什麼? 他們用於儲存數據,可以存儲文字、數字、布林值等。
在JavaScript中,我們可以使用 var、let 或 const 關鍵字來宣告變數。

var name = "DOJO"; // 使用var聲明變數
let age = 25; // 使用let聲明變數
const pi = 3.14; // 使用const聲明常數

Var? let? const? 三者有什麼不同? 什麼時候該用什麼??

這邊簡單做個範例:

// 使用 var 宣告變數
var x = 10;
console.log(x); // 輸出 10

var x = 20; 
console.log(x); // 輸出 20,而不是 10

// 使用 let 宣告變數
let y = 30;

if (true) {
  let y = 40; // 這裡的 y 只在 if 區塊內有效
}
console.log(y); // 輸出 30,if 塊外的 y 保持不變

// 使用 const 宣告常數
const z = 50;
// z = 60; // 嘗試修改常數將引發錯誤
console.log(z); // 輸出 50,使用 const 不能修改 z 的值

Var 全域變數

  • 作用區域:
    顧名思義,他發揮作用的地方會在整個 JavaScript 檔中。
    通常不會使用 Var 去做宣告,有可能會導致我們不希望的結果。
  • 變數提升:
    這邊就要提到 JavaScript 的運作方式,是由上而下依序執行下來的。
    使用var聲明的變數會被提升(hoisted)到函數或全局作用域的頂部。
    這意味著可以在聲明變數之前引用它們,但它們的值將是 "undefined"。
  • 重新宣告:
    使用var可以多次聲明相同名稱的變數,而不會引發錯誤。

let 區域變數

  • 作用區域:
    let 宣告的變數存在於區塊作用域(block scope)中,這意味著它們只在包含它們的區塊(例如: if語句、迴圈或函數)內可見。
    這解決了 var 全域變數的問題。
  • 變數提升:
    let 宣告的變數不會被提升,所以在宣告之前引用會導致錯誤。
  • 不可重新宣告:
    不能在同一作用域內多次使用 let 宣告相同名稱的變數,否則會引發錯誤。

const 區域'常數'

  • 作用區域:
    const 也存在於區塊作用域中,與let類似,只在包含它們的區塊內可見。
  • 變數提升:
    與let一樣,const 宣告的變數也不會被提升。
  • 不可重新賦值:
    使用 const 必須在宣告時賦值,而且一旦賦值後,就不能再更改它們的值。
    這使 const 適用於那些不應該更改的變數。

簡而言之,因為 var 可能引發問題,所以通常建議使用 let、const。
這樣做可以使代碼更加可靠、易於維護。

以上是簡單的 JavaScript 介紹,與分辨 var、let、const。
在一開始我都搞不懂要用哪個宣告比較好😂

那我們明天見!


上一篇
RWD網頁設計?為什麼對現代網站很重要? Day6
下一篇
函數與條件判斷 Day8
系列文
從餐飲業轉職成小白工程師的所見所學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言