※ [本文转录自 Web_Design 看板] 作者: TonyQ (沉默是金) 看板: Web_Design 标题: 从 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 -- 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 来自: 61.224.239.208 (12/15 23:56)