javascript - 3 | webmaster & webdesigner
DESCRIPTION
Terza lezione del modulo Javascript per il corso di WebMaster & WebDesignerTRANSCRIPT
Javascript [3]Matteo Magni
Array
• Come accedo agli elementi dell'array?
var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];
alert(days[0]);
Array [2]
• Come assegno un valore agli elementi dell'array?
var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];
days[0] = 'Monday';
days[1] = 'Tuesday';
Array [3]
In definitiva gli array hanno celle numerate partendo da zero.
Aggiungere elementi
var properties = ['red', '14px', 'Arial'];
//aggiungo
properties[properties.length] = 'bold';
//oppure
properties.push('bold');
//più elementi
properties.push('bold', 'italic','underlined');
Aggiungere elementi [2]
var properties = ['red', '14px', 'Arial'];
//aggiungo all'inizio
properties.unshift('bold');
//più elementi
properties.unshift('bold', 'italic');
Rimuovere elementi
var properties = ['red', '14px', 'Arial'];
//rimuovo l'ultimo
var removedItem = p.pop();
//var properties = ['red', '14px'];
var properties = ['red', '14px', 'Arial'];
//rimuovo il primo
var removedItem = p.shift();
//var properties = ['14px', 'Arial'];
Scelta
La programmazione spesso ci chiede di scegliere, o di far si che l'utente abbia delle alternative...
Come fare?
if & else
if ( condition ) {
// some action happens here
} else {
// some another action
}
Condizioni
• == Equal to• != Not equal to• === Strict equal to• !== Strict not equal to• > Greater than• < Less than• >= Greater than or equal • <= Less than or equal
Facciamo scegliere il colore?
if (enteredColor == 'red') {
alert('Rosso');
} else {
alert('Giallo');
}
And
//Posso combinare condizioni
if (a < 10 && a > 1) {
//tra 1 and 10
}
Or
//Posso combinare condizioni
if (a == 10 || a == 1) {
//o 10 o 1
}
if (a != 10 || a != 1) {
//non 10 e non 1
}
else If
if (prima condizione) {
//istruzioni
}
else if (seconda condizione) {
//istruzioni
}
else {
//istruzioni
}
• Posso andare all'infinito, ma avrebbe senso?
• Sarebbe comodo da gestire?
Switch
if (favoriteColor == 'blue') {
message = 'Blue is a cool color.';
} else if (favoriteColor == 'red') {
message = 'Red is a warm color.';
} else if (favoriteColor == 'green') {
message = 'Green is the color of the leaves.';
} else {
message = 'What kind of favorite color is that?';
}
switch (favoriteColor) {
case 'blue':
message = 'Blue is a cool color.';
break;
case 'red':
message = 'Red is a warm color.';
break;
case 'green':
message = 'Green is the color of the leaves.';
break;
default:
message = 'What kind of favorite color is that?';
}
Switch [2]switch(<variabile da valutare>) {
case <valore 1>:
//istruzioni
break; //si ferma qui
case <valore 2>:
//istruzioni
break; //si ferma qui
…
case <valore n>:
//istruzioni
break; //si ferma qui
default:
//istruzioni
}
Il tutto è probabilmente più leggibile
Ma come agisco sul mio documento HTML?
document.getElementById
<script>
function getValue(){
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">Click me!</h1>
DOM
Document Object Model?!
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: