Vous êtes sur la page 1sur 51

Technologies du Web

JavaScript

Badi3 bahida 😁
Département: Mathématiques et Informatique

1
Introduction

►JavaScript est utilisé en complément de pages HTML pour:


- Afficher des informations variables telles que la date,
l'heure, etc.,
- Créer des menus dynamiques
- Créer des applications de calcul, …
- Compléter le HTML mais pas pour le remplacer
► JavaScript, c'est du texte...
► Un simple éditeur de texte permet de modifier une page
HTML et d'y insérer des instructions JavaScript

2
► Javascript est un langage de programmation
complètement lié au langage HTML. Javascript est un
langage de scripts qui incorporé aux balises HTML, permet
d'améliorer la présentation et l'interactivité des pages
Web. Ces scripts vont être gérés et exécutés par le
navigateur, au niveau client, sans devoir faire appel aux
ressources du serveur.

► La page HTML devra toujours contenir les deux balises


spécifiques et indispensables

<script language="JavaScript">

......... 3
Le code JavaScript s’intègre de deux manières 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.
- C'est la méthode la plus simple et la plus fréquemment utilisée
par les développeurs de sites Internet.
2. Insertion comme un module externe
Entrée et sortie de données avec JavaScript:
3 types de boites de messages peuvent être affichés en utilisant JavaScript :
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 4

page WEB
Entrée et sortie de données avec JavaScript:
Exemple: Tester le code suivant
<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour GI- FPT <Br>
2021-2022 <Br>
<script language= "javascript" >
alert('GI4-2022- FPT');
document.write (
prompt('quel est votre nom ?','Indiquer votre nom ici')
);
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html> 5
Entrée et sortie de données avec JavaScript:
Lire/Écrire
prompt(): Ouvre une boîte de dialogue avec une zone de saisie et 2
bouton : OK et Annuler, rend l’information lue
alert (): Permet d’écrire un message dans une fenêtre
Exemple : lire-ecrire.html
<html>
<head><title>Programme In1</title></head>
<body>
<script language="JavaScript">
<!--
annee=prompt('En quelle année sommes-nous ? ');
alert('Vous avez répondu : ' + annee);
//-->
</script>
</body>
</html>
6
Règles générales:
- 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 y 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 (*/)

7
► JavaScript est
- un langage orienté objet
- destiné à créer de "petits" programmes appelés script
- intégrés aux pages HTML
- directement exécutés par un programme navigateur
► JavaScript est sans relation directe avec le langage Java
► a été créé par la société NetScape
► intégré à NetScape Navigator pour le première fois en 1996
► standardisé par l'ECMA = organisme de standardisation suisse,
en 1997
(European Computer Manufacturers Association)
8
JavaScript et les autres langages
Javascript
• Code intégré dans la page html
• Code interprété par le navigateur
• Codes de programmation simples, dont les applications limitées
• Code source visible

Java
• Code source compilé avant son exécution
• Langage de programmation beaucoup plus complexe mais
plus performant

9
Les objets manipulés par Javascript
Pour pouvoir accéder et manipuler les différents éléments d’une
page, Javascript va la diviser en objets : fenêtre, document,
formulaire, radio, bouton, etc. (voir l’exemple de la figure ci dessous).

