5. How
to
open
it
¢Right
click
on
webpage
anywhere
-‐>
click
“inspect
element”
¢Click
-‐>
Tools
-‐>
Developer
Tools
¢“View”
on
toolbar
-‐>
Developer
-‐>
Developer
Tools
5
12年4月24日星
6. Elements
Panel
¢DOM
tree
¢Allow
inspecHon
and
on-‐the-‐fly
ediHng
of
DOM
elements
¢More
curious
informaHon
— Styles,
Metrics,
ProperHes,
Others
¢DEMO
— On-‐the-‐fly
ediHng:
hEp://goo.gl/bXvKd
— Metrics
&
others:
hEp://goo.gl/kLWnX
— Right-‐Lock:
hEp://goo.gl/Y7IIE
6
12年4月24日星
8. Network,
Scripts,
Timeline,
Profile
Panel
¢Network
— The
loading
Hme
of
those
resources
¢Scripts
— Javascript
Debugger(Breakpoints)
— hEp://mirlab.org/users/ronald.hsu/
web_course_demo/keyboardevent01.htm
¢Timeline
— The
loading
Hme
of
each
operaHon
detail
¢Profile
— Monitoring
CPU
&
HEAP
usage
rate
in
client 8
12年4月24日星
9. Console
Panel
¢$(“id”):
select
a
element
¢inspect(id):
showing
content
of
this
element
¢dir($(“id”)):
showing
aEribute
of
this
¢DEMO:
hEp://mirlab.org/users/ronald.hsu/
web_course_demo/keyboardevent01.htm
¢Firebug
Command
Line
API
— hEp://geqirebug.com/wiki/index.php/
Command_Line_API
9
12年4月24日星
10. jQuery
¢jQuery
是⼀一套物件導向式簡潔輕量級的
JavaScript
Library。透過
jQuery
你可以用最精簡少量的程式碼
來輕鬆達到跨瀏覽器
DOM
操作、事件處理、設計
頁面元素動態效果、AJAX
互動等。
¢jQuery
is
a
fast
and
concise
JavaScript
Library
that
simplifies
HTML
document
traversing,
event
handling,
animaDng,
and
Ajax
interacDons
for
rapid
web
development.
jQuery
is
designed
to
change
the
way
that
you
write
JavaScript.
¢摘自:hHp://jquery.com/、
hHp://
webdesign.kerthis.com/jquery/ 10
12年4月24日星
15. Selector(Cont.)
¢Base
filters:
(First
/
Last
/
not)
— :first
-‐>
The
first
element
in
definiHon
¢$(‘tr:first’)
:
The
first
tr
¢$(‘td:first’)
:
The
first
td
— :last
-‐>
The
last
element
in
definiHon
¢$(‘tr:last)
:
The
last
tr
¢$(‘td:last’)
:
The
last
td
— Not
¢ $(‘tr:not(:first)’)
:
All
of
tr
elements
except
for
the
first.
¢DEMO:
hEp://goo.gl/jlFuZ
15
12年4月24日星
25. jQuery
Plugin
¢Media
Player
¢Slideshow
¢jQuery
UI
¢Image
Galleries
¢Form
Filtering
¢Document
Viewer
¢Dialog
Box
¢More:
The
God
of
google
25
12年4月24日星
27. More
¢URL
Parsing
with
javascript
— hEp://jsbin.com/eqicig/2
¢Extensions
for
web
developers/designer
— chrome
extensions
"web
developer"
tools
27
12年4月24日星
28. More
online
courses
¢Codecademy(Simple
&
Step
by
step)
— hEp://www.codecademy.com
¢Coursea(Other
domains)
— hEps://www.coursera.org/
¢Code
School(Step
by
step
&
Video)
— hEp://www.codeschool.com/
¢Stanford
Open
Course
2012(Other
domains)
— hEp://stanford.edu/online/courses
28
12年4月24日星