Technologie Web JavaScript PDF

Technologie Web
JavaScript
H. Gharbi
INSAT 2010
JavaScript - Introduction
• langage de script, orienté objet, incorporé
dans un document.
• apporter des améliorations au langage HTML
(interactivité, web dynamique).
• exécuter des commandes du côté client
(navigateur).
• Javascript a été initialement élaboré par
Netscape en association avec Sun
Microsystem.
JavaScript et HTML (1)
• Insertion du block <script>..</script>
n’importe ou dans le code HTML.
<script language="JavaScript">
language="JavaScript">
............
</script>
Insertion directe dans le code HTML

Insertion comme un module externe
JavaScript - Insertion dans HTML
• Il existe 2 manières d'insérer du code
JavaScript dans une page HTML :
1. Insertion pour exécution directe
2. Insertion pour exécution événementielle
Insertion pour exécution directe
• Le code s'exécute
automatiquement <html>
<head>
lors du chargement de la <title>..... </title>
</head>
page HTML <body>
<script
dans le navigateur en même language="JavaScript">
alert(‘bonjour’);
temps que </script>
</body>
le contenu de la page HTML </html>
s'affiche à l'écran.
Insertion pour exécution
événementielle
• Le code javascript est
<html>
d'abord lu par le <head>
<title> ..........
navigateur, stocké en </title>
<script
mémoire, pour ne language="JavaScript">
function auRevoir ()
s'exécuter que sur { alert(‘ Au
revoir’);}
demande, lors du </script>
</head>
déclenchement d ’un <body
onUnload=auRevoir();>
événement. Excécution différée
</body>
• Code inséré entre </html>
<head>..</head>
JavaScript – Module externe
• faisant appel à un module externe se trouvant
à n’importe quelle adresse .
• un fichier de TEXTE SIMPLE sur le serveur à
son adresse d'appel (portant généralement
l'extension .js)
• Simplifie la maintenance quand plusieurs
pages font appel à des modules JavaScript
communs.
<script src="
src="URL externe">
="URL du module externe">
</script>
JavaScript – Règles de codage
• Chaque commande doit être terminée par un point-virgule
(;).
• Un nombre à virgule est séparé par un point (.) et non par
une virgule
• Le langage JavaScript est sensible à la casse
• JavaScript ignore l’espace, la tabulation et nouvelle ligne
dans les lignes de commande (ie. instruction)
• 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 (*/)
JavaScript – Mots réservés
• Un nom de variable doit commencer par une lettre
(majuscule ou minuscule) ou un "_"
• Un nom de variables peut comporter des lettres, des
chiffres et les caractères _ et & (les espaces ne sont
pas autorisés!)
• Dans le JavaScript, les noms des variables et
fonctions doivent être différent des mots réservés.
abstract boolean break throws
byte char continue typeof
default delete do while
double else export transient
false final float var
for function goto with
if implements import true
instanceof in int void
switch
interface long native
new null package synchronised
this
private protected public
return short static
Masquage du script
• Masquer le script pour les anciens
navigateurs, pour ne pas être affiché à
l’intérieur de la page.
<script language="Javascript">
<!– –
Placez ici le code de votre script
// – – >
</script>
JavaScript – Déclaration de
variables
• Une variable est un objet repéré par son nom,
pouvant contenir des données, qui pourront
être modifiées lors de l'exécution du
programme.
• Explicite:
var chaine= "bonjour";
• Implicite:
chaine= "bonjour";
JavaScript – Déclaration et
Affectation
//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"];
• 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).
JavaScript – Portée des variables
• 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.
Exemple 1
 </script>
Exemple 2
 </script>
