Scribd
Importer
14 vues14 pages

JavaScript_PPT

JavaScript est un langage orienté objet utilisé pour créer des pages HTML dynamiques et interagir avec les utilisateurs. Il est intégré aux pages HTML et permet d'afficher des informations variables, de créer des menus dynamiques et d'exécuter des scripts sans nécessiter de compilateurs. Les scripts JavaScript peuvent être insérés directement dans le code HTML ou appelés à partir de modules externes.

Transféré par

Yvann Assale
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
14 vues14 pages

JavaScript_PPT

JavaScript est un langage orienté objet utilisé pour créer des pages HTML dynamiques et interagir avec les utilisateurs. Il est intégré aux pages HTML et permet d'afficher des informations variables, de créer des menus dynamiques et d'exécuter des scripts sans nécessiter de compilateurs. Les scripts JavaScript peuvent être insérés directement dans le code HTML ou appelés à partir de modules externes.

Transféré par

Yvann Assale
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 14

Introduction Buts de JavaScript Introduction Buts de JavaScript

JavaScript est utilisé en complément de JavaScript est utilisé en complément de


pages HTML pour : pages HTML pour :
• afficher des informations variables telles que la • Est souvent associé à d'autres technologies ou
date, l'heure, etc., langages, tels que le DHTML et Java
• interagir avec les utilisateurs par le biais de  JavaScript, c'est du texte...
boîtes de dialogue personnalisées • Nul besoin de compilateurs ou d'autres outils
• créer des menus dynamiques spécialisés
• etc. • Un simple éditeur de texte (WordPad, par
exemple) permet de modifier une page HTML et
d'y insérer des instructions JavaScript
ASSALE Adjé Louis JavaScript 1 ASSALE Adjé Louis JavaScript 2

JavaScript - définition JavaScript - définition


JavaScript est JavaScript
• un langage orienté objet • a été créé par la société NetScape
• destiné à créer de "petits" programmes appelés • est intégré à NetScape Navigator pour le
scripts première fois en 1996
• intégrés aux pages HTML • standardisé par l'ECMA = organisme de
• directement exécutés par un programme standardisation suisse, en 1997
navigateur (browser, NetScape Navigator, • Norme ECMAScript
Internet Explorer)
• JavaScript est sans relation directe avec le
langage Java
ASSALE Adjé Louis JavaScript 3 ASSALE Adjé Louis JavaScript 4

1
JavaScripts - possibilités JavaScripts - possibilités
Grâce à JavaScript, Grâce à JavaScript,
• il est possible de créer des pages HTML • inter-agir avec les utilisateurs par le biais de
dynamiques boîtes de dialogues personnalisées
• prenant en compte des données de l'utilisateur • créer des menus dynamiques
(transmises au clavier ou par la souris) • etc.
• capturant et conservant ces données dans des • Il existe des éditeurs WYSIWYG capables de
variables ou des objets générer du code JavaScript automatiquement,
• Exemples : _ afficher des informations variables tels que :
telles que la date, l'heure,  WebExpert
• etc.  JavaScriptEditor
 ...
ASSALE Adjé Louis JavaScript 5 ASSALE Adjé Louis JavaScript 6

Écrire un programme en Écrire un programme en


JavaScript... JavaScript...
Consiste à : Consiste à :
• Définir des variables (facultatif) constituées d'un • Placer ces instructions aux bons endroits
nom ( identificateur ), un type (nombre,  balises <SCRIPT></SCRIPT>
caractères…) et d'une valeur (pouvant être  en position "valeur" d'actions de formulaires...
modifiée par des opérateurs) • Attention : Javascript est sensible à la case :
• Accéder aux objets des documents HTML différence entre majuscules et minuscules!
fenêtres, documents, formulaires, contrôles de
formulaires, etc.
• Écrire des instructions réalisant les actions
souhaitées calculs, affichages…

ASSALE Adjé Louis JavaScript 7 ASSALE Adjé Louis JavaScript 8

2
Insertion de code JavaScript Insertion de code JavaScript
dans du code HTML dans du code HTML
Le code JavaScript s'insère le plus Le code JavaScript s'insère le plus
souvent dans la page HTML elle même souvent dans la page HTML elle même
• on peut insérer du code JavaScript en faisant • il est écrit et stocké à son adresse d'appel sous
appel à un module externe forme de texte simple dans un document portant
 Dans ce cas, les Tags deviennent : l'extension .txt
 <script src="URL du module externe"> ….</script> • appel à des modules JavaScript communs à
et doivent être placés entre les Tags <body> et </body>

