Bucky's Code Journey

會寫這個系列，是想整理我之前的筆記，假如我哪天忘記的話，還可以讓我方便查找，順便加深自己的印象。第一篇來回顧變數，看如何定義跟指定各種型別的用法。 變數 變數像是一個容器，假設一個容器貼着 coca_cola 的標籤，裏面裝的是叫可樂的東西，當接觸到瓶子，就可以拿裏面的東西，裏面的東西就是可樂。用 JavaScript 的語言來說就是： 1var coca_cola = "可樂" var = variable 的縮寫coca_cola = 容器的標籤（變數名稱）可樂 = 容器裡裝的內容（值） 資料型別 基本型別變數值的型別主要分成基本型別跟物件型別，這個部份先來討論基本型別： number 數字 string 字串 boolean 布林值 undefined null 例如：數字 7、字串 “hello”、布林值 true / false 數字、字串12var name = "張無忌"; // 字串，可用單引號或雙引號把文字包起來var power = 100000; // 數字，不需引號 如果要檢驗型別的話，可以使用 typeo ...

以前看過一篇文章，是用拉麵店販賣機講解關於 api 的概念，我覺得作者很厲害，可以用淺顯易懂的方式讓當時還是前端麻瓜的我看得懂，那篇文章很推薦新手去看 -> 從拉麵店的販賣機理解什麼是 API 最近作者開了一系列的課 -> 先別急著寫 leetcode。因為我不是本科系出身，所以確實在解題時很容易遇上困難，不然就是會想很久。剛好看到這個課程就覺得蠻需要培養如何寫程式的思維，而且重點是免費喔！免費喔！免費喔！（很重要要說 3 次）所以這個系列會記載一些對我有幫助的筆記，希望能讓自己更進步一些。 會寫程式的人與初學者差別在哪？ 會寫程式的人 先想解法 如果是有做過或是簡單的，就會直接構思出方法 如果比較困難或是複雜的問題，就把解法轉換成程式碼 初學者 邊寫邊想怎麼解 試著套用自己以前學過的語法 這個我自己蠻有感覺的，確實一開始會邊寫邊想，然後如果卡住了，就翻筆記看有什麼語法可以拿來套用，不過通常都沒什麼好下場就是了，哈。 在解題會有兩種情況 看題目覺得自己解得開 有效率的解開 有解開但是時間花較久 最後解不開 看題目就覺得看不懂撇開第二種看不懂的情況，在看得懂的情形下 ...

由於踩了不少 JavaScript 的雷，想說需要好好的重新認識一下，於是希望藉由 JavaScript 全攻略：克服 JS 的奇怪部分 這個系列，能夠更增進自己的實力，順便能夠培養寫文章的習慣，那麼就開始吧！Go！Go！ 語法解析器 (Syntax Parsers) 首先要先了解當電腦在執行你寫的 code，其實是看不懂你寫的文字是什麼意思，更精確地說是需要透過中間一個媒介去翻譯成電腦看得懂的東西。而這個媒介是是由人寫出來的程式就是語法解析器，又稱為編譯器（Compilers）。 那麼編譯器是怎麼運作的呢？ 當你輸入一段文字，例如： console.log(‘Hello’)，編譯器會一個字一個字地讀，當讀完整個詞時，得到關鍵字 console.log('Hello')，就會轉換給電腦看得懂的指令。 詞彙環境 (Lexical Environments) 程式碼在程式中實際所在的位置 詞彙環境在於一些程式語言中，認為程式碼寫在哪裡是很重要的。（不是每個程式語言都這樣）因為它幫助語法解析器看你寫的程式碼，它的語法、它的單字做決定，例如： 123function ...

最後一篇 Vue 的基礎，會提到修飾符、還有 v-bind 切換 class，表單的運用，還有 component 的概念。 修飾符 修飾符在網頁中很常使用到，例如點擊一個 a 連結，不想讓他產生作用的話，就會使用到 preventDefault() 這個語法，例如 jQuery 的用法： 1234567<a href="http://www.google.com">Click me</a> <script> $("a").on("click", function(e) { e.preventDefault(); });</script> 這樣子點擊的話，連結就不會有作用。 而在 Vue 中也有這個用法，阻止默認行為： <button @click.prevent="doThis"></button> 1234567891011121314151617181920212223<div id ...

此篇會講到關於 MVVM 的概念、綁定、for 迴圈及判斷，還有行為 on 的使用。 MVVM 的概念 首先要先提到傳統 MVC 的概念， 在 Web 應用程式的劃分分為： 模型（Model） 視圖（View） 控制器（Controller） 圖片來自 TechTerms.com 使用者第一眼看到的就是 View，如果使用者想要取得某些資料，這時 View 會發送請求給 Controller，然後 Controller 會請 Model 找出資料，Model 就會另外在資料庫找出資料，Model 取得資料後，再回傳給 Controller，Controller 再呈現出畫面在 View 上。 那麼 MVVM 又是什麼概念？View 跟 ViewModel 是綁定的，如果使用者想要取得資料，View 會直接請求給 Model，然後 Model 透過 Database 找到資料再回傳給 ViewModel，會直接即時顯示在 View 上。 圖片來自維基百科 所以 Vue.js 跟 一般 JavaScript 有什麼不同？一般 JavaScript 在處理畫面上是直接操作 ...

身為目前 3 大前端應用框架之一的 Vue.js，截至目前為止在 GitHub 已經累積 160k 的星星數，以下是個人的學習筆記。 開發環境 在 Vue.js官網 中建議在瀏覽器上安裝 Vue Devtools，這樣可以方便在瀏覽器中觀看訊息。 在 <script> 中直接載入 Vue 的檔案，在官網有提供各式檔案來源可供存取，要注意的是如果在開發環境下，建議使用開發版本，這樣會提供完整的警告訊息，方便開發者去查閱問題來源。 應用程式建立 首先在 HTML 建立一個 div ，這邊可以使用 id 或是 class，一般建議是使用 id， 接著在 <script> 中輸入建立 Vue 的起手式 123456789<div> <div id="app"></div></div> <script> var app = new Vue({ el: '#app' })</script> 然後打開瀏覽器的開發人員工具， ...

本來一直不是很想用 Hexo，因為覺得很多人使用，所以有使用另一種 Hugo 來架設 Blog，但是用完一直覺得不合口味，原本打算就將就著用。 剛好看到 Hexo 最多人使用的主題 - Next，感覺還不錯，真香，就來裝裝看吧！ 前置作業 安裝需求 需要安裝： Node.js Git 以下方式為 Mac 使用者方法，其他作業系統請詳閱官網 安裝 Xcode 首先到 App Store 安裝 Xcode，安裝完成後，開啟它並前往 Preferences -> Download -> Command Line Tools -> Install 安裝命令列工具。 安裝 node.js 使用 NVM，或是直接用 HomeBrew 安裝： 1$ brew install node 安裝 Hexo： 1$ npm install -g hexo-cli 完成後可以輸入指令，看看有無安裝成功，成功的話會顯示版本： 1$ hexo version 我的版本是： hexo: 4.2.0hexo-cli: 3.1.0 建立專案 在指定資料夾建立檔案： 1 ...