HTML, CSS, JS歷史

W3C, ECMAscript 的關係

Javascript 由來

Brendan Eich

10 days

Brendan Eich

10 days

簡單網頁動畫

Brendan Eich

10 days

一開始名字Mocha
四個月後改Live Script

Sun Micro owned trademark for Javascript

Netscape acquired trademark license and rename LiveScript to Javascript in Dec 1995

ECMAscript?

1996-1997 Netscape created Ecma standards organizations

- 訂ECMAscript規範

- Javascript & JSLINT & ActionScript

- Netscape, Microsoft

ECMAscript 1-3 (1997-1999)

ECMAscript 4 (2000)

- jquery, dojo, mootools,

- 2005 AJAX introduced

ECMAscript 1-3 (1997-1999)

ECMAscript 4 (2000)

- jquery, dojo, mootools,

- 2005 AJAX introduced

ECMAscript 5 (2009)

- JSON parsing/serialization support
- Array prototype methods (like map and forEach)
- Methods for listing properties (like Object.keys).

W3C?

World Wide Web Consortium

W3C?

World Wide Web Consortium

HTML, CSS, DOM

DOM?

ex. 1
document.getElementById("exampleElement")

- W3C set DOM standards | Browser Related

DOM?

ex. 1
document.getElementById("exampleElement")

- W3C set DOM standards | Browser Related

ex.2
for (var I =0; I < 10; I++) {

// code....

}
- No browser | Ecmascript

HTML & CSS

- Tim Berners-Lee first created the World Wide Web in 1989

There's a now-infamous post buried in the archives of the WWW mailing list. It was written by Marc Andreessen in 1994, who would go on to co-create both the Mosaic and Netscape browsers. In the post, Andreessen remarked that because there was no way to style a website with HTML, the only thing he could tell web developers when asked about visual design was, “sorry you're screwed.”

1994 - ViolaWWW

Img by CSStricks

<MULTICOL COLS="3" GUTTER="25">
  <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P>
</MULTICOL>

1994. It was called Cascading Style Sheets, or just CSS.

html {
  margin-left: 2cm;
  font-family: "Times", serif;
}

h1 {
  font-size: 24px;
}

1996 CSS 正式來了

<!DOCTYPE html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

DOCTYPE 很重要

<!DOCTYPE html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

DOCTYPE 很重要

沒有的話，CSS會怪怪的

2000 - Apple

Img by CSStricks

2002 - ESPN

Img by CSStricks

2002 - Wired

Img by CSStricks

Resource:

http://www.benmvp.com/learning-es6-history-of-ecmascript/

https://css-tricks.com/look-back-history-css/