Variables - Les types de données
• Pas de déclaration de type.
• le JavaScript n'autorise la manipulation que de
4 types de données :
des nombres: entiers ou à virgules
des chaînes de caractères (string): une suite de caractères
des booléens: deux états: true (vrai) ou false (faux)
des variables de type null: la variable ne contient aucune
donnée.
JavaScript – Les chaines de
caractères (string)
• une suite de caractères
• caractères spéciaux:
\b : touche de suppression
\f : formulaire plein / Nouvelle page
\n : retour à la ligne
\r : appui sur la touche ENTREE
\t : tabulation
\" : guillemets doubles
\' : guillemets simples
\\ : caractère antislash
JavaScript – Les opérateurs
• Les opérateurs sont des symboles qui permettent de
manipuler des variables, c'est-à-dire effectuer des
opérations, les évaluer, ...
• On distingue plusieurs types d'opérateurs:
les opérateurs de calcul
les opérateurs d'assignation
les opérateurs d'incrémentation
les opérateurs de comparaison
les opérateurs logiques
(les opérateurs bit-à-bit)
(les opérateurs de rotation de bits)
Les opérateurs de calcul
• Les opérateurs de calcul permettent de modifier
mathématiquement la valeur d'une variable
Opérateur Dénomination Effet Exemple Résultat (avec x valant 7)

+ opérateur d'addition Ajoute deux valeurs x+3 10
- opérateur de soustraction Soustrait deux valeurs x-3 4
* opérateur de multiplication Multiplie deux valeurs x*3 21
/ plus: opérateur de division Divise deux valeurs x/3 2.3333333
= opérateur d'affectation Affecte une valeur à une variable x=3 Met la valeur 3 dans la variable x
Les opérateurs d'assignation
• Ces opérateurs permettent de simplifier des
opérations telles que ajouter une valeur dans une
variable et stocker le résultat dans la variable.
Opérateur Effet
+= addition deux valeurs et stocke le résultat dans la variable (à gauche)
-= soustrait deux valeurs et stocke le résultat dans la variable
*= multiplie deux valeurs et stocke le résultat dans la variable
/= divise deux valeurs et stocke le résultat dans la variable

Les opérateurs d'incrémentation
• Ce type d'opérateur permet de facilement
augmenter ou diminuer d'une unité une variable.
Opérateur Dénomination Effet Syntaxe Résultat (avec x valant 7)
++ Incrémentation Augmente d'une unité la variable x++ 8
-- Décrémentation Diminue d'une unité la variable x-- 6

Les opérateurs de comparaison
Résultat (avec x
Opérateur Dénomination Effet Exemple
valant 7)
==
Compare deux valeurs et Retourne 1 si X est égal
A ne pas confondre avec le opérateur d'égalité x==3
vérifie leur égalité à 3, sinon 0
signe d'affectation (=)!!
Vérifie qu'une variable est

opérateur Retourne 1 si X est
< strictement inférieure à une x<3
d'infériorité stricte inférieur à 3, sinon 0
valeur

opérateur Retourne 1 si X est
<= inférieure ou égale à une x<=3
d'infériorité inférieur à 3, sinon 0
valeur

opérateur de Retourne 1 si X est
> strictement supérieure à une x>3
supériorité stricte supérieur à 3, sinon 0
valeur
Vérifie qu'une variable est Retourne 1 si X est

opérateur de
>= supérieure ou égale à une x>=3 supérieur ou égal à 3,
supériorité
valeur sinon 0
opérateur de Vérifie qu'une variable est Retourne 1 si X est

!= x!=3
différence différente d'une valeur différent de 3, sinon 0
Les opérateurs logiques (booléens)
• Ce type d'opérateur permet de vérifier si
plusieurs conditions sont vraies:
Opérateur Dénomination Effet Syntaxe
|| OU logique Vérifie qu'une des conditions est réalisée ((condition1)||(condition2))
&& ET logique Vérifie que toutes les conditions sont réalisées ((condition1)&&(condition2))
Inverse l'état d'une variable booléenne (retourne la valeur

! NON logique (!condition)
1 si la variable vaut 0, 0 si elle vaut 1)
JavaScript – Entrée/Sortie
• 3 types de boites de messages : Alerte,
Confirmation et Invite
alert()
alert() : afficher un message de type texte (bouton
Ok).
confirm
confirm() () : choix entre deux bouton, Ok et
annuler.
prompt() : taper un message en reponse à une
question.
• La méthode document.write permet d ’écrire
du code HTML dans la page WEB
Exemple
<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>
JavaScript – Les fonctions
• Sous-programme qui permet d'effectuer un
ensemble d'instructions.
• Déclaration:
function Nom_De_La_Fonction(argument1,
argument2, ...) { liste d'instructions }
• Même règles de nommage des variables.
• Appel:
Nom_De_La_Fonction(arg1, arg2, …);
Fonctions de base (1)
• Cette fonction exécute un code Javascript à
partir d'une chaîne de caractères.
<html>
<body>
<script language="JavaScript">
eval('function carre(n){ return n*n;};alert(carre(2));');
</script>
</body>
</html>
• isFinite
Détermine si le paramètre est un nombre fini.
• isNaN
Détermine si le paramètre n’est pas un nombre
(NaN : Not a Number).
isFinite(240) //retourne true
isFinite("Un nombre") //retourne false
isNaN("un nombre") //retourne true

isNaN(20) //retourne false
• parseInt(string)
Analyse une chaîne de caractères et retourne un
nombre entier de la base spécifiée.
• parseFloat(string)
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).
alert(5+"2"); // affiche 52
alert(5+parseInt("2")); // affiche 7
parseInt("10.33") // 10
parseInt("40 ans") // 40
parseInt(" il a 40") // NaN
parseInt("010") // 8
parseInt("0x10") // 16
parseFloat("15.45") //15.45
• Number
convertit l'objet spécifié en valeur numérique
• String
convertit l'objet spécifié en chaîne de caractères
• escape
retourne la valeur codée de type URL-codée.
var jour = new Date("December 17, 1995 03:24:00");

alert (Number(jour)); //retourne 1261541700000
jour = new Date(430054663215);

alert (String(jour));//retourne Thu Aug 18 1983 12:37:43 GMT+0100 (Romance Standard Time)
escape("!&") //retourne %21%26%

JavaScript – Les tests
• if (<expression booléenne>) <instruction>
• if (<expression booléenne>) <instruction 1> ;
else <instruction 2>
• switch (<expression>) {
case <valeur1> : <traitement de valeur1> ;
case <valeur2> : <traitement de valeur2> ;
......
[default : <traitement autres cas> ;]
}
Exemple
if (x!= 5) switch (x) {
x= x+ 12; case 5 : x= x* 3;
// ou x+=12 default : x= x+ 12;
else }
x= x* 3 + 12;
JavaScript – Les boucles
• while (<expression booléenne>)
<corps de boucle>
• do
<corps de boucle>
while (<expression booléenne>);
• for([var] <ident>=<init>;<test de fin>;<opération>)
<corps de boucle>
Exemple
var arret = true, S = "", Add = 'abc';
alert("Je demarre");
for(var i = 1 ; arret ; i += 3){
alert("Dans for, i = " + i);
S += Add
arret = !(S.length > 8);
}
alert("J'en suis sorti !!!")
JavaScript – Les reptures
• Definition d’étiquette
<ident étiquette> : <instruction>
• break : sortie immédiate d'une instruction
d'aiguillage (switch) ou de la boucle
• continue : abandonner l'itération en cours
pour passer directement à celle qui suit.
Exemple 1
var S = "Valeurs successives d'index :\n";
Boucle1:for(var i = 0 ;i < 5; i++){
Boucle2:for(var j = 0; j < 6; j+=2){
if (j > 2) break;
if (i == 1) break Boucle2;
if (i == 4) break Boucle1;
S += "i = " + i + " j = " + j + "\n";
}
}
S += "En sortie : i = " + i + " j = " + j +
"\n";
alert(S);
Exemple 2
var S = "Valeurs successives d'index :\n";
Boucle:for(var i = 0 ;i < 4; i++){
for(var j = 0; j < 5; j+=2){
if (j == 2) continue;
if (i == 1) continue Boucle;
S += "i = " + i + " j = " + j + "\n";
}
}
S += "En sortie : i = " + i + " j = " + j +
"\n";
alert(S);
JavaScript - Objets
• JavaScript est un langage orienté objet.
• Les objets possèdent des attributs et des
méthodes:
Objet.attribut
Objet.methode
• Deux types d’objets:
Objets Définis par le programmeur
Objets Prédéfinis dans le noyau de JavaScript
Définir un objet
• Création d’un objet par la définition de son
constructeur
// Constructeur de l’objet etudiant // instanciation de l’objet
function etudiant(n,p,d){ e1 = new etudiant(“nom1”,
// propriétés “prenom1”, “15/07/86”);
this.nom=n; // acces aux propriétés
this.prenom=p; e1.nom;
this.date=d; e1.prenom;
// méthode // utilisation d’une méthode
this.age=calcul_age(d); e1.age()
} // suppression de l’objet
function calcul_age(d){ delete e1;
…
return resultat;
}
Objets Prédéfinis
• Objets prédéfinis: Array, Boolean, Date,
Function, Image, Number, Object, ou String.
• nouvel_objet = new type_objet(parametres)
• typeof renvoie une chaîne de caractères
indiquant quel est le type de l'opérande.
var i = 1; var choix = true;
typeof i; //retourne number typeof choix; //retourne boolean
var titre="Les raisins de la colère";
var cas = null;
typeof titre; //retourne string
typeof cas; //retourne object
var jour = new Date();
typeof jour; //retourne object typeof parseFloat; //retourne function
L'objet String
• Propriété :
length : retourne la longueur de la chaîne de caractères
• Méthodes :
anchor("lien") : formate la chaîne avec la balise <A>
bold( ) : formate la chaîne avec la balise <B>
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( ) : trouve l'indice d'occurrence d'un caractère dans une
chaîne
substr( ), substring( ) : retourne une portion de la chaîne
L'objet Array
• Propriété :
length : retourne le nombre d'éléments du
tableau
• Méthodes :
concat( ) : permet de concaténer 2 tableaux
reverse( ) : inverse le classement des éléments du
tableau
slice( ) : retourne une section du tableau
sort( ) : permet le classement des éléments du
tableau
L'objet Math
• Propriétés :
E, LN2, LN10, LOG2E, LOG10E, PI, SQRT2, SQRT1_2
• Méthodes :
abs(), max(), min(), sqrt(), pow(), exp(), …
ceil( ) : retourne le plus petit entier supérieur à un nombre
floor( ) : retourne le plus grand entier inférieur à un nombre
round( ) : arrondi un nombre à l'entier le plus proche
random( ) : retourne un nombre aléatoire entre 0 et 1
L'objet Date
• Propriété : aucune
• Méthodes :
getFullYear(), getYear(), getMonth(), getDay(), getDate(), getHours(),
getMinutes(), getSeconds(), getMilliseconds()
getUTCFullYear( ), … idem en temps universel
setFullYear( ), setYear( ), … modification d'une date
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
Objets du navigateur
• Tout ce qui est affiché dans la page est traité
en tant qu’objet.
• Les objets du navigateur sont définis dans une
hiérarchie DOM (obj1.obj2.obj3…)
• 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
HTML DOM (Document Object
Model)
Accès aux éléments d’une page
• méthodes propres à l'objet document :
getElementById( ) trouve l'élément avec son identifiant
(ID)
getElementByName
• soit des collections d'objets qui regroupent
sous forme de tableaux Javascript tous les
éléments de type déterminé.
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
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 (2)
• 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, forms, images, links : retourne les collection d'applets java,
formulaires… présente dans le document
cookie : permet de stocker un cookie
domain : indique le nom de domaine du serveur ayant apporté le document
referrer : indique l'adresse de la page précédente
title : indique le titre du document
<html><head><title>Test</title></head>
<body>
<a href="http://www.yahoo.fr/">Yahoo</a>
<a href="http://www.google.fr/">Google</a>
<script type="text/javascript">
alert(document.title);
for(var i=0; i < document.links.length; ++i) "<br>" + document.links[i]);
</script>
</body></html>
L'objet document (2)
• 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
• Méthodes
JavaEnabled()
JavaScript - Evénements
• Les événements sont associes aux actions de
l’utilisateur et à certaines balises.
• Exécuter du code JavaScript lorsque l’
événement se produit sur l’objet spécifié.
• Activation:
<tag … onEventName="code javascript;">
À l’intérieur d’un script :
function f() { … }
document.object.onEventName=f;
Liste des événements
Evénement Eléments supportés Description
onblur a, area, button, input, label, select, textarea un élément perd le focus
onchange input, select, textarea modification d'un champ de données
Tout les éléments sauf applet, base, basefont, bdo, br, font, frame, frameset,
onclick head, html, iframe, isindex, meta, param, script, style, title l’utilisateur clique sur un élément
ondblclick head, html, iframe, isindex, meta, param, script, style, title l’utilisateur double clique sur un élément
onfocus a, area, button, input, label, select, textarea le focus est donné à un élément
onkeydown head, html, iframe, isindex, meta, param, script, style, title appui sur une touche du clavier
onkeypress head, html, iframe, isindex, meta, param, script, style, title appui et relâchement d' une touche du clavier
onkeyup head, html, iframe, isindex, meta, param, script, style, title relâchement d' une touche du clavier
onload frameset Toutes les frames sont chargées
onload body Le document a été chargé
onmousedown head, html, iframe, isindex, meta, param, script, style, title le pointeur de la souris est cliqué
onmousemove head, html, iframe, isindex, meta, param, script, style, title le pointeur de la souris est deplacé dans l'élément
onmouseout head, html, iframe, isindex, meta, param, script, style, title le pointeur de la souris a quitté dans l'élément
onmouseover head, html, iframe, isindex, meta, param, script, style, title le pointeur de la souris est mis sur l'élément
onmouseup head, html, iframe, isindex, meta, param, script, style, title Le poineur de la souris est relâcheé
onreset form formulaire reinitialisé
onselect input, textarea Du texte a été selectionné
onsubmit form Formulaire envoyé
onunload frameset Toutes les frames sont fermées
onunload body Le document est fermé
Exercice 1
• Changement de la couleur de fond de la page
à partir d’une liste déroulante.
Exercice 2
• Page de conversion DinarEuro
Exercice 3
• Afficher l’heure dans une page
Exercice 4
1. Image-lien qui change au survol de la souris.
2. Des liens dans une page permettant de
changer le contenu d’une zone de texte juste
en mettant la souris sur l’un des liens.
3. Un script affichant dans la page la liste des
liens qui y figurent.
Exercice 5
• Page permettant de calculer la valeur du
factoriel d’un nombre (n!)
Exercice 6
• Changement de style d’une div par le biais
d’un bouton
Exercice 7
• Afficher/Masquer un exemple (div) dans une
page (nomElement.style.display=none|block)
Exercice 8
• Déplacer une image dans une page à l’aide des
buttons : Gauche, Droite, Haut et Bas.
Exercice 9
• Diaporama d’images dans une page (buttons) :
Jouer la diaporama des imges (cyclique)
Arrêter la diaporama
Image suivante
Image précédente
Dernière image
Première image

