JavaScript

introduzione

JavaScript è un linguaggio di programmazione leggero e interpretato con capacità orientate agli oggetti che consente di creare interattività in pagine HTML altrimenti statiche.

Il codice JavaScript non viene compilato ma tradotto dal traduttore. Questo traduttore è incorporato nel browser ed è responsabile della traduzione del codice javascript.

Key Points

• È un linguaggio di programmazione leggero e interpretato.

• È progettato per creare applicazioni incentrate sulla rete.

• È complementare e integrato con Java.

• È complementare e integrato con l'HTML

• È una piattaforma aperta e multipiattaforma

Dichiarazioni JavaScript

Le istruzioni JavaScript sono i comandi per indicare al browser quale azione eseguire. Le dichiarazioni sono separate da punto e virgola (;).

L'istruzione JavaScript costituisce il codice JavaScript che viene tradotto riga per riga dal browser.

Esempio di istruzione JavaScript:

document.getElementById("demo").innerHTML = "Welcome";

La tabella seguente mostra le varie istruzioni JavaScript:

Sr.No.	Dichiarazione	Descrizione
1.	scatola dell'interruttore	Un blocco di istruzioni in cui l'esecuzione del codice dipende da casi diversi. L'interprete controlla ogni caso rispetto al valore dell'espressione finché non trova una corrispondenza. Se niente corrisponde, adefault condizione verrà utilizzata.
2.	Se altro	Il if è l'istruzione di controllo fondamentale che consente a JavaScript di prendere decisioni ed eseguire istruzioni in modo condizionale.
3.	Mentre	Lo scopo di un ciclo while è eseguire ripetutamente un'istruzione o un blocco di codice finché l'espressione è vera. Una volta che l'espressione diventa falsa, il ciclo verrà chiuso.
4.	fare mentre	Blocco di istruzioni che vengono eseguite almeno una volta e continuano ad essere eseguite finché la condizione è vera.
5.	per	Uguale a while ma l'inizializzazione, la condizione e l'incremento / decremento vengono eseguiti sulla stessa riga.
6.	per in	Questo ciclo viene utilizzato per scorrere le proprietà di un oggetto.
7.	Continua	L'istruzione continue dice all'interprete di avviare immediatamente l'iterazione successiva del ciclo e di saltare il blocco di codice rimanente.
8.	rompere	L'istruzione break viene utilizzata per uscire anticipatamente da un ciclo, rompendo le parentesi graffe che lo racchiudono.
9.	funzione	Una funzione è un gruppo di codice riutilizzabile che può essere chiamato ovunque nel programma. La funzione parola chiave viene utilizzata per dichiarare una funzione.
10.	ritorno	L'istruzione Return viene utilizzata per restituire un valore da una funzione.
11.	var	Utilizzato per dichiarare una variabile.
12.	provare	Un blocco di istruzioni su cui è implementata la gestione degli errori.
13.	catturare	Un blocco di istruzioni che vengono eseguite quando si verifica un errore.
14.	gettare	Usato per generare un errore.

Commenti JavaScript

JavaScript supporta commenti in stile C e C ++, quindi:

• Qualsiasi testo compreso tra // e la fine di una riga viene considerato come un commento e viene ignorato da JavaScript.

• Qualsiasi testo compreso tra i caratteri / * e * / viene considerato come un commento. Questo può estendersi su più righe.

• JavaScript riconosce anche la sequenza di apertura dei commenti HTML <! -. JavaScript lo tratta come un commento di una riga, proprio come fa il // commento .-->

• La sequenza di chiusura del commento HTML -> non è riconosciuta da JavaScript, quindi dovrebbe essere scritta come // ->.

Esempio

<script language="javascript" type="text/javascript">
   <!--

      // this is a comment. It is similar to comments in C++

      /*
         * This is a multiline comment in JavaScript
         * It is very similar to comments in C Programming
      */
   //-->
<script>

Variabile JavaScript

