Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie On Web Browsers
Ähnlich wie On Web Browsers (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
On Web Browsers
- 2. :
- 4. ←
- 6. + Firefox, Thunderbird, Gecko ... Chrome, Safari, WebKit Mac Mail... ... ...
- 8. Renderer on Browser
- 9. API API Browser Platform OS
- 10. • • API
- 11. • •
- 12. • •
- 16. HTTP: Hypertext Transfer Protocol Request(URL) Browser Server Response(Data) TCP
- 17. HTTP Request GET /index.html HTTP/1.1 Request-Line Host: localhost Method URLkeep-alive Connection: Version Cache-Control: max-age=0 Headers User-Agent: Mozilla/5.0 (Macintosh; Intel ari/535.1 Accept: text/html,application/xhtml+xml,a Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*; If-None-Match: "13185-2c-3e9564c23b600" If-Modified-Since: Sat, 20 Nov 2004 20:16 Demo
- 18. HTTP Methods •GET: •POST: • • : PUT, DELETE, HEAD, ...
- 19. HTTP Response HTTP/1.1 200 OK Status-Line Date: Fri, 08 Jul 2011 14:45:08 GMT Version Status Server: Apache/2.2.17 (Unix) mod_ssl/2.2. Content-Location: index.html.en Headers Last-Modified: Sat, 20 Nov 2004 20:16:24 Content-Length: 44 Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Content-Type: text/html <html><body><h1>It works!</h1></body></ht .... Body Demo
- 20. HTTP Status Code •200: •301: URL •404: URL •500:
- 21. HTTP Status Code •200: •301: URL •404: URL •500:
- 22. HTTP • - • • ( )
- 24. =
- 25. Data Model <HTML> DOM Box CSS {...} CSSOM Image Pixelmap
- 26. : Data Model *.c Machine AST IR Code *.h
- 27. HTML: Hypertext Markup Language <HTML> DOM Box < =” ”> </ > < > < > </ > </ >
- 28. HTML • ( / ) • (XML ) • Demo
- 29. DOM: Document Object Model <HTML> DOM Box • HTML • HTML
- 30. <html> <head>..</head> head <body> html “Greet” <h1>Greet<h1> <div> h1 <span> Hi! body </span> span “Hi!” How are you? div </div> “How are you <span> “ ... </span> span </html> Demo
- 31. CSS: Cascading Style Sheet CSS {...} CSSOM Box /* rule */ h1, h2 { /* selector */ /* properties */ font-family: monospace; font-size: 12pt; }
- 32. CSS • • • ( • • • ( )
- 33. CSS Object Model CSS {...} CSSOM Box • DOM • •
- 34. CSS Box Model DOM Box CSSOM
- 35. Box Model: Demo
- 36. Box • • DOM • block block block • inline CSS block inline • block inline Box • ( )
- 37. DOM Box Model head html block h1 block body span div block inline block span inline block CSSOM inline
- 38. Box • Block (display: block) <div>, <p>, <h1>... • Inline (display: inline) Block <a>, <b>, <span>,... •
- 39. Data Model <HTML> DOM Box CSS {...} CSSOM Image Pixelmap
- 41. / • Box •
- 42. Flow Float Absolute Multi-column Table/Grid Flexbox
- 43. : • block block block • inline block inline • block inline
- 44. : (Flow) • • ex. 600 • • =
- 45. • Box • •
- 47. : OS/ • • ( • • • ...
- 49. 1 4 3 2 6 7 5 • Box 8 9 • DFS 10 11 •
- 52. • OS • ( )
- 53. : OS • • • • ...
- 54. DOM <a> <input> <textarea> Form
- 55. Click! DOM Box Screen
- 56. • OS • DOM • OS
- 57. Questions? • •
- 58. • •
- 59. JavaScript API
- 60. JavaScript API
- 61. JavaScript <html> <head> <script> function hello() { var message = "Hello, " + document.title; window.alert(message); } </script> </head> <body onload=”hello();”> ...
- 62. JavaScript • HTML / • • (like:Perl, Ruby, Python, etc) • • Object, Function, Number, String, RegExp, Array, Math, Date
- 63. JavaScript API
- 64. API(Application Programming Interface) JS • • DOM • HTTP / Demo
- 65. • GUI , , ,... • , • ( ) AJAX Demo
- 66. HTML5 (a part of) • HTTP : WebSocket • : Canvas • 3D : WebGL • : File API, IndexedDB • ...
- 67. HTML5 (a part of) JavaScript API OS, ...
- 68. • JavaScript • API •
- 69. • •
- 70. • • • • •
- 72. Questions?