【Day 26】就這樣我被迫轉職成前端工程師了

就這樣我被迫轉職成前端工程師了

你沒看錯，因為公司需求，我從 PHP 工程師硬生生被轉職成了前端工程師。

理由呢？因為全公司只有我學過 HTML & CSS，於是主管腦中的邏輯是這樣的：

會切版 → 會前端 → 一定會 JavaScript。

結果我就這樣被推上了前端的不歸路 XD。

Note
瀏覽器主要是透過 HTML 來結構化網頁內容，CSS 用來美化網頁的外觀，而 JavaScript 則用來增加網頁的互動性與動態效果，這三者相輔相成，共同構成了現代網頁的基礎。

不要問我為什麼這麼聽話，自從接觸 HTML 和 CSS 之後，我就像打開了新世界的大門，開始對前端開發產生濃厚的興趣。

於是乎，主管順勢一推，我就這樣跌進了坑，成了前端工程師。

每天上班大家可以聽到的對話大概就是：

「Ray 這個 position: absolute; 怎麼用啊？」

「Ray 公司首頁你可以幫我改一下嗎？」

「Ray 為什麼這個 Form 表單內的 Button 按鈕點了都是直接送出啊？」

Note
Form 表單內的 Button 按鈕預設行為是提交表單，若要避免這種情況，可以在按鈕的 type 屬性中設定為 button，詳情可見「關於 Button 有一個很奇妙的 Type 現象」。

只要跟前端沾上邊的，就是找 Ray。

Ray = 前端

「Ray，這邊有一段 JavaScript，你可以幫我看一下嗎？」
有一天，主管突然丟了這麼一句話過來。

當下我心裡的第一個反應只有：
「蛤？我也不會啊！」 🤯

但表面上還是要裝專業，點頭回了一句：「好，我看看。」（然後內心狂翻使用手冊 XD）

還好主管給我的程式碼不算困難，主要只是一些基本的 DOM 操作和事件處理，我心裡鬆了一大口氣：「呼～幸好不是高難度，上天是眷顧我的 XD 」

也因為這件事情讓我接著買下了 使用 HTML、CSS 開發一個網站 這堂課程的單位所出的另一門課程 JavaScript 入門篇 - 學徒的試煉，這時候我才開始真正認識 六角學院 這個單位。

Note
「JavaScript 入門篇 - 學徒的試煉」這門課由於後來過於老舊，應該改出了新版的課程，建議可以參考 JavaScript 必修篇 - 前端全攻略。

沒過多久，主管一邊準備新專案，一邊自言自語地說：「下一份專案感覺可以試試看 Vue.js 呢。」

我心裡瞬間冒出一句 OS：「慘了，我要被迫升等學新技能了。」

於是，JavaScript 學到最後，我乾脆一口氣把六角學院的前端組合包買下來開始猛 K。

就這樣，我開啟了我的前端工程師之路。

JavaScript 的基礎

相較於 C 語言，JavaScript 算是相對容易學習的語言，而且更容易帶來成就感，這裡的「成就感」指的是 —— 當它與 HTML、CSS 搭配使用時，可以立刻在畫面上看到實際成果。

「為什麼？」你可能會這樣想。

相較於 C、C++ 等語言，除了需要安裝較複雜的開發環境之外，而且比較多的互動都是在命令列介面（Command Line Interface, CLI）中進行，對於初學者來講，可能會覺得比較枯燥乏味。

在早期網路發展的那些年來講，其實網頁非常的靜態，靜態到什麼程度呢？這邊讓我找一個 Youtube 的早期版本來當作範例。

早期網頁在畫面上能看到的元素其實很少，主要還是以文字為主，雖然也能放圖片，但整體來說仍相當靜態。

當時的網頁大多是靠 HTML 來做內容結構化，再加上 CSS 美化，雖然畫面看起來更好看了，但依舊缺乏互動性。

「互動性？是指 CSS 的動畫效果嗎？」你可能會這樣想。

其實這裡說的「互動性」並不是指畫面漂亮，而是指使用者能和網頁互動。
例如點擊按鈕、填寫表單時，能即時得到反應或回饋，像是表單驗證或動態更新內容。

當時的 CSS 頂多只能提供一些視覺效果，並不能實現真正的互動，而要解決這個問題，關鍵就在於 JavaScript —— 它甚至在那個年代被稱為 「膠水語言（Glue Language）」。

那麼，什麼是膠水語言呢？

簡單來說，就是能把不同技術或系統 「黏合」 在一起的語言。

以 JavaScript 為例，它能把 HTML 和 CSS 結合起來，讓網頁不再只是靜態的樣子，而是具備互動性。

