你知道嗎?軟體變越大,變難改越快,全做完才給你試用更容易失敗!

你知道嗎?需求改,軟體不一定能輕鬆改成你要的,做軟體就像在寫數學公式!你有這樣的問題嗎?

一開始,軟體變大一點,會難改一點,但等軟體長大了,它長大一點,會變難改很多!等軟體全部做完了,才給你試用的失敗率又更高!你有這樣的問題嗎?

Read More

為什麼要寫技術文章的3個原因

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

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

Read More

How to Write CSS?

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

Read More

HTML Element

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

Read More

什麼是網頁設計?

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

Read More

如何用Prototype避免重複建立Methods節省記憶體?

這段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

Lexical Scope和Closure有什麼關係?

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

Read More

加薪閉包 - Closure

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

Read More

First Class Function

如果你有寫過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

Falsy Values危險嗎?

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