Ce blog a été créé dans un bute de partager les expériences de chacun de nous dans le domaine de création artistique. Libre court à vous de partager vos créations sur ce blog.
27 Mars 2023
FICHE 1 Les bases du JavaScript
Le JavaScript, créé en 1995 par Brendan Eich (pour la Netscape Communication Corporation), est un langage de programmation de scripts orienté objet. Si le terme Java est commun au langage du même nom, le JavaScript est radicalement différent.
La version ES5 date de 2009.
On crée un instruction Javascript à l'intérieur des balises <script> </script>
1.1. La boîte de dialogue alert()
alert() est une instruction simple, appelée fonction, qui permet d'afficher une boîte de dialogue contenant un message. Ce message est placé entre apostrophes, elles-mêmes placées entre les parenthèses de la fonction alert().
1.2. La syntaxe Javascript
La syntaxe du Javascript n'est pas compliquée. De manière générale, les instructions doivent être séparées par un point-virgule que l'on place à la fin de chaque instruction :
<script> instruction_1; instruction_2; instruction_3;
</script>
La syntaxe d'une fonction se compose de deux choses : son nom, suivi d'un couple de parenthèses (une ouvrante et une fermante). Entre les parenthèses se trouvent les arguments, que l'on appelle aussi paramètres.
<script> myFunction();
</script> Par exemple :
<script> alert('Bonjour');
// la fonction affiche une boîte de dialogue avec "Bonjour"
</script>
Fiche 1
1.3. Des fichiers .js
Il est possible, et même conseillé, d'écrire le code Javascript dans un fichier externe,
portant l'extension .js. Ce fichier est ensuite appelé depuis la page Web au moyen de
l'élément <script> et de son attribut src qui contient l'URL du fichier .js.
Par exemple dans le fichier hello.js, on écrit :
alert('Hello world!');
Et dans le body de la page html, on trouve :
<script src="hello.js"></script>
Pour éviter des problèmes de chargement sur les pages, il est conseillé de placer les
éléments <script> juste avant la fermeture de l’élément <body>.
1.4. Indentations et commentaires
Pour s'y retrouver dans l'écriture du code, on peut l'indenter, c'est-à-dire hiérarchiser
les lignes de code avec des tabulations.
Par ailleurs, on peut intégrer des commentaires, qui ne sont pas interprétés comme du
code, afin d'expliquer son code ou de mieux s'y retrouver :
<script>
instruction_1; // Ceci est ma première instruction
instruction_2;
/* La troisième instruction ci-dessous,
avec un commentaire sur deux lignes */
instruction_3;
</script>
1.5. Un site pour tester le Javascript
Pour tester le code Javascript sans créer systématiquement des pages web :
http://jsfiddle.net/
Fiche 2
2.1. Bases des variables en JavaScript
Une variable consiste en un espace de stockage, qui permet de garder en mémoire
tout type de données. La variable est ensuite utilisée dans les scripts. Une variable
contient seulement des caractères alphanumériques, le $ (dollar) et le _ (underscore) ;
elle ne peut pas commencer par un chiffre ni prendre le nom d'une fonction existante de
Javascript. On crée la variable et on lui affecte (ou attribue) une valeur :
<script>
var myVariable;
myVariable = 2;
</script>
ou :
<script>
var myVariable = 2;
</script>
2.2. Les types de variables
Une variable peut être de type numérique, mais aussi une chaîne de caractères :
<script>
var text = 'J\'écris mon texte ici'; /* Avec des apostrophes, le \ sert à
échapper une apostrophe intégrée dans le texte, pour ne pas que Javascript pense
que le texte s'arrête là.*/
</script>
Une variable peut enfin être de type booléen (boolean), avec deux états possibles :
vrai ou faux (true ou false).
2.3. Les opérateurs arithmétiques
On peut utiliser 5 opérateurs arithmétiques : l'addition (+), la soustraction (-), la
multiplication (*), la division (/) et le modulo (%). Le modulo est le reste d'une division.
Par exemple :
<script>
var number1 = 3,
number2 = 2, result;
result = number1 *
number2;
alert(result); //
Affiche : « 6 »
</script>
ou :
<script>
var number = 3;
number = number + 5;
alert(number); //
Affiche : « 8 »
</script>
qui équivaut à :
<script>
var number = 3;
number += 5;
alert(number); //
Affiche : « 8 »
</script>
JavaScript
FICHE 2.
Les variable
Fiche 3
Les conditions (1/2)
Une condition (true"Vrai"ou false"Faux) est un test qui permet de vérifier qu'une variable
contient bien une certaine valeur.
3.1. Les huit opérateurs de comparaison
Il y en a 8 :
== : égal à
!= : différent de
=== : contenu et type de
variable égal à
!== : contenu ou type
de variable différent de
> supérieur à
>= supérieur ou égal à
< : inférieur à
<= : inférieur ou égal à
Il suffit d'écrire deux valeurs avec l'opérateur de comparaison souhaité entre les deux
et un booléen est retourné. Si celui-ci est true alors la condition est vérifiée, si c'est
false alors elle ne l'est pas :
<script>
var number1 = 2, number2 = 2, number3 = 4, result;
result = number1 == number2; // Au lieu d'une seule valeur, on en écrit
deux avec l'opérateur de comparaison entre elles
alert(result); // la condition est donc vérifiée car les deux variables
contiennent bien la même valeur
result = number1 == number3;
alert(result); // la condition n'est pas vérifiée car 2 est différent de 4
result = number1 < number3;
alert(result); // la condition est vérifiée car 2 est bien inférieur à 4
</script>
3.2. Les opérateurs logiques
Il y en a 3 :
&& qui signifie ET avec par exemple : valeur1 && valeur2
Cet opérateur vérifie la condition lorsque toutes les valeurs qui lui sont passées valent true.
|| qui signifie OU avec par exemple : valeur1 || valeur2
Cet opérateur est plus souple car il renvoie true si une des valeurs qui lui est soumise contient
true, qu'importent les autres valeurs.
! qui signifie NON avec par exemple : !valeur
Cet opérateur se différencie des deux autres car il ne prend qu'une seule valeur à la fois. S'il se
nomme « NON » c'est parce que sa fonction est d'inverser la valeur qui lui est passée, ainsi true
deviendra false et inversement.
JavaScript
FICHE 3.
Les conditions (1/2)
3.3. La condition if else
La condition est composé :
- de la structure conditionnelle if ;
- de parenthèses qui contiennent la condition à analyser, ou plus précisément le
booléen retourné par les opérateurs conditionnels ;
– d'accolades qui permettent de définir la portion de code qui sera exécutée si la
condition se vérifie.
La fonction confirm() permet une interaction de l'utilisateur à l'exécution du code
(true si OK, false si Annuler) :
<script>
if (confirm('Voulez-vous exécuter le code Javascript de cette page ?')) {
alert('Le code a bien été exécuté !');
}
</script>
La structure else permet de simplifier l'alternative :
<script>
if (confirm('Pour accéder à ce site vous devez être une fille, cliquez sur
"OK" si c\'est le cas.')) {
alert('Vous allez être redirigé vers le site.');
}
else {
alert("Désolé, vous n'avez pas accès à ce site.");
}
</script>
On peut ajouter des conditions intermédiaires avec la structure else if :
<script>
var floor = parseInt(prompt("Entrez l'étage où l'ascenseur doit se rendre (de
-2 à 30) :"));
if (floor == 0) {
alert('Vous vous trouvez déjà au rez-de-chaussée.');
} else if (-2 <= floor && floor <= 30) {
alert("Direction l'étage n°" + floor + ' !');
} else {
alert("L'étage spécifié n'existe pas.");
}
</script>
Fiche 4
Les conditions (2/2)
4.1. La condition switch
Cette structure permet de gérer une courte liste de possibilités :
<script>
var drawer = parseInt(prompt('Choisissez le tiroir à ouvrir (1 à 4) :')); //on
précise bien le type de la valeur, ici un nombre avec la fonction parseInt()
switch (drawer) {
case 1: // on pose chaque cas l'un après l'autre ; on met des apostrophes si
l'on vérifie des chaînes de caractères au lieu de nombres
alert('Contient divers outils pour dessiner : du papier, des crayons, etc.');
break; // on arrête la fonction pour passer à un autre cas
case 2:
alert('Contient du matériel informatique : des câbles, des composants, etc.');
break;
case 3:
alert('Ah ? Ce tiroir est fermé à clé ! Dommage !');
break;
case 4:
alert('Contient des vêtements : des chemises, des pantalons, etc.');
break;
default: // on pose une autre possibilité, pour gérer une erreur de
l'utilisateur
alert("Info du jour : le meuble ne contient que 4 tiroirs et, jusqu'à preuve
du contraire, les tiroirs négatifs n'existent pas.");
}
</script>
4.2. Les ternaires
Cette structure permet de simplifier certaines conditions :
<script>
var startMessage = 'Votre genre : ',
endMessage,
adult = confirm('Êtes-vous une fille ?');
endMessage = adult ? 'Fille' : 'Garçon';
alert(startMessage + endMessage);
</scrip>
/image%2F6913584%2F20241209%2Fob_aa43f0_120-300-1.jpg)
/image%2F6913584%2F20241006%2Fob_b89485_bout-250-250.jpg)
/image%2F6913584%2F20240907%2Fob_08366c_videostuto.jpg)
/image%2F6913584%2F20230429%2Fob_5d254e_clap.jpg)