Begginning Javascript for Designer and Markup engineer

9,790 views

Published on

2007/07/14に行った勉強会の資料

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,790
On SlideShare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
129
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Begginning Javascript for Designer and Markup engineer

  1. 1. JavaScript 2007 7 14 UK
  2. 2. • : UK • : Web ( ) • UK STUDIO(http://uk-studio.net/) • JS : •
  3. 3. JavaScript - HTML <script type=”text/javascript”> <!-- (ry //--> </script> ( ) (´ ω )
  4. 4. JavaScript - HTML < & &lt; &amp; XHTML CDATA <script type=”text/javascript”> <![CDATA[ (ry ]] </script> CDATA <script type=”text/javascript”> /*<![CDATA[*/ (ry /*]]*/ </script>
  5. 5. JavaScript - HTML <script type=”text/javascript” src=”./js/sample.js”></script>
  6. 6. var hoge; var foo = “bar”; var name = “UK”, age = 20; // (a-z,A-Z) (_)
  7. 7. (via Wikipedia) Null var integer = 100; var string = “ ”; var death_flag = true; var nullpo = null;
  8. 8. ( ) 0 var browser = [“InternetExplorer”,”Firefox”,”Safari”,”Netscape”]; var browser = Array(“InternetExplorer”,”Firefox”,”Safari”,”Netscape”); var browser = new Array(“InternetExplorer”,Firefox”,”Safari”,”Netscape”); alert(browser[0]); // InternetExplorer browser[0] = “Opera”; alert(browser[0]); // Opera
  9. 9. var UK = new Array(); UK[“name”] = “ ”; UK[“age”] = 20; alert(UK[“age”]); //20
  10. 10. + - * / % ++ -- = += -= == != > < >= <= && || & | ^ ~ << >> >>>
  11. 11. if if( ){ true }else if( 2){ false 2 true }else{ false } while while( ){ }
  12. 12. for for( ; ; ){ } do while switch
  13. 13. f(x,y) = x + y JavaScript function add(x,y){ var answer = x + y; return answer; } JavaScript ( ) function hello(){ alert(“Hello,JavaScript”); }
  14. 14. var param = “global”; function func_a(){ var param = “local”; alert(param); } func_a(); //local alert(param); //global var param = “global”; function func_a(){ param = “local”; alert(param); } func_a(); //local alert(param); //local var
  15. 15. ?( ′∇ !? var obj = {}; alert(obj); //[object Object] !
  16. 16. var obj = { name : “ ” }; alert(obj.name); // obj.name = “ ”; obj.age = 55; alert(obj.name); // alert(obj.age); //55 ->
  17. 17. var obj = { name : “ ” getName : function(){ return this.name; } }; alert(obj.getName()); // -> -> Function
  18. 18. (String ) alert(“Hello,JavaScript”.length); //14 (Number ) var num = 100; alert(num.toString()); //”100” JavaScript -> (Array ) (Boolean ) (Function ) (Date ) (Math ) (RegExp ) (Error )
  19. 19. -> -> window locatoin history document DOM document
  20. 20. JavaScript -> -> ( Function ) DOM document JavaScript prototype
  21. 21. DOM DOM CSS
  22. 22. dcument html head body meta title h1 div DOM p img document document
  23. 23. <a href=”index.html”> </a> a index.html
  24. 24. getElementById getElementById var obj = document.getElementById(“sample”); CSS obj.style.backgroundColor = “#000”; CSS ?( ω ´)
  25. 25. background-color backgroundColor JavaScript -> font-family -> fontFamily padding-left -> paddingLeft letter-spacing -> letterSpacing etc...
  26. 26. JS id:button id:navi ! var btn = document.getElementById(“button”); var navi = document.getElementById(“navi”); btn.onclick = function(){ navi.style.backgroundColor = “#ccc”; } onclick onmouseover onload
  27. 27. JS JavaScript

×