在早期，JavaScript 的主要角色就是提供網頁互動，讓使用者能和網頁進行簡單的操作，但發展到現在，它的應用範圍早已大幅擴展，不僅能用於網頁前端，還能應用在 伺服器開發、桌面應用程式、行動應用程式 等領域，幾乎已經成為一門 全方位的程式語言。

前面提到過，JavaScript 是一個相對容易學習的語言，那它到底有多容易呢？我們先來看一個簡單的範例：

// 宣告變數
var message = "Hello, World!";
let number = 42;
const pi = 3.14;

// 輸出變數
// console.log 的作用是將內容輸出到控制台
console.log(message);
console.log(number);
console.log(pi);

// 條件判斷
if (number > 0) {
    console.log("這是一個正數");
} else {
    console.log("這不是正數");
}

// 迴圈
for (let i = 0; i < 5; i++) {
    console.log("這是第 " + i + " 次迴圈");
}

// 陣列
let fruits = ["蘋果", "香蕉", "橘子"];
fruits.forEach(function(fruit) {
    console.log("我喜歡吃 " + fruit);
});

// 函式
function greet(name) {
    return "你好，" + name + "！";
}
console.log(greet("Ray"));

// 物件導向
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    introduce() {
        return "我的名字是 " + this.name + "，我的年齡是 " + this.age + " 歲。";
    }
}
let person = new Person("Ray", 30);
console.log(person.introduce());

// 例外處理
try {
    // 嘗試執行可能會出錯的程式碼
    let result = number / 0; // 這裡會產生 Infinity
    console.log(result);
} catch (error) {
    // 捕捉到錯誤後執行的程式碼
    console.error("發生錯誤：" + error.message);
} finally {
    // 無論是否發生錯誤，這裡的程式碼都會執行
    console.log("程式執行結束");
}

上面的範例其實是我把 PHP 的語法轉成 JavaScript 來寫，從中可以看出兩者的語法結構確實有些相似，這也是我能快速上手 JavaScript 的原因之一。

不過這裡並不打算深入教學 JavaScript，畢竟這不是本文的重點。

如果你有興趣，可以參考我先前的鐵人賽系列 ——「RE：從零開始的學習 JS 生活」。

雖然 JavaScript 語法簡單易學，但也很容易被誤解，尤其是對於初學者來說，可能會因為語法的特殊性而產生一些困惑，例如：

let a; // 如果沒有給 a 賦值，則 a 的值為 undefined
console.log(a); // undefined

let b = null; // null 是一個特殊的值，表示「沒有值」
console.log(b); // null

console.log(a == b); // true

在正常的狀況下，這兩者的值應該是不相等的，但在 JavaScript 中，undefined 和 null 可以被視為相等的，最主要關鍵原因在於 JavaScript 的型別轉換機制以及比較運算符的特性。

正因為這些特性，讓 JavaScript 這門語言冠上了各種稱號：

• 奇葩語言
• 怪異語言
• 世界上最容易誤解的語言

既然如此，那為什麼 JavaScript 到現在依然這麼受歡迎呢？

我認為最主要的原因，是有一群熱愛這門語言的開發者，持續推廣並不斷修正它的缺陷，讓 JavaScript 在演進中變得越來越完善。

像是早期 JavaScript 並沒有 let 和 const 這兩個關鍵字，只有 var，這會導致變數的作用域不明確，容易造成變數污染，但後來 ECMAScript 6（ES6）引入了 let 和 const，讓變數的作用域更加明確。

正因為這些改進，JavaScript 才能夠在前端開發中佔有一席之地，並且成為了現今最受歡迎的程式語言之一。

Note
如果你對於 JavaScript 有想要更深入學習它的特性的話，可以考慮閱讀我之前寫的系列「JavaScript 核心觀念」。

如果真的要講 HTML 、CSS、JavaScript 三者之間的關係的話，就會像下方這張圖一樣：

• HTML： 就像人體骨架，提供結構與框架
• CSS： 就像皮膚與衣服，提供外觀與美感
• JavaScript： 就像肌肉與神經系統，提供動作與互動

以上就是前端開發的三大支柱，缺一不可。

結語

到後來，我發現我也深深喜歡上 JavaScript 這些奇奇怪怪的特性，雖然它有很多讓人抓狂的地方，但也正因為這些特性，讓我對這門語言產生了濃厚的興趣。

同步更新

本文將同步更新至以下網站：

• 是 Ray 不是 Array
• Code Review 我的青春：從『嗶』聲開啟我的軟體工程師之路（佛心分享-IT 人自學之術）
• Threads - 時常會聊軟實力
• Facebook - 搞怪迷因分享
• Instagram - 搞怪迷因分享 + 軟實力
• Portaly - 入口主頁