On Web Browsers

1,372 views
1,327 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,372
On SlideShare
0
From Embeds
0
Number of Embeds
49
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

On Web Browsers

  1. 1. 2011/07/15<morrita@gmail.com>
  2. 2. :
  3. 3.
  4. 4. + Firefox, Thunderbird,Gecko ... Chrome, Safari,WebKit Mac Mail... ... ...
  5. 5. Renderer onBrowser
  6. 6. API API Browser Platform OS
  7. 7. •• API
  8. 8. ••
  9. 9. ••
  10. 10. HTTP:Hypertext Transfer Protocol
  11. 11. HTTP:Hypertext Transfer Protocol Request(URL)Browser Server Response(Data) TCP
  12. 12. HTTP RequestGET /index.html HTTP/1.1 Request-LineHost: localhostMethod URLkeep-aliveConnection: VersionCache-Control: max-age=0 HeadersUser-Agent: Mozilla/5.0 (Macintosh; Intelari/535.1Accept: text/html,application/xhtml+xml,aAccept-Encoding: gzip,deflate,sdchAccept-Language: en-US,en;q=0.8Accept-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
  13. 13. HTTP Methods•GET:•POST: •• : PUT, DELETE, HEAD, ...
  14. 14. HTTP ResponseHTTP/1.1 200 OK Status-LineDate: Fri, 08 Jul 2011 14:45:08 GMTVersion StatusServer: Apache/2.2.17 (Unix) mod_ssl/2.2.Content-Location: index.html.en HeadersLast-Modified: Sat, 20 Nov 2004 20:16:24Content-Length: 44Keep-Alive: timeout=5, max=100Connection: Keep-AliveContent-Type: text/html<html><body><h1>It works!</h1></body></ht.... Body Demo
  15. 15. HTTP Status Code•200:•301: URL•404: URL•500:
  16. 16. HTTP Status Code•200:•301: URL•404: URL•500:
  17. 17. HTTP• -•• ( )
  18. 18. =
  19. 19. Data Model<HTML> DOM BoxCSS {...} CSSOM Image Pixelmap
  20. 20. :Data Model*.c Machine AST IR Code*.h
  21. 21. HTML: Hypertext Markup Language <HTML> DOM Box< =” ”> </ >< > < > </ ></ >
  22. 22. HTML• ( / ) • (XML )• Demo
  23. 23. DOM:Document Object Model<HTML> DOM Box• HTML• HTML
  24. 24. <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
  25. 25. CSS:Cascading Style Sheet CSS {...} CSSOM Box /* rule */ h1, h2 { /* selector */ /* properties */ font-family: monospace; font-size: 12pt; }
  26. 26. CSS• • • (• •• ( )
  27. 27. CSS Object Model CSS {...} CSSOM Box• DOM ••
  28. 28. CSS Box Model DOM Box CSSOM
  29. 29. Box Model: Demo
  30. 30. Box• • DOM• block block block • inline CSS block inline • block inline Box• ( )
  31. 31. DOM Box Model headhtml block h1 block body span div block inline block span inline block CSSOM inline
  32. 32. Box• Block (display: block) <div>, <p>, <h1>...• Inline (display: inline) Block <a>, <b>, <span>,...•
  33. 33. Data Model<HTML> DOM BoxCSS {...} CSSOM Image Pixelmap
  34. 34. /• Box•
  35. 35. Flow Float AbsoluteMulti-column Table/Grid Flexbox
  36. 36. :• block block block• inline block inline• block inline
  37. 37. : (Flow)• • ex. 600•• =
  38. 38. • Box••
  39. 39. :OS/•• (••• ...
  40. 40. 1 4 3 2 6 7 5• Box 8 9 • DFS 10 11•
  41. 41. • OS• ( )
  42. 42. : OS•••• ...
  43. 43. DOM<a> <input> <textarea> Form
  44. 44. Click!DOM Box Screen
  45. 45. • OS• DOM• OS
  46. 46. Questions?••
  47. 47. ••
  48. 48. JavaScript API
  49. 49. JavaScript API
  50. 50. JavaScript<html><head><script>function hello() { var message = "Hello, " + document.title; window.alert(message);}</script></head><body onload=”hello();”>...
  51. 51. JavaScript • HTML / • • (like:Perl, Ruby, Python, etc) • • Object, Function, Number, String, RegExp, Array, Math, Date
  52. 52. JavaScript API
  53. 53. API(Application Programming Interface) JS•• DOM• HTTP / Demo
  54. 54. • GUI , , ,...• ,• ( ) AJAX Demo
  55. 55. HTML5 (a part of)• HTTP : WebSocket• : Canvas• 3D : WebGL• : File API, IndexedDB• ...
  56. 56. HTML5 (a part of) JavaScript API OS, ...
  57. 57. • JavaScript• API•
  58. 58. ••
  59. 59. •••••
  60. 60. Questions?
  61. 61. Photo credithttp://www.flickr.com/photos/birdfarm/519230710/http://www.flickr.com/photos/saschaaa/152502539http://www.flickr.com/photos/junnn/4095423137/http://www.flickr.com/photos/ccnz/401169276/sizes/http://www.flickr.com/photos/gilderic/4398769315http://www.flickr.com/photos/wiccked/184616586/http://www.flickr.com/photos/anneh632/4807040595/http://www.flickr.com/photos/mrsenil/2073171323/http://www.flickr.com/photos/afu007/2398217277/http://www.flickr.com/photos/cityhunter12/

×