skyroxas1521

skyroxas1521

31 posts published

JavaScript

JavaScript 何謂物件原型 (prototype)

何謂物件原型 (prototype) 每個 JavaScript 物件都會有 第二個 JavaScript 的物件與之關聯，而這個第二個的 JavaScript 物件就被稱呼為 “物件原型” > 而第一個物件就是從這個原型來繼承特性 參考方式： JavaScript 中我們使用下列方式來參考原型物件 Object.prototype 且像是 ECMADscript 定義的 Native(原生)物件：Object() 、 Date() 、 Array() … 也都具有著 prototype 的原型物件 而當我們使用 new 與 建構式（constructor） 所產生的新物件： new Date(); 其原型就為 建構式（constructor） 的 prototype 特性，也就是： Date.prototype 另外一提： Object.
gulp

前端自動化：Gulp 學習路程

本篇目標: * 初步認識 Gulp (安裝與使用) * 建立前端自動化安裝環境 * 自訂屬於自己的 Gulp 開發環境 初步認識 Gulp： Gulp 為 Node.js 的套件，可以自訂屬於自己的前端自動化環境，簡單點說可以幫你一次解決： * Sass、Less 自動編譯為 Css * 自動加入 “瀏覽器前綴” 給你的 Css 屬性 * 自動幫你編譯 Jade 為 Html * 壓縮圖片 * 打包壓縮 CSS 與 JS * 瀏覽器自動重新整理 * ….. 以上這些可能已經能省下許多 開發前、開發中、開發後 時特別需要留意花時間的動作 > 凡事需要做兩次以上的事物，都可以有自動化的價值 讓我們繼續往下看~~ 安裝 Gulp 環境： > gulp
jQuery

jQuery 取得 Dom 元素座標 - Offset() 與 Position()

前言： 當你是透過你所收尋的關鍵字找到這篇文章的同時，恭喜～你已經找到了答案的關鍵 ! 你需要藉由 Dom 元素 的 座標 來判斷說你指定的 Dom 元素 存在於畫面的哪個位置，來完成你開發上的應用。 > * 假設如上述所言～請放心繼續往下閱讀 * 如果你只是剛好逛到～也可以繼續往下看 座標 在前台有許多的地方會被使用到～一定對你有幫助 一、調用方式： 1.取得目標 x 與 y 舳之座標： 程式碼： $('element').Offset(); Google Chrome consoleLog 結果： Object {top: 780, left: 30} 結果呈現出： > * top：為指定元素的 y 軸的座標;
Html

html input標籤的disabled屬性與readonly屬性

最近在製作webform表單時，我要做到讓一個input標籤裡的value的值，禁止讓客戶自行更改的input欄位! 像圖所示的效果! (此value是無法做修改的) 原先我是使用disabled的屬性來達成我想要的效果! <input disabled="value"> 但會導致一個很嚴重的問題 使用disabled屬性的input裡的value會無法被傳值出去，也就是在這個表單資料送出去時，這個input裡的value傳出去會變成空白 因為disabled的屬性已經整個禁用了此input的元素，所以完全無法抓去到此元素的value 後面才驚覺必須要使用readonly的屬性 <input readonly="value"> 這屬性就只是單純的使使用者只可看到input元素的value，無法自行修改，不會造成傳值方面上的問題 disabled:當 input 元素加载时禁用此元素。 readonly:规定输入字段為可讀不能寫。
SASS

使用sass mixin來開發responsive網站

前言 RWD為響應式網站（Responsive Web Design）的縮寫，為2012年以來，最流行的前端技術之一，通過CSS3的Media Query，可以讓網頁在不同尺寸的裝置下，都可以套用不一樣的CSS Style，讓每個不同裝置同樣瀏覽網頁，都可以用最佳的畫面 來瀏覽。而為了要開發RWD的網頁與簡化撰寫CSS流程，進而有了SASS、LESS等工具來協助開發，但是難免開發久了，不免都還是會覺得又臭又長。利用SASS的Mixin功能，搭配本篇特殊結構，可以讓開發模板的時間更為簡潔。 傳統media queries寫法： //電腦版 @media all and (min-width: 960px) { .div1{ padding:20px; } .div2{ margin:20px; } } //平板 @media all and (min-width: 760px) and (max-width: 959px) { .div1{
Language

jQuery控制Dom元素

前言 CMS系統(drupal,joomla,wordpress…)在網站開發上,與傳統的開發上有著極大的差異,html架構並不是單純就前端這邊來刻出自己想要的html架構,絕大部分是由後端php產生出來的! 如果你剛好跟小弟一樣!是從CMS開始進入到網頁前端(web frontend)這個大家庭,那你一定要參考這篇文章,可以讓你不會像過去的我走上許多CSS亂拼亂湊的冤妄路!! jQuery 再開始說明之前,你必須要先知道jQuery [https://jquery.com/](一套跨瀏覽器的JavaScript函式庫，簡化HTML與 JavaScript [https://developer.mozilla.org/zh-TW/docs/Web/JavaScript] 之間的操作)他是此篇文章的主角和關鍵! 另外假設你與我當時一樣對jQuery與javascript完全無知卻想立刻得到成果的門外漢也可以繼續往下看!可以從下面簡單且實用的jQuery對html物件操作的應用!來慢慢深入jQuery與javascript相心會對你前台開發上會有不錯的幫助! 正篇開始~ 以此架構為例