On Web Browsers
1 like•1,213 views
The document discusses the basics of how web browsers work. It explains that browsers use engines like Gecko or WebKit to render pages using the DOM and CSSOM models. It describes how browsers make HTTP requests to servers and receive responses, including details on status codes. It also covers HTML, CSS, DOM, and JavaScript APIs that browsers support to display and interact with web content.
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?