Upload
matteo-magni
View
300
Download
7
Embed Size (px)
DESCRIPTION
Quinta lezione del modulo Javascript per il corso di WebMaster & WebDesigner
Citation preview
Javascript [5]Matteo Magni
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.
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
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
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;
}
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
Do While [2]
var num = 1;
do {
document.write('Number ' + num + '<br>');
num += 1;
}while (num <= 1);
Selezionare per classe?
document.getElementsByClassName()
Questo metodo Non tutti lo supportano
getElementsByClassName
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);
}
}
Siamo Grafici?
Come gestiamo lo stile di un elemento?
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.
Background
• background
• backgroundAttachment
• backgroundColor
• backgroundImage
• backgroundPosition
• backgroundRepeat
Border
• border
• borderBottom
• borderBottomColor
• borderBottomStyle
• borderBottomWidth
• borderColor
• borderLeft
• borderLeftColor
• borderLeftStyle
• borderLeftWidth
• borderRight
• borderRightColor
• borderRightStyle
• borderRightWidth
• borderStyle
• borderTop
• borderTopColor
• borderTopStyle
• borderTopWidth
• borderWidth
Liste
• listStyle
• listStyleImage
• listStylePosition
• listStyleType
Margin e Padding
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
Posizionamento e layout
• bottom
• clear
• clip
• cssFloat
• cursor
• display
• height
• left
• maxHeight
• maxWidth
• minHeight
• minWidth
• overflow
• position
• right
• top
• verticalAlign
• visibility
• width
• zIndex
Font e Testi
• color• direction• font• fontFamily• fontSize• fontSizeAdjust• fontStyle• fontVariant• fontWeight
• letterSpacing
• lineHeight
• textAlign
• textDecoration
• textIndent
• textShadow
• textTransform
• unicodeBidi
• whiteSpace
• wordSpacing
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: