JavaScript sunumu

3,010 views

Published on

Temel ve İleri Seviye Javascript

Published in: Technology
  • www.ucuzcu.com daki gibi bir yazılım arıyorum nereden bulabilirim
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

JavaScript sunumu

  1. 1. JavaScript <ul><li>c+++
  2. 2. oak
  3. 3. hotjava
  4. 4. jscript
  5. 5. livescript
  6. 6. ECMAScript </li></ul>
  7. 7. JavaScript <ul>Dünyanın en çok kullanılan programlama dili 234 milyon web sitesi </ul>
  8. 8. JavaScript <ul>Dünyanın en çok ”kullanılamayan” programlama dili Gmail(AJAX) gelinceye kadar sadece görsel öğeler için kullanıyorduk </ul>
  9. 9. JavaScript <ul><li>ECMA-262
  10. 10. http://www.ecma-international.org/publications/standards/ecma-262.htm </li></ul>
  11. 11. ECMAScript <ul><li>Söz dizimi -> C
  12. 12. Regexp -> Perl
  13. 13. Fonksiyonel Programlama -> Scheme (gülüşmeler...)
  14. 14. Prototype temelli kalıtım -> Self </li></ul>
  15. 15. Kullanım alanları <ul><li>Web : Markup ile 'etkileşim'i sağlamak
  16. 16. Sunucu tarafında : mod_js, nodejs (spidermonkey, v8)
  17. 17. Herhangi bir uygulama : ScriptEngine </li></ul>
  18. 18. Markup içinde kullanım <ul><li>İnline kullanım
  19. 19. <script type=”text/javascript”> document.write('Yalan dünya!'); </script> … <a href=”#” onclick=”document.write('Yalan dünya!')”> Neşet Ertaş </a>
  20. 20. Harici kullanım
  21. 21. <script type=&quot;text/javascript&quot; src=&quot;dunya.js&quot;></script> </li></ul>
  22. 22. Veri tipleri <ul><li>Objeler
  23. 23. 'undefined' harici her şey bir obje, fonksiyonlar bile
  24. 24. key/value eşlerinden oluşur. Key'ler string, value'lar ise herhangi başka bir 'obje'
  25. 25. var x = obje.get; obje.set = ”value”; delete obje.property; </li></ul>
  26. 26. Veri tipleri <ul><li>Rakam
  27. 27. Tek bir rakam tipi var
  28. 28. 64 bit float (double)
  29. 29. var x = 0.1 + 0.2
  30. 30. 0.30000000000000004
  31. 31. http://www.w3schools.com/jsref/jsref_obj_number.asp </li></ul>
  32. 32. Veri tipleri <ul><li>Array (Listeler)
  33. 33. Aslında bir array değildir.
  34. 34. Bir objeden tek farkı, key olarak rakam almasıdır. Ya da aslında bu da bir fark değildir.
  35. 35. var x = new Array(); x[0] = ”neset”; x[0]; // neset x['foobar'] = ”ertas”; x['foobar']; // ertas
  36. 36. http://www.w3schools.com/jsref/jsref_obj_array.asp </li></ul>
  37. 37. Veri tipleri <ul><li>String (Metin işlemleri)
  38. 38. Karakter kodlaması : UTF-16
  39. 39. ” fooBar”.toUpperCase(); //FOOBAR
  40. 40. http://www.w3schools.com/jsref/jsref_obj_string.asp </li></ul>
  41. 41. Veri tipleri <ul><li>Boolean
  42. 42. var foobar = new Boolean(true);
  43. 43. foobar.toString();
  44. 44. false.toString();
  45. 45. http://www.w3schools.com/jsref/jsref_obj_boolean.asp </li></ul>
  46. 46. Veri tipleri <ul><li>Date (Tarih işlemleri)
  47. 47. var currentTimestamp = new Date().getTime(); //1279780366831
  48. 48. http://www.w3schools.com/jsref/jsref_obj_date.asp </li></ul>
  49. 49. Veri tipleri <ul><li>Math (Matematiksel işlemler)
  50. 50. var max = Math.max(3,1,7,10); //10
  51. 51. http://www.w3schools.com/jsref/jsref_obj_math.asp </li></ul>
  52. 52. Veri tipleri <ul><li>Regex (Düzenli ifadeler)
  53. 53. var isNeset = /neset/.test(&quot;Neset ertas&quot;); //false
  54. 54. var isNeset = /neset/i.test(&quot;Neset ertas&quot;); //true
  55. 55. &quot;Neset Ertas&quot;.replace(/s/g,&quot;ş&quot;); //Neşet Ertaş http://www.w3schools.com/jsref/jsref_obj_regexp.asp </li></ul>
  56. 56. Veri tipleri <ul><li>Browser objects ( Document Object Model)
  57. 57. - window - navigator - screen - history - location </li></ul>
  58. 58. Veri tipleri <ul><li>DOM (Document object model)
  59. 59. var allLinksOnPage = document.links; var titleOfPage = document.title; var allImagesOnPage = document.images; http://www.w3schools.com/jsref/dom_obj_document.asp </li></ul>
  60. 60. falsy <ul><li>false
  61. 61. null
  62. 62. undefined
  63. 63. &quot;&quot;
  64. 64. 0
  65. 65. NaN </li></ul><ul><li>”false”
  66. 66. ”0” </li></ul>
  67. 67. Koşul operatörleri <ul>switch( myValue) { case ”1” : <ul><ul><li>foo = ”hodo”; break; </li></ul></ul>} if ( foo == ”hodo” ) { myValue = ”bodo”; } else if ( foo == ”dodo” ) { myValue = ”nono”; } else { alert('Everything is something happened!'); } </ul>
  68. 68. Döngüler <ul>for (i = 0; i < max; i++ ) {}; while ( x != y ) {}; do { } while ( x!=y); for (key in object) { value = object[key); }; continue / break </ul>
  69. 69. Scope { var foo = ”bar”; } alert(foo); <ul><li>Block scope'ları yoktur, fonksiyon scope'ları vardır </li></ul>(function(){ var foo = ”bar”; }) alert(foo);
  70. 70. Exception'lar <ul>try { throw {name:&quot;FooError&quot;, message:&quot;What can I do, sometimes&quot;}; } catch(error) { alert(error.message); } </ul>
  71. 71. Fonksiyonlar <ul>function foo(){ <ul>alert('bar'); </ul>} var foo = function(){ <ul>alert('bar'); </ul>} foo(); // ikisi de aynı şekilde çağırılabilir </ul>
  72. 72. Fonksiyonlar <ul>function foo(){ <ul>return ”bir”; </ul>} alert( foo() ); // iki function foo(){ <ul>return ”iki”; </ul>} </ul><ul>var foo = function(){ <ul>return ”bir”; </ul>} alert( foo() ); // bir var foo = function(){ <ul>return ”iki”; </ul>} </ul>
  73. 73. lambda <ul><li>Parametre olarak fonksiyonlar
  74. 74. return değeri olarak fonksiyonlar
  75. 75. anonim fonksiyonlar </li></ul>
  76. 76. Sınıflar <ul>function ClassName(){ this.publicVar = &quot;foo&quot;; var privateVar = &quot;bar&quot;; this.publicFunction = function() { var valueOfPrivateVar = getPrivateVar(); alert(valueOfPrivateVar); }; var getPrivateVar = function() { return privateVar; }; } var myObj = new ClassName(); myObj.publicFunction(); </ul>
  77. 77. Sınıflar <ul>var myObj= { &quot;publicVar&quot; : &quot;foo&quot;, &quot;publicFunction&quot; : function() { alert(this.publicVar); } }; myObj.publicVar; myObj.publicFunction(); </ul>
  78. 78. Sınıflar <ul>var myObj = function() { var privateVar = &quot;foo&quot;; return { publicMethod : function() { alert(privateVar); } }; }(); myObj.privateVar; myObj.publicMethod(); </ul>
  79. 79. Sınıflar <ul>var MyClass = function(param1) { var privateVar = &quot;this is object for&quot;; this.publicVar = privateVar + &quot; > &quot; + param1; } myObj = new MyClass(&quot;first&quot;); myOtherObj = new MyClass(&quot;second&quot;); MyClass.prototype.alertPrivateVar = function() { alert(this.publicVar); } myOtherObj.alertPrivateVar = function() { alert('this is overridden'); } myObj.alertPrivateVar(); myOtherObj.alertPrivateVar(); </ul>
  80. 80. this <ul><li>foo.bar() için ”foo”
  81. 81. foobar() için global (browser için 'window') </li></ul>
  82. 82. arguments <ul><li>foobar(param1,param2,param2) { alert(”argc ” + arguments.length; // param1 = arguments[0]; } </li></ul>
  83. 83. arguments var foobar = function(name, surname, age) { this.name = name; this.surname = surname; this.age = age; } var foobar = function(obj) { this.name = obj.name || &quot;default name&quot;; this.surname = obj.surname; this.age = obj.age; }
  84. 84. Inheritence <ul>function BaseUser(name, surname) { var name = name; var surname = surname; this.getNameSurname = function() { alert( name + &quot; &quot; + surname); }; }; </ul><ul>function AdminUser(name, surname, rank){ BaseUser.apply(this,arguments); var rank = rank; this.getRank = function() { alert(rank); }; } </ul><ul>user = new BaseUser(&quot;Recep&quot;, &quot;Bülbülses&quot;); user.getNameSurname(); user.getRank(); // TypeError not a function admin = new AdminUser(&quot;Resul&quot;,&quot;Balay&quot;,&quot;cCc&quot;); admin.getNameSurname(); admin.getRank(); </ul>
  85. 85. Eventlar <ul><li>Kötü
  86. 86. <a href=&quot;#&quot; id=”link” onclick=&quot;alert('foo')&quot; style=&quot;background:#cCc&quot;> click </a> </li></ul>
  87. 87. Eventlar <ul><li>Biraz daha iyi
  88. 88. linkElement = document.getElementById('link');
  89. 89. function alertFoo() { alert('foo'); }
  90. 90. linkElement.onclick = alertFoo; </li></ul>
  91. 91. Event'lar <ul><li>Tavsiye edilen
  92. 92. linkElement = document.getElementById('link');
  93. 93. function alertFoo() { alert('foo'); }
  94. 94. if (linkElement.addEventListener){ linkElement.addEventListener('click', alertFoo, false); } else if (linkElement.attachEvent){ //explorer linkElement.attachEvent('onclick', alertFoo); } </li></ul>
  95. 95. XHR (XmlHttpRequest) <ul>var xmlHttp = null; try { xmlHttp = new XMLHttpRequest(); // Mozilla, Opera, Safari, IE >= 7 } catch(e) { try { // ie6 xmlHttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); } catch(e) { try { //ie5 xmlHttp = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); } catch(e) { xmlHttp = null; } } } if (xmlHttp) { xmlHttp.open('GET', 'something.xml', true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { alert(xmlHttp.responseText); } }; xmlHttp.send(null); } </ul>
  96. 96. JSONP (Json with padding) <ul><li>Farklı domainlere istek yapabilmek istediğinizde
  97. 97. <script type=&quot;text/javascript&quot;> </li><ul><li>function methodName(params) { console.log(params); } </li></ul><li></script>
  98. 98. <script src=&quot;http://api.eksigator.com/demo/demo/getList?&jsoncallback=methodName&quot; type=&quot;text/javascript&quot;>
  99. 99. </script> </li></ul>
  100. 100. Baksanız iyi olur <ul><li>http://www.w3schools.com/js/default.asp
  101. 101. http://azer.googlecode.com/files/ileri_seviye_javascript.pdf
  102. 102. http://ejohn.org/
  103. 103. Javascript : The Good Parts
  104. 104. http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742
  105. 105. Pro Javascript Techniques
  106. 106. http://www.amazon.com/Pro-JavaScript-Techniques-John-Resig/dp/1590597273 </li></ul>
  107. 107. İletişim <ul>Osman Yüksel <li>yuxel |ET| sonsuzdongu {DAT} com
  108. 108. http://yuxel.net </li></ul>

×