Le variabili vengono definite contenitori denominati per la memorizzazione delle informazioni. Possiamo inserire i dati in questi contenitori e quindi fare riferimento ai dati semplicemente nominando il contenitore.

Regole per dichiarare la variabile in JavaScript

Ecco le regole importanti che devono essere seguite durante la dichiarazione di una variabile in JavaScript.

• In JavaScript i nomi delle variabili fanno distinzione tra maiuscole e minuscole, ovvero a è diverso da A.

• Il nome della variabile può essere iniziato solo con un trattino basso (_) o una lettera (dalla a alla z o dalla A alla Z) o con il segno del dollaro ($).

• I numeri (da 0 a 9) possono essere utilizzati solo dopo una lettera.

• Nessun altro carattere speciale è consentito nel nome della variabile.

Prima di utilizzare una variabile in un programma JavaScript, è necessario dichiararla. Le variabili vengono dichiarate con la parola chiave var come segue:

<script type="text/javascript">
   <!--
      var money;
      var name, age;
   //-->
</script>

Le variabili possono essere inizializzate al momento della dichiarazione o dopo la dichiarazione come segue:

<script type="text/javascript">
   <!--
      var name = "Ali";
      var money;
      money = 2000.50;
   //-->
</script>

Tipo di dati Javascript

Esistono due tipi di dati come indicato di seguito:

• Tipo di dati primitivo

• Tipo di dati non primitivo

La tabella seguente descrive Primitive Data Types disponibile in javaScript

Sr.No.	Descrizione del tipo di dati
1.	String Può contenere gruppi di caratteri come valore singolo. È rappresentato tra virgolette doppie. Es. Var x = "tutorial".
2.	Numbers Contiene i numeri con o senza decimali. Ad esempio var x = 44, y = 44,56;
3.	Booleans Contengono solo due valori, vero o falso. Ad esempio var x = true, y = false.
4.	Undefined La variabile senza valore si chiama Undefined. Ad esempio var x;
5.	Null Se assegniamo null a una variabile, diventa vuota. Ad esempio var x = null;

La tabella seguente descrive Non-Primitive Data Types in javaScript

Sr.No.	Descrizione del tipo di dati
1.	Array Può contenere gruppi di valori dello stesso tipo. Ad esempio var x = {1,2,3,55};
2.	Objects Gli oggetti vengono archiviati nella coppia proprietà e valore. Ad esempio var rectangle = {length: 5, breadth: 3};

Funzioni JavaScript

La funzione è un gruppo di istruzioni riutilizzabili (codice) che possono essere chiamate ovunque in un programma. In javascript la parola chiave della funzione viene utilizzata per dichiarare o definire una funzione.

Key Points

• Per definire una funzione, utilizzare la parola chiave function seguita da functionname, seguita da parentesi ().

• Tra parentesi, definiamo parametri o attributi.

• Il gruppo di istruzioni riutilizzabili (codice) è racchiuso tra parentesi graffe {}. Questo codice viene eseguito ogni volta che viene chiamata la funzione.

Syntax

function functionname (p1, p2) {
   function coding…
}

Operatori JavaScript

Gli operatori vengono utilizzati per eseguire operazioni su uno, due o più operandi. L'operatore è rappresentato da un simbolo come +, =, *,% ecc. Di seguito sono riportati gli operatori supportati da javascript -

• Operatori aritmetici

• Operatori di confronto

• Operatori logici (o relazionali)

• Operatori di assegnazione

• Operatori condizionali (o ternari)

• Operatori aritmetici

Operatori aritmatici

La tabella seguente mostra tutti gli operatori aritmetici supportati da javascript -

Operatore	Descrizione	Esempio
+	Aggiungi due operandi.	10 + 10 darà 20
-	Sottrai il secondo operando dal primo.	10-10 darà 0
*	Moltiplica due operandi.	10 * 30 darà 300
/	Dividi il numeratore per denominatore	10/10 darà 1
%	Si chiama operatore modulo e fornisce il resto della divisione.	10% 10 darà 0
++	Operatore di incremento, aumenta il valore intero di uno	10 ++ darà 11
-	Operatore di decremento, riduce il valore intero di uno	10 - darà 9

