Javascript - 3 | WebMaster & WebDesigner
-
Upload
matteo-magni -
Category
Technology
-
view
305 -
download
2
description
Transcript of Javascript - 3 | WebMaster & WebDesigner
![Page 1: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/1.jpg)
Javascript [3]Matteo Magni
![Page 2: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/2.jpg)
Array
• Come accedo agli elementi dell'array?
var days = ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'];
alert(days[0]);
![Page 3: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/3.jpg)
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';
![Page 4: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/4.jpg)
Array [3]
In definitiva gli array hanno celle numerate partendo da zero.
![Page 5: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/5.jpg)
Aggiungere elementi
var properties = ['red', '14px', 'Arial'];
//aggiungo
properties[properties.length] = 'bold';
//oppure
properties.push('bold');
//più elementi
properties.push('bold', 'italic','underlined');
![Page 6: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/6.jpg)
Aggiungere elementi [2]
var properties = ['red', '14px', 'Arial'];
//aggiungo all'inizio
properties.unshift('bold');
//più elementi
properties.unshift('bold', 'italic');
![Page 7: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/7.jpg)
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'];
![Page 8: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/8.jpg)
Scelta
La programmazione spesso ci chiede di scegliere, o di far si che l'utente abbia delle alternative...
![Page 9: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/9.jpg)
Come fare?
![Page 10: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/10.jpg)
if & else
if ( condition ) {
// some action happens here
} else {
// some another action
}
![Page 11: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/11.jpg)
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
![Page 12: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/12.jpg)
Facciamo scegliere il colore?
if (enteredColor == 'red') {
alert('Rosso');
} else {
alert('Giallo');
}
![Page 13: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/13.jpg)
And
//Posso combinare condizioni
if (a < 10 && a > 1) {
//tra 1 and 10
}
![Page 14: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/14.jpg)
Or
//Posso combinare condizioni
if (a == 10 || a == 1) {
//o 10 o 1
}
if (a != 10 || a != 1) {
//non 10 e non 1
}
![Page 15: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/15.jpg)
else If
if (prima condizione) {
//istruzioni
}
else if (seconda condizione) {
//istruzioni
}
else {
//istruzioni
}
• Posso andare all'infinito, ma avrebbe senso?
• Sarebbe comodo da gestire?
![Page 16: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/16.jpg)
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?';
}
![Page 17: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/17.jpg)
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
![Page 18: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/18.jpg)
Ma come agisco sul mio documento HTML?
![Page 19: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/19.jpg)
document.getElementById
<script>
function getValue(){
var x=document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">Click me!</h1>
![Page 20: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/20.jpg)
DOM
Document Object Model?!
![Page 21: Javascript - 3 | WebMaster & WebDesigner](https://reader033.fdocuments.net/reader033/viewer/2022051312/5479db025806b58f048b472a/html5/thumbnails/21.jpg)
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: