Javascript - 5 | WebMaster & WebDesigner

19
Javascript [5] Matteo Magni

description

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

Transcript of Javascript - 5 | WebMaster & WebDesigner

Page 1: Javascript - 5 | WebMaster & WebDesigner

Javascript [5]Matteo Magni

Page 2: Javascript - 5 | WebMaster & WebDesigner

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

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

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

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

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

Do While [2]

var num = 1;

do {

 document.write('Number ' + num + '<br>');

 num += 1;

}while (num <= 1);

Page 8: Javascript - 5 | WebMaster & WebDesigner

Selezionare per classe?

document.getElementsByClassName()

Questo metodo Non tutti lo supportano

Page 9: Javascript - 5 | WebMaster & WebDesigner

getElementsByClassName

Page 10: Javascript - 5 | WebMaster & WebDesigner

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

Siamo Grafici?

Come gestiamo lo stile di un elemento?

Page 12: Javascript - 5 | WebMaster & WebDesigner

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

Background

• background

• backgroundAttachment

• backgroundColor

• backgroundImage

• backgroundPosition

• backgroundRepeat

Page 14: Javascript - 5 | WebMaster & WebDesigner

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

Liste

• listStyle

• listStyleImage

• listStylePosition

• listStyleType

Page 16: Javascript - 5 | WebMaster & WebDesigner

Margin e Padding

• margin

• marginBottom

• marginLeft

• marginRight

• marginTop

• padding

• paddingBottom

• paddingLeft

• paddingRight

• paddingTop

Page 17: Javascript - 5 | WebMaster & WebDesigner

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

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

Domande?

Slide:

http://cypher.informazione.me/

Code:

https://github.com/inFormazione/Cypher/

mail:

[email protected]