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...
A volte quando seleziono un oggetto del       DOM lo script non fa nulla?
Esempio: Non va?!?!?!?<!doctype html><html>    <head>        <title>My Web Page</title>        <script>          var x=doc...
Perchè non va?Ma loggetto cè?!?!?
Quando lo script viene eseguito lelemento diid myHeader non è ancora stato inserito nel                    DOM.
Eseguire quando?<!doctype html><html>    <head>        <title>My Web Page</title>        <script>            //qui non fun...
window.onloadwindow.onload =    Posso risolvere ilfunction ()        problema facendo{                  partire lesecuzion...
window.onload [2]Window.onload viene eseguito quando tutto il  contenuto della pagina, tutte i js, tutte le         immagi...
Eseguire quando?    <head>        <meta charset="UTF­8">        <title>My Web Page</title>        <script>        window.o...
Aspetto che carichi tutto...
Leggere e Settare<head>                                                          Posso andare a<script>                   ...
getElementsByTagName() Questo metodo permette di selezionare l’insieme degli elementi caratterizzati dallo stesso tag. Rit...
Domande?                  Slide:     http://cypher.informazione.me/                  Code:https://github.com/inFormazione/...
Javascript - 4 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×

Javascript - 4 | WebMaster & WebDesigner

163

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
163
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
  1. A particular slide catching your eye?

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

×