Le JavaScript
[Link]:
Les limites du langage HTML :
Absence de structures de contrôles algorithmiques (conditionnelles et
itératives) ;
Un langage sans aucune logique de programmation procédurale
Absence de possibilité d’interfaçage avec les bases de données.
Pour passer ces limites deux solutions sont proposées :
Utilisation d’un langage du côté client (JavaScript, VbScript, …)
permettant d’ajouter d’autres fonctionnalités omises par HTML et
peuvent être exécutés par le navigateur ;
Utilisation des langages du côté serveur (ASP, PHP, …) : pour se
connecter à des bases de données
II. Le formalisme de base du
JavaScript
Activité 1 : Créer un nouveau fichier texte et l’enregistrer sous le nom
« [Link] » et saisir le code suivant :
III. Les objets JavaScript
III.1. Les objets JavaScript et leurs hiérarchies
JavaScript divise une page web en objets et permet d’accéder à ces objets
de tirer des informations et de les manipuler. On distingue deux catégories
d’objets :
Les objets d’interface : permettent de gérer les aspects visuels des
différents contrôles graphiques : L’objet Window, document, button,
radio, checkbox, etc.
Les objets des propriétés et des fonctions prédéfinies :
fournissent les différentes ressources requises pour la programmation :
l’objet String, math, date, navigator, array et object.
a) La hiérarchie des objets d’interfaces
b) Les méthodes des objets
Le langage JavaScript a prévu un ensemble de méthodes (fonctions) pour chaque objet.
syntaxe : nom_objet.nom_methode()
Par exemple pour l’objet document on dispose de la méthode write () ou writeln() « Ecrire
dans le document ».
Activité : Créer un fichier nommé « [Link] » et saisir le code suivant :
L’opérateur « + » joue le rôle de concaténation lorsqu’il est utilisé avec la
méthode « write ».
Il est possible de générer du code HTML lors de l’utilisation de la méthode
« write ».
c) accès aux éléments d’une page web
La méthode getElementById() permet de récupérer les informations d'une balise identifiée
par son id.
Exemple
Modifier la contenu d’une zone de texte :
[Link]("age").value = 25;
Modifier la couleur du texte :
[Link]("paragraphe").[Link] = ‘blue’;
Modifier le fond du titre du texte :
[Link]("titre").[Link] = "#FF0000";
Modifier le source d'une image :
[Link]('idImage').src='images/[Link]';
Application :
2. Lancer votre navigateur disponible et observer le résultat obtenu
3. Ecrire la commande suivante et observer le résultat:
[Link](‘id1’).innerHTML = " bonjour ";
4. Ecrire la commande suivante et observer le résultat:
[Link](‘id2’).innerHTML= "votre nom " ;
5. [Link]("id1").[Link] = 'blue';
6. [Link]("id2").[Link] =
"#FF0000";
7. Ecrire la commande suivante :
alert(" salut les amis ") ;
8. Ecrire la commande suivante : var s=prompt("c'est quoi votre
nom", "")
III.2. Les différents emplacements du code JavaScript
Activité : Définir les différents emplacements du code JavaScript dans un document HTML.
a) Créer un fichier nommé « [Link] » et saisir le code suivant :
<html><head><title>emp</title>
<script language="javascript">
function fermer()
{
[Link]();
}
</script></head>
<body>
<script language="javascript">
function message()
{
[Link]("pour fermer cette fenetre vous pouvez cliquer: ");
}
message();
</script>
<a href ="" ></body></html>
b) Créer un fichier nommé « [Link] », déplacer les deux fonctions fermer() et msg() vers ce fichier et puis ajouter à la partie entête du fichier
« [Link] » le code suivant :
Constatations :
Les solutions permettant d’insérer du code JavaScript dans une page web sont :
Insérer des instructions JavaScript entre <script>…</script> dans <body> et
</body> ;
Déclarer les fonctions puis les appeler dans <body> et </body> ;
Utiliser un des gestionnaires d’évènements rattachés aux balises html pour appeler
des fonctions préalablement définies « onClik » et « onMouseOver ».
La déclaration de fonctions JavaScript peut se faire :
Entre <head> et </head>
Entre <body> et </body>
Dans un fichier externe avec l’extension « .js » à inclure dans les fichiers HTML.
IV. Les opérateurs:
[Link] opérateurs de calcul
v. Les variables :
IV.1. La déclaration des variables
Les variables peuvent se déclarer de deux façons :
Façon explicite : en utilisant la commande « VAR »
Exemple : VAR Numero =1 VAR Prenom= "Yassine"
Façon implicite : Décrire directement le nom de la variable suivi de la
valeur attribuée :
Exemple : Numero = 1
a) var (ancienne méthode)
b) let (méthode moderne et recommandée)
c) const (pour les constantes)
Utilisée pour déclarer des constantes (valeurs qui ne changent pas).
Activité1 : Créer un fichier nommé « [Link] » et saisir le code
suivant :
IV.2. La visibilité des variables
• Les variables déclarées (de façon explicite ou implicite) au début du script,
en dehors et avant toutes fonctions, sont des variables globales ;
• Dans une fonction :
Une variable déclarée par le mot clé Var est locale à cette fonction ;
Une variable déclarée sans le mot clé Var, sa portée sera globale.
IV.3 les types de données:
• JavaScript utilise 4 types de données :
Des nombres (entier et réel) ;
Des chaînes de caractères ;
Des booléens : (True pour vrai et False pour faux) ;
Le mot null : Mot spécial qui indique l’absence d’une valeur.
Undefined : Une variable pour laquelle aucune valeur n'a été assignée
sera de type undefined.
Il ne faut pas déclarer le type de données d’une variable.
Activité2 : Créer un fichier nommé « [Link] » et saisir le code
suivant :
IV.3. LES TYPES
[Link] window :
[Link] string:
Application:
Ecrire un code javascript qui permet:
1)Lire une chaine ch
2)Afficher la longueur de la chaine ch
3) Retourner la position de caractère « a »
4) Vérifier si a existe une seule fois
5)Remplacer le premier caractère de toute la chaine par le dernier
caractère
6) Afficher cette chaine en majuscule
3.L’objet math:
Application: écrire un programme qui permet de saisir un entier x et
permute l’unité et la dizaine de cette variable : Exp : x= 15 valeur afficher
51
4/L'objet Date :
Pour créer un nouvel objet de type Date :
Application : Créer un fichier html puis ajouter un code javascript qui lire
votre année de naissance et écrire dans le document votre âge et la date
d’aujourd’hui sous la forme aaaa-mm-jj
5/L'objet Array :
Un tableau en JavaScript peut contenir plusieurs éléments de différents
types.
IV. Les Structures de contrôle :
Application 1 : écrire un code javacsript qui permet de lire deux entier et
d’afficher le maximum
Application 2 : Ecrire un code javascript qui permet de lire une moyenne et
d'afficher " "ADMIS" si (la moyenne est >=10) "CONTROLE" si 7=< la
moyenne est <10 Et "REFUSE" dans le cas contraire.
Application 3 : Ecrire un code javaScript permettant de lire le numéro du
mois et la valeur d’une année puis de déterminer le nombre de jours de ce
mois.
Application 4 : Ecrire un code JavaScript permettant d’afficher tous les
nombres parfaits compris entre 2 et 1000 ; sachant qu’un nombre N est dit
parfait s’il est égal à la somme de ses diviseurs sauf lui même.
Exemple pour N=6 1+2+3=6
Application 5 : Ecrire un code JavaScript permettant d’afficher tous les
nombres premiers compris entre deux entiers (a>1 et a<b et b<1001). Un
nombre est dit premier s’il n’est divisible que par 1 et par lui-même.
V. Les fonctions en javascript :
Une fonction est un groupe de ligne(s) de code de programmation destiné à exécuter une tâche bien
spécifique et que l'on pourra utiliser à plusieurs reprises.
De plus, l'usage des fonctions améliorera grandement la lisibilité de notre script.
En Javascript, il existe deux types de fonctions :
•les fonctions propres à Javascript. On les appelle des "méthodes« .
• Elles sont associées à un objet bien particulier comme c'était le cas de la méthode Alert() avec l'objet window.
les fonctions écrites par le programmeur pour les besoins de son script.
Function NomFonction(Arguments){
//instructions
Return ValeurCalculée;
}
Remarque :
La mention des arguments est facultative mais les parenthèses doivent
rester. C’est d’ailleurs grâce à ces parenthèses que l’interpréteur
JavaScript distingue les variables des fonctions.
Il est possible de définir des fonctions sans l’utilisation de la clause
return (sans retour) : on retrouve ainsi l’équivalent d’une procédure.
La fonction doit être définie avant d'être appelée. Il est donc prudent de
placer toutes les déclarations de fonctions dans la balise
<HEAD> ... <HEAD>.
Activité : créer une page qui contient deux boutons .
Un bouton permet de changer le contenu d’un paragraphe et l’autre
permet de changer la couleur de l’arrière plan en bleu,
VI. La gestion des événements en javascript :
Les gestionnaires d'événements
les événements doivent être associées à des actions prévues par le
programme. C'est le rôle des gestionnaires d'événements. La syntaxe est
<nonbalise onévénement="fonction()">
exemple <input type="button" name="b" value="executer"
> Manipulation des formulaires
b/ Les objets : radio et checkbox :
b/les boutons radio
Application :
Soit le formulaire suivant :
Ecrire une fonction qui permet d’afficher un message contenant le nom
d’une personne selon sa civilisé (Mr, Mlle ou Mme).
Exemple : “Bonjour Mr Mohamed tounsi”
Faire le contrôle nécessaire:
Pour choisir obligatoirement une civilisation
Le nom doit être nom vide et de longueur inférieur à 20 caractères
d/L’objet : select :
Application 1 : soit le formulaire
suivant :
Ecrire une fonction (ajouter) qui permet d’ajouter le nom et le prénom et
sa moyenne dans la liste en dessous.
Ecrire une autre fonction (afficher) qui permet d’afficher le nom et la
moyenne de l’élève sélectionné à partir de la liste en dessous.
Ecrire une troisième fonction (supprimer) qui permet de supprimer le nom
de l’élève sélectionné ainsi que sa moyenne de la liste en dessous.
Application 2 : soit le formulaire
suivant :
Ecrire une fonction qui permet de remplir trois (03) listes lors
du chargement de la page. Les listes
représentent respectivement les jours du mois (de 1 à 31),
les noms des mois (de Janvier à Décembre) et les années (de
1950 à 2019)
Application 3 :Soit la page formulaire
"[Link]" suivante:
"[Link]" doit assurer certaines fonctionnalité dont :
1) Le clic sur le bouton "Inscription" fait appel à une fonction "verif( )" écrite en
javascript et qui permet de vérifier le remplissage du formulaire d'inscription en
respectant les conditions suivantes:
Le champ (Nom et prénom) doit être non vide,
Le champ (CIN) doit comporter 8 chiffres.
Une des situations Sociales doit être sélectionné.
L'adresse (E-mail) doit obligatoirement comporter les caractères ("@ " et "."),
L'internaute doit choisir une fonction.
2) Si les conditions citées sont satisfaites, un message affiche "formulaire
envoyé".
