如果把你會的東西寫成技術文章，可以讓你對技能的掌握度增加1倍以上，還可以學會更多的東西在實戰上使用，你會有興趣嗎？一開始我也不知道，寫技術文章有這麼多好處。今天特別分享我開始寫技術文章之後獲得的3個好處。如果你也對寫技術文章有興趣，但正在煩惱到底該不該寫，我強烈建議你馬上關掉這個網頁，開始動手寫你的第一篇技術文章！

那麼我開始寫技術文章之後獲得的3個好處，這裡是第1個：

Read More

CSS 是用來裝飾網頁的語言，它可以把網頁上普通的文字、連結等變成令人感到可靠的藍色、神秘的紫色或是大膽的紅色。使用 CSS，我們就可以幫網頁調整主題配色，營造出溫暖、可靠、帥氣或壓抑等感受，讓網頁具有獨特的風格呢！要裝飾網頁，建立網頁的樣式，都少不了它。這種語言的全名叫做 Cascading Style Sheets（CSS）。那 CSS 要怎麼寫呢？讓我們先來看一個範例：

Read More

要做網頁設計，HTML 可以說是很重要的基礎，它是用來編寫網頁的內容，建構網頁骨架的語言。HTML 是用標記的方式，幫網頁的內容加上特殊的意義，例如這段原始碼<h1>This Is A Heading</h1>，就是把 This Is A Heading 的文字標記成階級一的標題，讓瀏覽器看到這段文字時，知道要把它解釋成階級一的標題，然後顯示出來。HTML 的全名叫做 HyperText Markup Language，markup 就是標記的意思啦！那麼標記到底是什麼呢？要怎麼用標記寫網頁呢？我們立刻來看看下面的範例：

Read More

我們常常看到有人分享自學網頁設計轉職成功的案例，如果我們進一步探索，會看到更多名詞，包含前端網頁開發、後端網頁開發等等。那到底網頁設計、網頁開發是什麼呢？網頁代碼到底長怎樣？今天讓我們一起來看看吧！

Read More

這段JavaScript code有什麼問題？

1
2
3
4
5
6
7
8

function Human(name, age) {
  this.name = name;
  this.age = age;

  this.speak = function () {
    console.log("Hi! I'm " + this.name + ", I'm " + this.age + " years old!");
  };
}

原來我們如果這麼寫constructor function，看上去是reuse了speak方法的程式碼，但在實際建立Human物件時，speak方法是會跟著被建立的。這樣真的會有問題嗎？直接看看下面的範例程式碼：

Read More

在前一篇的加薪閉包裡，我們看過了JavaScript closure是怎麼施展魔法，避免產生global變數。但為什麼我們可以知道，一個function的free variables被定義在哪裡呢？今天我們就要來一探究竟！是的，答案就在標題上，是因為JavaScript的lexical scope特性啦！我們先來看看lexical scope的說明：

Read More

在Free Variable這則貼文裡，我們已經看過了free variable是什麼啦，這次我們要來看看什麼是JavaScript的closure。在看closure之前，我們先一起回顧一下用closure的好處：有避免產生global變數、避免跟別人的程式碼發生衝突、避免讓變數意外得被外界程式修改而導致bug產生等。既然它有這麼多好處，一定要掌握它！要掌握closure首先我們要知道，當一個function用到了free variable，會發生什麼事，我們先看看下面的程式碼片段：

Read More

如果你有寫過JavaScript，你一定也覺得有件事很有趣，就是functions可以被放在變數裡，然後丟來丟去……

1
2
3
4
5
6
7
8
9
10

function execFuncCanBeThrownAround() {
  console.log("I can be thrown around, I was executed.");
}

function execFunc(func) {
  func();
}

let aFuncHasBeenThrownAround = execFuncCanBeThrownAround;
execFunc(aFuncHasBeenThrownAround);

啊啊啊！這是怎麼一回事啊？原來是JavaScript的functions也是物件啦！如果把function用console印出來，的確可以看到它有不少屬性呢！像下面這樣

Read More

JavaScript的falsy values很危險嗎？它們是什麼？到處都看得到它們啊？恩，下面這段程式碼有點玄機，快先一起來看看，裡面有什麼問題：

1
2
3
4
5
6

let address2 = "";
if (!address2) {
  console.log("Address2 is not initialized.");
} else {
  console.log("Checkout!");
}

恩，實際上，如果我們真的這樣寫，執行後的結果會是：

Read More

有人說，懂JavaScript的closure可以加薪，那closure（閉包）到底是什麼？為什麼會closure可以避免產生global變數？避免跟別人的程式碼發生衝突？避免讓變數意外得被外界程式修改而導致bug產生？其實，在學習如何加薪（X）closure（O）之前，必須先建立free variable的觀念，它對closure來說非常重要

Read More