
Crée en 1995,
javascript est un language de programmation qui est utilisé le plus souvent pour des pages web.
La plupart du temps
javascript sert à contrôler les données saisies dans les formulaires
HTML et à interagir
avec le document via l'interface
DOM fourni par la navigateur.
Contrairement à des languages serveur comme
PHP, le code
Javascript est lisible par l'utilisateur. Il est donc déconseillé de coder avec
des notions / mots clé confidentiels.
La balise <script>
La balise
<script> permet d'insérer du
javascript qui s'execute coté client.
Pour intégrer du code javascript à vos page web, vous pouvez soit le mettre dans un fichier externe avec une extension
.js
soit l'écrire directement dans la page web.
Exemple script externe:
<script src="/script.js" type="text/javascript" ></script>
Exemple script interne:
| <script type="text/javascript"> |
---|
| //<![CDATA[ |
---|
| |
---|
| //]]> |
---|
| </script> |
---|
| |
---|
Exemple code inline dans une balise HTML:
<a href="#" onclick="code javascript"></a>
Les commentaires
Pour écrire un commentaire dans votre code, c'est à dire du texte qui ne sera pas interprété mais juste lisible pour le programmeur:
| <script type="text/javascript"> |
---|
| |
---|
| </script> |
---|
Déclarer une variable
La syntaxe pour déclarer une variable en javascript est la suivante
| <script type="text/javascript"> |
---|
| var nom = 'olivier'; |
---|
| </script> |
---|
Les alertes
Vous pouvez utiliser des commandes qui controleront votre navigateur.
Le plus connu est l'alerte navigateur :
| <script type="text/javascript"> |
---|
| alert("Bonjour"); |
---|
| </script> |
---|
Vous pouvez lui transmettre une variable:
| <script type="text/javascript"> |
---|
| var nom = "olivier"; |
---|
| alert( nom ); |
---|
| </script> |
---|
| |
---|
Les consoles des navigateurs
Sur la plupart des navigateurs vous pouvez afficher la console via la touche
F12 de votre clavier.
Exemple sur chrome:
| <script type="text/javascript"> |
---|
| console.log( "variable: ", "val 1" ); |
---|
| console.log( "tableau: ", new Array("val 1", "val 2") ); |
---|
| console.log( "objet:", { nom : "engel", "prenom" : "olivier" } ); |
---|
| function test(){ alert( "ok" ); } |
---|
| console.log( "fonction:", test ); |
---|
| </script> |
---|
Les prompt
Vous pouvez récupérer une entrée utilisateur à l'aide de la commande prompt:
| <script type="text/javascript"> |
---|
| var nom = window.prompt( "Quel est votre nom?" ); |
---|
| alert( nom ); |
---|
| </script> |
---|
Exemple prompt
Les operateurs
Les opérateurs de calcul en javascript:
| <script type="text/javascript"> |
---|
| var r = 1 + 1; |
---|
| var r = 1 * 1; |
---|
| var r = 1 - 1; |
---|
| var r = 1 / 1; |
---|
| </script> |
---|
Les opérateurs d'affection:
| <script type="text/javascript"> |
---|
| var r = 2; |
---|
| var r+= 1; |
---|
| var r-= 1; |
---|
| var r*= 1; |
---|
| var r/= 1; |
---|
| </script> |
---|
| |
---|
Les opérateurs d'incémentation:
| <script type="text/javascript"> |
---|
| var r = 100; |
---|
| r++; |
---|
| r--: |
---|
| </script> |
---|
| |
---|
Les opérateurs de comparaison:
| <script type="text/javascript"> |
---|
| var x = 500; |
---|
| x == 500; |
---|
| x != 501; |
---|
| x > 501; |
---|
| x < 501; |
---|
| x >= 501; |
---|
| x <= 501; |
---|
| </script> |
---|
| |
---|
Les opérateurs logiques:
L'opérateur "OU":
| <script type="text/javascript"> |
---|
| var x = TRUE; |
---|
| var y = FALSE; |
---|
| ( x || z ) |
---|
| </script> |
---|
| |
---|
Le code ci-dessus vérifie si l'une des deux valeurs remplit la condition
TRUE.
L'opérateur "ET":
| <script type="text/javascript"> |
---|
| var x = TRUE; |
---|
| var y = FALSE; |
---|
| ( x && z ) |
---|
| </script> |
---|
Le code ci-dessus vérifie si les deux valeurs remplissent la condition
TRUE.
La concaténation
En javascript pour concaténer deux valeurs, il faut s'assurer que les variables ne sont pas toutes les deux de type numérique.
Si c'est le cas, on ajoute une valeur de type string.
| <script type="text/javascript"> |
---|
| var a = 15; |
---|
| var b = 30; |
---|
| var c = a + b; |
---|
| var d = a + "" + b; |
---|
| </script> |
---|
| |
---|
Les tableaux
| <script type="text/javascript"> |
---|
| var a = new Array(); |
---|
| a[0] = "Valeur 1"; |
---|
| a[1] = "Valeur 2"; |
---|
| |
---|
| var b = []; |
---|
| b[0] = 1; |
---|
| |
---|
| var b = []; |
---|
| b.push( 1 ); |
---|
| </script> |
---|
Pour parcourir un tableau en javascript vous pouvez utiliser la commande
FOR:
| <script type="text/javascript"> |
---|
| var a = new Array(); |
---|
| a[0] = "Valeur 1"; |
---|
| a[1] = "Valeur 2"; |
---|
| |
---|
| for( i in a ){ |
---|
| alert( a [i] ); |
---|
| } |
---|
| </script> |
---|
Le tableau en javascript est un objet, vous pouvez donc appeler des méthodes qui permettront de le manipuler:
t.join | Retourne un chaine de caractère contenant tous les éléments d'un tableau |
t.pop | Supprimer le dernier élément du tableau et retourne sa valeur |
t.push | Ajoute un ou plusieurs éléments au tableau |
t.reverse | Inverse l'ordre des éléments d'un tableau |
t.shift | Supprime le premier élément d'un tableau |
t.slice | Permet de scinder un tableau |
t.splice | Ajoute ou supprime des éléments |
t.sort | Trie un tableau |
t.unshift | Ajoute un ou plusieurs élément au début du tableau |
| <script type="text/javascript"> |
---|
| var a = new Array( "olivier", "engel", "est", "batman" ); |
---|
| alert( a ); |
---|
| alert( a.join() ); |
---|
| alert( a.reverse() ); |
---|
| alert( a.sort() ); |
---|
| alert( a.pop() ); |
---|
| </script> |
---|
| |
---|
Les objets
Les attributs :
| <script type="text/javascript"> |
---|
| function Voiture(){ |
---|
| this.roues = 4; |
---|
| } |
---|
| var ma_voiture = new Voiture(); |
---|
| alert( ma_voiture.roues ); |
---|
| var ma_voiture = new Voiture(); |
---|
| ma_voiture.roues = 6; |
---|
| alert( ma_voiture.roues ); |
---|
| </script> |
---|
| |
---|
Les méthodes :
| <script type="text/javascript"> |
---|
| function Voiture(){ |
---|
| this.roues = 4; |
---|
| this.getRoues = function(){ |
---|
| alert( this.roues ); |
---|
| } |
---|
| } |
---|
| var ma_voiture = new Voiture(); |
---|
| ma_voiture.getRoues(); |
---|
| </script> |
---|
JSON
Il est possible de stocker des informations structurées dans un format nommé JSON.
Exemple:
| <script type="text/javascript"> |
---|
| var data = {}; |
---|
| data.prenom = "olivier"; |
---|
| data.nom = "engel"; |
---|
| console.log( data ); |
---|
| |
---|
| </script> |
---|
UNE QUESTION SUR L'ARTICLE?