Transcript
Page 1: Javascript - 3 | WebMaster & WebDesigner

Javascript [3]Matteo Magni

Page 2: Javascript - 3 | WebMaster & WebDesigner

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

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

Array [3]

In definitiva gli array hanno celle numerate partendo da zero.

Page 5: Javascript - 3 | WebMaster & WebDesigner

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

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

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

Scelta

La programmazione spesso ci chiede di scegliere, o di far si che l'utente abbia delle alternative...

Page 9: Javascript - 3 | WebMaster & WebDesigner

Come fare?

Page 10: Javascript - 3 | WebMaster & WebDesigner

if & else

if ( condition ) {

    // some action happens here

} else {

    // some another action

}

Page 11: Javascript - 3 | WebMaster & WebDesigner

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

Facciamo scegliere il colore?

if (enteredColor == 'red') {

   alert('Rosso');

} else {

   alert('Giallo');

}

Page 13: Javascript - 3 | WebMaster & WebDesigner

And

//Posso combinare condizioni

if (a < 10 && a > 1) {

 //tra 1 and 10

 

}

Page 14: Javascript - 3 | WebMaster & WebDesigner

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

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

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

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

Ma come agisco sul mio documento HTML?

Page 19: Javascript - 3 | WebMaster & WebDesigner

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

DOM

Document Object Model?!

Page 21: Javascript - 3 | WebMaster & WebDesigner

Domande?

Slide:

http://www.slideshare.net/ilbonzo

Code:

https://github.com/ilbonzo/Cypher

mail:

[email protected]


Top Related