Technologie Web JavaScript PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Technologie Web JavaScript PDF

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

Technologie Web

Insertion directe dans le code HTML

//Déclaration et affectation de caractere

• La lecture d'une variable non déclarée provoque

Opérateur Dénomination Effet Exemple Résultat (avec x valant 7)

+= addition deux valeurs et stocke le résultat dans la variable (à gauche)

-= soustrait deux valeurs et stocke le résultat dans la variable

*= multiplie deux valeurs et stocke le résultat dans la variable

/= divise deux valeurs et stocke le résultat dans la variable

Opérateur Dénomination Effet Syntaxe Résultat (avec x valant 7)

++ Incrémentation Augmente d'une unité la variable x++ 8

-- Décrémentation Diminue d'une unité la variable x-- 6

Vérifie qu'une variable est

Vérifie qu'une variable est

Vérifie qu'une variable est

Vérifie qu'une variable est Retourne 1 si X est

opérateur de Vérifie qu'une variable est Retourne 1 si X est

Opérateur Dénomination Effet Syntaxe

|| OU logique Vérifie qu'une des conditions est réalisée ((condition1)||(condition2))

Inverse l'état d'une variable booléenne (retourne la valeur

isNaN("un nombre") //retourne true

var jour = new Date("December 17, 1995 03:24:00");

jour = new Date(430054663215);

escape("!&") //retourne %21%26%

Centres d'intérêt liés

Vous aimerez peut-être aussi