Cours Programmation Web II Chapitre 1 JavaScript

Cours Programmation Web
Java Script
Enseignant : Yassine MBAREK

ISET Jendouba
yassine.mbarek@gmail.com
Introduction (1)
 Javascript permet de rendre dynamique un site
web développé en HTML.
 Javascript permet de développer de véritables
applications fonctionnant exclusivement dans le
cadre du web.
 Javascript est un langage de script simplifié
orienté objet dont la syntaxe est basée sur celle
du Java.
Introduction (2)
 Javascript a été initialement élaboré par
Netscape en association avec Sun Microsystem.
 Les scripts écrits en Javascript sont interprétés
 Le JavaScript est écrit directement au sein du
document HTML sous forme d'un script encadré par
des balises HTML spéciales, ou dans un fichier
externe d’extension « .js ».
 Javascript est standardisé par un comité

spécialisé, l'ECMA (European Computer
Manufactures Association).
Introduction (3)
 Langage de programmation lié à HTML.
 Code JavaScript intégré aux pages
HTML.
 Code interprété par le navigateur client
(interprétation dépendante du type et de
la version du navigateur).
  code PHP (interprété du coté serveur).
4
Introduction (4)
 JavaScript est un langage

 à prototype (par opposition à un langage basé sur
les classes et sous classes pour réaliser l'héritage)
Tout objet JavaScript est doté d'une propriété
prototype, qui représente le modèle sur lequel
l'objet en question se base.
 événementiel (association d’actions aux
événements déclenchés par l’utilisateur (passage
de souris, clic, saisie clavier, etc...).
5
Notion objet
 Un objet est un élément nommé ayant des

 Propriétés : paramètres que vous pouvez vérifier
et modifier.
 Méthodes : actions que l’objet est capable
d’effectuer.
 Événements : choses qui arrivent à l’objet,
auxquelles celui-ci peut répondre
automatiquement par une action.
6
Notion événement (1)
Action Event JavaScript DOM Réaction
Identification d'une action Localise l'objet

concernant l'objet dans la page WEB La source de
L'utilisateur place Indique à l'objet ce l'image
la souris sur l'objet qu'il doit faire Change
7
Notion événement (2)
im1 = new Image();
im2 = new Image();
im1.src = "image1.gif";
im2.src = "image2.gif";
function changeImage (nomIm,src)

{ Traite l'événement
document.images[nomIm].src = src;
}
<A HREF="#"
onMouseover="changeImage('image1',im2.src)"
Associe un gestionnaire
onMouseout="changeImage('image1',im1.src)" >
<IMG NAME="image1" HEIGHT=150 SRC="image1.gif" WIDTH=150 BORDER=0>
</A>
8
HTML et JavaScript
 La page HTML devra TOUJOURS contenir les
deux balises spécifiques et indispensables
<script language
language="JavaScript">
="JavaScript">
............
</script>
 Le code JavaScript s’intègre de deux manière

avec le code HTML
 1. Insertion directe dans le code HTML
 Le code JavaScript s'insère le plus souvent dans la page HTML
elle même.
 2. Insertion comme un module externe

Insertion dans une page HTML
 Il existe 2 manières d'insérer du code JavaScript dans
une page HTML
 Insertion pour exécution directe

 Le code s'exécute automatiquement <html>
lors du chargement de la page HTML <head>
dans le navigateur en même temps que <title>..... </title>
le contenu de la page HTML </head>
s'affiche à l'écran. <body>
<script
 Le code JavaScript est placé language="JavaScript">
dans le corps même de la page HTML, alert(‘bonjour’);
</script>
entre les balises </body>
<body> … Et... </body>
</html>
Insertion par appel de module externe
 On peut insérer du code JavaScript en faisant appel à un
module externe se trouvant à n’importe quelle adresse
(URI). <script src="URL du module externe">
............
</script>
 Les deux balises de Javascript doivent être placés entre les Tags
<body> et </body> dans le cas d'une exécution directe ou entre
les Tags <head> et </head> de la page HTML pour une exécution
différée.
 Stocké dans un fichier sur le serveur à son adresse d'appel sous
forme de TEXTE SIMPLE portant l'extension .txt ou .js
 Simplifie la maintenance des sites faisant appel à des modules
JavaScript communs à plusieurs pages HTML.
 Inconvénient : l'appel au code externe génère une requête
supplémentaire vers le serveur, et encombre le réseau
Entrée et sortie de données avec JavaScript
 3 types de boites de messages peuvent être affichés en
utilisant Javascript : Alerte, Confirmation et Invite
 Méthode alert()
 sert à afficher à l’utilisateur des informations simples de type texte.
Une fois que ce dernier a lu le message, il doit cliquer sur OK pour
faire disparaître la boîte
 Méthode confirm()
 permet à l’utilisateur de choisir entre les boutons OK et Annuler.
 Méthode prompt()
 La méthode prompt() permet à l’utilisateur de taper son propre
message en réponse à la question posée
 La méthode document.write permet d ’écrire du code
HTML dans la page WEB
Entrée et sortie de données avec JavaScript
<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script language='javascript'>
alert('bonjour');
document.write (
prompt('quel est votre nom ?','Indiquer votre nom
ici')
);
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
La structure d’un script en JavaScript
 La syntaxe du langage Javascript s'appuie sur le modèle
de Java et C
 Règles générales
1. L'insertion des espaces peut s'effectué n'importe où dans le script
 Chaque instruction doit être terminée par un point-virgule (;).
 Un nombre à virgule est séparé par un point (.) et non pas par une
virgule
 Le langage Javascript est sensible à la casse
 Il existe deux méthodes permettant d'intégrer des
commentaires à vos scripts.
 Placer un double slash (//
//) devant le texte
 Encadrer le texte par un slash suivi d'une étoile (/*
/*) et la
même séquence inversée (*/ */)
Les variables (1)
 Déclaration et affectation
 Le mot-clé var permet de
déclarer une ou plusieurs //Déclaration de i, de j et de k.
var i, j, k;
variables.
 Après la déclaration de la variable, il //Affectation de i.

est possible de lui affecter une valeur i = 1;
par l'intermédiaire du signe //Déclaration et affectation de
d‘affectation (=). prix.
var prix = 0;
 Si une valeur est affectée à une
variable sans que cette dernière //Déclaration et affectation de
caractere
ne soit déclarée, alors Javascript
var caractere = ["a", "b", "c"];
la déclare automatiquement.
Les variables (2)
 Déclaration et affectation
 La lecture d'une variable non déclarée provoque une
erreur
 Une variable correctement déclarée mais dont aucune
valeur n'est affectée, est indéfinie (undefined).
 La portée
 Les variables peuvent être globales ou locales.
 Une variable globale est déclarée en début de script et
est accessible à n'importe quel endroit du programme.
 Une variable locale est déclarée à l'intérieur d'une
fonction et n'est utilisable que dans la fonction elle-
même.
Les variables (3)
 Contraintes concernant les noms de variables
 Les noms de variables ne peuvent contenir que des
lettres, chiffres, ou le caractère "_" (underscore)
 Mon_Prenom est un nom valide
 Les caractères spéciaux et accentués sont interdits (é,

à, ç, ï, etc..)
 Mon_Prénom n'est pas un nom valide. Il y a un caractère accentué.
 Les majuscules et les minuscules ont leur importance.

 MonPrenom est différent de Monprenom.
 Un nom de variable ne peut contenir d'espaces.

 Mon Prenom n'est pas un nom de variable correct. Il y a un espace.
 Les mots réservés JavaScript ne peuvent être utilisés

comme noms de variable.
Les variables (4)
 Le type d’une variable dépend de la valeur stockée dans cette
variable. Pas de déclaration de type.
 Exemple
var maVariable = ‘ Philippe ’;
maVariable =10;
 trois principaux types de valeurs

 String
 Number : 10^-308 >nombre < 10^308
 Les nombres entiers
 les nombres décimaux en virgule flottant
 3 valeurs spéciales :
 Positive Infinity ou +Infinity (valeur infini positive)
 Negative Infinity ou –Infinity (valeur infinie négative)
 Nan (Not a Number) habituellement générée comme résultat
d’une opération mathamatique incohérente
 Boolean
 deux valeurs littérales : true (vrai) et false (faux).
Valeurs spéciales
 JavaScript inclut aussi deux types de données
spéciaux :
 Null : possède une seule valeur, null, qui signifie l’absence de
données dans une variable
 Undefined : possède une seule valeur, undifined. Une variable
dont le contenu n’est pas clair car elle n’a jamais stocké de valeur,
pas même null est dite non définie (undifined).
Exemple Déclaration de variables
<HTML>
<HEAD> <TITLE> Exemple </TITLE> </HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var prenom_visiteur="Foulen";
var nom_visiteur= "Ben Foulen";
var age_visiteur=20;
// utilisation
var accueil="Bonjour " + prenom_visiteur + " " +
nom_visiteur;
document.write(accueil);
</SCRIPT>
</BODY>
</HTML>
20
Exemple ++ :
var total=0;
var factor=5;
var result=42;
var affiche="";
function compute(base,factor){
result = base * factor;
factor*=2;
var total = result +factor;
return total;
}// compute
affiche+= 'compute(5,4) = ' + compute(5,4);

affiche+= '\ntotal = ' +total+ '\n factor =' +
factor + '\nresult = ' +result;
alert(affiche);
21
Structures
de contrôle
Test conditionnel : if … else …
 But
 Permet de diriger l’exécution du script selon des
conditions.
 Exemple
<SCRIPT language="JavaScript">
...
if(age<18) { alert("Vous devez être majeur");
window.location="mineur.php3";
}
else { window.location="majeur.php3";
}
...
</SCRIPT>
23
Boucle itérative : for …
 But
 Répéter des instructions un nombre déterminé de
fois.
 Syntaxe
 for(initialisation ; condition ; opération )
{ ... instructions ... }
 Exemple
var somme=0;
for( var i=1 ; i<=10 ; i++ )
{ somme += i; // équivalent à somme = somme +i;
}
...
Notations abrégées à la C
24
Boucle conditionnelle : while …
 But
 Répéter des instructions tant qu’une condition est
VRAIE.
 Syntaxe
 while(condition) { ... instructions ... }
 Exemple
function demander()
{ var nb=0;
while(nb<=100)
{ nb = prompt("Entrez un nombre supérieur à 100");
}
alert("Merci !");
}
25
Instructions
du langage
Sortie écran
 document.write( … );
 Exemple
<HTML>
<HEAD> <TITLE> Exemple 1 </TITLE> </HEAD>
<BODY>
var bonjour = "Bonjour !";
var question = "Comment allez vous ";
var phrase = bonjour + "<BR>" + question;
document.write(phrase, "aujourd'hui ?");

</SCRIPT>
</BODY>
</HTML>
27
Exercice:
28
Les opérations sur les chaînes
 La concaténation
 Var chaine = « bonjour » + « TC1/SEM2 »;
 Déterminer la longueur d’une chaîne

 Var ch1 = « bonjour »;
 Var longueur = ch1.length;
 Identifier le nième caractère d’une chaîne

 Var ch1 =« Rebonjour ! »;
 Var carac = ch1.charAt(2);
 Extraction d’une partie de la chaîne

 Var dateDuJour = « 04/02/17 »
 Var mois = datteDuJour.substring(3, 5);
 3: est l’indice du premier caractère de la sou-chaîne à
extraire
 5 : indice du dernier caractère à prendre en considération ;
ce caractère ne fera pas partie de la sous-chaîne à extraire
Les fonctions prédéfinies (1)
 eval
 Cette fonction exécute un code Javascript à partir
d'une chaîne de caractères.
...
function evaluation() {
document.formulaire.calcul.value=eval(document.formulaire.saisie.value); }
</SCRIPT>
...
<FORM NAME="formulaire">
Saisissez une expression mathématique : <INPUT TYPE="text" NAME=saisie
MAXLENGTH=40 SIZE=40>
<INPUT TYPE="button" VALUE="evaluation." onClick="evaluation()">
<INPUT TYPE="text" NAME=calcul MAXLENGTH=40 SIZE=40>
</FORM>...
 isFinite
 Détermine si le paramètre est un nombre fini.
Renvoie false si ce n'est pas un nombre ou
l'infini positif ou infini négatif.
isFinite(240) //retourne true
isFinite("Un nombre") //retourne false
 isNaN
 détermine si le paramètre n’est pas un nombre
(NaN : Not a Number).
isNaN("un nombre") //retourne true
isNaN(20) //retourne false
 parseFloat
 analyse une chaîne de caractères et retourne un
nombre décimal.
 Si l'argument évalué n'est pas un nombre, renvoie
NaN (Not a Number).
var numero="125";
var nombre=parseFloat(numero); //retourne le nombre 125
 parseInt
 analyse une chaîne de caractères et retourne un
nombre entier de la base spécifiée.
 La base peut prendre les valeurs 16 (hexadécimal) 10
(décimal), 8 (octal), 2 (binaire).
var prix=30.75;
var arrondi = parseInt(prix, 10); //retourne 30
 Number
 convertit l'objet spécifié en valeur numérique
var jour = new Date("December 17, 1995 03:24:00");//converit la date en millisecondes
alert (Number(jour));
 String
 convertit l'objet spécifié en chaîne de caractères
jour = new Date(430054663215);//Convertit le nombre en date Mois jour, Annéee etc.
alert (String(jour));
 Escape
 retourne la valeur hexadécimale à partir d'une chaîne
de caractère codée en ISO-Latin-1.
escape("!&") //retourne %21%26%
Déclaration et création d’objets
 Existence d’objets prédéfinis
 JavaScript intègre d'origine plusieurs type d'objets.
 Déclaration : utilisation de var.
 Création : utilisation du mot clé new, suivi du type
d'objet.
 Exemple
...
// création d’un objet Date contenant la date du jour.
var date_jour=new Date();
// création d’un objet Date avec paramètres
var une_date=new Date(annee,mois-1,jour,heure,min) ;
...
 Objet Date, très utile dans un environnement Internet.
34
Les Objets (1)
 Les objets de JavaScript, sont soit des entités pré définies
du langage, soit créés par le programmeur.
 Par exemple, le navigateur est un objet qui s'appelle "navigator
navigator".
 La fenêtre du navigateur se nomme "window
window"
 La page HTML est un autre objet, que l'on appelle "document
document".
 Un formulaire à l'intérieur d'un "document
document", est aussi un objet.
 Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle
"link
link". etc...
 Les objets javascript peuvent réagir à des "Evénements".
 Tous les navigateurs ne supportent pas les mêmes objets
 Accès aux propriétés d’un objet
 voiture.couleur.value
 voiture.couleur.value = verte
Les objets (2)
 L’opérateur New
 L'opérateur new est utilisé pour créer une nouvelle
instance ou un nouveau type d'objet défini par
l'utilisateur ou de l'un des types d'objets prédéfinis,
Array, Boolean, Date, Function, Image, Number,
Object, ou String.
 nouvel_objet = new type_objet
type_objet((parametres
parametres))
texte = new String("Une chaîne de caractère");

Les objets (3)
 L’opérateur Typeof
 L'opérateur typeof renvoie une chaîne de caractères
indiquant quel est le type de l'opérande.
var i = 1;
typeof i; //retourne number
var titre="Les raisins de la colère";
typeof titre; //retourne string
var jour = new Date();
typeof jour; //retourne object
var choix = true; typeof choix; //retourne boolean
var cas = null; typeof cas; //retourne object
typeof parseFloat; //retourne function
typeof Math; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.*
typeof Math; //retourne function NS 3.*, Opera 3.*
L'objet String (1)
 Propriété :
 length : retourne la longueur de la chaîne de caractères;
 Méthodes :
 anchor( ) : formate la chaîne avec la balise <A> nommée;
 b( ) : formate la chaîne avec la balise <B>;
 big( ) : formate la chaîne avec la balise <BIG>;
 charAt( ) : renvoie le caractère se trouvant à une certaine
position;
 charCodeAt( ) : renvoie le code du caractère se trouvant à
une certaine position;
 concat( ) : permet de concaténer 2 chaînes de caractères;
 fromCharCode( ) : renvoie le caractère associé au code;
 indexOf( ) : permet de trouver l'indice d'occurrence d'un
caractère dans une chaîne;
L'objet String (2)
 italics( ) : formate la chaîne avec la balise <I>;
 lastIndexOf( ) : permet de trouver le dernier indice
d'occurrence d'un caractère;
 link( ) : formate la chaîne avec la balise <A> pour permettre
de faire un lien;
 slice( ) : retourne une portion de la chaîne;
 substr( ) : retourne une portion de la chaîne;
 substring( ) : retourne une portion de la chaîne;
 toLowerCase( ) : permet de passer toute la chaîne en
minuscule;
 toUpperCase( ) : permet de passer toute la chaîne en
majuscules;
Utilisation des chaînes
 Déclaration
 Utilisation de var, N’importe quel type de données
 Manipulation
 Beaucoup de similarités avec PHP
// 2 alternatives de délimitations
var chaine1='valeur1';
var chaine2="valeur2";
// caractères ' et "

// alternance de guillemets simples et guillemets doubles
chaine1="Bonjour l'ami";
chaine2='Dis "Bonjour" au monsieur';
// utilisation de contre-slashs :\
chaine2="Dis \"Bonjour\" au monsieur";
40
Propriétés associées aux chaînes
 1 seule propriété
 length : longueur de la chaîne
 Exemple
var chaine='Exemple de longueur';
document.write(chaine.length);
19
41
Méthodes associées aux chaînes
 Concaténation
 Utilisation de +
 Exemple
var chaine1='Vive ';

var chaine2='JavaScript';
var chaine3=chaine1 + chaine2;
document.write(chaine3);
Vive JavaScript
42
 Accès à une sous-partie d’une chaîne
 charAt(int n) : renvoie du nème caractère
 substring(int i, int j) : renvoie de la chaîne comprise
entre le ième caractère (inclus) et le jème caractère
(exclus) var date = "28/02/2017";
var jour = date.substring(0,2);
 Exemple var mois = date.substring(5,3);
 Remarques var annee = date.substring(6);
 L’indice du 1er caractère est 0

 Si (i > j) alors échange de i et j : substring(5,3) 
substring(3,5)
 Si j est omis, la sous-chaîne renvoyée va jusqu’à la
fin de chaîne
43
 Recherche d’une sous-chaîne
 indexOf(string souschaîne, [int pos]) : renvoie l’indice
de la 1ère occurence de souschaîne dans la chaîne
 lastIndexOf(string souschaine, [int pos]) : renvoie

l’indice de la dernière occurrence de souschaîne dans
la chaîne
 L’option pos permet de n’effectuer la recherche :

 qu’à partir d’une certaine position pour indexOf
 jusqu’à une certaine position pour lastIndexOf
 Si souschaîne n’est pas trouvée, les 2 fonctions renvoient -1
44
 Exemples de recherche de sous-chaînes
var date = "28/02/2017";
document.write(date.indexOf("/"));
document.write(date.lastIndexOf("/"));
document.write(date.indexOf("/",3));
document.write(date.lastIndexOf("/",3)); 2
document.write(date.indexOf("\")); 5
5
2
var mois = date.substring(date.indexOf("/")+1, -1
date.lastIndexOf("/")); 17
document.write(mois);
45
 Conversions
 toUpperCase() : conversion en MAJUSCULES
 toLowerCase() : conversion en minuscules
 big(), blink(), bold(), fixed(), italics(), small(), sub(),
strike(), sup(), fontcolor(string couleur), fontsize(string
taille) : ajout de balises HTML de mise en forme
 Exemple
var chaine="Exemple min/MAJ";
document.write(chaine.toUpperCase()); EXEMPLE MIN/MAJ
document.write(chaine.toLowerCase()); exemple min/maj
document.write(chaine.italics()); Exemple min/MAJ
document.write(chaine.strike()); Exemple min/MAJ
document.write(chaine.fontcolor("red"));
Exemple min/MAJ
document.write(chaine.fontsize("+2")); Exemple min/MAJ
46
L'objet Array
 Propriété :
 length : retourne le nombre d'éléments du tableau;
 Méthodes :
 concat( ) : permet de concaténer 2 tableaux;
 join( ) : converti un tableau en chaîne de caractères;
 reverse( ) : inverse le classement des éléménts du
tableau;
 slice( ) : retourne une section du tableau;
 sort( ) : permet le classement des éléments du tableau;
L'objet Math (1)
 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 (2)
 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 Date (1)
 Propriété : aucune;
 Méthodes :
 getFullYear( ), getYear( ), getMonth( ), getDay( ),
getDate(), getHours( ), getMinutes( ), getSeconds( ),
getMilliseconds( ): retournent respectivement l'année
complète, l'année (2chiffres), le mois, le jour de la semaine,
le jour du mois, l'heure, les minutes, les secondes et les
millisecondes stockés dans l'objet Date;
 getUTCFullYear( ), getUTCYear( ), … retournent
respectivement l'année complète, l'année (2chiffres), …
stockés dans l'objet Date en temps universel;
 setFullYear( ), setYear( ), … remplacent respectivement
l'année complète, l'année (2chiffres), … dans l'objet Date;
L'objet Date (2)
 setUTCFullYear( ), setUTCYear( ), … remplacent l'année
complète, l'année (2chiffres), … dans l'objet Date en temps
universel;
 getTime( ) : retourne le temps stocké dans l'objet Date;
 getTimezoneOffset( ) : retourne la différence entre l'heure du
client et le temps universel;
 toGMTString( ), toLocaleString( ), toUTCString( ) :
convertissent la date en chaîne de caractère selon la
convention GMT, selon la convention locale ou en temps
universel;
Déclaration et création de tableaux
 Objet Array
 Déclaration par l’utilisation de var.
 Le premier élément du tableau est indexé à 0.
 Il est possible de déclarer un tableau sans
dimension fixée.
La taille du tableau s'adapte en fonction du contenu.
 Exemple ...
// création d’un tableau de 10 éléments de type
// basique (réel, entier, chaîne de caractères)
var un_tableau=new Array(10) ;
// création d’un tableau
var un_autre_tableau=new Array;
...
52
Utilisation de tableaux
 Accès aux éléments d’un tableau
 Utilisation des crochets : [ ]
...
var tableau=new Array;
tableau[0]=10;
tableau[9]=5;
...
 Propriétés de l’objet
...
// obtention du nombre d'éléments de un_tableau
var dimension=tableau.length;
...
53
Tableaux associatifs
 Principe
 L’indice est une chaîne de caractères
 Exemple
 Chargement d’une page HTML en fonction du
jour de la semaine
...
var tab=new Array;
tab["Lundi"] ="semaine.html";
tab["Mardi"] ="semaine.html ";
tab["Mercredi"] ="enfant.html";
tab["Jeudi"] ="semaine.html";
tab["Vendredi"] ="semaine.html";
tab["Samedi"] ="weekend.html";
tab["Dimanche"] ="weekend.html";
...
54
Tableaux d’objets
 Principe
 Array permet de stocker des objets de n’importe
quel type :
 atomique : entier, réel, chaîne de caractères, …
 prédéfini : Date, …
 défini dans le code JavaScript, … cf. plus loin
 Exemple
var animaux=new Array;
// création de plusieurs instances d’Animal
var milou=new Animal("Milou","Chien");
var titi=new Animal("Titi","Canari");
// stockage d’instances d ’Animal dans un tableau
animaux[0]=milou;
animaux[1]=titi;
animaux[2]=new Animal("Rominet","Chat");
55
Tableaux multi-dimensionnels
 Principe
 Array permet de stocker des objets, donc des
tableaux.
 Exemple
...
var row0=new Array; row0[0]="O"; row0[1]="X"; row0[2]=" ";
var row1=new Array; row1[0]="X"; row1[1]="O"; row1[2]="X";
var row2=new Array; row2[0]=" "; row2[1]="0"; row2[2]="X";
var morpion=new Array;
morpion[0]=row0; morpion[1]=row1; morpion[2]=row2;
... O X
morpion[1][2]="X";
... X O X
O X
56
Exemple d’utilisation de tableaux
 Affichage de la date du jour
<HTML>
<HEAD> <TITLE> Exemple Date </TITLE> </HEAD>
<BODY>
var dt=new Date;
var jour=dt.getDay( ); // renvoi un jour [0..6]
var numero=dt.getDate( ); // renvoi le numéro dans le mois
var mois=dt.getMonth( ); // renvoi le mois [0..11]
var tab_jour=new Array("Dimanche","Lundi","Mardi",

"Mercredi","Jeudi","Vendredi","Samedi");
var tab_mois=new Array("Janvier","Février","Mars","Avril","Mai",
"Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
document.write("Nous sommes le "+tab_jour[jour]+" "

+numero+" "+tab_mois[mois]);
</SCRIPT>
</BODY>
</HTML>
57
Les objets du navigateur (1)
 L'objet le plus haut dans la hiérarchie est window qui
correspond à la fenêtre même du navigateur.
 L'objet document fait référence au contenu de la
fenêtre.
 document regroupe au sein de propriétés l'ensemble
des éléments HTML présents sur la page. Pour
atteindre ces différents éléments, nous utiliserons :
 soit des méthodes propres à l'objet document, comme la
méthode getElementById( ), qui permet de trouver l'élément
en fonction de son identifiant (ID);
 soit des collections d'objets qui regroupent sous forme de
tableaux Javascript tous les éléments de type déterminé.
Les objets du navigateur (2)
L'objet window (1)
 Propriétés : (accessibles avec IE et N)
 closed : indique que la fenêtre a été fermée;
 defaultStatus : indique le message par défaut dans
la barre de status;
 document : retourne l'objet document de la fenêtre;
 frames : retourne la collection de cadres dans la
fenêtre;
 history : retourne l'historique de la session de
navigation;
 location : retourne l'adresse actuellement visitée;
 name : indique le nom de la fenêtre;
L'objet window (2)
 navigator : retourne le navigateur utilisé;
 opener : retourne l'objet window qui a créé la
fenêtre en cours;
 parent : retourne l'objet window immédiatemment
supérieur dans la hiérarchie;
 self : retourne l'objet window correspondant à la
fenêtre en cours;
 status : indique le message affiché dans la barre de
status;
 top : retourne l'objet window le plus haut dans la
hiérarchie.
L'objet window (3)
 Méthodes :
 blur( ) : enlève le focus de la fenêtre;
 close( ) : ferme la fenêtre;
 focus( ) : place le focus sur la fenêtre;
 moveBy( ) : déplace d'une distance;
 moveTo( ) : déplace la fenêtre vers un point spécifié;
 open( ) : ouvre une nouvelle fenêtre;
 print( ) : imprime le contenu de la fenêtre;
 resizeBy( ) : redimensionne d'un certain rapport;
 resizeTo( ) : redimensionne la fenêtre;
 setTimeout( ) : évalue une chaîne de caractère après
un certain laps de temps.
L'objet document (1)
 Propriétés :
 applets : retourne la collection d'applets java
présente dans le document;
 cookie : permet de stocker un cookie;
 domain : indique le nom de domaine du serveur
ayant apporté le document;
 forms : retourne la collection de formulaires présents
dans le document;
 images : retourne la collection d'images présentes
dans le document;
 links : retourne la collection de liens présents dans
le document;
L'objet document (2)
 referrer : indique l'adresse de la page précédente;

 title : indique le titre du document.
 Méthodes :
 close( ) : ferme le document en écriture;
 open( ) : ouvre le document en écriture;
 write( ) : écrit dans le document;
 writeln( ) : écrit dans le document et effectue un
retour à la ligne
L'objet navigator
 Propriétés
 appName : application (Netscape, Internet Explorer)
 appVersion : numero de version.
 platform : système d’exploitation (Win32)
 plugins
 language
 mimeTypes
 JavaEnabled()
Fonctions
 Emplacement de la déclaration
 Dans l'entête de la page
 Utilisation de la syntaxe :
function nom_fonction([param1, …])
 Corps de la fonction
 Délimité par { … }
 Contenu :
 déclaration des variables locales, propres à la fonction,
 instructions réalisés par la fonction,
 instruction return pour renvoyer une valeur ou un objet
(cette instruction n’est pas obligatoire  fonction qui ne renvoie pas de valeur)
66
Fonctions
 Appel de fonction
 Peut avoir lieu à n'importe quel endroit de la page :
 dans d'autres fonctions,
 dans le corps de la page.
 Utilisation de : nom_fonction([param1, … ]);
<HTML>
<HEAD> <SCRIPT>// déclaration de fonction
function bonjour(nom) {
document.write("Bonjour ", nom);}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT> bonjour("M. Dupont");</SCRIPT>
</BODY>
</HTML>
67
Fonctions
<HTML>
<HEAD> <SCRIPT>// déclaration de fonction
function bonjour(nom) {
document.write("Bonjour ", nom);}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT> bonjour("M. Dupont");</SCRIPT>
</BODY>
</HTML>
68
Fonctions
<HTML>
<HEAD> <SCRIPT>// déclaration de fonctions
function volumeSphere(rayon)
{ return 4/3*Math.PI*Math.pow(rayon,3); }
function calculerPrix(PrixUnitaire, NbArticles)

{ return PrixUnitaire* NbArticles; }
</SCRIPT>
</HEAD>
<BODY> <SCRIPT>// appels des fonctions
document.write("Tu dois payer ",
CalculerPrix(150,4)," Euros.<BR>");
document.write("Le volume d’une sphère de rayon 1
est ", volumeSphere(1),"<BR>" );
</SCRIPT>
</BODY>
</HTML>
69
Déclenchement d’instructions
JavaScript
 Programmation événementielle
 JavaScript = langage réactif
 L’interaction avec l’utilisateur est gérée via des
événements
 Événement = tout changement d’état du navigateur
 Production d’événement
 Déclenché par l’utilisateur ou par le code JavaScript
70
Déclenchement d’instructions JavaScript
 Événements JavaScript
 blur : le focus est enlevé d’un objet
 change : la valeur d ’un champ de formulaire à été
modifiée par l’utilisateur
 click : un clic souris est déclenché sur un objet
 focus : le focus est donné à un objet
 load : la page est chargée par le navigateur
 mouseover : la souris est déplacée sur un objet
 select : un champ de formulaire est sélectionné
(par clic souris ou tabulation)
 submit : un formulaire est soumis
 unload : l’utilisateur quitte la page
71
 Récupération des événements
 Gestionnaire d’événement qui associe une action
(fonction JavaScript) à la détection d’événement
 É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" >
72
<HTML>
<HEAD> <TITLE>Exemples de déclenchements</TITLE>
<SCRIPT>
 function saluer() { alert("Bonjour M. Dupont!"); }
</SCRIPT>
</HEAD>
<BODY>
<H1>Exécution immédiate</H1>
<SCRIPT> saluer(); </SCRIPT>
<H1>Exécution sur événement onClick</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>
73
Les événements (1)
 Javascript est dépendant des événements
 se produisent lors d'actions diverses sur les objets
d'un document HTML.
 onLoad
 onClick
 onMouseover
 onMouseout
 ...
 Il est possible de baser l’exécution de

fonctions sur des événements
 Evénement onLoad
 Se produit lorsque une page web est chargée dans la
fenêtre du navigateur
 Toute la page (y compris les images qu’elle contient si
leur chargement est prévu) doit avoir été chargée
pour qu’il ait lieu
 Cet événement peut être associé à une image
seulement ; auquel cas, il se produit une fois son
chargement terminé
<HTML><BODY onLoad="alert('page chargée');">
Exemple de l'événement onLoad
</BODY></HTML>
 Evénement onClick
 Se produit lorsque l’utilisateur clique sur un élément
spécifique dans une page, comme un lien hypertexte, une
image, un bouton, du texte, etc.
 Ces éléments sont capables de répondre séparément à
cet événement
 Il peut également être déclenché lorsque l’utilisateur clique
n’importe où sur la page s’il a été associé non pas à un
élément spécifique, mais à l’élément body tout entier
<HTML><BODY>
<INPUT TYPE="Button" Value="cliquer ici”
onClick="alert('Clic')">
</BODY></HTML>
 Événement onMouseover
 Analogue à onClick sauf qu’il suffit que l’utilisateur
place le pointeur de sa souris sur l’un des éléments
précités (lien hypertexte, image, bouton, texte, etc.)
pour qu’il ait lieu
 Événement onMouseout
 A l’inverse de onMouseover, cet événement se
produit lorsque le pointeur de la souris quitte la zone
de sélection d’un élément.
<HTML><BODY>
<IMG SRC="image.gif" onMouseOver="src='image2.gif';"
onMouseOut="src='image.gif';">
</BODY></HTML>
Nommage des objets-éléments
 Pour pouvoir manipuler un objet en javaScript, il doit posséder
un nom
 Pour pouvoir distinguer les différents objets-éléments d’une page
web, il suffit de leur donner un nom à travers de l’attribut NAME
 <Table Name=« tableau1 »>…
 <Table Name=« tableau2 »>…
 <Form Name = « formulaire1 »>…
 <Form Name =« formulaire2 »>…
 <Textarea Name =« texte1»>…
 Dans le cas où l’objet serait unique alors pas besoin de nom pour
désigner cet objet
 Exemple : le cas de BODY(une seul BODY par document),
DOCUMENT (un seul DOCUMENT par fenêtre)
Manipulation des objets
 Pour adresser un objet, il ne suffit pas de donner son nom : il faut
aussi préciser son « chemin d’accès » dans l’arborescence de la
structure
<HTML><BODY
onLoad="window.document.formulaire.zone.value='Bonjour';">
<FORM name="formulaire"><INPUT NAME="zone" TYPE="text">
</FORM></BODY></HTML>
 Si le nom de la fenêtre est omis, le navigateur utilisera par défaut

la fenêtre courante
 Dans le cas de cadres (frames), il est pertinent de donner le nom
de la fenêtre
 Il est possible aussi d’omettre window.document : l’adressage
réussi puisqu’il n’y a qu’un seul objet « document» dans la fenêtre
Les Cookies (1)
 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.
Les Cookies (2)
 Limitations lors de l’utilisation des cookies.
 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.
 Où sont stockés les cookies

 En général, ils sont pour Netscape, dans le répertoire de l'utilisateur
(si il y a des profils différents) sous le nom de "cookie.txt".
 Microsoft Internet Explorer stocke les cookies dans des répertoires
tels que "C:\WINDOWS\Cookies" ou encore
"C:\WINDOWS\TEMP\Cookies".
Les Cookies (3)
 Structure d'un cookie
 Nom=Contenu; expires=expdate; path=Chemin;
domain=NomDeDomaine; secure
 Nom=Contenu;
 Sont deux variables suivies d'un ";" . Elles représentent l'en-
tête du cookie.
 La variable Nom contient le nom à donner au cookie.
 La variable Contenu contient le contenu du cookie
 Exemple ma_cookie=« oui:visite»
Les Cookies (4)
 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.
 La date d’expiration doit être au format :
Wdy, DD-Mon-YYYY HH:MM:SS GMT
 Utiliser les fonctions de l'objet Date
 Règle générale : 'indiquer un délai en nombre de jours (ou
d'années) avant disparition du Cookie.
Les Cookies (5)
 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.
Les Cookies (6)
 Ecrire un cookie
 Un cookie est une propriété de l'objet document (la page HTML
chargée dans le navigateur) alors l’intruction d’écriture de cookie
est:
 document.cookie = Nom + "=" + Contenu + ";
expires=" + expdate.toGMTString() ;
var Nom = "MonCookie

"MonCookie"" ; // nom du cookie
var Contenu = "Hé...
"Hé... Vous avez un cookie sur votre disque !" !" ; // contenu du
cookie
var expdate = new Date () ; // crée un objet date indispensable
puis rajoutons lui 10 jours d'existence :
expdate.setTime
expdate .setTime (expdate
(expdate.getTime()
.getTime() + ( 10 * 24 * 60 * 60 * 1000
1000)))) ;
document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;
Les Cookies (7)
 Lecture d'un cookie
 Accéder à la propriété cookie de l'objet document.
 Document.cookie
var LesCookies ; // pour voir les cookies
LesCookies = document.cookie ; // on met les cookies dans la variable LesCookies
 Modification d'un cookie

 Modifier le contenu de la variable Contenu puis réécrire le
cookie sur le disque dur du client
Contenu = "Le cookie a été modifié..." ; // nouveau contenu
document.cookie = Nom + "=" + Contenu + "; expires=" +
expdate.toGMTString() ; // écriture sur le disque
Les Cookies (8)
 Suppression d'un cookie
 Positionner la date de péremption du cookie à une valeur
inférieure à celle du moment où on l'écrit sur le disque.
// on enlève une seconde (ça suffit mais c'est nécessaire)

expdate.setTime
expdate.setTime (expdate
(expdate.getTime()
.getTime() - (1000
1000))
)) ;
// écriture sur le disque

document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.toGMTString() ;

Au revoir
et au prochain
cours
88

Cours Programmation Web II Chapitre 1 JavaScript

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Cours Programmation Web II Chapitre 1 JavaScript

Загружено:

Авторское право:

Доступные форматы

Cours Programmation Web

Enseignant : Yassine MBAREK

 Javascript est standardisé par un comité

 JavaScript est un langage

 Un objet est un élément nommé ayant des

Action Event JavaScript DOM Réaction

Identification d'une action Localise l'objet

function changeImage (nomIm,src)

 Le code JavaScript s’intègre de deux manière

 2. Insertion comme un module externe

 Insertion pour exécution directe

 Après la déclaration de la variable, il //Affectation de i.

 Les caractères spéciaux et accentués sont interdits (é,

 Les majuscules et les minuscules ont leur importance.

 Un nom de variable ne peut contenir d'espaces.

 Les mots réservés JavaScript ne peuvent être utilisés

 trois principaux types de valeurs

affiche+= 'compute(5,4) = ' + compute(5,4);

document.write(phrase, "aujourd'hui ?");

 Déterminer la longueur d’une chaîne

 Identifier le nième caractère d’une chaîne

 Extraction d’une partie de la chaîne

 Objet Date, très utile dans un environnement Internet.

texte = new String("Une chaîne de caractère");

// caractères ' et "

var chaine='Exemple de longueur';

var chaine1='Vive ';

 L’indice du 1er caractère est 0

 lastIndexOf(string souschaine, [int pos]) : renvoie

 L’option pos permet de n’effectuer la recherche :

 Si souschaîne n’est pas trouvée, les 2 fonctions renvoient -1

var tab_jour=new Array("Dimanche","Lundi","Mardi",

document.write("Nous sommes le "+tab_jour[jour]+" "

 referrer : indique l'adresse de la page précédente;

function nom_fonction([param1, …])

function calculerPrix(PrixUnitaire, NbArticles)

<H1>Exécution sur protocole JavaScript:</H1>

 Il est possible de baser l’exécution de

 Si le nom de la fenêtre est omis, le navigateur utilisera par défaut

 Que faire avec un cookie

 Personnaliser les pages présentées à l'utilisateur en reprenant par

 Où sont stockés les cookies

 Les arguments path, domain et secure sont facultatifs.

var Nom = "MonCookie

 Modification d'un cookie

// on enlève une seconde (ça suffit mais c'est nécessaire)

// écriture sur le disque

Вам также может понравиться