Javascript - 4 | WebMaster & WebDesigner

192
-1

Published on

Quarta lezione del modulo Javascript per il corso di WebMaster & WebDesigner

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
192
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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. A volte quando seleziono un oggetto del DOM lo script non fa nulla?
  13. 13. Esempio: Non va?!?!?!?<!doctype html><html>    <head>        <title>My Web Page</title>        <script>          var x=document.getElementById("myHeader");            alert(x.innerHTML);        </script>    </head>    <body>        <h1 id="myHeader">Click me!</h1>    </body></html>
  14. 14. Perchè non va?Ma loggetto cè?!?!?
  15. 15. Quando lo script viene eseguito lelemento diid myHeader non è ancora stato inserito nel DOM.
  16. 16. Eseguire quando?<!doctype html><html>    <head>        <title>My Web Page</title>        <script>            //qui non funziona          var x=document.getElementById("myHeader");            alert(x.innerHTML);        </script>    </head>    <body>        <h1 id="myHeader">Click me!</h1>    <script>          var x=document.getElementById("myHeader");            alert(x.innerHTML);        </script>    </body></html>
  17. 17. window.onloadwindow.onload =  Posso risolvere ilfunction () problema facendo{ partire lesecuzione dello scriptJavascript code  attraverso lattributogoes here onload delloggetto} window.
  18. 18. window.onload [2]Window.onload viene eseguito quando tutto il contenuto della pagina, tutte i js, tutte le immagini sono caricate.
  19. 19. Eseguire quando?    <head>        <meta charset="UTF­8">        <title>My Web Page</title>        <script>        window.onload = function () {            var x=document.getElementById("myHeader");            alert(x.innerHTML);        }        </script>    </head>    <body>        <h1 id="myHeader">Pippo</h1>        <img src="http://images.digitalmedianet.com/2006/Week_46/nvas85m8/story/thumb­3648x2736.jpg"/>    </body>
  20. 20. Aspetto che carichi tutto...
  21. 21. 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"> 
  22. 22. 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
  23. 23. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: matteo@magni.me

×