Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript sunumu

3,077 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>

×