javascript - 5 | webmaster & webdesigner
DESCRIPTION
Quinta lezione del modulo Javascript per il corso di WebMaster & WebDesignerTRANSCRIPT
![Page 1: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/1.jpg)
Javascript [5]Matteo Magni
![Page 2: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/2.jpg)
Cicli
var divs=document.getElementsByTagName("div");
for(var k=0;k<divs.length;k++){
alert(divs[k].innerHTML);
divs[k].innerHTML = 'pippo'+k;
}
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.
![Page 3: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/3.jpg)
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
![Page 4: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/4.jpg)
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
![Page 5: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/5.jpg)
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;
}
![Page 6: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/6.jpg)
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
![Page 7: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/7.jpg)
Do While [2]
var num = 1;
do {
document.write('Number ' + num + '<br>');
num += 1;
}while (num <= 1);
![Page 8: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/8.jpg)
Selezionare per classe?
document.getElementsByClassName()
Questo metodo Non tutti lo supportano
![Page 9: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/9.jpg)
getElementsByClassName
![Page 10: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/10.jpg)
Soluzione
• Posso usare l'attributo className
<p class="class-pippo">pippo</p>
<p class="class-pluto">pluto</p>
<p class="class-pippo">pippo</p>
<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);
}
}
![Page 11: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/11.jpg)
Siamo Grafici?
Come gestiamo lo stile di un elemento?
![Page 12: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/12.jpg)
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.
![Page 13: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/13.jpg)
Background
• background
• backgroundAttachment
• backgroundColor
• backgroundImage
• backgroundPosition
• backgroundRepeat
![Page 14: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/14.jpg)
Border
• border
• borderBottom
• borderBottomColor
• borderBottomStyle
• borderBottomWidth
• borderColor
• borderLeft
• borderLeftColor
• borderLeftStyle
• borderLeftWidth
• borderRight
• borderRightColor
• borderRightStyle
• borderRightWidth
• borderStyle
• borderTop
• borderTopColor
• borderTopStyle
• borderTopWidth
• borderWidth
![Page 15: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/15.jpg)
Liste
• listStyle
• listStyleImage
• listStylePosition
• listStyleType
![Page 16: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/16.jpg)
Margin e Padding
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
![Page 17: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/17.jpg)
Posizionamento e layout
• bottom
• clear
• clip
• cssFloat
• cursor
• display
• height
• left
• maxHeight
• maxWidth
• minHeight
• minWidth
• overflow
• position
• right
• top
• verticalAlign
• visibility
• width
• zIndex
![Page 18: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/18.jpg)
Font e Testi
• color• direction• font• fontFamily• fontSize• fontSizeAdjust• fontStyle• fontVariant• fontWeight
• letterSpacing
• lineHeight
• textAlign
• textDecoration
• textIndent
• textShadow
• textTransform
• unicodeBidi
• whiteSpace
• wordSpacing
![Page 19: Javascript - 5 | WebMaster & WebDesigner](https://reader031.vdocuments.site/reader031/viewer/2022020101/5479daa9b479598a098b487a/html5/thumbnails/19.jpg)
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: