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

2025 iThome 鐵人賽

DAY 26

佛心分享-IT 人自學之術

Code Review 我的青春：從『嗶』聲開啟我的軟體工程師之路系列第 26 篇

17th鐵人賽 code review 我的青春

Ray

2025-09-26 00:00:09

36 瀏覽

分享至

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

你沒看錯，因為公司需求，我從 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 的早期版本來當作範例。

Youtube 2005（圖源網路）

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

當時的網頁大多是靠 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 這門語言冠上了各種稱號：