Introduzione a JavaScript
57
JavaScript Introduzione
-
Upload
giovanni-buffa -
Category
Education
-
view
82 -
download
3
Transcript of Introduzione a JavaScript
JavaScriptIntroduzione
JavaScript è un linguaggio di scripting, il quale viene interpretato ed eseguito dal client
(browser).
Tutte le istruzioni JavaScript, per poter essere eseguite, necessitano di essere scritte all’interno
del tag HTML:
<script>…</script>
Il tag <script> va sempre inserito prima della chiusura di <body>.
Solo rari e specifici casi prevedono l’uso di <script> all’interno di <head>.
A differenza di altri linguaggi di programmazione veri e propri, JavaScript non è orientato agli
oggetti, come ObjectiveC o C#, ma si basa sugli oggetti.
DOMDocument Object Model
html
head
body
link
title
h1
div p
img
em
navigator
window
document
Variabili
Le variabili sono delle “scatole” che possono contenere un qualsivoglia valore, numerico
testuale o strutturale.
Le variabili, per definizione, possono variare durante l’esecuzione dell’applicazione.
Le variabili in JavaScript si scrivono anteponendo al nome della variabile la parola riservata var.
var first = 1; var second = “Text”;
Non è sempre necessario inizializzare le variabili.
var first; var second, third, fourth;
Tipi di dato
Le tipologie di dati in JavaScript sono:
• Boolean (valori booleani)
• Number (numeri interi o reali)
• String (caratteri e stringhe)
• Undefined o Null (non difiniti o nulli)
Tipi di datoBoolean
Il tipo boolean accetta solo due possibili valori, true (vero) o false (falso)
var first = true; var second = false;
Tipi di datoNumber
Il tipo integer accetta valori numerici interi compresi tra -infinito a +infinito:
var first = 10; var second = 1540; var third = -230; var fourth = 5*3;
Il tipo float accetta valori numerici reali compresi tra -infinito a +infinito:
var first = 4.153; // 4,153 var second = 3.2e5; //3,2 * 10^5
Tipi di datoString
Il tipo string accetta qualsiasi tipologia di carattere compreso tra singoli o doppi apici:
var first = “This is a string”; var second = ‘This is another string’; var third = ‘This is “the last” string’;
Tipi di datoUndefined/Null
Il tipo undefined è il valore di una variabile che non ha valore. Viceversa, il tipo null è una
variabile vuota:
var first; console.log(first); // undefined
var second = null; console.log(second); //null
Operatori
Gli operatori aritmetici seguono la stessa logica degli operatori aritmetici a cui siamo abituati; +, -,
*, /, % (modulo)
Gli operatori di assegnazione servono per assegnare un valore ad una variabile.
• = (assegnazione)
• += (somma per assegnamento)
• -= (sottrazione per assegnamento)
• *= (moltiplicazione per assegnamento)
• /= (divisione per assegnamento)
• %= (modulo per assegnamento)
Gli operatori booleani seguono la logica del suo creatore, George Bool. Si basano su una
matematica che accetta solo due possibili valori: true e false.
• && (AND logico)
• || (OR logico)
• ! (NOT logico)
A B X0 0 00 1 01 0 01 1 1
A B X0 0 00 1 11 0 11 1 1
A X
0 1
1 0
AND OR NOT
Gli operatori di controllo matematici verificano se la condizione può essere vera.
• == (uguaglianza)
• === (uguaglianza di valore e di tipo)
• < (minore)
• <= (minore e uguale)
• > (maggiore)
• >= (maggiore e uguale)
• != (diverso)
• !== (differente valore e tipo)
Gli operatori di incremento servono ad incrementare o decrementare di 1 una variabile.
• ++ (incremento - prefisso e postfisso)
• -- (decremento - prefisso e postfisso)
Strutture di controllo
Le strutture condizionali permettono di eseguire un blocco di codice se la sua condizione è vera.
if(condition) statement
if(condition) statement else statement
if(condition) statement elseif statementelse statement
switch permette in modo più chiaro e pulito l’esecuzione di più if in cascata, a patto che la
condizione rimanga sempre la medesima.
switch(condition) case statement break
L’istruzione all’interno di while viene eseguita fintantoché la condizione risulterà essere vera.
while(condition) statement increment
Il comportamento è analogo a while, con l’unica differenza che l’incremento del valore avviene
prima dell’esecuzione dello statement.
for(instance; expression; increment) statement
Grazie a try è possibile “catturare” i possibili errori derivanti dal nostro codice ed eseguire delle
azioni adeguate.
try statement catch(error) error statement
Strutture di dati
Le strutture di dati in JavaScript sono:
• Array
• Functions (funzioni)
• Objects (oggetti)
Strutture di datiArray
Un array è un’insieme di valori (stringhe, numeri o array) accomunati da un indice.
Un array può essere definito come una collezione organizzata di oggetti.
Per collezione, si intende che gli oggetti che ne fanno parte siano dello stesso tipo (in JavaScript,
e in molti altri linguaggi, possono anche non esserlo).
Per organizzata, implica che sia possibile identificare univocamente tutti gli oggetti
dell’array in modo sistematico.
2 3 5 7 11 13 17 19
0 1 2 3 4 5 6 7
Ad esempio: array di numeri primi
var numeriPrimi = new Array(2,3,5,7,11,13,17,19);
Gli array possono anche essere definiti nel seguente modo:
var numeriPrimi = new Array(); numeriPrimi[0] = 2;numeriPrimi[1] = 3;numeriPrimi[2] = 5;
Gli array possono anche essere utilizzati in modo literal (array literal) senza per forza di cose
istanziare una nuova istanza della classe Array.
var numeriPrimi = [2,3,5,7,11,13,17,19];
console.log(numeriPrimi[2]); // 5
Strutture di datiFunction
Una funzione permette di creare un blocco di codice in modo da poter essere richiamato ed eseguito successivamente, anche in molteplici
punti diversi della nostra applicazione.
Oltre alle numerose funzioni che JavaScript ci mette a disposizione, abbiamo la possibilità di
creare noi stessi delle funzioni personalizzate atte a svolgere determinati compiti all’interno del nostro codice; richiamando semplicemente la porzione di codice relativa, alla quale avremo attribuito un nome che identifichi la funzione.
var nomeFunzione = function(){ statement return
}
L’istruzione return, seguita dal valore che deve ritornare, è un metodo più semplice ed efficace
per poter gestire il risultato dei calcoli che vengono effettuati all’interno della funzione.
console.log(nomeFunzione());
var first = nomeFunzione();
Alla funzione, inoltre, possiamo attribuire tutta una serie di parametri aggiuntivi che possono variare all’interno dell’esecuzione del nostro
programma, attuando il concetto di riusabilità del codice.
var nomeFunzione = function(arg1, arg2, argn){ statement return
}
Gli argomenti, infine, possono avere dei valori di default che, nel caso non vengano definiti nel
richiamare la funzione, vengono utilizzati comunque prendendo il valore di default che gli
è stato attribuito.
var nomeFunzione = function(arg1, arg2, argn = 0){ statement return
} nomeFunzione(1,2);
Gli argomenti sono dei segnaposto all’interno della nostra funzione. Se il nome dell’argomento
è uguale al nome di una variabile all’esterno della funzione, i calcoli fatti su entrambe sono
individuali e non vanno ad incidere l’uno sull’altro (scoping).
var arg1 = ‘argument 1’; var nomeFunzione = function(arg1, arg2, argn){ statement return
}
Strutture di datiObject
Gli oggetti sono i principali tipi di dato in JavaScript: qualsiasi cosa è, in realtà, un oggetto.
Un oggetto non è altro che una struttura con delle
proprietà e dei metodi.
var first = new Array(“abc”, 234);
console.log(first.length); //proprietà first.push(12); // metodo
È possibile, tuttavia, costruire degli oggetti personalizzati, anche abbastanza complessi,
attraverso le funzioni costruttrici.
Si può ad esempio creare un oggetto cane, con delle proprietà come razza e taglia, e delle istanze riferite all'oggetto cane, come Pastore Tedesco o
Barboncino.
Inoltre, essendo JavaScript basato sul DOM, gli elementi stessi del DOM costituiscono degli
oggetti lato client, ovvero degli elementi presenti nella pagina HTML che hanno delle proprietà e
dei metodi predefiniti.
Ad esempio, la finestra nella quale è descritta una pagina HTML è rappresentata da un oggetto
window, che può essere chiusa o aperta, attraverso i metodi close() e open().
Così come succede per gli array, anche gli oggetti possono essere creati con la direttiva new:
var obj = new Object(); obj.name = “Pippo”; obj.surname = “Pluto”; obj.walk = function(step){};
console.log(obj.name); // Pippo
Tuttavia, anche per gli oggetti, si preferisce utilizzare la sua forma literal (object literal):
var obj = { name:“Pippo”, surname:“Pluto”, walk:function(step){} };
console.log(obj.name); // Pippo
![Corso Completo Javascript - grimaldi.napoli.it · [unità2] - HTML.IT - Corso Completo JavaScript La nascita di Javascript Il World Wide Web si è sviluppato grazie alla possibilità](https://static.fdocumenti.com/doc/165x107/5c54cf6b93f3c3211629592b/corso-completo-javascript-unita2-htmlit-corso-completo-javascript.jpg)
