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

1. Javascript [5]
Matteo Magni

2. Cicli
Abbiamo bisogno di costrutti semplici per poter accedere
in maniera veloce a tutti gli elementi dell'array.
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. Ciclo for
for (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. Ciclo While
while (condition) {
// javascript to repeat
}
• Ciclo che permette di ripetere una operazione n
volte.
• Lascia a noi la gestione di un eventuale contatore

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. Do While
do {
// 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. Do While [2]
var num = 1;
do {
document.write('Number ' + num + '<br>');
num += 1;
}while (num <= 1);

8. Selezionare per classe?
document.getElementsByClassName()
Questo metodo Non tutti lo supportano

9. getElementsByClassName

10. Soluzione
• Posso usare <p class="class-pippo">pippo</p>
l'attributo <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. Siamo Grafici?
Come gestiamo lo stile di un elemento?

12. element.style
var 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 dell'elemento.
E noi possiamo andare ad agire su tutti i
suoi attributi.

13. Background
• background
• backgroundAttachment
• backgroundColor
• backgroundImage
• backgroundPosition
• backgroundRepeat

14. Border
• border • borderRight
• borderBottom • borderRightColor
• borderBottomColor • borderRightStyle
• borderBottomStyle • borderRightWidth
• borderBottomWidth • borderStyle
• borderColor • borderTop
• borderLeft • borderTopColor
• borderLeftColor • borderTopStyle
• borderLeftStyle • borderTopWidth
• borderLeftWidth • borderWidth

15. Liste
• listStyle
• listStyleImage
• listStylePosition
• listStyleType

16. Margin e Padding
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop

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. Font e Testi
• color • letterSpacing
• direction • lineHeight
• • textAlign
font
• textDecoration
• fontFamily
• textIndent
• fontSize
• textShadow
• fontSizeAdjust • textTransform
• fontStyle • unicodeBidi
• fontVariant • whiteSpace
• fontWeight • wordSpacing

19. Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail:
matteo@magni.me