Js intro

794 views

Published on

slide per presentazione
http://www.smartango.com/it/articles/introduzione-javascript-prima-parte
e seguenti

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

  • Be the first to like this

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

No notes for slide

Js intro

  1. 1. Introduzione al JavaScript <ul><li>Daniele Cruciani © 2010 </li></ul>Sintassi e concetti base del linguaggio di scripting client-side per il web http://www.smartango.com/it/articles/introduzione-javascript-prima-parte
  2. 2. Sintassi - 1 <ul><li>Tag script:
  3. 3. <script type=”text/javascript”></script>
  4. 4. Esempio:
  5. 5. <script type=”text/javascript”>
  6. 6. document.writeln(”ciao mondo!”);
  7. 7. </script>
  8. 8. writeln è un metodo dell'oggetto document </li></ul>
  9. 9. Sintassi - 2 <ul><li>Attributo evento di un tag:
  10. 10. <button onclick=” javascript:alert('clicked ')”>
  11. 11. Click me
  12. 12. </button>
  13. 13. L'esecuzione è conseguente all'evento click </li></ul>
  14. 14. Sintassi - 3 <ul><li>Uno script è formato da una sequenza di istruzioni e costrutti di controllo terminati da ; o ritorno carrello
  15. 15. Es.:
  16. 16. a=3
  17. 17. b=1;c=2
  18. 18. Il linguaggio è case sensitive:
  19. 19. VarName != varName </li></ul>
  20. 20. Sintassi - 4 <ul><li>Commenti:
  21. 21. /* testo commentato */ var i=0; // altro testo
  22. 22. Assegnazione: a = valore
  23. 23. Numeri:
  24. 24. var a=1; var b=3.2;
  25. 25. Boolean (true/false)
  26. 26. var test=true;
  27. 27. String: ”una frase”
  28. 28. Valori speciali: null e undefined </li></ul>
  29. 29. Sintassi - 5 <ul><li>Espressioni regolari:
  30. 30. var expr = /parola/i;
  31. 31. var expr = new RegExpr('parola','i');
  32. 32. Array: var ar = new Array();
  33. 33. Object: var obj = new Object(); </li></ul>
  34. 34. Sintassi - 6 <ul><li>Array Literals, Object Literals e JSON:
  35. 35. var arr = [1,2,3,”a”,5];
  36. 36. var obj = {name:”obj”,values:[1,2,3]};
  37. 37. Array di oggetti e oggetti di array
  38. 38. var arr=[1,{a:'val',b:'test'}];
  39. 39. JSON: JavaScript Object Notation </li><ul><li>Utile per caricare dati dal server tramite ajax [esempio php: json_encode($array); e in javascript: eval('data='+text);] </li></ul></ul>
  40. 40. Sintassi – 7 <ul><li>Costrutti di controllo e blocchi </li><ul><li>Un blocco è un insieme di istruzioni tra parentesi graffe: {istr1;istr2;}
  41. 41. if(a==2){alert('è 2');} else { alert('non è 2');}
  42. 42. var stringa=(a>18)?”è maggiore”:”minore”
  43. 43. switch(a){case 2: alert(”2”);break;
  44. 44. default: alert(”not 2”);} </li></ul></ul>
  45. 45. Sintassi - 8 <ul><li>Costrutti iterativi </li><ul><li>i=0;while(i++<10){alert(”iteration ”+i);}
  46. 46. i=0;do{alert(”iteration ”+i);}while(i++<10);
  47. 47. for(i=0;i<10;i++){alert(i);}
  48. 48. Vettore=[1,2,3,4];
  49. 49. for(i in vettore) {alert(vettore[i]);} </li></ul><li>label, break, continue </li></ul>
  50. 50. Function <ul><li>Definizione: </li><ul><li>function foo(par){alert(par);}
  51. 51. var foo = function(par){alert(par);};
  52. 52. var foo = new Function('par','alert(par);return par;'); </li></ul><li>Chiamata: </li><ul><li>var b = foo(); </li></ul><li>fun.apply(thisPar,[args]) e fun.call(thisPar,arg1,..) </li></ul>
  53. 53. Function - prototype <ul><li>prototype: definisce metodo per il tipo di oggetto
  54. 54. Esempi: </li><ul><li>Auto.prototype.accensione=
  55. 55. function(){this.start();};
  56. 56. Auto.prototype = {accensione:function(){..},
  57. 57. spegnimento:function(){..}
  58. 58. };
  59. 59. var a = new Auto(); a.accensione(); </li></ul></ul>http://www.howtocreate.co.uk/tutorials/javascript/objects http://snippets.dzone.com/posts/show/899 (capitalize String)
  60. 60. Objects <ul><li>Attributi (variabili o oggetti) e Metodi (function)
  61. 61. Esempio di definizione/istanziazione (singleton) </li><ul><li>var myObj = {
  62. 62. a:”valore”,
  63. 63. azzera: function(){this.a=””;},
  64. 64. assegna: function(val){ this.a=val;}
  65. 65. }; </li></ul></ul>
  66. 66. Objects - 2 <ul><li>Altro esempio: function come first class object
  67. 67. Definizione: </li><ul><li>function Classe(val){
  68. 68. this.a=val;
  69. 69. this.azzera=function(){ this.a=””; };
  70. 70. this.assegna=function(val){ this.a=val; };
  71. 71. };
  72. 72. var myObj = new Classe(”valore”); </li></ul></ul>
  73. 73. Object - 3 <ul><li>Accesso agli attributi e metodi di un oggetto </li><ul><li>myObj.assegna(”ciao”);
  74. 74. Tramite il punto: alert(myObj.a);
  75. 75. Tramite parentesi quadre: alert(myObj[”a”]); </li></ul><li>Nessuna protezione di accesso (no private, no protected), tutti gli attributi e metodi pubblici </li></ul>
  76. 76. String e RegExpr <ul><li>”frase” è un oggetto di tipo String </li><ul><li>var a=”frase”; equivale a var a= new String(”frase”); </li></ul><li>Metodi search(), replace(), match(), split() accettano come primo parametro una RegExpr. Esempi: </li><ul><li>a.search(/fr/i);
  77. 77. a.replace(/r/,'[una brutta consonante]');
  78. 78. var arr = a.split(/s+/); </li></ul></ul>
  79. 79. DOM <ul><li>L'oggetto window: alcuni methods </li><ul><li>alert();
  80. 80. confirm(”test?”);
  81. 81. timeID = setInterval(fun,inte); clearInterval(timeID);
  82. 82. timeID = setTimeout(fun,tim);clearTimeout(timeID);
  83. 83. close();
  84. 84. open(url,name,[options]); // open new window
  85. 85. ... </li></ul></ul>
  86. 86. DOM - 2 <ul><li>L'oggetto window: alcuni attributi </li><ul><li>navigator
  87. 87. clientInformation
  88. 88. location
  89. 89. history
  90. 90. document
  91. 91. ... </li></ul></ul>
  92. 92. DOM - 3 <ul><li>L'oggetto document
  93. 93. Conforme al modello DOM (Document Object Model) definito dal w3c
  94. 94. Documento html come albero con radice html, attraversabile tramite metodi standard comuni a diversi linguaggi di programmazione (Java, PHP, JavaScript, …)
  95. 95. Es. document.getElementById('container');
  96. 96. document.getElementByTagName('div'); </li></ul>
  97. 97. DOM - 4 <ul><li>Node Object: alcuni attributi e metodi </li><ul><li>attributes[]
  98. 98. getAttribute()
  99. 99. setAttribute()
  100. 100. removeAttribute()
  101. 101. childNodes[]
  102. 102. appendChild()
  103. 103. removeChild()
  104. 104. replaceChild() </li></ul></ul>
  105. 105. DOM - 5 <ul><li>continua … </li><ul><li>className[]
  106. 106. innerHTML
  107. 107. style
  108. 108. addEventListener()
  109. 109. .... </li></ul></ul>
  110. 110. Esempio <ul><li>Un esempio concreto: </li><ul><li>test.html </li></ul></ul>
  111. 111. Scoping <ul><li>Utilizzando 'var' per la dichiarazione di una variabile essa avrà visibilità locale
  112. 112. Closure: </li><ul><li>tutte le variabili nello scope della definizione sono disponibili all'interno delle funzioni: ad esempio la variabile i definita nella funzione Vettura e' accessibile da accensioni() e da accendi() , ma non da spegni() </li></ul><li>Variabili private negli oggetti </li></ul>
  113. 113. Eventi <ul><li>Proprietà onload, onclick, ondblclick … </li><ul><li>un solo gestore per ogni tipo evento </li></ul><li>addEventListener(type,listener,useCapture) </li><ul><li>type: nome dell'evento (senza on): load, click, …
  114. 114. listener: funzione gestore dell'evento
  115. 115. useCapture: listener chiamato nella fase capture della propagazione eventi se true, altrimenti nella fase bubble </li></ul></ul>
  116. 116. Eventi - 2 <ul><li>DOM Level 2 Event Model
  117. 117. Propagazione eventi in 2 fasi: </li></ul><ul><ul><li>capture: da root a target
  118. 118. bubble: da target a root </li></ul></ul><ul><li>Event object (parametro di listener) </li><ul><li>metodo preventDefault
  119. 119. metodo stopPropagation
  120. 120. ... </li></ul></ul>http://www.w3.org/TR/DOM-Level-2-Events/events.html
  121. 121. Eventi – 3 <ul><li>Internet Explorer Model </li><ul><li>attachEvent(eventName,handler) </li><ul><li>eventName nome completo di 'on' ('onclick')
  122. 122. window.event object </li></ul><li>Solo fase bubble </li></ul></ul>
  123. 123. Conclusione Riferimenti http://www.smartango.com/ © Daniele Cruciani – 2010

×