dans le cas d'une exécution à l'ouverture de la page
plusieurs pages HTML
 ou entre les Tags <head> et </head> de la page HTML pour • Ces balises indiquent au navigateur le lieu où il
une exécution différée
trouvera le code à utiliser pour exécuter le script
• Ce module externe peut se trouver n'importe où
dans le monde. Intérêt de cette méthode
ASSALE Adjé Louis JavaScript 9 ASSALE Adjé Louis JavaScript 10

Exemples /1 Exemples /1
Insérer un script dans du code HTML Insérer un script dans du code HTML
• <html> <script language="JavaScript">
<head> document.write("Ceci est un script JavaScript
</head> inséré dans cette page !")
<body> </script>
<br> <br>
Ceci est une page HTML. Le HTML reprend la main.
<br> </body>
</html>

ASSALE Adjé Louis JavaScript 11 ASSALE Adjé Louis JavaScript 12

3
Exemples /2 Exemples /2
Offrir une interactivité à une page HTML Offrir une interactivité à une page HTML
<html> <form> <input type="button" name="unBouton"
<head> value="Cliquez ici"
<script language="JavaScript"> onClick="bonjour()">
function bonjour() { alert("Bonjour!"); } </form>
</script> </body>
</head> </html>
<body>

ASSALE Adjé Louis JavaScript 13 ASSALE Adjé Louis JavaScript 14

Commentaire ex. 2 Exemple /3


Lors du chargement de la page Récupérer des données transmises par un
• la fonction est mise en mémoire utilisateur
• La page est lue <html>
• La fonction est exécutée dès lors que l'utilisateur <head>
appuie sur le bouton (Fonction OnClick) <script language="JavaScript">
• OnClick="bonjour()" indique au navigateur que function nom(chaine) {alert("Bonjour, "+chaine+"!");}
sur le clic du bouton il devra exécuter la fonction </script>
bonjour
</head>
• Le "Alert" de la fonction ouvre une boîte de
<body>
dialogue dans laquelle s'affiche le texte entre
doubles quotes. Entrez votre nom s'il vous plait:
ASSALE Adjé Louis JavaScript 15 ASSALE Adjé Louis JavaScript 16

4
Exemple /3 Commentaire ex. 3
Récupérer des données transmises par un Dans ce document HTML on a :
utilisateur • un champ de saisie du formulaire dans lequel
<form> l'utilisateur peut entrer son nom
<input type="text" name="EntreNom" • Le 'onBlur' dans la balise <input> indique au
onBlur="nom(this.value)" value=""> navigateur quelle fonction il doit appeler lorsque
quelque chose est saisie dans le formulaire
</form>
• La fonction 'nom(chaîne)' s'exécute
</body>
 quand l'utilisateur 'quitte' le champ de saisie
</html>  ou lorsque qu'il utilise la touche "entrée" après avoir tapé
quelque chose

ASSALE Adjé Louis JavaScript 17 ASSALE Adjé Louis JavaScript 18

Commentaire ex. 3 Exemple /4


Dans ce document HTML on a : <HTML>
• • La fonction prend alors, à travers la commande <HEAD>
'nom(this.value)', la chaîne de caractères qui a été <TITLE>Un script tout simple</TITLE>
entrée. <SCRIPT Language="JavaScript">
• 'this.value' correspond au caractère ou à la valeur function lecture(o) {alert("Vous avez tapé :
saisie dans le champ du formulaire. "+o.monTexte.value);}
</SCRIPT>
</HEAD>
<BODY>

ASSALE Adjé Louis JavaScript 19 ASSALE Adjé Louis JavaScript 20

5
Exemple /4 Exemple /5
<form NAME="MonFormulaire"> Entrez une valeur : Ouvrir des fenêtres
<INPUT Name="monTexte" Type="text" <html>
WIDTH="40"> <head>
<INPUT Type="button" Value="OK" <script language="JavaScript">
onClick="lecture(this.form)">
function ouvrirFenetre() {msg=open("","Fenetre",
</form> "toolbar=no,directories=no,menubar=no");
</BODY> msg.document.write("<HEAD><TITLE>Coucou
</HTML> !</TITLE></HEAD>");
msg.document.write("<CENTER><h1><B>Mais c'est
une fenêtre ouverte...</B></h1></CENTER>");}
ASSALE Adjé Louis JavaScript 21 ASSALE Adjé Louis JavaScript 22

Exemple /5 Commentaire ex. 5


Ouvrir des fenêtres La fonction OuvrirFenetre() crée une
</script> nouvelle fenêtre en appelant la méthode
</head> open
<body> • Les premières doubles-quotes contiennent l'URL de
<form> la page on peut mettre l'adresse d'un document
HTML que l’on veut charger.
<input type="button" name="Bouton"
value="Cliquez-ici“ onClick="ouvrirFenetre()"> • Si on le laisse vide, aucune page ne sera chargée
et l’on peut écrire dans cette fenêtre avec
</form>
JavaScript
</body>
• Les guillemets suivants indiquent le nom de la
</html> fenêtre.
ASSALE Adjé Louis JavaScript 23 ASSALE Adjé Louis JavaScript 24

6
Commentaire ex. 5 Exemple /6
La fonction OuvrirFenetre() crée une utiliser la barre d'état du navigateur
nouvelle fenêtre en appelant la méthode (status)
open <html>
• Les guillemets suivants spécifient les propriétés de <head>
la fenêtre <script language="JavaScript">
• Si vous écrivez toolbar=yes, vous aurez une barre function barreDesStatuts(blabla) { window.status =
d'outils dans votre fenêtre. blabla;}
</script>
</head>
<body>
ASSALE Adjé Louis JavaScript 25 ASSALE Adjé Louis JavaScript 26

Exemple /6 Commentaire ex. 6


utiliser la barre d'état du navigateur • On cré deux boutons qui appellent tous les deux la
(status) fonction BarreDesStatuts(Blabla)
<form> • Quand vous regardez la balise <form> après
laquelle les boutons sont créés, l’on peut voir que la
<input type="button" name="look" value="Ecris!"
fonction BarreDesStatuts(Blabla) est appelée
onClick="barreDesStatuts('Bouton effacer pour
• Mais ici on n’envoie pas de variable à la fonction.
supprimer ce texte');">
On indique juste le texte qu’on veut que le
<input type="button" name="erase" value="Efface!" navigateur affiche dans la barre de statut.
onClick="barreDesStatuts('');"> • On peut le voir par ce moyen: la fontion est
</form> appelée et définit la variable Blabla.
</body> </html> • Le second bouton appelle la même fonction
ASSALE Adjé Louis JavaScript 27 ASSALE Adjé Louis JavaScript 28

7
Exemple d'insertion de code
Commentaire ex. 6 externe
• Sans passage de variable on aurait dû créer deux  Code source JavaScript placé entre
fonctions différentes. <head> et </head> :
• Maintenant, que fait donc la fonction <script src="jsexterne.txt">
BarreDesStatuts(Blabla) ?
</script>
• on écrit juste le contenu de la variable Blabla dans
Code contenu dans le fichier externe jsexterne.txt
la variable window.status
function affiche(){alert("Exemple de code à exécution
• Cela est fait par window.status = Blabla
différée par appel à un module externe .\nCe
• Le fait d'écrire une chaîne vide ('') dans la barre de message ne s'affiche que lorsque vous avez cliqué sur
statut l'efface le bouton \"Evénement\".\n\nCliquez sur OK pour
poursuivre.") }
ASSALE Adjé Louis JavaScript 29 ASSALE Adjé Louis JavaScript 30

Exemple d'insertion de code


externe Variables...
Code source JavaScript du bouton placé Les variables contiennent des données
entre <body> et </body> qui peuvent être modifiées lors de
<form> l'exécution d'un programme
<center> • Chaque variable possède :
<input type="button" name="evenement"  un nom
ex. taille, poids, ...
value="Cliquez ici pour générer un événement" 

 qui doit commencer par une lettre (alphabet ASCII) ou le signe_


onClick="affiche()">  et être composé de lettres, chiffres et des caractères _ et $ (à
</form> l'exclusion du blanc)
 Le nombre de caractères n'est pas précisé
 et une valeur ex. poids=55 ; taille = 1.68 ; doit être
déclarée
ASSALE Adjé Louis JavaScript 31 ASSALE Adjé Louis JavaScript 32

8
Variables... Les objets /1
Les variables contiennent des données • Les pages HTML sont divisées en objets prédéfinis
qui peuvent être modifiées lors de • juxtaposés ou imbriqués les uns dans les autres
l'exécution d'un programme • ex. fenêtres, documents, formulaires, contrôles de
• Chaque variable possède : formulaires,
 soit de façon explicite au moyen du mot réservé var • etc.
 ex. : var taille ; • Hiérarchie : les objets sont juxtaposés ou
 soit de façon implicite : nom_de_la_variable = valeur ; imbriqués les uns dans les autres
• Différence de "visibilité" de la variable dans le • Chaque objet possède un nom, des attributs et
programme Javascript selon son mode et son lieu (éventuellement) des méthodes
de déclaration • Accès à un objet par la notation "point" :
 nom_de_l'objet.nom_de_la_propriété
ASSALE Adjé Louis JavaScript 33 ASSALE Adjé Louis JavaScript 34

Les objets /1 Les objets /2


 Exemples :  Les objets de JavaScript, sont des entités
• o.monTexte.value appartenant au monde des navigateurs et
• document.form.radio[0].checked du langage
• soit pré définis dans le langage
• soit créés par le programmeur
• Par exemple, le navigateur utilisé pour voir un
page est un objet qui s'appelle "navigator"
• La fenêtre du navigateur dans laquelle s'affiche un
page HTML, se nomme "window"
•
ASSALE Adjé Louis JavaScript 35 ASSALE Adjé Louis JavaScript 36

9
Les objets /2 Attributs et méthodes
 Les objets de JavaScript, sont des entités  Les Attributs des objets sont leurs
appartenant au monde des navigateurs et caractéristiques (nom, forme, couleur, ...)
du langage • exemple : document. MonFormulaire.envoi.value
• La page HTML elle-même est un objet appelé • dont la valeur est : "ENVOYER"
"document" • document. MonFormulaire.envoi.value =
• Un formulaire à l'intérieur d'un "document" est "ENVOYER"
aussi un objet appelé "form" • Les Méthodes des objets sont des fonctions qu'on
• Un lien hypertexte dans une page HTML est un peut faire exécuter
objet appelé "link" • exemple : document.write('Bonjour..!');
• etc...
ASSALE Adjé Louis JavaScript 37 ASSALE Adjé Louis JavaScript 38

Les objets d'une page HTML


Actions, opérations Exemple
• Les actions (calculs, affichages…) peuvent être <html> <body>
effectuées sur les données <h2 align=center><i>Page HTML</i></h2>
• Les données appartiennent à l'un des types <form name="MonFormulaire">
suivants : <input type="text" name="monTexte" width="40">
 Type Description Des nombres Tout nombre entier ou
avec virgule tel que 22 ou 3.1416 Case de texte<br>
 Chaque type de données possède son ensemble <center>
d'opérateurs propre (cf. liste des opérateurs) <input type="button" name="envoi"
 Des chaînes de caractères Toute suite de caractères value="Envoyer">
comprise entre guillemets telle que "suite de caractères"
</center>
 Des booléens Les mots true pour vrai et false pour faux
 Le mot null Mot spécial qui représente pas de valeur
</form> </body> </html>
ASSALE Adjé Louis JavaScript 39 ASSALE Adjé Louis JavaScript 40

10
Structure objet de l'exemple Structure objet de l'exemple
Liste des objets notion d'Objet avec sa Hiérarchie :
• 1er l'objet document (Famille d'Objets : objet "père", objet
 contient d'autres objets : "fils", …)
• 2e l'objet formulaire • Pour accéder à un objet : donner le chemin
 contenu dans document complet de l'objet en allant du contenant le plus
 contient : extérieur jusqu'à à l'objet référencé : ( chaque
 3e une zone de texte libre (text) élément ou objet étant séparé par un point)
4e un bouton
document. MonFormulaire.envoi.value="ENVOYER"

ASSALE Adjé Louis JavaScript 41 ASSALE Adjé Louis JavaScript 42

Liens JavaScript-pages HTML Fonctions


JavaScript décompose les pages HTML en  Sont déclarées entre les balises
objets <SCRIPT></SCRIPT>
• et permet d'accéder à chacun de ces Objets, d'en • ex.
retirer des informations et de les manipuler grâce à <SCRIPT Language="JavaScript">
leurs function CestDAccord() {alert("formulaire accepté");}
 attributs
</SCRIPT>
 et leurs méthodes
• sont "appelées" à partir des pages hTML
• pour effectuer des actions sur les objets on utilise
(préférentiellement) des fonctions (et des variables) • ex.
INPUT Type="submit" Value="Envoyer"
onClick="CestDAccord()">
ASSALE Adjé Louis JavaScript 43 ASSALE Adjé Louis JavaScript 44

11
Exemple d'appel de fonction Exemple d'appel de fonction
<HTML> Donnez a :<INPUT TYPE=TEXT NAME="a"
<HEAD> SIZE=4"><BR>
<SCRIPT LANGUAGE="JavaScript"> Donnez b :<INPUT TYPE=TEXT NAME="b"
<!-- function calculer(form) {form.resultat.value= SIZE=4><BR>
form.a.value*form.b.value; } <INPUT TYPE=BUTTON NAME="leBouton"
// --> VALUE="calculer“
ONCLICK="calculer(this.form)"><BR>
</SCRIPT>
a x b = <INPUT TYPE=TEXT NAME="resultat"
</HEAD> SIZE=4>
<BODY> </FORM>
<FORM NAME="MonFormulaire"><BR> </BODY> </HTML>
ASSALE Adjé Louis JavaScript 45 ASSALE Adjé Louis JavaScript 46

Exemple d'appel de fonction avec Exemple d'appel de fonction avec


variables variables
<HTML> </SCRIPT>
<HEAD> </HEAD>
<TITLE>Un script tout simple</TITLE> <BODY>
<SCRIPT LANGUAGE="JavaScript"> <FORM NAME="MonFormulaire"><BR>
<!-- var a, b; function remplirA Donnez a :
(objetTransmis){a=objetTransmis.value ;} <INPUT TYPE=TEXT NAME="a" SIZE=4
function remplirB ONCHANGE="remplirA(this)"><BR>
(objetTransmis) {b=objetTransmis.value ;} Donnez b :
function calculer(form) {form.resultat.value= a*b;} <INPUT TYPE=TEXT NAME="b" SIZE=4
// --> ONCHANGE="remplirB(this)"><BR>
ASSALE Adjé Louis JavaScript 47 ASSALE Adjé Louis JavaScript 48

12
Exemple d'appel de fonction avec
variables Boîtes de dialogue
<INPUT TYPE=BUTTON NAME="leBouton" 3 types : alert(), prompt(), et confirm()
VALUE="calculer“ ONCLICK="calculer(this.form)"> • alert : ouvre une petite fenêtre avec le texte
<BR> indiqué et un bouton OK
a x b = <INPUT TYPE=TEXT NAME="resultat"  qui reste ouverte jusqu'au clic de l'utilisateur sur le
SIZE=4> bouton
</FORM>  alert (Message à afficher')

</BODY> • prompt (=boite de saisie) : contient 2 boutons : OK


</HTML> et ANNULER (ou Cancel)
 prompt ( 'message' [,texte d'entrée par défaut] )
 ex. : var permis = prompt ('Possédez-vous le Permis de
conduire?','Oui');
ASSALE Adjé Louis JavaScript 49 ASSALE Adjé Louis JavaScript 50

Boîtes de dialogue JavaScript - exemple "menu"


3 types : alert(), prompt(), et confirm() <SCRIPT LANGUAGE="JavaScript">
• confirm (=boite de message) <!-- function gotoPage (form) {if
 affiche le message passé entre les parenthèses (form.way.selectedIndex == 0)
 Comporte 2 Boutons (OK et ANNULER (ou Cancel) parent.location="http://www.lien1.com/"; if
 Retourne VRAI (true) si l'utilisateur clique sur OK et (form.way.selectedIndex == 1)
FAUX (false) s'il clique sur ANNULER parent.location="http://www.lien2.com/"; if
 ex. réponse = confirm('Voulez-vous tester ?') ? return (form.way.selectedIndex == 2)
true : return false ; parent.location="http://www.lien3.com/"; }
• Où http://www.lien1.com/, http://www.lien2.com/
et http://www.lien3.com/ ,
• document.write('<form name="menu">');
ASSALE Adjé Louis JavaScript 51 ASSALE Adjé Louis JavaScript 52

13
JavaScript - exemple "menu" JavaScript - exemple "date"
document.write('<select name="way“ size="3" <HTML>
onChange="gotoPage(this.form)">'); <HEAD>
document.write('<option>lien 1'); <TITLE>Script de date</TITLE>
document.write('<option>lien 2'); </HEAD>
document.write('<option>lien 3'); <BODY>
document.write('</select>'); <script>
document.write('</form>'); // --> // un essai de date inspiré d’un site Web
</SCRIPT> var maDate=new Date()
• sont les URL des liens du menu et lien1, lien2 et var jour=maDate.getDate()
lien3 leurs intitulés respectifs. var mois=maDate.getMonth()+1
ASSALE Adjé Louis JavaScript 53 ASSALE Adjé Louis JavaScript 54

JavaScript - exemple "date"


var annee=maDate.getYear()
if (jour<10) jour="0"+jour
if (mois<10) mois="0"+mois
document.write("<small><font color='000000'
face='Arial'><b>"+jour+" /
"+mois+" / "+annee+"</b></font></small>")
</script>
</BODY>
</HTML>

ASSALE Adjé Louis JavaScript 55

14

Vous aimerez peut-être aussi