Suivez-nous sur X
|
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z,
ALL
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
A propos d'Obligement
|
|
David Brunet
|
|
|
|
Programmation : JavaScript - Généralités
(Article écrit par Guillaume Guittenit et extrait de lesdocs.fr/amiga - juin 2017)
|
|
Le langage JavaScript permet d'exécuter des programmes simples comme la vérification d'un formulaire, ou
très élaborés comme un jeu ou une application. Ce langage est géré en natif par les navigateurs Internet,
sans greffon ajouté, ce qui est un grand avantage par rapport à d'autres langages qui nécessitent
l'installation d'un greffon comme Flash ou Java.
Les principales utilisations du langage JavaScript sont les suivantes :
- Animation des pages HTML par la gestion des événements (événement = action de l'internaute, clic souris, clavier, etc.).
- Contrôle de saisie dans les formulaires avant leur envoi au serveur pour traitement.
- Informations sur l'internaute : détection du navigateur Internet utilisé, langue, système d'exploitation.
- Menu déroulant, galerie d'images animées, glissière, effet "lightbox".
- Jeux en ligne.
- Applications en ligne.
Attention : ne pas confondre le langage JavaScript avec le langage Java qui est un autre langage développé par Oracle.
Le traditionnel Hello World !
Le code peut être placé dans la zone d'en-tête <head> ou dans la partie <body> de la page HTML.
Le navigateur Internet exécute le code dès qu'il le rencontre.
Ici dans <body> :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="texte"></p>
<script>
document.getElementById("texte").innerHTML = "Hello World!";
</script>
</body>
</html>
|
Là dans <head>, mais le code ci-dessous ne fonctionnera pas car on mentionne un id='texte' qui n'a pas
encore été lu par le navigateur.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
document.getElementById("texte").innerHTML = "Hello World!";
</script>
</head>
<body>
<p id="texte"></p>
</body>
</html>
|
Une manière de rectifier le code ci-dessus est d'écrire le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function affichehello() {
document.getElementById("texte").innerHTML = "Hello World!";
}
</script>
</head>
<body>
<p id="texte"></p>
<script>
affichehello();
</script>
</body>
</html>
|
La fonction est tout d'abord lue dans la zone d'en-tête sans être exécutée. Elle sera exécutée dès qu'elle
sera appelée, ce qui est le principe des fonctions. Elle est appelée après la balise <p> et le navigateur
connaît alors l'id='texte'.
Plus élégant encore, l'usage de l'évènement "onload" qui appelle la fonction seulement après le chargement
de tout le contenu de <body>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function affichehello() {
document.getElementById("texte").innerHTML = "Hello World!";
}
</script>
</head>
<body onload="affichehello()">
<p id="texte"></p>
</body>
</html>
|
Pour finir sur les sommets de l'élégance, la fonction affublée d'un paramètre pour écrire le texte de son choix.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function affiche(deschoses) {
document.getElementById("texte").innerHTML = deschoses;
}
</script>
</head>
<body onload="affiche('Sean Connery a la classe !')">
<p id="texte"></p>
</body>
</html>
|
Retenons les points suivants :
- La balise <script> indique que le langage JavaScript sera utilisé dans le contenu de cette balise.
- Il est préférable de placer les scripts en bas de la page juste avant </body>, car bien souvent,
le JavaScript agit sur des balises de la page qui doivent être chargées en premier. On peut aussi utiliser
l'événement "onload" sur la balise <body>.
- Comme pour le PHP, chaque instruction se termine par un point-virgule, mais un retour à la ligne fonctionne également.
- Les chaînes de caractères sont placées entre guillemets ou entre apostrophes.
Il est également possible de placer du code JavaScript dans un fichier externe avec l'extension ".js" :
Fichier principal : page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="truc.js"></script>
</head>
<body>
<header id="debut"></header>
<script>
miaou();
</script>
</body>
</html>
|
Fichier relié : truc.js
function miaou() {
document.getElementById("debut").innerHTML="<h1>Les chatons sont tout mignons</h1>";
}
|
Syntaxe du langage
Elle est très proche de celle du langage C ou PHP.
Types et variables
Le mot-clé "var" permet la déclaration des variables. Elles n'ont pas de type statique, c'est-à-dire qu'elles
prennent dynamiquement le type des valeurs qu'elles contiennent. Elles peuvent même changer de type en cours
de script, même si cette pratique est déconseillée. L'usage du mot-clé "var" est facultatif.
Les types de variables peuvent être :
- Number (nombres entiers ou à virgule) :
- String (chaîne de caractères, texte) :
- Boolean (booléen) :
Exemples :
var a = 2;
var b = "coucou";
truc = true;
|
Il existe un type particulier : null, qui est une sorte d'antivaleur. Contrairement à la valeur null,
une variable non encore affectée est indéfinie.
Le symbole "+" est utilisé pour l'addition des nombres et la concaténation des chaînes. On peut même
écrire une expression telle que "bonjour" + 8 (bonjour8), même si cette pratique défrise les ingénieurs
informaticiens.
Attention, le langage JavaScript comme le langage C est sensible à la casse : la variable "maChaîne"
est différente de "Machaîne", par exemple.
Les tableaux
Les tableaux sont des variables qui utilisent le même nom auquel on ajoute un numéro entre crochets.
Un tableau se déclare et s'initialise en même temps :
var tab = new Array(4); // attention au A majuscule
tab[0] = 12; // on commence à l'indice 0
tab[1] = "coucou"; // chaque élément peut être de type différent
tab[15] = 12.5; // il sera automatiquement agrandi
alert(tab.length); // nombre d'éléments : 16 (de 0 à 15)
|
On peut également ne pas déclarer de taille :
<!DOCTYPE html>
<html>
<body>
<script>
var tab = new Array;
var i;
for (i = 0 ; i<6 ; i++) tab[i] = 2*i;
for (i = 0 ; i<6 ; i++) document.write(tab[i]);
</script>
</body>
</html>
|
Les instructions conditionnelles
On appelle structure conditionnelle les instructions qui permettent de tester si une condition est vraie ou
non, ce qui permet de donner de l'interactivité à vos scripts par exemple.
L'instruction "if"
L'instruction "if" est la structure de test la plus basique, on la retrouve dans tous les langages. Elle
permet d'exécuter une série d'instructions si jamais une condition est réalisée.
La syntaxe de cette expression est la suivante :
if (condition réalisée) {
Liste d'instructions;
}
|
Remarques :
- La condition doit être entre des parenthèses.
- S'il n'y a qu'une instruction, les accolades ne sont pas nécessaires.
Il est possible de définir plusieurs conditions à remplir avec les opérateurs ET et OU (&& et ||) :
if (condition1 && condition2)
// teste si les deux conditions sont vraies
|
if (condition1 || condition2)
// exécute les instructions si l'une ou l'autre des deux conditions est vraie
|
L'instruction "if ... else"
L'instruction "if" dans sa forme basique ne permet de tester qu'une condition, or la plupart du temps
on aimerait pouvoir choisir les instructions à exécuter en cas de non-réalisation de la condition...
L'expression "if ... else" permet d'exécuter une autre série d'instructions en cas de non-réalisation de la
condition.
La syntaxe de cette expression est la suivante :
if (condition réalisée) {
Liste d'instructions;
}
else {
Autre série d'instructions;
}
|
Les boucles
Les boucles permettent d'exécuter plusieurs fois la même série d'instructions jusqu'à ce qu'une condition
ne soit plus réalisée.
La façon la plus commune de faire une boucle est de créer un compteur (une variable qui s'incrémente, c'est-à-dire
qui augmente de 1 à chaque tour de boucle) et de faire arrêter la boucle lorsque le compteur dépasse une certaine valeur.
La boucle "for"
L'instruction "for" permet d'exécuter un certain nombre de fois la même série d'instructions.
Trois paramètres sont à préciser dans la syntaxe "for" :
- Le nom de la variable qui sert de compteur et sa valeur de départ.
- La condition pour laquelle la boucle s'arrête (condition qui teste si la valeur du compteur dépasse une limite).
- Une instruction qui incrémente (ou décrémente) le compteur.
for (départ du compteur; condition; pas du compteur) {
liste d'instructions;
}
|
Exemple :
for (i=1; i<4; i++) {
alert(i);
}
|
Cette boucle affiche trois fois la valeur de "i", c'est-à-dire 1, 2, 3.
Elle commence à i=1, vérifie que "i" est bien strictement inférieur à 4, jusqu'à atteindre la valeur i=4
pour laquelle la condition ne sera plus réalisée, la boucle s'arrêtera alors et le programme se poursuivra après la boucle.
Une instruction alert(i) dans votre boucle est un bon moyen pour vérifier la valeur du compteur pas à pas.
Il faut bien compter le nombre de fois que l'on veut faire exécuter la boucle :
...exécute 11 fois la boucle (i de 0 à 10 inclus).
L'instruction "while"
L'instruction "while" représente un autre moyen d'exécuter plusieurs fois la même série d'instructions.
Syntaxe :
while (condition réalisée) {
liste d'instructions;
}
|
Cette instruction exécute la liste d'instructions tant que ("while" est un mot anglais qui signifie tant que)
la condition est réalisée. La condition de sortie pouvant être n'importe quelle structure conditionnelle,
les risques de boucle infinie (boucle dont la condition est toujours vraie) sont grands, c'est-à-dire qu'elle
risque de provoquer un plantage du navigateur (voire une brèche dans l'espace-temps).
Les boîtes de messages
Boîte d'alerte
alert("message d'alerte");
|
...affiche une simple boîte de message avec le texte "message d'alerte".
Confirmation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
if (confirm("L'élément sera supprimé. Êtes-vous sûr ?"))
document.write("Élément supprimé.");
else
document.write("Suppression annulée.");
</script>
</body>
</html>
|
Cette fonction affiche une boîte de message et offre à l'utilisateur la possibilité de confirmer
(OK ou Annuler). Elle retourne true si l'utilisateur clique sur "OK", false s'il clique sur "Annuler".
Soutenez le travail de l'auteur
|
|
|
