Javascript - 5 | WebMaster & WebDesigner

329 views

Published on

Quinta 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
329
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript - 5 | WebMaster & WebDesigner

  1. 1. Javascript [5]Matteo Magni
  2. 2. Selezionare per classe?document.getElementsByClassName() Questo metodo Non tutti lo supportano
  3. 3. getElementsByClassName
  4. 4. Soluzione• Posso usare <p class="class-pippo">pippo</p> lattributo <p class="class-pluto">pluto</p> <p class="class-pippo">pippo</p> className <p class="class-pluto">pluto</p> <p class="class-pippo">pippo</p> <script> var p = document.getElementsByTagName(p); for(i=0;i<p.length;i++) { if (p[i].className==class-pluto) { alert(p[i].innerHTML); } }
  5. 5. A volte quando seleziono un oggetto del DOM lo script non fa nulla?
  6. 6. 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>
  7. 7. Perchè non va?Ma loggetto cè?!?!?
  8. 8. Quando lo script viene eseguito lelemento diid myHeader non è ancora stato inserito nel DOM.
  9. 9. 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>
  10. 10. window.onloadwindow.onload =  Posso risolvere ilfunction () problema facendo{ partire lesecuzione dello scriptJavascript code  attraverso lattributogoes here onload delloggetto} window.
  11. 11. window.onload [2]Window.onload viene eseguito quando tutto il contenuto della pagina, tutte i js, tutte le immagini sono caricate.
  12. 12. Ora funziona    <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>
  13. 13. Aspetto che carichi tutto...
  14. 14. Siamo Grafici?Come gestiamo lo stile di un elemento?
  15. 15. element.stylevar div = document.getElementById(div1);div.style.marginTop = 25px;var div = document.getElementById(p);div.style.color = red;Ci viene ritornato un oggetto che“rappresenta” lo stile dellelemento.E noi possiamo andare ad agire su tutti isuoi attributi.
  16. 16. Background• background• backgroundAttachment• backgroundColor• backgroundImage• backgroundPosition• backgroundRepeat
  17. 17. Border• border • borderRight• borderBottom • borderRightColor• borderBottomColor • borderRightStyle• borderBottomStyle • borderRightWidth• borderBottomWidth • borderStyle• borderColor • borderTop• borderLeft • borderTopColor• borderLeftColor • borderTopStyle• borderLeftStyle • borderTopWidth• borderLeftWidth • borderWidth
  18. 18. Liste• listStyle• listStyleImage• listStylePosition• listStyleType
  19. 19. Margin e Padding• margin• marginBottom• marginLeft• marginRight• marginTop• padding• paddingBottom• paddingLeft• paddingRight• paddingTop
  20. 20. Posizionamento e layout bottom • minHeight• clear • minWidth• clip • overflow• cssFloat • position• cursor • right• display • top• height • verticalAlign• left • visibility• maxHeight • width• maxWidth • zIndex•
  21. 21. Font e Testi• color • letterSpacing• direction • lineHeight font • textAlign• • textDecoration• fontFamily • textIndent• fontSize • textShadow• fontSizeAdjust textTransform •• fontStyle • unicodeBidi• fontVariant • whiteSpace• fontWeight • wordSpacing
  22. 22. Applichiamo un nuovo stile a sosacroniro?
  23. 23. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×