Operatori di confronto

La tabella seguente mostra tutti gli operatori di confronto supportati da javascript -

Operatore	Descrizione	Esempio
==	Controlla se i valori di due operandi sono uguali o meno. Se sì, la condizione diventa vera.	10 == 10 darà vero
! =	Not Equal to operator Controlla se il valore di due operandi è uguale o meno, se i valori non sono uguali la condizione diventa vera.	10! = 10 darà falso
>	Greater Than operator Controlla se il valore dell'operando sinistro è maggiore del valore dell'operando destro, in caso affermativo la condizione diventa vera.	20> 10 darà vero
<	Less than operator Controlla se il valore dell'operando sinistro è inferiore al valore dell'operando destro, in caso affermativo la condizione diventa vera.	10 <20 darà vero
> =	Greater than or equal to operator Controlla se il valore dell'operando sinistro è maggiore o uguale al valore dell'operando destro, in caso affermativo la condizione diventa vera.	10> = 20 darà falso
<=	Less than or equal to operator Controlla se il valore dell'operando sinistro è minore o uguale al valore dell'operando destro, in caso affermativo la condizione diventa vera.	10 <= 20 darà vero.

Operatori logici

La tabella seguente mostra tutti gli operatori logici supportati da javascript -

Operatore	Descrizione	Esempio
&&	Logico AND L'operatore restituisce vero se entrambi gli operandi sono diversi da zero.	10 e 10 daranno vero.
||	Logico OR L'operatore restituisce vero Se uno qualsiasi degli operandi è diverso da zero	10 || 0 darà vero.
!	Logico NOT L'operatore completa lo stato logico del suo operando.	! (10 && 10) darà false.

Operatori di assegnazione

La tabella seguente mostra tutti gli operatori di assegnazione supportati da javascript -

Operatore	Descrizione	Esempio
=	Simple Assignment operator Assegna i valori dagli operandi del lato destro all'operando del lato sinistro.	C = A + B assegnerà il valore di A + B a C
+ =	Add AND assignment operator Aggiunge l'operando destro all'operando sinistro e assegna il risultato all'operando sinistro	C + = A è equivalente a C = C + A
- =	Subtract AND assignment operator Sottrae l'operando destro dall'operando sinistro e assegna il risultato all'operando sinistro	C - = A è equivalente a C = C - A
* =	Multiply AND assignment operator Moltiplica l'operando destro con l'operando sinistro e assegna il risultato all'operando sinistro	C * = A è equivalente a C = C * A
/ =	Divide AND assignment operator Divide l'operando sinistro con l'operando destro e assegna il risultato all'operando sinistro	C / = A è equivalente a C = C / A
% =	Modulus AND assignment operator Modulo AND operatore di assegnazione, richiede il modulo utilizzando due operandi e assegna il risultato all'operando sinistro	C% = A è equivalente a C = C% A

Operatore condizionale

È anche chiamato operatore ternario, poiché ha tre operandi.

Operatore	Descrizione	Esempio
?:	Espressione condizionale	Se la condizione è vera? Quindi valore X: altrimenti valore Y

Struttura di controllo

La struttura di controllo controlla effettivamente il flusso di esecuzione di un programma. Di seguito sono riportate le diverse strutture di controllo supportate da javascript.

• se altro

• scatola dell'interruttore

• fare mentre il ciclo

• while loop

• per loop

Se altro

L'istruzione if è l'istruzione di controllo fondamentale che consente a JavaScript di prendere decisioni ed eseguire istruzioni in modo condizionale.

Syntax

if (expression){
   Statement(s) to be executed if expression is true
}

Example

<script type="text/javascript">
   <!--
      var age = 20;
      if( age > 18 ){
         document.write("<b>Qualifies for driving</b>");
      }
   //-->
</script>

