Javascript - 4 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Javascript - 4 | WebMaster & WebDesigner

  • 308 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
308
On Slideshare
305
From Embeds
3
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 3

http://cypher.informazione.me 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Javascript [4]Matteo Magni
  • 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. 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. 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. Metodi Metodi: Sono le funzionalità, le azioni che un oggetto può compiere. Es: oggetto document ha come metodo write document.write(pippo );
  • 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. 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. 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. Esempio - Document<!­­ My document ­­><html><head>  <title>My Document</title></head><body>  <h1>Header</h1>  <p>    Paragraph  </p> => wikipedia</body></html>
  • 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. 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. A volte quando seleziono un oggetto del DOM lo script non fa nulla?
  • 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. Perchè non va?Ma loggetto cè?!?!?
  • 15. Quando lo script viene eseguito lelemento diid myHeader non è ancora stato inserito nel DOM.
  • 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. window.onloadwindow.onload =  Posso risolvere ilfunction () problema facendo{ partire lesecuzione dello scriptJavascript code  attraverso lattributogoes here onload delloggetto} window.
  • 18. window.onload [2]Window.onload viene eseguito quando tutto il contenuto della pagina, tutte i js, tutte le immagini sono caricate.
  • 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. Aspetto che carichi tutto...
  • 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. 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. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: matteo@magni.me