Cours JavaScript
Cours JavaScript
<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script>
alert('bonjour');
document.write (prompt('quel est votre nom ?','Indiquer votre nom ici'));
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
Fonctions
Syntaxe:
function nom_fonction ([param1, …]){
//Corps de la fonction
}
Corps de la fonction :
Déclaration des variables,
Instructions réalisés par la fonction,
Instruction return pour renvoyer une valeur ou un objet
(Facultative)
7
Déclaration de variables
8
Déclaration de variables
• Utilisation de l’instruction
[var , let , const , ] variable=valeur;
• Pas de typage (détection automatique par l’interpréteur)
• Nom de variable sensible à la casse.
• Portée :
• de fonction visibilité dans toute la fonction
• de bloc visibilité dans le bloc interne
9
Déclaration de variables: portée
La portée de bloc signifie que vous pouvez masquer des variables dans
une fonction :
function test() {
let nb = 5;
if (···) {
let nb = 10; // Masquer la variable externe `nb`
console.log(nb); // 10
}
console.log(nb); // 5
}
Déclaration de variables: let vs
const
• Les variables créées par • Les variables créées par
let sont modifiables : const sont immuables :
<script>
let age=prompt("quel est votre age");
if (age>=18){
alert("vous etes Majeur...");
}else{
alert("vous etes Mineur...");
}
</script>
14
Structures de contrôle
• Boucle itérative :
for(initialisation ; condition ; opération ) { ...
instructions ... }
<script>
let nb=prompt("Donnez un nombre");
let somme=0;
for(let i=1;i<=nb;i++){
somme+=i;
}
alert("La somme des nombres entre 0 est "+ nb +" est "+somme);
</script>
15
Structures de contrôle
• Boucle conditionnelle
while(condition) { ... instructions ... }
<script>
let nb=prompt("Donnez un nombre");
let somme=0, i=0;
while(i<=nb){
somme+=i;
i++;
}
alert("la somme des nombres entre 0 est "+nb+" est
"+somme);
</script>
16
Expressions de Fonction
syntaxe :
17
Expressions de Fonction et Portée
const nom_fonction=([param1,
…])=>{
//Corps de la fonction
}
• const et let permet d’empêcher la redéfinition de la fonction une
deuxième fois puisqu’ils sont de type bloc.
• Si on a une seule instruction dans une fonction, on peut ne pas
utiliser le mot clé return ni d’accolades { }.
(()=>{
alert("Fonction anonyme appelée automatiquement");
})();
JavaScript
Objets prédéfinis
Objets prédéfinis
tableau.length
Parcourir un tableau
console.log("tab["+index+"]="+data);
});
Tableaux associatifs
...
alert("Votre nom est: "+tab["nom"]);
...
...
let row0=new Array();
let row1=new Array();
let row2=new Array();
let morpion=new Array();
morpion[0]=row0; morpion[1]=row1; morpion[2]=row2;
... O X
morpion[1][2]="X";
X O X
...
O X
L'objet Array
• Propriétés :
• E : renvoie la valeur de la constante d'Euler (~2.718);
• LN2 : renvoie le logarithme népérien de 2 (~0.693);
• LN10 : renvoie le logarithme népérien de 10 (~2.302);
• LOG2E : renvoie le logarithme en base 2 de e (~1.442);
• LOG10E : renvoie le logarithme en base 10 de e (~0.434);
• PI : renvoie la valeur du nombre pi (~3.14159);
• SQRT1_2 : renvoie 1 sur racine carrée de 2 (~0.707);
• SQRT2 : renvoie la racine carrée de 2 (~1.414);
L'objet Math
• Méthodes :
• abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ),
atan( ), max( ), min( ), sqrt( ) sont les opérations
mathématiques habituelles;
• atan2( ) : retourne la valeur radian de l'angle entre l'axe
des abscisses et un point;
• ceil( ) : retourne le plus petit entier supérieur à un nombre;
• floor( ) : retourne le plus grand entier inférieur à un
nombre;
• pow( ) : retourne le résultat d'un nombre mis à une certaine
puissance;
• random( ) : retourne un nombre aléatoire entre 0 et 1;
• round( ) : arrondi un nombre à l'entier le plus proche.
L'objet Images
• Propriétés
• complete
• width // Exemple
• height img = new Image() ;
img.src = ‘image.gif' ; // Préchargement
• src img.onload = function(){
• Méthodes // Modification de la 13e image de la
page Web
• constructeur document.images[12].src = img.src ;
• Image() }
• Image(largeur, hauteur)
L'objet Date
• Méthodes
• Constructeur
• getDay(), attention de 0 (dimanche) à 6 (samedi)…
• getDate() / setDate()
• getMonth() / setMonth(), attention de 0 à 11…
• getYear() / setYear() / getFullYear() / setFullYear()
• getHours()/ setHours()
• getMinutes() / setMinutes()
• getTime() / setTime() let jour = new Date();
alert(jour.getFullYear());
// 2022
let anniversaire= new Date(2022, 10, 25);
alert(anniversaire.toLocaleString());
// lundi 25 octobre 2022 00:00
Fonctions supérieures
• eval(chaine)
• isFinite(nombre)
• isNaN(objet)
• parseFloat(chaine)
• parseInt(chaine)
Fonctions supérieures
document.write(isFinite(Math.log(0))) ;
false
document.write(isNaN("abcd")) ;
true
document.write("12.34"+2) ;
12.342
document.write(parseFloat("12.34")+2) ;
14.34
JavaScript
Objets propres
Déclaration et création d’objets:
Objets propres
• Création d’objets avec des initialiseurs d'objets (objets littéraux).
function Etudiant(Le_nom,Le_prenom,Le_CODE){
this.nom=Le_nom;
this.prenom=Le_prenom;
this.CODE=Le_CODE;
this.afficher=affiche_Etudiant;
}
function affiche_Etudiant(){
console.log("Votre nom et prénom est: "+ this.nom+"
"+this.prenom+", Votre CODE est: "+ this.CODE );
}
const e=new Etudiant("Mohamed", "Ben Ali", "1298742046");
e.afficher();
Exercice
43
Déclenchement d’instructions
JavaScript
• Événements JavaScript
• blur : le focus est enlevé d’un objet
• focus : le focus est donné à un objet
• change : la valeur d’un champ de formulaire à été
modifiée par l’utilisateur
• mouseover : la souris est déplacée sur un objet
• click : un clic souris est déclenché sur un objet
• select : un champ de formulaire est sélectionné (par
tabulation)
• submit : un formulaire est soumis
• load : la page est chargée par le navigateur
• unload : l’utilisateur quitte la page
44
Déclenchement d’instructions
JavaScript
Il est possible de baser l’exécution de fonctions sur des
événements
Événements détectables
• Nom de l’événement précédé de on :
onBlur, onChange, onClick, onFocus, onLoad, onMouseover,
onSelect, onSubmit, onUnload
Association événement - action
• Dans le code HTML, identique à la déclaration d ’une propriété :
• <nom_élément attributi = propriétéi événementj = "actionj" >
• <button onClick=" envoyer()">Envoyer<button>
45
Déclenchement d’instructions
JavaScript
<html>
<head>
<title>Exemples de déclenchements</title>
<script>
function saluer() {
alert("Bonjour tout le monde");
}
</script>
</head>
<body onLoad="saluer()">
<h1 onMouseover="saluer()">Survoler le pointeur pour exécuter l’événement</h1>
<form>
<input type="button" name="bouton" value="salut" onClick="saluer()">
</form>
<h1>Exécution sur protocole javascript:</h1>
<a href="javascript:saluer()">pour saluer</a>
</body>
</html>
46
Changer l’aspect du formulaire
<form>
<input type="text" value="" name="texte1" onBlur="unchanger(this)"
onFocus="changer(this)"/>
<input type="text" value="" name="texte2" onBlur="unchanger(this)" onFocus
="changer(this)"/>
<input type="submit"/>
</form>
<script>
let changer=function(texte){
texte.style.border="2px solid green";
}
let unchanger=function(texte){
texte.style.border="";
}
Contrôle du formulaire
<html>
<head><title>Contrôle</title>
<script>
function verifier() {
if (document.formulaire.txt.value != '')
return confirm(‘Voulez-vous envoyer le formulaire?') ;
return false ; }
Ecrire une page HTML contenant un formulaire (zone de texte et le
</script></head>
bouton envoyer). Un message d’erreur est affiché si la zone de texte est vide
<body> au
moment de <form name="formulaire" action= "test.php" method= "POST"
la soumission.
onSubmit="return verifier();">
<input type="text" name="txt" />
<input type="submit" value="Envoyer" />
</form>
</body>
</html>
Contrôle du formulaire
"le seul"
Utilisation du DOM
A l’aide de Javascript :
• On peut sélectionner un élément (<p> par exemple), et modifier
sa couleur (DOM document + DOM element).
• On peut sélectionner un élément et lui assigner un événement
(DOM document + DOM events).
• On peut sélectionner les attributs ("title" par exemple) et
changer leur contenu (je remplace title="image2" par
title="beau tigre") (DOM document + DOM attribute).
DOM « document »
let zone1=document.getElementById("rechercher");
let
zone2=document.getElementsByName("rechercher");
let zone3=document.getElementsByTagName("input");
DOM « document »
<script> <script>
let let
zone=document.getElementById("c"); zone=document.getElementById("c");
zone.onfocus=function(){ zone.onfocus=vider;
zone.value=""; function vider(){
} zone.value="";
</script> }
</script>
DOM « events »: addEventListener
objet.addEventListener(eventType, listenerFunction)
objet : l’objet ciblé (window, document ou un élément de la page).
• click • Error
• dblclick • load
• mousedown • resize
• mousemove • scroll
• mouseover • unload
• mouseout • blur
• mouseup • change
• keydown • focus
• keypress • reset
• keyup • select
• abort • submit
DOM « events »: addEventListener
• Exemple 1:
window.addEventListener('load',function(){
console.log('la page est totalement chargée');
});
Exemple 2:
document.addEventListener('DOMContentLoaded',function(){
let img = document.getElementsByTagName("img")[0];
img.addEventListener('mouseover',function(){
img.style.opacity=0.5;
});
img.addEventListener('mouseout',function(){
img.style.setProperty('opacity',1);
});
});
DOM « events »: addEventListener
(listener Function)
dans une fonction listener, la variable this est définie et désigne l’objet qui a
déclenché l’événement typiquement l’élément du document.
un objet event est créé pour chaque événement. Cet objet est passé en
paramètre lors du déclenchement de la fonction listener associée. Le type
d’objet event varie selon l’événement. Un objet event possède des
propriétés qui informent sur l’événement.
DOM « events »: addEventListener
document.addEventListener("DOMContentLoaded", () => {
let images = document.querySelectorAll("img"); Event
interface
images.forEach((img) => {
img.addEventListener("mousemove", (event) => {
event.target.style.setProperty("opacity", 0.5);
}); Event
}); interface
images.forEach((img) => {
img.addEventListener("mouseout", (event) => {
event.target.style.setProperty("opacity", 1);
});
});
});
Modifier le DOM
• Ecrire une page HTML qui contient un script qui vérifie lors de la
soumission du formulaire, si le champ n’est pas vide, sinon, un
message d’erreur est affiché.
1. Utiliser innerHTML pour insérer le message dans la balise span, en gras avec
une couleur rouge.
2. Utiliser une modification manuelle sur le DOM.
//classe bootstrap
form-control is-
valid
//classe bootstrap
form-control is-
invalid
Solution: HTML
<body>
<div class="container">
<form>
<div id="message" class="alert alert-danger"
role="alert">
Veuillez remplir tous les champs!
</div>
<input type="text" name="nom" class="form-control"
id="firstname"/>
<input type="text" name="prenom" class="form-control"
id="lastname"/>
<input type="button" class="btn btn-outline-primary"
value="S'inscrire">
</form>
</div>
</body>
Solution : script
<script> else{
text1[1].setAttribute("class","form-
control is-valid");
document.addEventListener("DOMContentLoaded",function(){ } message.style.setProperty("display","block")
let message=document.getElementById("message"); if (text1[0].getAttribute("class")=="form-control is-
message.style.display="none" invalid" || text1[1].getAttribute("class")=="form-
control is-invalid"){
let btn=document.querySelector("input[type=button]"); message.setAttribute("class","alert alert-
btn.addEventListener("click",function(){ danger")
let text1=document.querySelectorAll("input[type=text]"); message.innerHTML="<b>Veuillez remplir tous les
champs!</b>";
if (text1[0].value==""){
}else{
text1[0].setAttribute("class","form-control is- message.setAttribute("class","alert alert-info")
invalid"); message.innerHTML="<b>Données envoyées avec
}else{ succès</b>";
}
text1[0].setAttribute("class","form-control is-valid"); })
} })
if (text1[1].value==""){ </script>
text1[1].setAttribute("class","form-control is-
invalid");
}
JavaScript
Cookie
Cookies
• Un Cookie est une chaîne de caractères qu'une page HTML (contenant du code
JavaScript) peut écrire à un emplacement UNIQUE et bien défini sur le disque dur du
client.
• Cette chaîne de caractères ne peut être lue que par le seul serveur qui l'a générée.
• Que faire avec un cookie
• Transmettre des valeurs (contenu de variables) d'une page HTML à une autre.
• Par exemple, créer un site marchand et constituer un "caddie" pour le client. Caddie
qui restera sur son poste et vous permettra d'évaluer la facture finale au bout de la
commande. Sans faire appel à quelque serveur que ce soit.
• Personnaliser les pages présentées à l'utilisateur en reprenant par exemple son nom en
haut de chaque page.
Cookies: Limitations
• On ne peut pas écrire autant de cookies que l'on veut sur le poste de l'utilisateur (client d’une
page).
• Il y a des limites :
• Limites en nombre : Un seul serveur (ou domaine) ne peut pas être autorisé à écrire plus
de 20 cookies.
• Limites en taille : un cookie ne peut excéder 4 Ko.
• Limites du poste client : Un poste client ne peut stocker plus de 300 cookies en tout.
Cookies: Structure
• Expires= expdate;
• Le mot réservé expires suivi du signe "=" (égal). Derrière ce signe, vous mettrez une date
d'expiration représentant la date à laquelle le cookie sera supprimé du disque dur du
client.
• Règle générale : 'indiquer un délai en nombre de jours (ou d'années) avant disparition du
Cookie.
Cookies: Structure
• path=Chemin;
• path représente le chemin de la page qui a créé le cookie.
• domain=NomDeDomaine;
• domain représente le nom du domaine de cette même page
• secure
• secure prend les valeurs "true" ou "false" : Il permet de spécifier que le cookie sera envoyé
uniquement si la connexion est sécurisée selon que le cookie doit utiliser des protocoles HTTP
simples (non sécurisés) ou HTTPS (sécurisés).
• Les arguments path, domain et secure sont facultatifs.
• lorsque ces arguments sont omis, les valeurs par défaut sont prises.
• Pour secure, la valeur est "False" par défaut.
Cookies: Mode d’écriture
• Un cookie est une propriété de l'objet document (la page HTML chargée dans le
navigateur) alors l’instruction d’écriture de cookie est:
• Positionner la date de péremption du cookie à une valeur inférieure à celle du moment où on l'écrit
sur le disque.
Indicateurs d’occurrence
Classes de caractères
{n} exactement n fois * {0,} [abc] un caractère parmi a, b ou c
{n,} au moins n fois + {1,} [a-z]intervalle : un caractère de a à z
{n,m} entre n et m fois ? {0,1} [^ab]un caractère autre que a ou b
\d un chiffre \D tout sauf un chiffre
\w [a-zA-Z0-9_] \W tout sauf mot
Caractères spéciaux \s espacement \S tout sauf car. esp.
<script type="text/javascript">
true document.write(/l/.test('Hello')) ;
false document.write(/^l/.test('Hello')) ;
false document.write(/^h/.test('Hello')) ;
true document.write(/^h/i.test('Hello')) ;
true document.write(/^Hel.o/.test('Hello')) ;
true document.write(/^Hel+o/.test('Hello')) ;
true document.write(/^He+llo/.test('Hello')) ;
true document.write(/^Hea*llo$/.test('Hello')) ;
true document.write(/^He(l|o)*$/.test('Hello')) ;
true document.write(/^H[leos]+/.test('Hello')) ;
false document.write(/^H[^leo]+/.test('Hello')) ;
true document.write(/^H[^kyz]+/.test('Hello')) ;
true document.write(/^H[a-z]*/.test('Hello')) ;
true document.write(/^H[a-z]*$/.test('Hello')) ;
</script>
Expressions régulières: Exercice
Javascript : document.getElementsByTagName("LI")
[0].innerHTML="Lait";
JQuery : $("LI:first").html("Lait");
une simple bibliothèque à importer
• $("#bouton").text(‘changer le label’);
• Var contenu=$("#bouton").text();
• $("#zone").html("<b>bonjour</b>");
• $("#champ").val("mon texte");
• $("input:first").attr("placeholder","Insérer votre nom");
Exemple d’utilisation
If ($(‘#total’).attr(‘checked’)) {
//Traitement si
cochée
}
else {
//Traitement si non
cochée
}
Evènements jQuery
$(document).ready(GestionnaireALancer) ;
• On peut ainsi écrire :
$(document).ready(function(){...}) ;
Ou bien :
$(document).ready(Gestionnaire) ;
function Gestionnaire(evt){...}
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
</head>
<body>
<h1>Mon Titre</h1>
<script>
$("h1").click( function(){alert("Bonjour !"); }
</script>
</body>
</html>
Exemple d’utilisation des
évènements
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<h1>Mon Titre</h1>
<button>Clic sur moi</button>
<script>
$("button").click(
function(){$("h1").text("Nouveau titre"));}) ;
</script>
</body>
</html>
Evènements: Gestionnaires
d’événements
• JQuery fournit deux manières de définir un gestionnaire
d’événement :
• soit en indiquant le nom du gestionnaire:
$("p").click(Gestionnaire) ;
function Gestionnaire(evt){
alert("Ceci est un paragraphe");
}
• soit en codant directement le gestionnaire, par exemple...
$("p").click(function(){
alert("Ceci est un paragraphe");
}) ;
Evènements: Exercice
<script src="js/jquery.js"></script>
<img src="images/surfeur.jpg" alt="image"/><br>
<button>disparaitre</button>
<script>
$("button").click(apparaitre);
function apparaitre(evt){
if($("button").text()=="disparaitre"){
$("img").slideUp(2000);
$("button").text("apparaitre");
}else{
$("img").slideDown(2000);
$("button").text("disparaitre");}}
</script>