Scatola dell'interruttore

La sintassi di base dell'istruzione switch consiste nel fornire un'espressione da valutare e diverse istruzioni diverse da eseguire in base al valore dell'espressione. L'interprete controlla ogni caso rispetto al valore dell'espressione finché non trova una corrispondenza. Se nulla corrisponde, verrà utilizzata una condizione predefinita.

Syntax

switch (expression) {
   case condition 1: statement(s)
                    break;
   case condition 2: statement(s)
                    break;
   ...
   case condition n: statement(s)
                    break;
   default: statement(s)
}

Example

<script type="text/javascript">
   <!--
      var grade='A';
      document.write("Entering switch block<br/>");
      switch (grade) {
         case 'A': document.write("Good job<br/>");
            break;
         case 'B': document.write("Pretty good<br/>");
            break;
         case 'C': document.write("Passed<br/>");
            break;
         case 'D': document.write("Not so good<br/>");
            break;
         case 'F': document.write("Failed<br/>");
            break;
         default:  document.write("Unknown grade<br/>")
      }
      document.write("Exiting switch block");
   //-->
</script>

Fai mentre Loop

Il ciclo do ... while è simile al ciclo while tranne per il fatto che il controllo delle condizioni avviene alla fine del ciclo. Ciò significa che il ciclo verrà sempre eseguito almeno una volta, anche se la condizione è falsa.

Syntax

do{
   Statement(s) to be executed;
} while (expression);

Example

<script type="text/javascript">
   <!--
      var count = 0;
      document.write("Starting Loop" + "<br/>");
      do{
         document.write("Current Count : " + count + "<br/>");
         count++;
      }while (count < 0);
      document.write("Loop stopped!");
   //-->
</script>

Questo produrrà il seguente risultato:

Starting Loop
Current Count : 0
Loop stopped!

While Loop

Lo scopo di un ciclo while è eseguire ripetutamente un'istruzione o un blocco di codice finché l'espressione è vera. Una volta che l'espressione diventa falsa, il ciclo verrà chiuso.

Syntax

while (expression){
   Statement(s) to be executed if expression is true
}

Example

<script type="text/javascript">
   <!--
      var count = 0;
      document.write("Starting Loop" + "<br/>");
      while (count < 10){
         document.write("Current Count : " + count + "<br/>");
         count++;
      }
      document.write("Loop stopped!");
   //-->
</script>

Questo produrrà il seguente risultato:

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

Per Loop

Il ciclo for è la forma più compatta di loop e include le seguenti tre parti importanti:

• L'inizializzazione del ciclo in cui inizializziamo il nostro contatore su un valore iniziale. L'istruzione di inizializzazione viene eseguita prima dell'inizio del ciclo.

• L'istruzione test che verificherà se la condizione data è vera o meno. Se la condizione è vera, verrà eseguito il codice fornito all'interno del ciclo, altrimenti verrà visualizzato il ciclo.

• La dichiarazione di iterazione in cui puoi aumentare o diminuire il tuo contatore.

Syntax

for (initialization; test condition; iteration statement){
   Statement(s) to be executed if test condition is true
}

Esempio

<script type="text/javascript">
   <!--
      var count;
      document.write("Starting Loop" + "<br/>");
      for(count = 0; count < 10; count++){
         document.write("Current Count : " + count );
         document.write("<br/>");
      }
      document.write("Loop stopped!");
   //-->
</script>

Questo produrrà il seguente risultato che è simile al ciclo while -

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

Creazione di un programma di esempio

Di seguito è riportato il programma di esempio che mostra l'ora, quando si fa clic sul pulsante.

<html>
   <body>
      <button onclick="this.innerHTML=Date()">The time is?</button>
      <p>Click to display the date.</p>
      <button onclick="displayDate()">The time is?</button>
      <script>
         function displayDate() {
            document.getElementById("demo").innerHTML = Date();
         }</script>

         <p id="demo"></p>
      </script>
   </body>
</html>

Output