Javascript FR Tutorial
Javascript FR Tutorial
Javascript FR Tutorial
À propos du didacticiel
JavaScript est un langage de programmation léger et interprété. Il est conçu pour créer des applications
centrées sur le réseau. Il est complémentaire et intégré à Java. JavaScript est très simple à mettre en
œuvre car il est intégré au HTML. Il est ouvert et multiplateforme.
Public
Ce didacticiel a été préparé pour les débutants en JavaScript afin de les aider à comprendre
la fonctionnalité de base de JavaScript pour créer des pages Web et des applications Web dynamiques.
Conditions préalables
Pour ce didacticiel, il est supposé que le lecteur possède une connaissance préalable du codage
HTML. Il serait utile que le lecteur soit préalablement exposé aux concepts de programmation orientée
objet et ait une idée générale sur la création d'applications en ligne.
Tout le contenu et les graphiques publiés dans cet ebook sont la propriété de Tutorials Point (I) Pvt.
Ltd. Il est interdit à l'utilisateur de ce livre électronique de réutiliser, conserver, copier, distribuer ou
republier tout contenu ou partie du contenu de ce livre électronique de quelque manière que ce soit
sans le consentement écrit de l'éditeur.
Nous nous efforçons de mettre à jour le contenu de notre site Web et de nos didacticiels aussi
rapidement et précisément que possible. Toutefois, le contenu peut contenir des inexactitudes ou des erreurs.
Tutoriels Point (I) Pvt. Ltd. ne fournit aucune garantie concernant l'exactitude, l'actualité
ou l'exhaustivité de notre site Web ou de son contenu, y compris ce didacticiel. Si vous
découvrez des erreurs sur notre site internet ou dans ce tutoriel, merci de nous en informer
à contact@tutorialspoint.com
je
Machine Translated by Google
ii
Machine Translated by Google
iii
Machine Translated by Google
iv
Machine Translated by Google
v
Machine Translated by Google
vi
Machine Translated by Google
vii
Machine Translated by Google
viii
Machine Translated by Google
ix
Machine Translated by Google
dix
Machine Translated by Google
1.JAVASCRIPT – APERÇU
JavaScript était d'abord connu sous le nom de LiveScript, mais Netscape a changé son nom en
JavaScript, peutêtre en raison de l'enthousiasme généré par Java. JavaScript a fait sa première
apparition dans Netscape 2.0 en 1995 sous le nom de LiveScript. Le noyau général du langage a été
intégré à Netscape, Internet Explorer et d'autres navigateurs Web.
• Ouvert et multiplateforme.
Cela signifie qu'une page Web ne doit pas nécessairement être un code HTML statique, mais peut inclure des
programmes qui interagissent avec l'utilisateur, contrôlent le navigateur et créent dynamiquement du contenu HTML.
Le mécanisme JavaScript côté client offre de nombreux avantages par rapport aux scripts CGI
traditionnels côté serveur. Par exemple, vous pouvez utiliser JavaScript pour vérifier si l'utilisateur a
saisi une adresse email valide dans un champ de formulaire.
11
Machine Translated by Google
Le code JavaScript est exécuté lorsque l'utilisateur soumet le formulaire, et seulement si toutes les entrées sont
valides, elles seront soumises au serveur Web.
JavaScript peut être utilisé pour intercepter les événements déclenchés par l'utilisateur, tels que les clics sur des
boutons, la navigation par lien et d'autres actions que l'utilisateur initie explicitement ou implicitement.
Avantages de JavaScript
Les avantages de l'utilisation de JavaScript sont :
• Moins d'interaction avec le serveur : vous pouvez valider les entrées de l'utilisateur avant d'envoyer la page
au serveur. Cela économise le trafic du serveur, ce qui signifie moins de charge sur votre
serveur.
• Retour immédiat aux visiteurs : ils n'ont pas à attendre une page
rechargez pour voir s’ils ont oublié de saisir quelque chose.
• Interactivité accrue : Vous pouvez créer des interfaces qui réagissent lorsque l'utilisateur les survole avec la
souris ou les active via le clavier.
• Interfaces plus riches : vous pouvez utiliser JavaScript pour inclure des éléments tels que des composants
glisserdéposer et des curseurs afin de fournir une interface riche aux visiteurs de votre site.
Limites de JavaScript
Nous ne pouvons pas considérer JavaScript comme un langage de programmation à part entière. Il lui manque
les fonctionnalités importantes suivantes :
• JavaScript ne peut pas être utilisé pour les applications réseau car aucune prise en charge de ce type n'est
disponible.
Encore une fois, JavaScript est un langage de programmation léger et interprété qui vous permet de créer de
l'interactivité dans des pages HTML autrement statiques.
12
Machine Translated by Google
est un langage interprété dans le contexte d'un navigateur Web, vous n'avez même pas besoin
d'acheter un compilateur.
Pour nous simplifier la vie, divers fournisseurs ont mis au point de très bons outils d'édition
JavaScript. Certains d’entre eux sont répertoriés ici :
La spécification pour JavaScript 2.0 peut être trouvée sur le site suivant : http://www.ecmascript.org/
13
Machine Translated by Google
2.JAVASCRIPT – SYNTAXE
JavaScript peut être implémenté à l'aide d'instructions JavaScript placées dans les balises HTML
<script>... </script> d'une page Web.
Vous pouvez placer les balises <script> , contenant votre JavaScript, n'importe où dans votre page
Web, mais il est normalement recommandé de les conserver dans le <head>.
Mots clés.
La balise <script> alerte le programme de navigation pour qu'il commence à interpréter tout le texte
entre ces balises comme un script. Une syntaxe simple de votre JavaScript apparaîtra comme suit.
<script...>
Code JavaScript
</script>
• Type : Cet attribut est désormais recommandé pour indiquer le langage de script utilisé et sa
valeur doit être définie sur "text/javascript".
14
Machine Translated by Google
la fin du commentaire HTML sous forme de morceau de code JavaScript. Ensuite, nous appelons une
fonction document.write qui écrit une chaîne dans notre document HTML.
Cette fonction peut être utilisée pour écrire du texte, du HTML ou les deux. Jetez un œil au code suivant.
<html>
<corps>
</script>
</corps>
</html>
Bonjour le monde!
Les instructions simples en JavaScript sont généralement suivies d'un pointvirgule, tout comme en C, C+
+ et Java. JavaScript vous permet cependant d'omettre ce pointvirgule si chacune de vos instructions est
placée sur une ligne distincte. Par exemple, le code suivant pourrait être écrit sans pointsvirgules.
15
Machine Translated by Google
<!
variable1 = 10
variable2 = 20
//>
</script>
Mais lorsqu'il est formaté sur une seule ligne comme suit, vous devez utiliser des pointsvirgules :
var1 = 10 ; var2 = 20 ;
//>
</script>
Sensibilité à la casse
JavaScript est un langage sensible à la casse. Cela signifie que les motsclés du langage, les variables,
les noms de fonctions et tout autre identifiant doivent toujours être saisis avec une majuscule cohérente.
Ainsi, les identifiants Time et TIME véhiculeront des significations différentes en JavaScript.
REMARQUE : des précautions doivent être prises lors de l'écriture des noms de variables et de fonctions en JavaScript.
Commentaires en JavaScript
JavaScript prend en charge les commentaires de style C et C++. Ainsi:
• Tout texte entre un // et la fin d'une ligne est traité comme un commentaire et est ignoré par
JavaScript.
• Tout texte compris entre les caractères /* et */ est traité comme un commentaire. Ceci peut
s'étendent sur plusieurs lignes.
16
Machine Translated by Google
• La séquence de fermeture du commentaire HTML > n'est pas reconnue par JavaScript, elle
doit être écrit comme //>.
Exemple
L'exemple suivant montre comment utiliser les commentaires en JavaScript.
/*
</script>
17
Machine Translated by Google
3.JAVASCRIPT – ACTIVATION
Tous les navigateurs modernes intègrent la prise en charge de JavaScript. Souvent, vous devrez peutêtre activer ou
désactiver cette prise en charge manuellement. Ce chapitre explique la procédure d'activation et de désactivation du
support JavaScript dans vos navigateurs : Internet Explorer, Firefox, Chrome et Opera.
• Faites défiler vers le bas jusqu'à ce que vous trouviez l' option Script .
Pour désactiver la prise en charge de JavaScript dans votre Internet Explorer, vous devez sélectionner Désactiver
bouton radio sous Active Scripting.
• Ouvrez un nouvel onglet > tapez about: config dans la barre d'adresse.
• Vous trouverez ensuite la boîte de dialogue d'avertissement. Sélectionnez Je ferai attention, promis !
• Vous y trouverez la possibilité d'activer ou de désactiver Javascript en cliquant avec le bouton droit de la souris.
sur la valeur de cette option > sélectionnez bascule.
Si javascript.enabled est vrai ; il se convertit en faux en cliquant sur Toogle. Si javascript est désactivé ; il est activé
en cliquant sur bascule.
18
Machine Translated by Google
• Cliquez sur le menu Chrome dans le coin supérieur droit de votre navigateur.
• Sélectionnez Paramètres.
Pour désactiver la prise en charge de JavaScript dans Opera, vous ne devez pas cocher la case Activer JavaScript.
Si vous devez faire quelque chose d'important en utilisant JavaScript, vous pouvez alors afficher un message
d'avertissement à l'utilisateur à l'aide des balises <noscript> .
Vous pouvez ajouter un bloc noscript immédiatement après le bloc de script comme suit :
<html>
<corps>
<noscript>
Désolé... JavaScript est nécessaire pour continuer.
</noscript>
</corps>
</html>
20
Machine Translated by Google
4.JAVASCRIPT – PLACEMENT
Il existe une flexibilité donnée pour inclure du code JavaScript n'importe où dans un document HTML.
Cependant, les méthodes les plus privilégiées pour inclure JavaScript dans un fichier HTML sont les suivantes :
Dans la section suivante, nous verrons comment placer JavaScript dans un fichier HTML de différentes
manières.
<html>
<tête>
<script type="text/javascript">
<!
fonction direBonjour() {
alerte("Bonjour tout le monde")
}
//>
</script>
</tête>
<corps>
Cliquez ici pour le résultat
21
Machine Translated by Google
</corps>
</html>
Dis bonjour
<html>
<tête>
</tête>
<corps>
<script type="text/javascript">
<!
</script>
</corps>
</html>
Bonjour le monde
22
Machine Translated by Google
<html>
<tête>
<script type="text/javascript">
<!
fonction direBonjour() {
alerte("Bonjour tout le monde")
}
//>
</script>
</tête>
<corps>
<script type="text/javascript">
<!
</script>
<input type="button" onclick="sayHello()" value="Dites bonjour" />
</corps>
</html>
Bonjour le monde
Dis bonjour
23
Machine Translated by Google
Vous n'êtes pas limité à conserver un code identique dans plusieurs fichiers HTML.
La balise script fournit un mécanisme vous permettant de stocker JavaScript dans un fichier externe, puis
de l'inclure dans vos fichiers HTML.
Voici un exemple pour montrer comment inclure un fichier JavaScript externe dans votre code HTML à
l'aide de la balise script et de son attribut src .
<html>
<tête>
<corps>
.......
</corps>
</html>
Pour utiliser JavaScript à partir d'une source de fichier externe, vous devez écrire tout votre code source
JavaScript dans un simple fichier texte avec l'extension « .js », puis inclure ce fichier comme indiqué ci
dessus.
Par exemple, vous pouvez conserver le contenu suivant dans le fichier filename.js , puis utiliser la fonction
sayHello dans votre fichier HTML après avoir inclus le fichier filename.js.
fonction direBonjour() {
24
Machine Translated by Google
5.JAVASCRIPT – VARIABLES
JavaScript définit également deux types de données triviaux, nuls et non définis, dont chacun ne définit qu'une
seule valeur. En plus de ces types de données primitifs, JavaScript prend en charge un type de données
composite appelé objet. Nous aborderons les objets en détail dans un chapitre séparé.
Remarque : Java ne fait pas de distinction entre les valeurs entières et les valeurs à virgule flottante. Tous les
nombres en JavaScript sont représentés sous forme de valeurs à virgule flottante. JavaScript représente les
nombres en utilisant le format à virgule flottante 64 bits défini par la norme IEEE 754.
Variables JavaScript
Comme beaucoup d’autres langages de programmation, JavaScript comporte des variables. Les variables
peuvent être considérées comme des conteneurs nommés. Vous pouvez placer des données dans ces
conteneurs, puis y faire référence simplement en nommant le conteneur.
Avant d'utiliser une variable dans un programme JavaScript, vous devez la déclarer. Les variables sont déclarées
avec le motclé var comme suit.
<script type="text/javascript">
<!
argent du Var;
nom de la variable ;
25
Machine Translated by Google
//>
</script>
Vous pouvez également déclarer plusieurs variables avec le même motclé var comme suit :
<script type="text/javascript">
<!
//>
</script>
Le stockage d'une valeur dans une variable est appelé initialisation de variable. Vous pouvez effectuer
l'initialisation de la variable au moment de la création de la variable ou ultérieurement lorsque vous avez
besoin de cette variable.
Par exemple, vous pouvez créer une variable nommée money et lui attribuer la valeur 2000,50
ultérieurement. Pour une autre variable, vous pouvez attribuer une valeur au moment de l'initialisation
comme suit.
<script type="text/javascript">
<!
argent du Var;
argent = 2000,50 ;
//>
</script>
Remarque : utilisez le motclé var uniquement pour la déclaration ou l'initialisation, une fois pour la durée de vie de
n'importe quel nom de variable dans un document. Vous ne devez pas déclarer à nouveau la même variable deux fois.
JavaScript est un langage non typé . Cela signifie qu'une variable JavaScript peut contenir une valeur
de n'importe quel type de données. Contrairement à de nombreux autres langages, vous n'avez pas
besoin d'indiquer à JavaScript lors de la déclaration de la variable quel type de valeur la variable
contiendra. Le type de valeur d'une variable peut changer lors de l'exécution d'un programme et
JavaScript s'en charge automatiquement.
26
Machine Translated by Google
• Variables globales : une variable globale a une portée globale, ce qui signifie qu'elle peut être
défini n'importe où dans votre code JavaScript.
• Variables locales : une variable locale sera visible uniquement dans une fonction où elle est
définie. Les paramètres de fonction sont toujours locaux à cette fonction.
Dans le corps d'une fonction, une variable locale est prioritaire sur une variable globale du même
nom. Si vous déclarez une variable locale ou un paramètre de fonction avec le même nom qu'une
variable globale, vous masquez effectivement la variable globale. Jetez un œil à l’exemple suivant.
<script type="text/javascript">
<!
</script>
Locale
27
Machine Translated by Google
• Vous ne devez utiliser aucun des motsclés réservés JavaScript comme nom de variable. Ces
motsclés sont mentionnés dans la section suivante. Par exemple, les noms de variables break
ou booléennes ne sont pas valides.
• Les noms de variables JavaScript ne doivent pas commencer par un chiffre (09). Ils doivent
commencer par une lettre ou un caractère de soulignement. Par exemple, 123test est un nom
de variable non valide mais _123test est un nom valide.
• Les noms de variables JavaScript sont sensibles à la casse. Par exemple, Nom et nom
sont deux variables différentes.
double dans
super
28
Machine Translated by Google
6.JAVASCRIPT – OPÉRATEURS
• Opérateurs arithmétiques
• Opérateurs de comparaison
• Opérateurs d'affectation
Opérateurs arithmétiques
JavaScript prend en charge les opérateurs arithmétiques suivants :
+ (Ajout)
1 Ajoute deux opérandes
Ex : A + B donnera 30
(Soustraction)
2 Soustrait le deuxième opérande du premier
Ex : A B donnera 10
29
Machine Translated by Google
* (Multiplications)
3 Multipliez les deux opérandes
/ (Division)
4 Divisez le numérateur par le dénominateur
Ex : B/A donnera 2
% (module)
5 Affiche le reste d'une division entière
Ex : B % A donnera 0
++ (Incrément)
6 Augmente une valeur entière de un
Ex : A++ donnera 11
(Décrément)
7 Diminue une valeur entière de un
Ex : A donnera 9
Remarque : L'opérateur d'addition (+) fonctionne aussi bien pour les valeurs numériques que pour les chaînes. par exemple "a" +
10 donnera "a10".
Exemple
Le code suivant montre comment utiliser les opérateurs arithmétiques en JavaScript.
<html>
<corps>
<script type="text/javascript">
<!
var a = 33 ;
30
Machine Translated by Google
variable b = 10 ;
var c = "Tester" ;
var saut de ligne = "<br />";
document.write("a + b = ");
résultat = a + b ;
document.write(résultat);
document.write(saut de ligne);
document.write("a b = ");
résultat = a b ;
document.write(résultat);
document.write(saut de ligne);
document.write("a / b = ");
résultat = a / b ;
document.write(résultat);
document.write(saut de ligne);
document.write("a % b = ");
résultat = a % b ;
document.write(résultat);
document.write(saut de ligne);
document.write("a + b + c = ");
résultat = a + b + c ;
document.write(résultat);
document.write(saut de ligne);
31
Machine Translated by Google
une = une++;
document.write("a++ = ");
résultat = a++ ;
document.write(résultat);
document.write(saut de ligne);
b = b;
document.write("b = ");
résultat = b ;
document.write(résultat);
document.write(saut de ligne);
//>
</script>
</corps>
</html>
Sortir
a + b = 43 a
b = 23 a / b
= 3,3 a % b = 3
a + b + c = 43Test
a++ = 33
b = 10
32
Machine Translated by Google
Opérateurs de comparaison
JavaScript prend en charge les opérateurs de comparaison suivants :
== (Égal)
Vérifie si les valeurs de deux opérandes sont égales ou non, si oui, alors la condition
1
devient vraie.
!= (Différent)
Vérifie si les valeurs de deux opérandes sont égales ou non, si les valeurs ne sont pas
2
égales, alors la condition devient vraie.
Ex : (A != B) est vrai.
> (Supérieur à)
< (Inférieur à)
33
Machine Translated by Google
Exemple
Le code suivant montre comment utiliser les opérateurs de comparaison en JavaScript.
<html>
<corps>
<script type="text/javascript">
<!
var a = 10 ;
variable b = 20 ;
résultat = (a == b);
document.write(résultat);
document.write(saut de ligne);
document.write(résultat);
document.write(saut de ligne);
résultat = (a > b) ;
document.write(résultat);
document.write(saut de ligne);
34
Machine Translated by Google
//>
</script>
<p>Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...</p>
</corps>
</html>
Sortir
35
Machine Translated by Google
Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...
Opérateurs logiques
JavaScript prend en charge les opérateurs logiques suivants :
|| (OU logique)
2 Si l’un des deux opérandes est différent de zéro, alors la condition devient vraie.
Ex : (A || B) est vrai.
! (NON logique)
3 Inverse l'état logique de son opérande. Si une condition est vraie, alors l’opérateur NON
logique la rendra fausse.
Exemple
36
Machine Translated by Google
Essayez le code suivant pour savoir comment implémenter des opérateurs logiques en JavaScript.
<html>
<corps>
<script type="text/javascript">
<!
var a = vrai ;
var b = faux ;
var saut de ligne = "<br />";
//>
</script>
37
Machine Translated by Google
<p>Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...</p>
</corps>
</html>
Sortir
Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...
1 Il effectue une opération booléenne ET sur chaque bit de ses arguments entiers.
Ex : (A et B) valent 2.
| (BitWise OU)
2 Il effectue une opération booléenne OU sur chaque bit de ses arguments entiers.
Ex : (A | B) vaut 3.
38
Machine Translated by Google
Il effectue une opération booléenne OU exclusive sur chaque bit de ses arguments entiers. Le OU
exclusif signifie que soit l'opérande un est vrai, soit l'opérande deux est vrai, mais pas les deux.
Ex : (A ^ B) vaut 1.
Il déplace tous les bits de son premier opérande vers la gauche du nombre de places spécifié
dans le deuxième opérande. Les nouveaux bits sont remplis de zéros. Décaler une valeur d’une
5
position vers la gauche équivaut à la multiplier par 2, décaler de deux positions équivaut à la
multiplier par 4, et ainsi de suite.
Ex : (A << 1) vaut 4.
Opérateur de décalage binaire vers la droite. La valeur de l'opérande de gauche est déplacée
6
vers la droite du nombre de bits spécifié par l'opérande de droite.
Ex : (A >> 1) vaut 1.
Cet opérateur est identique à l'opérateur >>, sauf que les bits décalés à gauche sont toujours nuls.
7
Ex : (A >>> 1) vaut 1.
Exemple
Essayez le code suivant pour implémenter l'opérateur Bitwise en JavaScript.
<html>
<corps>
<script type="text/javascript">
39
Machine Translated by Google
<!
40
Machine Translated by Google
//>
</script>
<p>Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...</p>
</corps>
</html>
Sortir
(a & b) => 2 (a
| b) => 3 (a ^
b) => 1 (~b) =>
4 (a << b)
=> 16 (a >> b) =>
0
Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...
Opérateurs d'affectation
JavaScript prend en charge les opérateurs d'affectation suivants :
= (affectation simple)
1
Attribue des valeurs de l'opérande de droite à l'opérande de gauche
41
Machine Translated by Google
Ex : C = A + B attribuera la valeur de A + B à C
+= (Ajout et affectation)
Ex : C += A équivaut à C = C + A
= (Soustraction et affectation)
Ex : C = A équivaut à C = C A
*= (Multiplication et affectation)
Ex : C *= A équivaut à C = C * A
/= (Division et affectation)
Ex : C /= A équivaut à C = C / A
%= (Modules et affectation)
Ex : C %= A équivaut à C = C % A
Remarque : la même logique s'applique aux opérateurs Bitwise, ils deviendront donc <<=, >>=,
>>=, &=, |= et ^=.
Exemple
Essayez le code suivant pour implémenter l'opérateur d'affectation en JavaScript.
42
Machine Translated by Google
<html>
<corps>
<script type="text/javascript">
<!
var a = 33 ;
variable b = 10 ;
43
Machine Translated by Google
//>
</script>
<p>Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...</p>
</corps>
</html>
Sortir
Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...
44
Machine Translated by Google
Opérateurs Divers
Nous aborderons ici deux opérateurs très utiles en JavaScript : l' opérateur conditionnel (? :) et l' opérateur
typeof.
Opérateur conditionnel (? :)
L'opérateur conditionnel évalue d'abord une expression pour une valeur vraie ou fausse, puis exécute
l'une des deux instructions données en fonction du résultat de l'évaluation.
? : (Conditionnel )
1
Si la condition est vraie ? Alors valeur X : Sinon valeur Y
Exemple
Essayez le code suivant pour comprendre comment fonctionne l'opérateur conditionnel en JavaScript.
<html>
<corps>
<script type="text/javascript">
<!
var a = 10 ;
variable b = 20 ;
//>
</script>
<p>Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...</p>
</corps>
</html>
Sortir
Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...
type d'opérateur
L' opérateur typeof est un opérateur unaire placé avant son opérande unique, qui peut être de n'importe
quel type. Sa valeur est une chaîne indiquant le type de données de l'opérande.
L' opérateur typeof est évalué comme "nombre", "chaîne" ou "booléen" si son opérande est un nombre,
une chaîne ou une valeur booléenne et renvoie vrai ou faux en fonction de l'évaluation.
Nombre "nombre"
Chaîne "chaîne"
46
Machine Translated by Google
Booléen "booléen"
Objet "objet"
Fonction "fonction"
Indéfini "indéfini"
Nul "objet"
Exemple
Le code suivant montre comment implémenter l'opérateur typeof .
<html>
<corps>
<script type="text/javascript">
<!
var a = 10 ;
var b = "Chaîne" ;
var saut de ligne = "<br />";
result = (typeof a == "string" ? "A est une chaîne" : "A est numérique");
document.write("Résultat => ");
document.write(résultat);
document.write(saut de ligne);
47
Machine Translated by Google
//>
</script>
<p>Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...</p>
</corps>
</html>
Sortir
Définissez les variables sur différentes valeurs et différents opérateurs, puis essayez...
48
Machine Translated by Google
49