让开发也懂前端

Who am I ?

•
• Frank Wang / lifesinger
• /

• http://lifesinger.wordpress.com/

Thursday, July 7, 2011

Topics

•
• Web HTML

• CSS

• JavaScript

•
•

http://www.ﬂickr.com/photos/kejun/3114605967/

Web HTML


http://www.w3.org/People/Berners-Lee/

• 1989 Tim Berners-Lee HTML

• 1993 Mosaic

• 1994 W3C

• 1997 HTML 3.2

• 1999 HTML 4.01

• 2000 XHTML 1.0

• 2008 HTML 5

http://www.w3.org/People/Raggett/book4/ch02.html

HTML

•
HyperText Markup
Language

• “ ”


http://dancewithnet.com/2009/06/14/activating-browser-
modes-with-doctype/


• p, div, span, h1-h6, body...

• ul, ol, dl, li, dd, dt
• a, em, strong, pre...
• form, input, button, label...

• img, object...
• table, tr, td, caption, tbody...

• ...

http://reference.sitepoint.com/html/elements

HTML

•
•
•


• table

• div span

• li


HTML5


<progress> <datalist>
<nav> <time>
<canvas>
<ﬁgure>

<section> <video>
<audio> <ruby>
...

http://www.w3.org/TR/html5/

http://www.w3.org/TR/html5/

CSS


• 1994 Håkon Wium Lie CSS

• 1996 CSS Level 1
• 1997 CSS Working Group
• 1998 CSS Level 2
• CSS Level 3


CSS

• Cascading
Style Sheet

•
•


CSS
•
•
•


http://www.w3.org/TR/css3-selectors/

http://www.w3.org/wiki/CSS/Properties

display

• div p block

• span a img inline

• display: block/inline/inline-block/none;


http://www.quirksmode.org/css/display.html

ﬂoat

•
•


position

• position: relative/absolute/static/ﬁxed

•


Cascading

•

•


http://www.stuffandnonsense.co.uk/archives/
css_speciﬁcity_wars.html

CSS

http://csszengarden.com/

CSS

http://www.quirksmode.org/css/contents.html


CSS

http://www.gtalbot.org/BrowserBugsSection/

CSS 3

http://media.24ways.org/2009/15/space.html

JavaScript


• 1995 JavaScript
• 1996 ECMAScript
• 1999 ECMAScript 3
• 2009 ECMAScript 5
• ECMAScript Harmony


Java JavaScript


JavaScript C
Self
“
”
-- Brendan Eich

http://www.ruanyifeng.com/blog/2011/06/
birth_of_javascript.html


Java Scheme
C
Self

JavaScript


Closure
for(var i = 0; i < elements.length; i++) {
(function(n) {
elements[n].addEventListener(‘click’, function() {
alert(n);
});
})(i);
}

http://jibbering.com/faq/notes/closures/


Prototype
function Animal(name) {
this.name = name;
}
function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

var dog = new Dog(‘ ’);

http://javascript.crockford.com/inheritance.html

DOM

• Document
Object Model

• DOM

• DOM JavaScript


DOM Scripting: Web Design with JavaScript and
the Document Object Model


http://es5.github.com/
http://lifesinger.wordpress.com/2011/02/27/references-for-javascript-study/

vs.


http://www.google.com/trends?q=yui%2Cjquery%2Cmootools%2Cdojo%2Csencha%2Cdojo


http://www.google.com/trends?q=backbone%2Czepto%2Clabjs%2Cunderscore%2Cmustache
%2Cmodernize&ctab=0&geo=all&date=all&sort=0


DOM Event Ajax...

Validator Storage Template...

Calendar Tabs Dialog...

MVC Unit Testing Module Loader...


http://addyosmani.com/resources/toolschart/chart.pdf


KISSY


2008


2009


2008 - 2009
• yahoo-dom-event.js
• UI

TBra

• 2009 suggest, kissy
editor
• web pages
• KISSY

• ExtJS


2010


2010
• Yahoo YUI3

• YUI3
IE6-7

• jQuery

• KISSY Switchable Calendar
DataLazyload AJBridge

• webww web apps

•


KISSY

• KISSY Editor

• YUI2 jQuery

•
• KISSY


KISSY
core


...

kissy

--


...
“
”

--


SeaJS

http://seajs.com/


SeaJS

•
•
•


1991
WorldWideWeb

http://en.wikipedia.org/wiki/Web_browser

1993 Mosaic

http://en.wikipedia.org/wiki/Mosaic_(web_browser)

Firefox


Chrome


Safari


Opera


WebKit
Gecko

Trident

Presto


How browsers work

http://taligarsiel.com/Projects/howbrowserswork1.htm


WebKit Developer Tools


•
• 1800

•


1993


2005


2022 ?


Q &A

• Twitter: @lifesinger
• @

•
• lifesinger@gmail.com


Thanks!


让开发也懂前端

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (10)

Similar a 让开发也懂前端

Similar a 让开发也懂前端 (20)

Más de lifesinger

Más de lifesinger (7)

Último

Último (20)

让开发也懂前端