Javscript 18 歲生日歷史演進

resin.io 看到這篇 Happy 18th Birthday JavaScript! A look at an unlikely past and bright future. 裡面有些 Javascript 發展史,蠻有趣的,分享給大家看看。18 年前由 Netscape 和 Sun 共同 Release Javscript,在當年18天後,Ruby 也同時發佈了,底下來看看 Javscript 歷史演進。 Continue reading “Javscript 18 歲生日歷史演進”

CodeIgniter REST Server with Backbone.js Issue

CodeIgniter
如果有在用 CodeIgniter 來當作 REST Server 的朋友們,我相信都會找到 philsturgeon 所寫的 codeigniter-restserver,此套件幫你完成底層 API Response 動作,讓你可以輕易處理 REST URL。但是如果拿這套程式碼來搭配 Backbone.js 你會遇到拿不到 POST 或 PUT 變數問題,作者來一一描述。 Continue reading “CodeIgniter REST Server with Backbone.js Issue”

Cross Site Request Forgery in JS Web Apps and CodeIgniter PHP Framework

Cross Site Request Forgery 簡稱 CSRF 是網路上最常見的攻擊方式,由於前端的盛行,現在開發網站偏向前後端拆開,前端使用大量的 Javascript 及 CSS3 效果,後端則是使用 PHP, Ruby, Python… 等,前端如何拿到資料庫資料呢,必需透 過 AJAX 方式來存取,常見的後端 API 會設計成 RESTful (GET/PUT/POST/DELETE),後端為了擋住 CSRF 攻擊,所以限定了特殊 Content-Type Header,前端需要帶 application/json 給後端才可以拿到資料,這只能透過 Ajax requests 才可以做到。 Continue reading “Cross Site Request Forgery in JS Web Apps and CodeIgniter PHP Framework”

[小技巧] JavaScript Cross Browser Best Practices

ie-logo-small
先前寫了一篇 modern.IE 的使用方式及介紹,今天在 Facebook 上看到 Eric Shangkuan 說已經有了中文介面,如果你的瀏覽器是中文版,應該就可以直接看到中文介面了,裡面有篇文章非常重要,寫 Web 的工程師都必須注意,那就是 Cross Browser Best Practices,這篇文章教您如何撰寫相容於舊版 IE 瀏覽器的一些小技巧,這些技巧也不只用在 IE 上,更是教您在實做 CSS,JavaScript 的注意事項。我們來看看 Javascript 的小技巧。 Continue reading “[小技巧] JavaScript Cross Browser Best Practices”

輕量級 jQuery Slideshow Plugin

相信在網路上可以找到一堆 jQuery Slideshow Plugin,例如 33 POWERFUL JQUERY SLIDESHOW (SLIDERS) PLUGINS AND TUTORIALS 介紹了 33 種不同的 Slideshow Plugin,有些用起來很複雜,有些則是過於簡易,本來是想自己寫一套出來,但是想想是否可以找一套已經有輪子的架構,再拿來修改成專案所需要的套件,於是參考了這套原始碼,發現此專案只有提供 fade 和 slide 兩種效果,沒有像是投影片可以任意滑動的功能,所以自己把此功能 patch 上去,可以參考我放到 Github 的專案,寫法很容易,可以直接看線上 Example

載入 jQuery 和 plugin


Continue reading “輕量級 jQuery Slideshow Plugin”

Javascript 前端工具 Backbone.js Framework 初學介紹

backbone
我相信大家對於後端程式 PHP, Ruby, Python .. 等語言都已經相當熟悉,進階開發者也都接觸了好用的後端 Framework 如 CodeIgniter, CakePHP, Django, Ruby on Rail, Yii, Symfony .. 等,用 Framework 最大的好處並不是在 Framework 提供了大量工具,而是制定了 MVC 架構,讓專案多位開發者可以遵循,上了講了這麼多後端 MVC Framework,那麼前端呢?接下來介紹前端強大工具: Backbone.js

什麼是 Backbone.js

簡單來說 Backbone.js 就是一套前端 Javascript Framework,它提供 MVC 架構,相信大家都玩過後端 MVC,那至於前端呢,好像比較少人提到,這就是介紹 Backbone.js 最主要的目的。Backbone.js 包含了 Model View Controller 來讓使者操作,Model 提供了key-value 結構,以及可以 binding 大量 event,開發者可以透過 RESTful JSON interface 來跟 Backbone.js 的 Model 及 Collection 搭配。如果想瞭解 Backbone.js 線上文件可以參考 GitHub 網站,如果想瞭解程式碼可以參考 source code 註解Continue reading “Javascript 前端工具 Backbone.js Framework 初學介紹”

你不可不知的 JSON 基本介紹

還不知道 JSON 是什麼嘛?本篇教學會帶您瞭解 JSON 在網站上的應用,以及運作流程跟使用 PHPJavaScript 來處理 JSON。假如您現在的工作就是網站設計師,相信一定聽過 JSON,但是什麼是 JSON,它能夠做什麼,及您能透過它在網站上做到哪些事情呢?

透過本篇介紹您可以瞭解基本的 JSON,底下會列出本篇會提到的重點:

  • 什麼是 JSON
  • JSON 應用在哪些地方
  • 如何建立 JSON 字串
  • 一個簡單的 JSON 範例
  • JSON vs XML
  • 如何透過 PHP 及 JavaScript 使用 JSON

什麼是 JSON

JSON 是個以純文字為基底去儲存和傳送簡單結構資料,你可以透過特定的格式去儲存任何資料(字串,數字,陣列,物件),也可以透過物件或陣列來傳送較複雜的資料。一旦建立了您的 JSON 資料,就可以非常簡單的跟其他程式溝通或交換資料,因為 JSON 就只是純文字個格式。

JSON 的優點如下:

  • 相容性高
  • 格式容易瞭解,閱讀及修改方便
  • 支援許多資料格式 (number,string,booleans,nulls,array,associative array)
  • 許多程式都支援函式庫讀取或修改 JSON 資料
Continue reading “你不可不知的 JSON 基本介紹”

2011 OSDC Day 1 筆記

Update: 補上 OSDC 紀錄影片 2011.06.26 今年很高興可以北上參加 OSDC 2011 (Open Source Developers Conference),由於之前都在南部唸書及工作,沒有機會北上參加聚會,現在人在新竹,終於有機會可以參加了,雖然早上六點就要起床趕電車了,不過到現場聽課感覺就是不同,也可以認識很多新朋友,底下來紀錄上課筆記

1.微軟與 jQuery 社群的親密接觸

講者: Eric Shangkuan (Microsoft) Slide: 微軟與 jQuery 社群的親密接觸 這是 OSDC 第一場演講,早上九點就開始了,雖然人不多,但是蠻多人還是為了講者而來,首先介紹什麼是 jQuery,以及 jQuery 一些基本用法,像是 CSS selector,如何在 Windows Visual Studio 上面開發 jQuery 及撰寫 plugin 整合進去 ASP.Net,最後介紹三個不錯用的 jQuery Plugin: Templeate, Datalink, Globalzation
  • Templeate: 這搭配 Facebook api 可以直接做個人頁面,請參考這裡
  • Globalzation: 前端多國語系實做
  • Datalink: 可以快速處理 form,利用 object 跟 jQuery 搭配
如果要研究上述三個 jQuery Plugin 可以參考底下: jQuery Datalink: https://github.com/jquery/jquery-datalink jQuery Templeate: https://github.com/jquery/jquery-tmpl jQuery Globalzation: https://github.com/jquery/jquery-global Continue reading “2011 OSDC Day 1 筆記”