這篇文章適合誰 這邊文章適合對於JavaScript有興趣也有一點基礎的開發者，以下除了介紹何謂JavaScript外，本篇將運用簡單的範例程式，讓大家可以初步認識JavaScript。 什麼是JavaScript? 如果您想讓網頁動起來，除了使用各種程式語言外，JavaScript 是最適合使用的語言之一。早期的網頁都是用 HTML 語法，製作出一個個靜態網頁，向用戶顯示一些固定不變的資料。若想要讓網頁有更多的變化並且更加精緻，您就必須加上某些程式語言，如 Script 語言。 (more…)
前言在剛開始學程式時，你是不是常常聽到一個說法：HTML、CSS 與 JavaScript 是網頁前端三大要素。HTML 主要是負責資料與結構，CSS 則負責樣式的呈現，而JavaScript 負責行為與互動。但其實JavaScript 並沒有提供網頁的操作方法，前端開發者在網頁的操作方法都是「瀏覽器」提供的。 這些操作方法基本上會分別由這兩種物件所擁有：「BOM」與「DOM」。所以在瀏覽器上的 JavaScript 包含了：JavaScript 核心 (以 ECMAScript 標準為基礎)BOM (Browser Object Model，瀏覽器物件模型)DOM (Document Object…
這篇文章適合誰 這篇文章適合具備HTML與CSS有興趣也有一點基礎的讀者，以下除了介紹何謂Bootstrap外，也把Bootstrap的一些基本語法整理成範例以供慘考，讓讀者可以藉由本篇文章學習到基本的Bootstrap。 什麼是Bootstrap? Bootstrap 是一個用於快速開發Web 應用程序和網站的前端框架，提供了包含HTML、CSS及JS等內容的框架。 Bootstrap包含的內容 基本結構 ：Bootstrap提供了一個帶有網格系統、鏈接樣式、背景的基本結構。 CSS ：Bootstrap自帶以下特性：全局的CSS設置、定義基本的HTML元素樣式、可擴展的class，以及一個先進的網格系統。 組件 ：Bootstrap包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。 JavaScript插件 ：Bootstrap包含了十幾個自定義的jQuery插件。您可以直接包含所有的插件，也可以逐個包含這些插件。 定制 ：您可以定制Bootstrap的組件、LESS變量和jQuery插件來得到自己的版本。 (more…)
這篇文章適合誰jQuery 是一套 JavaScript 的 Library，因此，你需要有一些 JavaScript 的基礎，至少寫過一些 JavaScript 才比較容易上手，並且看得懂後續的教學。jQuery是什麼jQuery是一個新形態的JavaScript程式庫，主要是用在DOM 文件的操作，此外jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能，讓你更容易操作遠端文件及事件。jQuery可以幫助工程師更快的使用以javascript建立的模組，簡單來說，就是把javascript包裝成更白話、更迅速的寫法，此外，jQuery另外一個特色則是豐富的套件，五分鐘內就可以搞定燈箱、網頁進場效果。 (more…)
前言在上一篇文章中有跟大家介紹過何謂DOM/BOM，那麼這篇文章會為大家介紹DOM事件的一些基礎知識。何謂DOM事件當使用者在瀏覽網頁時，會觸發很多事件，像是點擊滑鼠、鍵盤、或是在網路上下載圖片等等行為都可以稱為是一種事件，而JavaScript使用DOM Event去定義這些事件的型態，並且處理這些事件。 (more…)
這篇文章適合誰 當提到CSS的框架的時候，大家一定會想到目前最火紅的框架：Bootstrap，但是這篇文章要帶大家來認識的是Bulma這個更為輕量、簡單的框架。而這篇文章適合對於網頁開發有興趣，並且對於CSS有一些基礎的開發者，希望可以幫助到大家。 什麼是Bulma? Bulma是一個基於 Flexbox 的現代化的 CSS 框架，設計的初衷就是移動式裝置優先(手機、平板)，可以輕鬆用來實現各種簡單或者複製的內容佈局，瀏覽器支持：Chrome、Edge、Firefox、Internet Explorer (10+)、Opera 以及 Safari。 (more…)
我們在開發網站的時候常常會需要說將Sass的環境變數，或是function與mixin給抽取出來，達到共用，不要重複造輪子! 但是你會發現我在使用Vue開發的時候，雖然組件化方便我們管理每個組件的Sass，但是多了個不方便的就是如果要使用變數，或是function與mixin的時候要怎麼辦? 如果是聰明的你一定會想到這樣! 但是問題來了，如果今天你有100個 component 你就要引入100次，然後如果你忘記引入一個你就要慢慢找........(WTF 所以那有沒有方法可以全域共用了? 答案是 "有的" !!! 其實很簡單，我們只要對webpack的設定做一點小小修改就可以達到了 { test: /\.(sass|scss)$/, use: [ 'vue-style-loader', 'css-loader', 'postcss-loader', {…
當我們已經學會用webpack做初步的編譯跟打包後，你會想說，難道每次我次改檔案就要在執行 npm run build 重新編譯（不知道的可以看這），這樣在開發上面不會很麻煩嗎？ 其實如果用webpack編譯 js 檔案的話，有個執行的命令叫watch，可以幫助我們監控我們的js，只要今天js檔案有變動就會直接自動幫我們執行編譯，我們可以來看看。 我們要在package.json 中加上 watch 指令，首先我們要新增一個npm script “watch”: “webpack --watch” https://gist.github.com/MikeCheng1208/b8a608bf733023746a4256b8f9439c0c#file-package-json 這樣接下來我們除了 build 以外也多了一個watch的指令，接下來就執行 > npm…
上一篇我們在介紹webpack是什麼東西（沒看過趕快去看XD），接下來我們來談談細節的配置，我們已經可以做基本的輸出了，上篇教學説我們會分兩個資料夾src跟dist，src是指我們的開發檔案，輸出到dist是編譯過後的檔案，但是要怎麼指定src跟dist輸出的路徑呢？首先你要了解webpack是建立在nodejs上面的工具，webpack只負責編譯，搬檔案就要靠nodejs的api來幫忙啦！nodejs 要搬移任何的檔案都要靠一個叫path的api來做（文件在此）所以我們來看，首先要在webpack.config.js 用 require 的方式來引入path的模組。var path = require(‘path’);然後在module.exports裡一開始加入 context這個屬性，裡面使用path.resolve 這個方法來指定一開始的路徑context: path.resolve(__dirname, ‘src’),__dirname在nodejs裡面代表的一個特殊的變數，只的是當前執行文件所在目錄的完整目錄位置，所以我們要設定path.resolve第一個參數__dirname，然後指定第二個參數，從src資料夾開始找檔案。好啦！開始創一個src資料夾跟把我們要編譯的js放到src資料夾裡面這是目前的webpack.config.js設定（此區塊有程式碼無法顯示，文末有連結可回到原文查看！）好啦！實際跑跑看，開終端機跑> npm run build記得你的package.json 的script ，如果不知道請參考上一篇文章 但是今天你想要輸出不是在dist資料夾內呢？有些時候我們跟後端配合專案會需要把檔案自動給放到其他資料夾內，而不是dist，那要怎麼做？這時候我們可以在 output 設定裡面重新指定路徑，像這樣（此區塊有程式碼無法顯示，文末有連結可回到原文查看！）在output裡面可以用一個path的屬性，在使用 path.resolvepath:…
曾幾何時Web前端界寫的不再是單純html、css、js，許多Preprocess(前處理)工具跟框架不斷的冒出來，不斷拉高前端門檻，導致出現了許多斷層，可能你聽過 es6、pug、sass、vue、reactjs (沒聽過的可以參考之前我寫的另外一篇文章 - 在開始寫Code之前？) ，這些東西可以說是現在前端界必須要了解的，可是問題來了!? 即使寫了這些Preprocess，但是瀏覽器還是無法識別，看不懂啊，所以也出現了許多前端自動化的工具出來，編譯這些Preprocess然後打包成瀏覽器看得懂的內容，例如我們等一下會仔細提到的webpack、或是不太會提到的gulp、Parcel等……或許你打開104或是其他找工作的平台都會寫說需要有webpack打包的使用經驗或是其他第三方的自動化工具使用經驗，但是到底什麼是webpack? 到底webpack可以幫我們做什麼事情？ 其實webpack幫我們做的事情很簡單，就是幫我們編譯我們的Preprocess成瀏覽器看得懂的內容然後打包成一包的完成檔案然後拿去server 上傳上去。 專案結構一般我們的專案會有兩個很重要的資料夾src與dist，這兩個資料夾是什麼？src : 專門放我們Preprocess的檔案，包括es6、pug、sass、vue、jsx等檔案，這個資料夾不會丟上去server部署。dist : 經過webpack編譯打包後，產生出瀏覽器看得懂的html、css、js，要部署也是這個資料夾去部署。 會看到src的資料夾裡面有許多資料夾，這個是我自己的分類方式，每個人的都多少會不一樣，僅供參考啦～像這樣的開發方式就像是現代前端的開發方式，我們就可以專心的用去多好用的Preprocess，不用去管最後的編譯成果！前面說了這麼多觀念，接下來我們來說些比較入門偏技術的部分～ (more…)