[window].document.form.radio[0]. 10
Ces objets sont organisés en hiérarchie (la fenêtre contient le
document, ce dernier contient le formulaire qui contient à son tour
les éléments radio, bouton et texte, …
Pour accéder à un objet, il faudra donner le chemin complet de
l'objet en allant du contenant le plus extérieur jusqu’à l'objet
référencé. Par exemple, pour accéder au bouton radio « semaine »,
le chemin est : [window].document.form.radio[0]. Notons que
l'objet window est facultatif, car il occupe la première place dans la
hiérarchie, il est repris par défaut par Javascript.

11
Chaque objet manipulé par Javascript est décrit par un ensemble de
propriétés (attributs). Pour accéder aux propriétés d’un objet, on
utilise la syntaxe classique suivante:
Nom-de-l'objet.Nom-de-la-propriété

Exemple : Pour changer la couleur du fond de la page, il est possible


d’affecter la couleur désirée à la propriété « bgColor » de l’objet
«document»: document.bgColor= 'red'. Considérons, le code html
décrivant une page qui contient un formulaire composé de trois
boutons. Un clic sur un des boutons déclenche l’exécution de
l’instruction Javascript de changement de couleur de fond :
onclick="document.bgColor=‘couleur’"

12
Exemple: Tester le code suivant

<html>
<head> </head>
<body bgcolor="blue"> <form name="formulaire">
<input type="button" name="BR" value="Rouge" onclick="document.bgColor= 'red'">
<input type="button" name="BV" value="Vert"onclick="document.bgColor= 'green'">
<input type="button" name="BB" value="Bleu"onclick="document.bgColor= 'blue'">
<input type="button" name="BJ" value="Jaune"onclick="document.bgColor= 'yellow'">
</form>
</body> </html>

13
Les variables
Javascript utilise l’instruction var pour la déclaration d’une variable qui
contient des données qui peuvent être modifiées lors de l'exécution
d'un programme. Un nom de variable doit commencer par une lettre
(alphabet ASCII) ou le signe_ et se composer de lettres, de chiffres et
des caractères _ et $ (à l'exclusion du blanc). Le nombre de caractères
n'est pas précisé. Pour rappel Javascript est sensible à la case (attention
au majuscule et minuscule).
Variable basique
Pour une variables basique (numérique, chaîne de caractères, booléen,
null, etc.) il ne faut pas déclarer le type. Le navigateur le détecte
automatiquement. Des exemples de déclaration de variables :
var ville = "Rabat" ;
var age = 25 ;
Remarque : une variable peut être déclarée d’une manière implicite (sans utiliser
var), on écrit directement le nom de la variable suivi de la valeur que l'on lui attribue.
Exemple:
salaire = 5500
Prenom = "Omar" 14
Si une valeur est affectée à une variable sans que cette dernière ne
soit déclarée, alors Javascript la déclare automatiquement.

Variable du type Objet


Javascript intègre d’origine plusieurs types d’objets. La déclaration
d’une variable de type objet se fait toujours en utilisant var. Pour
créer un objet il faut utiliser l’instruction new suivie du type de l’objet.

Par exemple, pour la gestion des dates, Javascript dispose d’un objet
Date. Pour créer une variable de type Date, il faut procéder comme
suite :
var Anniverssaire = new Date() ;

15
Tableaux
Dans Javascript les tableaux sont considérés comme des
objets. Le premier élément du tableau est indexé à 0. Il est
possible de déclarer un tableau sans dimension fixe, sa taille
sera adaptée selon son contenu. Des exemples de
déclaration de tableaux :
var tableauI = new array(10) ; // tableau de 10 éléments
var tableauII = new array ; // tableau de dimension non fixe
Pour accéder au éléments du tableau :
tableauI[0] = 12 ; tableauI[1] = 7; etc.
- var Longueur = tableauI.length ; // retourne la longueur
du tableauI

16
L’objet de type document
La page html qui s’affiche dans le navigateur est un objet de type
document. Cet objet possède un certain nombre de méthode. Par
exemple, la méthode write() permet d’écrire dans le document.
Par exemple, pour afficher en gras sur la page le message suivant
"Université : Ibn Zohr" :
var univ = "Ibn Zohr" ;
document.write("<B> Université : </B>" + univ ) ;
<html> <head><title>Test</title></head>
<body> <script type="text/javascript">
<!--
var a = "T" ;
document.write("<B> Ville : </B>" + a ) ;
//-->
</script>
</body>
</html>
17
Pour la mise en forme du texte à afficher, soit on utilise les balises
Html classiques de mise en forme pour formater le texte comme c’est
le cas ci dessus, soit on utilise des méthodes associées aux chaînes de
caractères qui sont résumées dans le tableau ci dessous en
considérant l’affichage de la variable ville contenant la chaîne de
caractère "Rabat" :
var ville = "Rabat" ;
document.write("<B> ville </B>" ) ; document.write( ville.bold()) ;
document.write("<BIG> ville </BIG>" ) ; document.write( ville.big()) ;
document.write("<SMALL> ville </SMALL>" ) ; document.write( ville.small()) ;
document.write("<BLINK> ville </BLINK>" ) ; document.write( ville.blink()) ;
document.write("<FONT COLOR= ‘red’> ville document.write( ville.fontcolor("red" ))
</FONT>" ); ;
document.write("<FONT SIZE= 3> ville </FONT>" ) ; document.write( ville.fontsize(3)) ;
Etc. Etc.

18
Exemples:
<html>
<head><title>Test</title>
<script type="text/javascript"> <html>
document.write("<B> Taroudant <head><title>Test</title>
FPT GI4 </B>" ); <script
</script> type="text/javascript">
</head> <!--
<body> var ville = " Taroudant " ;
</body> document.write(ville.bold());
</html> //-->
</script>
</head>
<body>
</body>
</html>

19
De même, il existe aussi d’autres instructions Javascript de formatage
du document :
Instruction Description
Document.bgColor = "#FFFFFF" ; Spécifier couleur de fond d’écran
Document.fgColor = "#000000" ; Spécifier couleur d’avant plan
Document.alinkColor = "#FFFFFF" ; Spécifier couleur du lien actif
Document.linkr = "#FFFFFF" ; Spécifier couleur d’un lien
Etc. Etc.

20
Exemple : Tester le code Html/Javascript suivant :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
function getDt(){
dt=new Date();
hrs=dt.getHours();
min=dt.getMinutes();
sec=dt.getSeconds();
tm= hrs+":"+ min+":" +sec+" ";
document.horloge.display.value=tm;
}
// -->
</SCRIPT>
</HEAD>
<BODY onload = "getDt()"> <FORM name="horloge">
<INPUT TYPE="text" NAME="display" SIZE=15 VALUE ="">
</FORM> </BODY>
</HTML>
21
La structure d’un script
Le javascript a une structure de programmation proche du langage C :
test conditionnel (if then else), les boucles (for, while, etc.), les
opérateurs, … etc.
Fonctions
Pour déclarer ou définir une fonction, on utilise le mot (réservé)
function.
La syntaxe d'une déclaration de fonction est la suivante :
function NomDeLaFonction (LesArguments) {
// code des instructions ...
return ValeurDeRetour
}
function cube(nombre) {
var cube = nombre*nombre*nombre
return cube; }
22
Les événements
Passons en revue différents événements implémentés en Javascript.

Description Evénement
Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément. Clik
Lorsque la page est chargée par le navigateur Load
Lorsque l'utilisateur quitte la page Unload
Lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre MouseOver
élément
Lorsque le pointeur de la souris quitte un lien ou tout autre élément MouseOut
Lorsque un élément de formulaire est l’élément activé ayant le focus Focus
Lorsque un élément de formulaire perd le focus Blur
Lorsque la valeur d'un champ de formulaire est modifiée Change
Lorsque l'utilisateur sélectionne un champ dans un élément de formulaire Select
Lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire Submit

23
Pour être efficace, il faut qu'à ces événements soient associées les
actions prévues (appel de fonction).
C'est le rôle des gestionnaires d'événements. La syntaxe est
onévénement="fonction()"

<HTML> <HEAD> <SCRIPT LANGUAGE='Javascript'>


function bienvenue() {
alert("Bienvenue à cette page");
}
function au_revoir() {
alert("Au revoir");
} </SCRIPT>
</HEAD>
<BODY onLoad=”bienvenue()” onUnload=”au_revoir()”>
<FORM>
<INPUT TYPE="button" VALUE="Cliquez ici" onClick="alert('Vous avez
bien cliqué ici')">
</FORM> </BODY> </HTML> 24
Ci dessous la liste des objets auxquels correspond des
gestionnaires d'événement bien déterminés.
Objets Gestionnaires d'événement disponibles
Fenêtre onLoad, onUnload
Lien hypertexte onClick, onmouseOver, on mouseOut
Elément de texte onBlur, onChange, onFocus, onSelect
Elément de zone de texte onBlur, onChange, onFocus, onSelect
Elément bouton onClick
Case à cocher onClick
Bouton Radio onClick
Liste de sélectionon onBlur, onChange, onFocus
Bouton Submit onClick
Bouton Reset onClick

25
Exemple : Tester le code Html/Javascript suivant :

<HTML>
<HEAD>
<SCRIPT language="Javascript">
function message(){
alert("SALUT GI4-2022 FPT");
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="" onmouseOver="message()">message important</A>
</BODY> </HTML>

26
Les formulaires
Un formulaire est l'élément html déclaré par les balises
<FORM></FORM>. Un formulaire contient un ou plusieurs éléments
que nous appellerons des contrôles (widgets). Ces contrôles sont
notés par exemple par la balise <INPUT TYPE= ...>. Il faut noter qu'en
Javascript, l'attribut NAME="nom_du_formulaire" a toute son
importance pour désigner le chemin complet des éléments.
En outre, les attributs ACTION et METHOD sont facultatifs pour autant
que vous ne faites pas appel au serveur.

27
Exemple : Ligne de texte. Tester le code Html/Javascript suivant :

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function controle(form1) {
var test = document.form1.input.value;
alert("Vous avez tapé : " + test); }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Contrôler"
onClick="controle(form1)">
</FORM>
</BODY>
</HTML>
28
Exemple : Bouton. Tester le code Html/Javascript suivant :

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function afficher(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE=""> Zone de texte d'entrée <BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Afficher"
onClick="afficher(form2)"> <BR>
<INPUT TYPE="text" NAME="output" VALUE=""> Zone de texte de sortie
</FORM>
</BODY>
</HTML>
29
Exemple : Boutons radio. Tester le code Html/Javascript suivant :

<HTML> <HEAD>
<SCRIPT language="javascript">
function choixprop(form3) {
if (form3.choix[0].checked) { alert("Vous avez choisi la proposition " + form3.choix[0].value) };
if (form3.choix[1].checked) { alert("Vous avez choisi la proposition " + form3.choix[1].value) };
if (form3.choix[2].checked) { alert("Vous avez choisi la proposition " + form3.choix[2].value) };
}
</SCRIPT> </HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1 Master1<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro 2 Master2<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3 Master3<BR>
<INPUT TYPE="button" NAME="but" VALUE="Quel et votre choix Merci?"
onClick="choixprop(form3)">
</FORM>
</BODY>
</HTML>

30
Exemple : Liste de sélection. Testez le code html/Javascript suivant :

<HTML>
<HEAD>
<script language="javascript"> function liste(form5) {
alert("L\'élément GI" + (form5.list.selectedIndex + 1)); }
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix : <FORM NAME="form5">
<SELECT NAME="list">
<OPTION VALUE="1">Elément GI1
<OPTION VALUE="2">Elément GI2
<OPTION VALUE="3">Elément GI3
</SELECT>
<INPUT TYPE="button"NAME="b" VALUE="Quel est l'élément retenu?"
onClick="liste(form5)">
</FORM>
</BODY>
</HTML>
31
Exercice : Ecrire QCM composé de questions avec réponses sous
forme de choix option et des questions avec des choix à partir de liste.
Un bouton "Résultat" permet de donner le nombre de réponses
correctes.

Exercice : réalisez une commande composée d’un certains nombre


cinq articles au maximum. Les choix de chaque se fait sur une liste des
cinq articles. Pour chaque article choisi, l’utilisateur introduit la
quantité commandée. Automatiquement, le montant de chaque
article est affiché à côté de celui-ci. Quant un item de la commande
n’est pas choisi (choix proposé par défaut est « Aucun ») le montant
est 0. Un bouton total commande donne le montant total de la
commande.

32
Exercice : Ecrire un questionnaire demandant le sexe, la tranche d'âge,
le système d'exploitation, les langages de programmation connus, le
niveau en HTML et les besoins de formation. Un bouton "Envoi"
permet d'envoyer les réponses par E-Mail après confirmation d'un
résumé des choix.

33
Exercice: Tester le code suivant:
<html>
<head>
<title> Exemple javascript</title>
<!-- balise de script -->
<script language="JavaScript">
// definition d'une fonction somme
function somme(n) {
var sum=0;
for (i=1; i<=n; i++) {
sum+=i
// ecriture d'une chaine de caractere dans le document courant
document.write("Pour i = ", i, "---> somme = ", sum, "<br/>");
}
return sum;
}
</script>
</head>
<body>
<script>
// boite de dialogue avec la fonction prompt
var nombre=prompt("Somme jusqu'a ?", 10);
document.write("Somme = ", somme(nombre), "<br/>");
</script>
</body>
</html>
34
Éléments de JavaScript dans des repères HTML

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function carre() {
var resultat = document.formulaire.saisie.value *
document.formulaire.saisie.value;
alert("Le carré de " + document.formulaire.saisie.value + " = " + resultat);
}
//-->
</script>
</head>
<body>
<form name="formulaire" action="">
<input type="text" name="saisie" size="3">
<input type="button" value=Calculer le carré" onClick="carre()">
</form>
</body>
</html> 35
Éléments de JavaScript dans des repères HTML

36
JavaScript dans des fichiers distincts
Fichier carre.html
<html>
<head>
<title>Test JavaScript</title>
<script src="carre.js" type="text/javascript">
</script>
</head>
<body>
<form name="formulaire" action="">
<input type="text" name="saisie" size="3">
<input type="button" value="Calculer le carré" onClick="carre()">
</form>
</body>
</html>
Fichier JavaScript carre.js
function carre() {
var resultat = document.formulaire.saisie.value *
document.formulaire.saisie.value;
alert("Le carré de " + document.formulaire.saisie.value + " = " + resultat); } 37
Exemple (script interne)

test.html
<html>
<body>
<h3>Table des factorielles</h3>
<script language="JavaScript">
var i; // Indice de boucle
var fact = 1; // Valeur de 0!
for (i=1; i<=9; i++) {
fact *= i;
document.write (i + "! = " + fact + "<br>");
}
</script>
</body>
</html>

38
exemple.html

<html>
<head>
</head>
<body>
<br>
Ceci est une page HTML.
<br>
<script language="JavaScript">
document.write("Ceci est un script JavaScript inséré dans cette
page !")
</script>
<br>
Le HTML reprend la main.
</body>
</html>
39
Offrir une interactivité à une page HTML
<html>
<head>
<script language="JavaScript">
function bonjour() { alert("Bonjour!"); }
</script>
</head>
<body>
<form> <input type="button" name="unBouton" value="Cliquez ici"
onClick="bonjour()">
</form>
</body>
</html>
Commentaire
Lors du chargement de la page
la fonction est mise en mémoire
La page est lue
La fonction est exécutée dès lors que l'utilisateur appuie sur le bouton
(Fonction OnClick)
OnClick="bonjour()" indique au navigateur que sur le clic du bouton il
devra exécuter la bonjour
Le "Alert" de la fonction ouvre une boîte de dialogue dans laquelle 40
s'affiche le texte entre doubles quotes.
Exemple d'appel de fonction avec variables

<HTML>
<HEAD>
<TITLE>Un script tout simple</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var a, b;
function remplirA (objetTransmis){a=objetTransmis.value ;}
function remplirB (objetTransmis){b=objetTransmis.value ;}
function calculer(form) {form.resultat.value= a*b;}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="MonFormulaire"><BR>
Donnez a :
<INPUT TYPE=TEXT NAME="a" SIZE=4 ONCHANGE="remplirA(this)"><BR>
Donnez b :
<INPUT TYPE=TEXT NAME="b" SIZE=4 ONCHANGE="remplirB(this)"><BR>
<INPUT TYPE=BUTTON NAME="leBouton" VALUE="calculer"
ONCLICK="calculer(this.form)"><BR>
a x b = <INPUT TYPE=TEXT NAME="resultat" SIZE=4>
</FORM> </BODY> </HTML> 41
Exemple d'appel de fonction avec variables

<!doctype html>
<html>
<head>
<script>
function somme(){
var nbr1, nbr2, sum;
nbr1 = Number(document.getElementById("nbr1").value);
nbr2 = Number(document.getElementById("nbr2").value);
sum = nbr1 + nbr2;
document.getElementById("sum").value = sum;
}
</script>
</head>
<body>
<input id="nbr1"> + <input id="nbr2">
<button onclick="somme()">Calculer la somme</button>
= <input id="sum">
</body>
</html>

42
Exemple (script externe)
test2.html
<html>
<body>
<h1>Table des factorielles</h1>
<script language="JavaScript" src= "test3.js">
</script>
</body>
</html>

test3.js
var i; // Indice de boucle
var fact = 1; // Valeur de 0!
for (i=1; i<=9; i++) {
fact *= i;
document.write (i + "! = " + fact + "<br>");
}
43
<html><head><title>programme </title></head>
<body>
<form name="lire">
Entrez un nombre :
<input type="text" name="nbre" size="3">
<input type="button" name="double" value="OK"

onClick="JavaScript:document.lire.aff.value=2*Number(document.lire
.nbre.value);">
résultat= :
<input type="text" name="aff" size="8">
</form>
</body></html>

44
Les fonctions prédéfinies (1)
eval: Cette fonction exécute un code Javascript à partir d'une chaîne de caractères

<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<SCRIPT LANGUAGE="JavaScript">
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>
</body>
</html>

45
Les fonctions prédéfinies (2)
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

<html>
<head>
<title> une page simple </title>
</head>
<body>
<script language="Javascript">
document.write(isFinite(123)+ "<br>");
document.write(isFinite(-1.23)+ "<br>");
document.write(isFinite(5-2)+ "<br>");
document.write(isFinite(0)+ "<br>");
document.write(isFinite("Hello")+ "<br>");
document.write(isFinite("2005/12/12")+ "<br>");
</script>
</body>
</html> 46
Les fonctions prédéfinies (3)
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 ).
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).
number: Convertit l'objet spécifié en valeur numérique
string: Convertit l'objet spécifié en chaîne de caractères

47
Les Objets
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".


- La fenêtre du navigateur se nomme "window"
- La page HTML est un autre objet, que l'on appelle "document".
- Un formulaire à l'intérieur d'un "document", est aussi un objet.
- Un lien hypertexte dans une page HTML, est encore un autre objet. Il
s'appelle "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

48
Exemple d'application

- Calculatrice

49
Exercice :
Utiliser les méthodes Javascript prompt() et alert() pour demander à
l’utilisateur deux nombres puis afficher leur somme.

Correction:
<script language="JavaScript">
var a = prompt("Entrez le premier nombre");
var b = prompt("Entrer le deuxième nombre");
var somme = parseInt(a) + parseInt(b);
document.write("La somme de "+a+" et "+b+" égal à "+ somme);
</script></body></html>

50
Exercice:
Ecrire une page HTML contenant un formulaire. Ce formulaire
contient un bouton. Le click sur le bouton engendre la modification de
la couleur de l’arrière plan de la page. Utiliser la commande suivante :
document.bgColor= ‘’#FFFggF’’.
Correction
<script language="javascript">
function modif()
{
document.bgColor="#fffggf";
}
</script> </head><body>
<form>
<input type="button" value="modifier" OnClick="modif()">
</form>
</body>
</html>
51

Vous aimerez peut-être aussi