Javascript - 5 | WebMaster & WebDesigner

274 views
224 views

Published on

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

No notes for slide

Javascript - 5 | WebMaster & WebDesigner

  1. 1. Javascript [5]Matteo Magni
  2. 2. 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;}
  3. 3. 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
  4. 4. Ciclo Whilewhile (condition) { // javascript to repeat} • Ciclo che permette di ripetere una operazione n volte. • Lascia a noi la gestione di un eventuale contatore
  5. 5. 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;}
  6. 6. 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
  7. 7. Do While [2]var num = 1;do { document.write(Number  + num + <br>); num += 1;}while (num <= 1);
  8. 8. Selezionare per classe?document.getElementsByClassName() Questo metodo Non tutti lo supportano
  9. 9. getElementsByClassName
  10. 10. 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); } }
  11. 11. Siamo Grafici?Come gestiamo lo stile di un elemento?
  12. 12. 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.
  13. 13. Background• background• backgroundAttachment• backgroundColor• backgroundImage• backgroundPosition• backgroundRepeat
  14. 14. Border• border • borderRight• borderBottom • borderRightColor• borderBottomColor • borderRightStyle• borderBottomStyle • borderRightWidth• borderBottomWidth • borderStyle• borderColor • borderTop• borderLeft • borderTopColor• borderLeftColor • borderTopStyle• borderLeftStyle • borderTopWidth• borderLeftWidth • borderWidth
  15. 15. Liste• listStyle• listStyleImage• listStylePosition• listStyleType
  16. 16. Margin e Padding• margin• marginBottom• marginLeft• marginRight• marginTop• padding• paddingBottom• paddingLeft• paddingRight• paddingTop
  17. 17. Posizionamento e layout• • minHeight bottom• • minWidth clear• • overflow clip• • position cssFloat• • right cursor• • top display• • verticalAlign height• • visibility left• • width maxHeight• • zIndex maxWidth
  18. 18. Font e Testi• color • letterSpacing• direction • lineHeight• • textAlign font • textDecoration• fontFamily • textIndent• fontSize • textShadow• fontSizeAdjust • textTransform• fontStyle • unicodeBidi• fontVariant • whiteSpace• fontWeight • wordSpacing
  19. 19. Domande? Slide: http://cypher.informazione.me/ Code:https://github.com/inFormazione/Cypher/ mail: matteo@magni.me

×