Support_Programmation_web_JavaScript_2024-2025[1]
Support_Programmation_web_JavaScript_2024-2025[1]
JAVASCRIPT
JavaScript est un langage de programmation de scripts principalement utilis dans les pages web
interactives (comme par exemple, la validation de données d'un formulaire).
Voici quelques exemples (on pourrait en citer beaucoup d'autres) de ce que l'on peut en faire dans
une page Web :
ouvrir des pop-up (les petites fenêtres qui s'ouvrent de manière intempestive)
faire défiler un texte
insérer un menu dynamique (qui se développe au passage de la souris)
proposer un diaporama (changement d'image toute les X secondes, boutons pour mettre en
pause, aller à l'image précédente / suivante, etc.)
avoir une horloge "à aiguilles" (avec la trotteuse )
faire en sorte que des images suivent le pointeur de la souris
créer de petits jeux
insérer des balises du zCode (les balises qui apparaissent en cliquant sur le bouton)
JS 2/200 2
JAVASCRIPT
JS 3/200 3
JAVASCRIPT
Inline Code
.
<body>
<script type="text/javascript">
function sayHi() {
alert("Hi!");
}
</script>
JS 4/200 4
JAVASCRIPT
Fichier Externe
Il suffit d'utiliser uniquement l'attribut avec l'attribut .
<head>
<title> Example </title>
<script type="text/javascript" src="example1.js"> </script>
<script type="text/javascript" src="example2.js"> </script>
...
<body>
<! le contenu ici-->
<script type="text/javascript" src="example1.js"> </script>
<script type="text/javascript" src="example2.js"> </script>
</body>
JS 5/200 5
JAVASCRIPT
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Exemple de page XHTML contenant du Javascript</title>
<script type="text/javascript">
function fenetre() { alert('Message d alerte dans une fonction.');}
</script>
</head>
<body onload="alert('Message d alerte genere a la fin du chargement.')">
<script type="text/javascript">
alert('Message d alerte dans le corps du document.');
</script>
<p>
Ceci est le corps du document.
<a href="javascript:fenetre()">Message d'alerte</a>.
</p>
</body>
</html>
JS 6/200 6
JAVASCRIPT
Exemple
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<head>
<html>
<title>Page dynamique</title>
<head>
</head>
<title>Page statique</title>
<body>
</head>
<scripttype = "text/javascript ">
<body>
<div>
date = new Date();
Nous sommes le 31/10/2017
document.write("Nous sommes le ", date);
</div>
</body>
</script>
</html>
</body>
</html>
JS 7/200 7
JAVASCRIPT
Bases du langage
Variable : Déclarer une variable nécessite l'utilisation du mot-cle var.
Les identificateurs: sont sensibles à la casse: test n'est pas Test
Les instructions :
se terminent par un point-virgule ;
nécessitent des accolades lorsqu'elles forment un bloc
Les commentaires
//
/*
* commentaire
*multi-ligne
*/
JS 8/200 8
JAVASCRIPT
Entrée et sortie
3 types de boites de messages peuvent être affichés en utilisant JavaScript :
Alerte Confirmation Invite
Méthode alert()
Méthode prompt()
JS 9/200 9
JAVASCRIPT
Exemple
<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script type = "text/javascript">
alert('bonjour');
document.write (
</body>
</html>
JS 10/200 10
JAVASCRIPT
Les variables
Le mot-clé var permet de déclarer une ou plusieurs variables.
Après la déclaration de la variable, il est possible de lui affecter une valeur par
l'intermédiaire du signe d'égalité (=).
Si une valeur est affectée à une variable sans que cette dernière ne soit déclarée, alors
JavaScript la déclare automatiquement.
//Déclaration de i, de j et de k
var i, j, k;
//Affectation de i
i = 1;
//Déclaration et affectation de prix
var prix = 0;
//Déclaration et affectation de caractere
var caractere = ["a", "b", "c"];
JAVASCRIPT
Exemple
JS 12/200 12
JAVASCRIPT
Type
Il y a principalement trois types classiques de données Boolean, Number String et
un type complexe Object (liste de couples nom-valeurs).
Il est possible de déterminer le type (courant) d'une variable avec l'operateur typeof qui
retourne l'une des valeurs suivantes:
JS 13/200 13
JAVASCRIPT
JS 14/200 14
JAVASCRIPT
var x = 55;
var y = 070; //octal pour 56 (en base 10)
var z = 0xA, //hexadécimal pour 10
var f1 = 10.2;
var f2 = 3.12e7; // représente 31 200 000
var f3 = 3e-10; // représente 0,0000000003
JS 15/200 15
JAVASCRIPT
alert(isNaN(10));
alert(isNaN("10"));
alert(isNaN("blue"));
var num1 = Number("hello world");
var num2 = Number("00001");
var num3 = Number(true);
var num = parseInt("");
var num = parseInt(22.5);
var num = parseInt("70",10);
var num = parseFloat("22.5");
JS 16/200 16
JAVASCRIPT
Type : String
On utilise les quottes simples (apostrophes ) ou doubles (guillemets ) pour définir
des valeurs chaînes de caractères. L'attribut length permet de déterminer la longueur
d'une chaîne.
JS 18/200 1
JAVASCRIPT
Type : String
Il existe de nombreuses fonctions sur les chaînes de caractères.
var s = "hello world";
alert(s.length); // 11
alert(s.charAt(1)); // "e"
alert(s.charCodeAt(1)); // 101
alert(s.slice(3)); // "lo world"
alert(s.slice(-3)); // "rld"
alert(s.substring(3,7)); // "lo w"
alert(s.indexOf("o")); // 4
alert(s.lastIndexOf("o")); // 7
alert(s.toUpperCase()); // HELLO WORLD
alert(s + " !"); // hello world !
var hi = 'Bonjour', name = 'toi', result;
result = hi + name;
alert(result); // Bonjourtoi
JS 19/200 1
JAVASCRIPT
Type : Math
Il s'agit d'un objet définissant de nombreuses constantes et fonctions mathématiques.
alert(Math.E); // la valeur de e
alert(Math.PI); // la valeur de pi
alert(Math.min(5,12)); // 5
alert(Math.max(23,5,7,130,12)); // 130
alert(Math.ceil(25.3)); // 26
alert(Math.floor(25.8)); //25
alert(Math.random()); // valeur aleatoire entre 0 et 1
var n = Math.floor(Math.random()*nb + min);
alert(n); // valeur aleatoire entre min et min+nb (exclus)
D'autres fonctions :
Math.abs(x) Math.exp(x) Math.log(x)
Math.pow(x,y) Math.sqrt(x)
Math.sin(x) Math.cos(x) Math.tan(x)
JS 20/200
JAVASCRIPT
Operateurs
Typiquement, ceux de C, C++ et java:
incrémentation/décrémentation (++, --)
arithmétiques (+-,*,/,%)
relationnels (>,<,>=,<=,==,! =) et (===,! ==)
logique (!,&&,||)
affectation (=,+=,-=,*=,/=,%=)
bit a bit (&,|,<<,>>, ...)
JS 21/200 2
JAVASCRIPT
Structures de contrôle
Elles sont très proches de celles de langages tels que C, C++ et Java.
Pour rappel, les structures de contrôles sont de trois types :
Toute condition utilisée pour une alternative ou boucle sera toujours placée
entre parenthèses.
JS 22/200 2
JAVASCRIPT
JS 23/200 2
JAVASCRIPT
if (rank == 1)
medaille="or";
else if (rank == 2)
medaille="argent";
else if (rank == 3)
medaille="bronze";
JS 24/200 2
JAVASCRIPT
Remarque
JS 25/200
JAVASCRIPT
if (condition) variable=expressionIf;
else variable=expressionElse;
JS 26/200 2
JAVASCRIPT
while (condition) {
instruction1;
instruction2; ...
}
var num = 1;
while (num <= 5)
{
alert(num);
num++;
}
JS 27/200 2
JAVASCRIPT
Il n'est pas nécessaire de placer des parenthèses autour de la condition pour le for.
JS 28/200 2
JAVASCRIPT
instruction1;
instruction2;
...
JS 29/200 2
JAVASCRIPT
JS 30/200
JAVASCRIPT
<script>
var age = parseInt(prompt('Quel est votre âge ?'));
if (1 <= age && age <= 6) {
alert('Vous êtes un jeune enfant.');
} else if (7 <= age && age <= 11) {
alert ('Vous êtes un enfant qui a atteint l\'âge de raison.');
} else if (12 <= age && age <= 17) {
alert ('Vous êtes un adolescent.');
} else if (18 <= age && age <= 120) {
alert ('Vous êtes un adulte.');
} else {
alert ('Erreur !!');
}
</script>
JS 31/200 3
JAVASCRIPT
Types : Object
Un objet est une collection de paire nom/valeur utilis pour stocker des données.
Création d'une variable (de type Object) avec new Object() ou de manière littérale
(énumération entre accolades).
JS 32/200 3
JAVASCRIPT
Types : Object
On ne peut pas parcourir l'objet avec for, s'occupe d'incrémenter des variables numériques.
var family = {
self: 'Ali',
sister: 'Amal',
brother: 'Ahmed',
cousin_1: 'Brahim',
cousin_2: 'Anass
};
var id = 'sister';
alert(family[id]); // Affiche : « Amal »
alert(family.brother); // Affiche : « Ahmed »
alert(family['self']); // Affiche : « Ali »
family['uncle'] = 'Salim'; // On ajoute une donnée, avec un identifiant.
family.aunt = 'Karim'; // On peut ajouter aussi de cette manière.
alert(family.uncle);
for (var id in family) { // On stocke l'identifiant dans « id » pour parcourir l'objet « family »
alert(id+ ":" + family[id]);
}
JS 33/200 3
JAVASCRIPT
Types : Array
Les tableaux peuvent contenir des données de nature différente .
JS 34/200 3
JAVASCRIPT
Types : Array
De nombreuses méthodes existent sur les tableaux
On peut ajouter des items avec la méthode push()
La méthode unshift() fonctionne comme , excepté que les items sont
ajoutés au début du tableau
Les méthodes shift() et pop() retirent respectivement le premier et le dernier
élément du tableau
On peut découper une chaîne de caractères en tableau avec split()
On fait l'inverse avec join()
JS 35/200 3
JAVASCRIPT
Types : Array
JS 36/200 3
JAVASCRIPT
Array : Exercice
JS 37/200 3
JAVASCRIPT
Types : Array
On peut parcourir un tableau avec for :
<script>
</script>
JS 38/200 3
JAVASCRIPT
}
alert(values.sort(compare)); // 0,1,5,10,15
JS 39/200 3
JAVASCRIPT
Fonctions
La syntaxe pour définir une fonction est :
function name(arg , arg , ..., argN) {
sayHi("Ahmed"); alert(sum(5,10));
JS 40/200
JAVASCRIPT
Arguments
Il existe toujours un tableau arguments implicite lors de l'appel une fonction
function f() {
alert(arguments.length);
for (var i=0; i<arguments.length; i++)
alert(arguments[i]);
}
f("Ahmed");
f("Ahmed",25);
JS 41/200 4
Syntaxe:
Quelques méthodes:
getYear
getFullYear
getDate(): retourne l du mois compris entre 1 et 31
getDay (): retourne un indice qui représente le jour de la semaine
getMonth (): retourne un indice qui représente le mois
getHours
getMinutes (): retourne les minutes
getSec ndes (): retourne les secoundes
JS 43/200 4
EXEMPLE 1
JS 44/200 4
EXEMPLE 2
<script>
var now = new Date();
var annee = now.getFullYear();
var mois = ('0'+(now.getMonth()+1)).slice(-2);
var jour = ('0'+now.getDate() ).slice(-2);
var heure = ('0'+now.getHours() ).slice(-2);
var minute = ('0'+now.getMinutes()).slice(-2);
var seconde = ('0'+now.getSeconds()).slice(-2);
</script>
JS 45/200 4
EXERCICE
JS 46/200 4
LES ÉVÉNEMENTS
Les événements permettent de déclencher une fonction selon qu'une action s'est
produite ou non
Un évènement est provoqu par une action de l'utilisateur ou du navigateur lui-même.
Les évènements ont des noms tels que click, load et mouseover.
Une fonction appelée en réponse un évènement se nomme un
( ou ).
Souvent, leur nom commence par on comme par exemple onclik ou onload.
Associer des écouteurs aux évènements possibles peut se faire de trois manières
différentes:
HTML
DOM Level 0
DOM Level 2
JS 47/200 4
LES ÉVÉNEMENTS
JS 48/200 4
LES ÉVÉNEMENTS
JS 49/200 4
LES ÉVÉNEMENTS
L'objet event
Quand un évènement se produit, toutes les informations le concernant sont enregistrées
dans un objet appelé event.
Il est possible de récupérer cet objet sous forme de paramètre d'une fonction écouteur.
JS 50/200
LES ÉVÉNEMENTS
xemples d'événements
click Cliquer (appuyer puis relâcher) sur l'élément
dblclick Double-cliquer sur l'élément
mouseover Faire entrer le curseur sur l'élément
mouseout Faire sortir le curseur de l'élément
mousedown Appuyer (sans relâcher) sur le bouton gauche de la souris sur l'élément
mouseup Relâcher le bouton gauche de la souris sur l'élément
mousemove Faire déplacer le curseur sur l'élément
keydown Appuyer (sans relâcher) sur une touche de clavier sur l'élément
keyup Relâcher une touche de clavier sur l'élément
keypress Frapper (appuyer puis relâcher) une touche de clavier sur l'élément
focus « Cibler » l'élément
blur Annuler le « ciblage » de l'élément
change Changer la valeur d'un élément spécifique aux formulaires (input, checkbox, etc.)
select Sélectionner le contenu d'un champ de texte (input, textarea, etc.)
JS 51/200
52/200
53/200 5
ÉVÉNEMENTS
JS 54/200 5
ÉVÉNEMENTS
JS 55/200 5
LES ÉVÉNEMENTS
xemples d'événements
Deux événements spécifiques à <form> :
submit Envoyer le formulaire
reset Réinitialiser le formulaire
JS 56/200 5
MODELER VOS PAGES WEB
Le Javascript est un langage qui permet de créer ce que l'on appelle des .
Ce terme désigne les pages Web qui modifient elles-mêmes leur propre contenu sans
charger de nouvelle page
JS 57/200 5
La structure DOM
e pose comme concept que la page Web est vue comme un arbre, comme une
hiérarchie d'éléments
<html>
<head>
<meta charset="utf-8" />
<title>Le titre de la page</title>
</head>
<body>
<div>
<p>Un peu de texte
<a>et un lien</a>
</p>
</div>
</body>
</html>
JS 58/200 5
MODELER VOS PAGES WEB
window
L'objet window est ce qu'on appelle un qui représente la fenêtre
du navigateur.
Contrairement à ce qui a été vu avant, alert() n'est pas vraiment une fonction,
mais une méthode qui appartient à l'objet window, qui est implicite (il y a en
fait très peu de variables globales).
Les deux lignes suivantes signifient la même chose :
<script>
alert
window.alert
var text
alert(text); // Forcément, la variable locale prend le dessus
alert(window.text);
</script>
JS 59/200 5
Pour l'accès aux éléments HTML via le DOM, l'objet document possède trois
méthodes principales :
getElementById(),
getElementsByTagName(),
getElementsByName().
C'est grâce à ce -là que nous allons pouvoir accéder aux éléments HTML
et les modifier
JS 60/200
MODELER VOS PAGES WEB
getElementById()
Cette méthode permet d'accéder à un élément en connaissant son qui est
simplement l' de l'élément.
<div id="myDiv">
<p>Un peu de texte<a>et un lien</a>
</div>
<script>
var div = document.getElementById('myDiv');
alert(div);
</script>
JS 61/200
getElementsByTagName()
Cette méthode permet de récupérer, sous la forme d'un tableau, tous les éléments
de la famille.
Si, dans une page, on veut récupérer tous les <div>, il suffit de faire comme ceci :
<div id="myDiv1">
<p> paragraphe 1 </p>
</div>
<div id="myDiv2">
<p> paragraphe 2 </p>
</div>
<script>
var divs = document.getElementsByTagName('div
for (var i = 0, c = divs.length ; i < c ; i++) {
alert('Element n ' + (i + 1) + ' : ' + divs[i]);
}
</script>
JS 62/200
MODELER VOS PAGES WEB
getElementsByName()
<form name="up">
<input type="text">
</form>
<div name="down">
<input type="text">
</div>
<script>
var up_forms = document.getElementsByName("up");
alert(up_forms[0].tagName);
</script
JS 63/200
JS 64/200 6
MODELER VOS PAGES WEB
Nous avons vu qu'un élément <div> est un objet HTMLDivElement, mais un objet, en
Javascript, peut appartenir à différents groupes.
Ainsi, notre <div> est un HTMLDivElement, qui est un sous-objet d'HTMLElement
HTMLElement est lui-même un sous-objet d'Element.
Element est enfin un sous-objet de Node. Ce schéma est plus parlant :
JS 66/200 6
Les attributs
Via l'objet Element :
JS 67/200 6
MODELER VOS PAGES WEB
Les attributs
La classe
Pour modifier l'attribut class d'un élément HTML, il faudra utiliser className.
<!doctype html>
<html>
<head>
<title>Le titre de la page</title>
<style type="text/css">
.blue {
background: blue;
color: white;
}
</style>
</head>
<body>
<div id="myColoredDiv">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
document.getElementById('myColoredDiv').className = 'blue
</script>
</body>
</html>
JS 68/200 6
Le contenu : innerHTML
innerHTML permet de récupérer le code HTML enfant d'un élément sous forme de texte.
<body>
<div id="myDiv">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
var div = document.getElementById('myDiv');
alert(div.innerHTML);
</script>
</body>
JS 69/200 6
MODELER VOS PAGES WEB
Le contenu : innerHTML
Ajouter ou éditer du HTML :
Pour éditer ou ajouter du contenu HTML, il suffit de faire l'inverse, c'est-à-dire de définir
un nouveau contenu :
document.getElementById('myDiv').innerHTML =
'<blockquote>Je mets une
Si vous voulez ajouter du contenu, et ne pas modifier le contenu déjà en place, il suffit
document.getElementById('myDiv').innerHTML +=
JS 70/200
LES FORMULAIRES
Avec les formulaires commence l'interaction avec l'utilisateur grâce aux nombreuses
propriétés et méthodes dont sont dotés les éléments HTML utilisés dans les formulaires.
l est possible d'accéder à n'importe quelle propriété d'un élément HTML juste en tapant
son nom, il en va donc de même pour des propriétés spécifiques aux éléments d'un
formulaire comme
value,
disabled,
checked,
etc.
JS 71/200
LES FORMULAIRES
<input id="text" type="text" size="60" value="Vous n'avez pas le focus !" />
<script>
var text = document.getElementById('text
text.addEventListener('focus', function(e) {
target.value = "Vous avez le focus !";
text.addEventListener('blur', function(e) {
target.value = "Vous n'avez plus le focus !";
</script>
JS 72/200
LES FORMULAIRES
<fieldset>
<legend> roduit</legend>
<label><input type="radio" name="check" value="1" /> omme</label><br />
<label><input type="radio" name="check" value="2" /> anane</label><br />
<label><input type="radio" name="check" value="3" /> raise</label><br />
<label><input type="radio" name="check" value="4" /> astèque</label> <br /><br />
<input type="button" value="Afficher la case cochée" onclick="check();" />
</fieldset>
<script>
function check() {
var inputs = document.getElementsByTagName('input'),
inputsLength = inputs.length;
for (var i = 0 ; i < inputsLength ; i++) {
if (inputs[i].type == 'radio' && inputs[i].checked) {
alert('La case cochée est du produit'+ inputs[i].value);
}}}
</script>
JS 73/200 7
LES FORMULAIRES
<select id="list">
<option>Sélectionnez votre sexe</option>
<option>Homme</option>
<option>Femme</option>
</select>
<script>
var list = document.getElementById('list');
list .addEventListener('change', function() {
// On affiche le contenu de l'élément <option> ciblé par la propriété selectedIndex
alert( list .options[ list .selectedIndex].innerHTML);});
</script>
JS 74/200 7
LES FORMULAIRES
submit et reset
<form id="myForm">
<input type="text" value="Entrez un texte" /> <br /><br />
<input type="submit" value="Submit !" />
<input type="reset" value="Reset !" />
</form>
<script>
var myForm = document.getElementById('myForm
myForm.addEventListener('submit', function(e) {
alert('Vous avez envoyé le formulaire !\n\nMais celui-ci a été bloqué pour
que vous ne
preventDefault();
myForm.addEventListener('reset', function(e) {
alert
</script>
JS 75/200 7
FONCTIONS DE MODIFICATION
Recherche :
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
Modification éléments :
element.innerHTML=
element.setAttribute(attribute,value)
element.style.property=
Modification document :
document.createElement()
document.removeChild(child)
element.appendChild(child)
element.replaceChild(newchild, oldchild)
Evenements :
element.on****=function(){ }
JS 76/200 7