作者 TonyQ (沉默是金) 看板 Web_Design
標題 從 js 到 jQuery 之一：javascript的魔力
時間 Thu Aug 7 02:10:01 2008
有鑑於javascript常常讓人望之卻步 , 興起用下班時間寫一些教學的念頭,
畢竟想做就該找方法 , 不太應該拿下班當理由 ,
簡單用700～1000字為 jQuery及js的觀念寫一系列的文章.
主要希望讓沒碰過的朋友們能有基礎 , 讓碰過的朋友們能加強觀念.
當然為了增加吸引力 , 每章最後都來放個實做案例好了...XD
前三章應該主要還是在dom(document object model ).
────────────────────────────────
第一章主要是要講什麼是javascript , 他在網頁設計上扮演著什麼角色,
算是讓沒有基礎的使用者可以用來銜接用的 , 有基礎的版友可能會比較失
望一點.
────────────────────────────────
標題 從 js 到 jQuery 之一：javascript的魔力
時間 Thu Aug 7 02:10:01 2008
有鑑於javascript常常讓人望之卻步 , 興起用下班時間寫一些教學的念頭,
畢竟想做就該找方法 , 不太應該拿下班當理由 ,
簡單用700～1000字為 jQuery及js的觀念寫一系列的文章.
主要希望讓沒碰過的朋友們能有基礎 , 讓碰過的朋友們能加強觀念.
當然為了增加吸引力 , 每章最後都來放個實做案例好了...XD
前三章應該主要還是在dom(document object model ).
────────────────────────────────
第一章主要是要講什麼是javascript , 他在網頁設計上扮演著什麼角色,
算是讓沒有基礎的使用者可以用來銜接用的 , 有基礎的版友可能會比較失
望一點.
────────────────────────────────
＠什麼是Javascript？它跟Java程式語言有關嗎？我需要學嗎？
Javascript 跟 Java完全不相關 , 就跟原子筆跟原子沒什麼關係一樣,
他是在網頁上執行的程式碼（或稱作腳本語言 , script lang）.
基本上一個html網頁是很堅強的 , 完全沒有javascript也可以活的下去,
所以如果你不會 javascript , 可以先不用急著擔心自己是不是落伍了 .
一般網頁設計的書籍都會教你一條設計守則 ,
以html為主 , javascript只是增強.
所以我可以很阿Q的回答你 , 不會Javascript理論上不會有什麼問題.
不過如果是這樣這篇文章就沒有存在的必要了 ,
所以接著我們來看看 javascript究竟可以為我們帶來什麼益處.
────────────────────────────────
＠從遠距欣賞走向互動的推手
過去在1999年代前後 , 我們最常看到的互動 ,
就是一堆alert或window.open的爆炸視窗 , 跟ie 提供的marquee 跑馬燈.
大部分時間我們都只是靜靜的在欣賞別人的靜態作品 ,
很少有人會特地去設計互動性的網頁 , 此時 js 只被拿來惡搞.
講到js應該不少人會聯想到特效 , 所謂的特效不外乎就是按一下跑出一張圖,
按一下某個區塊消失 , 另一個區塊同時顯示 , 甚至像底下連結的有趣特效.
http://malsup.com/jquery/cycle/ （中央的圖片 請耐心等候2~3秒.）
（當然 , 這也是一個jquery強大的plug-in 例證.）
＠網頁需要改變 （更快的改變！）
沒錯 , javascript主要的運用就是在效果上 ,
對於傳統靜態網頁設計來講 , 想要讓網頁顯示不同的面貌 ,
很簡單 , 重新設計一分html就是了 ,
擺上一個超連結讓使用者連結過去 , 一切好像都很美好!
不過我們知道網頁不可能一秒十六張 , 影像變成動畫在這裡
幾乎是不可能的事情, 於是我們只能仰賴如marquee之類的元件 .
這時候有個東西就說 , 既然網頁上都是一個一個的tag元素 ,
我是不是可以把它整個看成是一個document（文件） , 其中有
一個一個大包小的elemen（元素）呢？
然後你也不要重新寫一份了 , 告訴我你想改那個元素的那個值 ,
要他顯示或不顯示 , 要他走就走要他飛就飛 , 好不愜意 .
這個東西就是javascript , 他幾乎80％以上的功能是來自異動或新增
現有頁面的網頁元素的內容,來達成各式的效果 .
剩下20%則是在於瀏覽器的歷史紀錄 , 以及像是alert,
或者是ie底下可支援自製的 activeX 及popupwindow ,
還有cookie編輯跟計時器(timeout跟internal的支援）等等.
＠貼心的好幫手
從送出表單時貼心地檢查表單內容是否符合需要，
到滑過某些特定元件時顯示出詳細資料（tooltip) ，
或是看圖片時貼心顯示較大圖片方便觀賞（thickbox功能之一）
甚至是像gmail 或者網路上眾多ajax網站 ,
豐富的互動式體驗 , 這些全都仰賴javascript協助.
────────────────────────────────
＠實例體驗
第一篇內容能寫的有限 , 所以就先進體驗吧 ,
這裡我們要介紹的是 TableSorter with jQuery.
要展示javascript異動網頁元素的經典例子 ,
可排序的table 當然會是個好例子.
原碼下載
http://tablesorter.com/docs/
簡單的demo頁面（操作說明請看註解）
http://tonyq.org/test/testTableSorter.html
另外他還有一個有趣的feature , 想要實現多條件排序 ,
只要按住shift , 依序點選你想要的排序條件 , 就可以達成.
--
竟然兩點了...來去睡...=w=...請多多指教...
--
What do you want to have ? / What do you have?
從書本中，你可以發現我的各種興趣。
從ＣＤ中，你可以瞭解我所喜歡的偶像明星。
或許從文字你很難以瞭解一個人，但從物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.132.59.247
→ TonyQ:先預告一下 , 下一篇:讓node無所遁形之Selector篇 . 08/07 02:15
推 koko1487:期待期待~ 08/07 02:19
推 cjoe:推 08/07 02:24
推 james732:有看有推!! 08/07 02:25
推 uold:好文，不得不推！！ 08/07 02:25
推 Fadis:好文 期待下篇@@! 08/07 03:31
推 aiyswu: 08/07 03:59
推 edia0912:pupupupupu....push! 08/07 09:08
推 q33qq33q:推~好文阿!期待下篇! 08/07 09:20
→ TonyQ:頁面如果開的有點慢請忍耐一下,目前只有15k左右的上傳頻寬. 08/07 12:25
→ TonyQ:新牽的網路還在跑流程...XD 08/07 12:25
推 Hikki520:好文!!大推 08/07 16:11
推 dklink:下集快來XD 08/07 16:57
推 JYHuang:越看越覺得自己寫js是在浪費時間 XD 08/07 18:05
推 a0955133:推^^ 08/07 18:17
推 ot32em:好文好文 看了感覺jQuery好像是 Javascript 2.0 新一代!!XD 08/07 20:31
推 ateclean:真好～ 08/07 22:10
推 Kenqr:推！ 08/08 02:01
推 ckw:好文推! 08/08 11:56
推 gpmm:推推～推 TonyQ 大 >///< 08/09 14:48
→ TonyQ:g老大最近在忙什麼 好久沒看到你了, 該不會今天還在加班？XD 08/09 14:52
推 drinks:推! 08/22 12:37
推 Arton0306:推 09/09 14:40
推 neodin:推 06/02 09:40
※ 編輯: TonyQ 來自: 61.224.239.208 (12/15 23:45)
→ TonyQ:更新失效連結 12/15 23:46
轉貼自TonyQ@ptt.cc(Web_Design板)，感謝這位高手的分享！
沒有留言:
張貼留言