“    ”
JavaScript
JS   …
Web
browser           Server          (^o^)
Web
browser   Server
…browser       Server
browser   Server
1browser           Server              …
browser   Server
HTML
Web
GET index.htmlbrowser                    Server            <html>           … Hello …            </html>
<html> <head>  <link rel="stylesheet" href="style.css" /> </head> <body>  <img src="hello.png" alt="Hello" />  <img src="w...
<html> <head>  <link rel="stylesheet" href="style.css" /> </head> <body>  <img src="hello.png" alt="Hello" />  <img src="w...
HTML
CSS
<link rel="stylesheet" href="style.css" />                           …browser                                  Server     ...
<img src="hello.png" />browser                             Server            hello.png
<img src="world.png" />                        1browser                             Server                            …   ...
JS
<script src="script.js"></script>browser                                       Server             … alert(Hello, world); …
JS
HTML   CSS
Web
HTML
<html> <head>  <link rel="stylesheet" href="style.css" /> </head> <body>  <h1>Hello</h1>  <script src="script.js"></script...
index.html
CSS
h1 {  color: red;}
style.css
JS
script.js
window.addEventListener(load,  function() {    if (confirm(green?)) {      document        .querySelector(h1)        .style...
OK
/*function() {}                     */window.addEventListener(load,  function() {    }}, false);
/* green?                 OK{}                        */if (confirm(green?)) {}
// <h1>document .querySelector(h1) .style.color = green;
JS
JS   HTML   CSS…
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
JavaScriptの動かし方
Upcoming SlideShare
Loading in …5
×

JavaScriptの動かし方

934 views

Published on

http://io.mindia.jp/posts/20

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

No Downloads
Views
Total views
934
On SlideShare
0
From Embeds
0
Number of Embeds
124
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • JavaScriptの動かし方

    1. 1. “ ”
    2. 2. JavaScript
    3. 3. JS …
    4. 4. Web
    5. 5. browser Server (^o^)
    6. 6. Web
    7. 7. browser Server
    8. 8. …browser Server
    9. 9. browser Server
    10. 10. 1browser Server …
    11. 11. browser Server
    12. 12. HTML
    13. 13. Web
    14. 14. GET index.htmlbrowser Server <html> … Hello … </html>
    15. 15. <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <img src="hello.png" alt="Hello" /> <img src="world.png" alt="World" /> <script src="script.js"></script> </body></html>
    16. 16. <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <img src="hello.png" alt="Hello" /> <img src="world.png" alt="World" /> <script src="script.js"></script> </body></html>
    17. 17. HTML
    18. 18. CSS
    19. 19. <link rel="stylesheet" href="style.css" /> …browser Server body { color: red; }
    20. 20. <img src="hello.png" />browser Server hello.png
    21. 21. <img src="world.png" /> 1browser Server … world.png
    22. 22. JS
    23. 23. <script src="script.js"></script>browser Server … alert(Hello, world); …
    24. 24. JS
    25. 25. HTML CSS
    26. 26. Web
    27. 27. HTML
    28. 28. <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Hello</h1> <script src="script.js"></script> </body></html>
    29. 29. index.html
    30. 30. CSS
    31. 31. h1 { color: red;}
    32. 32. style.css
    33. 33. JS
    34. 34. script.js
    35. 35. window.addEventListener(load, function() { if (confirm(green?)) { document .querySelector(h1) .style.color = green; }}, false);
    36. 36. OK
    37. 37. /*function() {} */window.addEventListener(load, function() { }}, false);
    38. 38. /* green? OK{} */if (confirm(green?)) {}
    39. 39. // <h1>document .querySelector(h1) .style.color = green;
    40. 40. JS
    41. 41. JS HTML CSS…

    ×