0
Javascript [4]Matteo Magni
DOM Il Document Object Model, letteralmente  modello a oggetti del documento, è unaforma di rappresentazione dei documenti...
Oggetti  La programmazione orientata agli oggetti (OOP, Object Oriented Programming) è unparadigma di programmazione che p...
Attributi     Attributi:     rappresentano i dati     dell’oggetto, ovvero le     informazioni che     caratterizzano un  ...
Metodi   Metodi:   Sono le funzionalità,   le azioni che un   oggetto può   compiere.   Es: oggetto document ha   come met...
Metodi [2]• Un metodo può avere un valore di ritorno• Può avere parametri che vengono passati  per permettere la sua esecu...
DOM e Js Mentre Javascript è il linguaggio di programmazione che ti  permette di operare sugli oggetti DOM, il DOM ti forn...
DOM e Js [2]   In che senso "indipendente dal linguaggio"? Non è javascript lunico modo per accedere al DOM? No, ad     es...
Esempio - Document<!­­ My document ­­><html><head>  <title>My Document</title></head><body>  <h1>Header</h1>  <p>    Parag...
Attributi Document<!doctype html><html>    <head>        <meta charset="UTF­8">        <title>My Web Page</title>        <...
getElementById()E il metodo che permette di recuperare l’elementocaratterizzato univocamente dal valore del proprioattribu...
Leggere e Settare<head>                                                          Posso andare a<script>                   ...
getElementsByTagName() Questo metodo permette di selezionare l’insieme degli elementi caratterizzati dallo stesso tag. Rit...
CicliAbbiamo bisogno di costrutti semplici per poter accederein maniera veloce a tutti gli elementi dellarray.Senza sapere...
Ciclo forfor (var num=1; num<=100; num++) { document.write(Number  + num + <br>);}    • Ciclo che permette di ripetere una...
Ciclo Whilewhile (condition) { // javascript to repeat}    • Ciclo che permette di ripetere una operazione n      volte.  ...
While [2]document.write(Number 1 <br>);document.write(Number 2 <br>);document.write(Number 3 <br>);document.write(Number 4...
Do Whiledo { // javascript to repeat} while (condition) ; • Ciclo che permette di ripetere una operazione n   volte. • Las...
Do While [2]var num = 1;do { document.write(Number  + num + <br>); num += 1;}while (num <= 1);
Domande?               Slide:http://www.slideshare.net/ilbonzo               Code:https://github.com/ilbonzo/Cypher       ...
Javascript - 4 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×

Javascript - 4 | WebMaster & WebDesigner

224

Published on

Quarta lezione del modulo Javascript del corso per WebMaster & WebDesigner

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
224
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript - 4 | WebMaster & WebDesigner"

  1. 1. Javascript [4]Matteo Magni
  2. 2. DOM Il Document Object Model, letteralmente modello a oggetti del documento, è unaforma di rappresentazione dei documenti strutturati come modello orientato agli oggetti. (wikipedia)
  3. 3. Oggetti La programmazione orientata agli oggetti (OOP, Object Oriented Programming) è unparadigma di programmazione che permette di definire oggetti software in grado di interagire gli uni con gli altri attraverso lo scambio di messaggi. (wikipedia)
  4. 4. Attributi Attributi: rappresentano i dati dell’oggetto, ovvero le informazioni che caratterizzano un oggetto. Es: oggetto array ha come proprietà la sua lunghezza. days = new Array(); alert(days.length);
  5. 5. Metodi Metodi: Sono le funzionalità, le azioni che un oggetto può compiere. Es: oggetto document ha come metodo write document.write(pippo);
  6. 6. Metodi [2]• Un metodo può avere un valore di ritorno• Può avere parametri che vengono passati per permettere la sua esecuzione.//passaggio di uno o più parametridocument.write(Hello World!);//valore di ritornoelement=document.getElementById(pippo);
  7. 7. DOM e Js Mentre Javascript è il linguaggio di programmazione che ti permette di operare sugli oggetti DOM, il DOM ti forniscemetodi e proprietà per recuperare, modificare, aggiornare ed eliminare parti del documento su cui stai lavorando. Peresempio, potresti recuperare il valore di un campo di testo emetterlo in una variabile stringa con il DOM; a questo punto puoi usare loperatore Javascript di concatenazione + , per unire quella stringa ad unaltra, in base a ciò che vuoiottenere. Potresti quindi usare il metodo alert() per mostrare la stringa allutente attraverso una finestra di dialogo.
  8. 8. DOM e Js [2] In che senso "indipendente dal linguaggio"? Non è javascript lunico modo per accedere al DOM? No, ad esempio Mozilla usa il DOM sia col C++ che col Javascript per la sua interfaccia utente. Questi sonoalcuni dei linguaggi che hanno unimplementazione delDOM: Perl, Java, ActiveX, Python; ciò è possibile grazie allindipendenza del DOM dal linguaggio di programmazione. https://developer.mozilla.org/it/docs/Il_DOM_e_JavaScript
  9. 9. Esempio - Document<!­­ My document ­­><html><head>  <title>My Document</title></head><body>  <h1>Header</h1>  <p>    Paragraph  </p> => wikipedia</body></html>
  10. 10. Attributi Document<!doctype html><html>    <head>        <meta charset="UTF­8">        <title>My Web Page</title>        <script>        alert(document.title);        alert(document.URL);        alert(document.location);        alert(document.domain);        alert(document.refererr);        </script>    </head>    <body>        Pippo    </body></html>
  11. 11. getElementById()E il metodo che permette di recuperare l’elementocaratterizzato univocamente dal valore del proprioattributo ID.Restituisce un riferimento allelemento in questione.Pippo = document.getElementById(pippo);alert(Pippo.innerHTML);
  12. 12. Leggere e Settare<head> Posso andare a<script> modificare i valorifunction changeLink() degli attributi{document.getElementById(myAnchor).innerHTML="W3Schools"; delloggetto.document.getElementById(myAnchor).href="http://www.w3schools.com";document.getElementById(myAnchor).target="_blank";}</script></head><body> <a id="myAnchor" href="http://www.microsoft.com">Microsoft</a><input type="button" onclick="changeLink()" value="Change link"> 
  13. 13. getElementsByTagName() Questo metodo permette di selezionare l’insieme degli elementi caratterizzati dallo stesso tag. Ritorna un array di tutti gli elementi con quel tag, nell’ordine in cui compaiono nella pagina.pElements=document.getElementsByTagName(p);//pElements è un array
  14. 14. CicliAbbiamo bisogno di costrutti semplici per poter accederein maniera veloce a tutti gli elementi dellarray.Senza sapere a priori qualè la sua lunghezza.var divs=document.getElementsByTagName("div");for(var k=0;k<divs.length;k++){  alert(divs[k].innerHTML);  divs[k].innerHTML = pippo+k;}
  15. 15. Ciclo forfor (var num=1; num<=100; num++) { document.write(Number  + num + <br>);} • Ciclo che permette di ripetere una operazione n volte. • Gestisce da solo la condizione e il contatore
  16. 16. Ciclo Whilewhile (condition) { // javascript to repeat} • Ciclo che permette di ripetere una operazione n volte. • Lascia a noi la gestione di un eventuale contatore
  17. 17. While [2]document.write(Number 1 <br>);document.write(Number 2 <br>);document.write(Number 3 <br>);document.write(Number 4 <br>);document.write(Number 5 <br>);var num = 1;while (num <= 5) { document.write(Number  + num + <br>); num += 1;}
  18. 18. Do Whiledo { // javascript to repeat} while (condition) ; • Ciclo che permette di ripetere una operazione n volte. • Lascia a noi la gestione di un eventuale contatore • A differenza del while la prima volta il codice viene sempre eseguito
  19. 19. Do While [2]var num = 1;do { document.write(Number  + num + <br>); num += 1;}while (num <= 1);
  20. 20. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×