程式技術

核心 (Core)$(something)依據參數產生或取得 jQuery 物件 $(selector)依據 selector 規則取得 Elements，例如 1$('#my-element') $(element)將原生的 DOM 物件轉為 jQuery 物件，例如 12var element = document.getElementById('my-element');element = $(element); $(html)建立 Element，例如 1$('<div>Test</div>'); 選擇器 (Selectors)jQuery 除了可以利用 CSS 選擇器的規則找到網頁元素，還可以用其他特別的規則選取，這邊只介紹最常用的標準 CSS 選擇器規則。 ID選擇器 (ID Selector)使用井號 (#) 開頭。 1$('#my-id') 對應到 HTML 1<div id="my-id">This is id selecto ...

簡介本篇文章說明如何將開發好的 Rails 網站程式部署到 Heroku 平台上，並包含 Production 與 Staging 兩種環境。 環境Mac OSRails 4Git: 假設 repo 裡面已有兩個 branch: production 和 staging，分別部署至 production 與 staging 兩種環境 步驟申請 Heroku 帳號先到 Heroku 申請賬號 安裝 Heroku toolbelt接著到這裡下載安裝 Heroku toolbelt 登入 Heroku開啓終端機輸入 1heroku login 並輸入帳號密碼完成登入 建立 SSH key1ssh-keygen -t rsa 都按 Enter 直接用預設值即可 加入 SSH key1heroku keys:add 複製環境設定進入專案目錄下執行 1cp config/environments/production.rb config/environments/staging.rb 設定 databasee.yml編輯 config/databasee.yml，設定如下 123 ...

有使用過 GitHub 可能會看過 README.md 或者其他 xxx.md 的檔案，md 表示的意思其實是 Markdown，所以如果有在開發 open source project 的人可能會需要知道 Markdown 文件如何撰寫。 基本上 Markdown 可以用比較簡單的方式撰寫，自動產生出一些網頁語法。而 Markdown 除了最原始版本的定義之外，後來也有一些擴充功能，例如 Table 和 Syntax Highlighting 等。 這邊整合了一份在 GitHub 可用的 Markdown 語法說明與範例：Markdown 範例 在上面的網址裡直接在 GitHub 建立 Repository 撰寫 README.md，可以實際看到語法產生的結果。 參考資料 Markdown Syntax 中文版 GitHub 文件

介紹JavaScript中的運算子 (Operators) 的用法，包含邏輯運算子 (Logical Operator)、字串運算子 (String Operator) 和特殊運算子 (Special Operator)。 邏輯運算子邏輯運算子 (Logical Operator) 在程式語言中一般用來做布林代數使用，進行複數的條件判斷，例如： 1n >= 0 && n <= 100 包含以下運算子 範例 說明 a && b 邏輯 AND，a 為 true 且 b 為 true，則回傳 true a || b 邏輯 OR，a 為 true 或 b 為 true，則回傳 true !a 邏輯NOT，a 為 false，則回傳 true 然而 JavaScript 和其它語言在 && 和 || 邏輯運算子的行為上有些不同之處。 邏輯 AND(&&)JavaScript 中的 && 回傳的結果並不一定是布林值，實際上他會依據以下規則回傳運算結果： 如果運算式轉為布林值為 f ...

介紹 JavaScript 中的運算子 (Operators) 的用法，包含種類、優先順序、算術運算子 (Arithmetic Operator)、指派運算子 (Assignment Operator)、位元運算子 (Bitwise Operator) 和比較運算子 (Comparison Operator)。 簡介運算式運算式 (Expression) 或稱表達式，能夠讓直譯器理解並執行的程式片段都可以稱作運算式， 例如任何的實字或變數名稱，以下為一些運算式： 1234123i123 + ix = 123 + i 以下不是運算式： 12123 +x = 123 + 種類運算式中可透過提供一些數值給運算子 (Operator，或運算符) 進行運算，進而得到一個運算結果，可以想成類似函式的回傳。另外被運算的數值稱為運算元 (Operand)。 依據運算元的個數，運算子可以分為三種： 一元運算子，只有一個運算元，例如：!, ++ 等。 二元運算子，包含兩個運算元，大部分都屬於這類。 三元運算子，包含三個運算元，只有 ? : 運算子屬於此類。 而依據性質，可以分為： 算術運算子 ( ...

有時候會在 Mac 上安裝一些 pkg 類型的程式，不像 app 類型的程式可以在 Launchpad 中管理刪除，或者直接將 app 檔案刪除即可，要移除 pkg 套件相對麻煩許多，必須將它安裝的檔案逐一移除。 你可以嘗試以下的步驟將相關檔案移除： 開啟終端機 (Terminal)，輸入： 1pkgutil --pkgs | grep 套件可能的名稱 如果不確定名稱的話，可以全部列出尋找： 1pkgutil --pkgs 找到一個完整的套件名稱之後，查詢套件完整訊息，輸入： 1pkgutil --pkg-info 完整的套件名稱 例如： 123456pkgutil --pkg-info org.virtualbox.pkg.virtualboxpackage-id: org.virtualbox.pkg.virtualboxversion: 4.2.10volume: /location: Applications/install-time: 1363958181 接著切換到 volume 和 location 所指向的位置： 1cd /Applications/ 先將身份 ...

簡介透過一些演算法能夠對樹狀結構的節點進行逐一的訪問，可以應用在搜索、序列化或其他的用途上。依據走訪的方式，大致上可分為以下兩大類： 深度優先 (Depth-first)深度優先又分為三種走訪方式，而一般樹和二元樹以下分開來討論： 一般樹 前序 (Pre-order) 訪問根節點 訪問所有子樹 上圖的走訪順序為：ABDEFHCG 中序 (In-order) 訪問第一個子樹 訪問根節點 訪問其他子樹 上圖的走訪順序為：DBEHFAGC 事實上一般樹的情況下，中序走訪並不實用。 後序 (Post-order) 訪問所有子樹 訪問根節點 上圖的走訪順序為：DEHFBGCA 二元樹 前序 (Pre-order) 訪問根節點 訪問左子樹 訪問右子樹 上圖的走訪順序為：ABDECFG 中序 (In-order) 訪問左子樹 訪問根節點 訪問右子樹 上圖的走訪順序為：DBEAFCG 後序 (Post-order) 訪問左子樹 訪問右子樹 訪問根節點 上圖的走訪順序為：DEBFGCA 廣度優先 (Breadth-first)廣度優先又可以稱為 Level-order，將每一 ...

本文將透過圖解的方式說明 CSSOM View Model 中 HTMLElement 定義的屬性，包含 offsetLeft、offsetTop、offsetWidth、offsetHeight 和 offsetParent。 JavaScript 中可以由 Element 的 DOM 物件中使用 offsetLeft、offsetTop、offsetWidth 和 offsetHeight 的屬性，其中 offsetWidth 和 offsetHeight 的意義可以用下面這張圖說明： offsetWidth唯讀。表示 Element 佔用的寬度除去 magin 的部分。也可以用數學表示： 1offsetWidth = width + padding + border offsetHeight唯讀。表示 Element 佔用的高度除去 magin 的部分。也可以用數學表示： 1offsetHeight= height+ padding + border offsetLeft唯讀。表示 Element 左邊距離與 offsetParent 左邊界距離，有以下四種情況： offse ...

本文將透過圖解的方式說明 CSSOM View Model 中 Element 定義的屬性，包含 scrollLeft、scrollTop、scrollWidth、scrollHeight 和 scrollIntoView。 JavaScript 中可以由 Element 的 DOM 物件中使用 scrollLeft、scrollTop、scrollWidth 和 scrollHeight 的屬性，這些屬性的意義可以用下面這張圖說明： scrollWidth唯讀。表示 Element 內容物實際上的寬度，scrollWidth 大於等於 clientWidth。 scrollHeight唯讀。表示 Element 內容物實際上的高度，scrollHeight 大於等於 clientHeight。 scrollLeft表示內容物捲動到的水平位置，由上圖可知表示可視區左邊界與內容物左邊界的距離；當捲軸在左邊時 (由右至左書寫)，則為可視區右邊界與內容物右邊界的距離。可透過修改此屬性來捲動。 scrollTop表示內容物捲動到的垂直位置，由上圖可知表示可視區上邊界與內容物上邊界的距離。可透過 ...

本文將透過圖解的方式說明 CSSOM View Model 中 Element 定義的屬性，包含 clientLeft、clientTop、clientWidth 和 clientHeight。 JavaScript 中可以由 Element 的 DOM 物件中使用 clientLeft、clientTop、clientWidth 和 clientHeight 的屬性，這些屬性的意義可以用下面這張圖說明： clientWidth唯讀。表示 Element 實際上可視的區塊寬度，也可以用數學表示： 1clientWidth = width + padding - 卷軸寬度 clientHeight唯讀。表示 Element 實際上可視的區塊寬度，也可以用數學表示： 1clientHeight = height + padding - 卷軸高度 clientLeft唯讀。由上圖可知表示可視區左邊界與 border 左邊界的距離，基本上相當於左邊 border 的寬度；當左邊有卷軸的時候 (書寫方向由右至左時可能會出現)，則還要加上卷軸寬度。用數學表示： 由左至右1clientLeft ...