Base de javascript
Objectifs
L’objectif principal de ce cours est de vous familiariser avec les principes
de base de la programmation.
Comprendre les concepts de la programmation est l’étape
primordiale d’un futur développeur, vient ensuite l’apprentissage d’un langage
de programmation et de son environnement.
Pour éviter un cours trop théorique, nous avons choisi d’introduire dès
le départ un langage de programmation.
Les exemples et les exercices vous permettront de comprendre et
d’appliquer les principes de base dans des cas concrets.
Pour ce cours, nous avons fait le choix d’un langage de programmation
simple et attrayant : le JavaScript.
Le JavaScript est un langage de programmation créé pour le Web et
destiné à rendre les sites Internet plus interactifs (messages
d’alerte, validation de formulaires, menus déroulants, images interverties, …).
Ce que vous allez
voir dans ce cours
Ce cours a pour but de
vous donner une première approche de la programmation, de manière très pratique.
Nous utiliserons le langage
JavaScript pour les exemples et exercices.
A la fin de ce cours, vous
aurez acquis des connaissances
générales sur la programmation et vous serez capable
d’utiliser le langage Javascript pour créer de simples programmes.
Ce que vous n’allez
pas voir dans ce cours
Ce cours n’a pas la
prétention de vous rendre EXPERT
en programmation, ni en un langage en particulier.
Il nous faudrait consacrer
beaucoup plus de temps à cette tâche !
De même, ce cours n’a pas
pour but de vous apprendre toutes
les particularités du langage JavaScript, ni de ce que l’on
appelle le "Dynamic HTML".
Il est toutefois
envisageable, suite à cette formation, d’approfondir ces matières…
Le déroulement du
cours
Dans les premiers modules,
vous appréhenderez la programmation
en général.
A l’aide d’exemples et
d’exercices, vous allez directement approcher "l’univers" de la
programmation.
Ensuite, toujours par la
pratique, vous approcherez plus précisement le langage JavaScripttout en continuant à apprendre
les principes de
base de la programmation.
Fonctionnement du
cours
Le cours est centré sur la mise
en pratique des notions exposées : nous vous proposerons
aussi souvent que possible d'exercer ce que vous avez appris, au travers de questionnaires
et d’exercices pratiques.
Bien sûr, plus vous
ferez d'exercices, plus vous
retiendrez ce qui est présenté.
Nous vous donnerons aussi
accès à des ressources pour aller plus loin dans
les différents thèmes abordés.
Bien que le cours soit
compatible avec les tablettes, nous vous recommandons d’effectuer les
exercices pratiques sur un ordinateur (de bureau ou
portable).
Pour plus de facilité,
nous vous proposons de créer un dossier de départ appelé "monsite".
Vous pouvez placer celui-ci sur votre bureau. Ce dossier sera utilisé durant
toute la formation.
Les prérequis du
cours
Il est certain que vous ne
pouvez pas commencer ce cours sans avoir quelques connaissances de base.
Que devez-vous savoir ?
Une bonne connaissance de l’environnement Web :
- Qu’est-ce qu’une page
Web ?
- Qu’est-ce qu’un
navigateur ?
Une bonne connaissance du langage HTML est
nécessaire !
- Savoir créer une page
HTML
- Connaître les
principales balises HTML (<body>, <head>, <p>, <input>,
…)
- Savoir lire du code HTML
simple
(N’hésitez pas à vous reporter
au cours "Initiation au langage HTML" !)
Le matériel
Voici ce dont vous avez
besoin pour le cours:
- Un éditeur de texte
comme le Bloc-notes,
par exemple
Vous trouverez le Bloc-notes dans le menu Démarrer > Programmes > Accessoires
Vous trouverez le Bloc-notes dans le menu Démarrer > Programmes > Accessoires
- Un navigateur (Internet Explorer de
préférence)
Remarque : Ce cours a
été conçu plus spécifiquement pour le navigateur Internet Explorer sur PC. Le
langage JavaScript, au même titre que le langage HTML, peut présenter quelques
différences d’un navigateur à l’autre (Google Chrome, Internet Explorer,
Firefox…) et d’une plateforme à l’autre (PC, Mac, …).
Les exercices du cours
Les exercices du cours
sont toujours présentés par un énoncé. A la suite de celui-ci, vous trouverez
le nom du fichier entre parenthèses :
(nom du
fichier : ecrire.htm)
Ce qui signifie que vous
développerez vous-même l’exercice et l’enregistrerez sous le nom proposé dans
un dossier particulier créé au préalable.
!!!! N’oubliez pas les règles pour
les noms de fichiers :
A éviter :
· Espaces
· Accents
· Caractères spéciaux (#
"@. ;?-)
(les majuscules/minuscules
n’ont pas d’importance dans l’environnement Windows)
-----------------------------------------------------
1. Objectifs
Pour vous plonger directement dans l’univers de la programmation,
nous vous proposons d’exécuter un premier exercice que vous allez développer de A à Z. Vous allez apprendre à créer, éditer et visualiser un document HTML contenant du code JavaScript. Bien sûr, toutes les étapes seront détaillées et expliquées !
Dans un deuxième temps, vous aurez l’occasion de découvrir quelques exemples de programmes écrits en JavaScript dans des pages HTML.
2. Préparation
Tout au long de
ce cours, vous allez appliquer la matière en effectuant des exercices ; c’est
pourquoi nous vous proposons d’organiser votre travail en
créant un dossier sur votre disque dur. Vous pourrez ainsi stocker et retrouver
tous les exercices. Le nom du fichier sera précisé entre parenthèses après
chaque énoncé.Ouvrez l’explorateur Windows (raccourci : touche Windows + E) et placez-vous sur le disque C. Dans la barre de menu, choisissez l’option Fichier > Nouveau > Dossier. Nommez votre dossier "coursJavascript".
Quels sont les outils dont vous allez avoir besoin pour ce cours ?
Le JavaScript est un langage qui utilise le même environnement que l’HTML, vous utiliserez donc les mêmes outils :
· le Bloc-notes (pour ouvrir le Bloc-notes : menu Démarrer > Programmes > Accessoires > Bloc-notes)
· Microsoft Internet Explorer (version 5 ou supérieure)
Le Bloc-notes (Notepad) sera utilisé pour éditer les documents HTML.
Remarque : Tout éditeur de code HTML peut faire l’affaire ! Sous Windows, il y a l'excellent Notepad++ !!
Le navigateur Microsoft Internet Explorer sera utilisé pour visualiser le résultat.
3. Afficher du texte
Voici l’énoncé
d’un programme simple :Ecrire un programme qui affiche une fenêtre d'alerte contenant le texte "Bienvenue dans l’univers de la BD !" (nom du fichier : alerter.htm).
4. Ecriture du
code
Pour commencer, ouvrez le Bloc-notes et recopiez le code ci-dessous.
Faites bien attention à l’écriture du code, celui-ci doit être en tout
point IDENTIQUE à celui proposé ci-dessous!
Remarque : Pour copier ce code dans son intégralité,
sélectionnez-le et copiez-le dans le presse-papier (clipboard) dont le
raccourci clavier est Ctrl + C (ou clic droit > copier). Il ne vous restera
plus qu’à le coller dans le Bloc-notes (Ctrl + V ou clic droit > coller)
<html>
<head>
<title>
Ecrire un programme qui affiche le texte "Bienvenue dans l’univers
de la BD !"
</title>
<script>
function Main(){
alert("Bienvenue
dans l’univers de la BD !") ;
}
</script>
</head>
<body onload="Main();">
</body>
</html>
Enregistrez le document dans le dossier "coursJavascript" sous
le nom "alerter.htm".
Remarque : Attention à l’extension ".htm" du fichier !
Lorsque vous enregistrez votre document, choisissez "tous les
fichiers" dans la liste "type"sinon votre document risque d’être
sauvé sous le nom "alerter.htm.txt" et sera pris comme un
fichier texte et non un document HTML !!!
Dans l’Explorateur Windows, il est facile de reconnaître une page HTML
d’un simple fichier texte : l’icône du fichier est différente.
5. L’exécution du programme
Visualisons
maintenant le résultat du premier exercice, dans le jargon, on appelle cela
exécuter le programme.Comme pour une simple page HTML, ouvrez le navigateur et allez dans Fichier > Ouvrir… > Parcourir et allez rechercher le fichier "alerter.htm".
Remarque : Vous pouvez également double-cliquer dans l’Explorateur Windows sur le fichier "alerter.htm", il s’ouvrira tout seul dans votre navigateur.
SUPER ! Vous venez d’exécuter votre premier programme !
Si tout se passe bien, vous devriez avoir une fenêtre d’alerte vous affichant le texte "Bienvenue dans l’univers de la BD !".
Une fenêtre d’alerte est une simple fenêtre d’avertissement contenant un message. Le message est le seul élément paramétrable d’une fenêtre d’alerte.
Si vous n’avez pas de fenêtre d’alerte, c’est qu’il y a une erreur dans votre code, il faut éditer le document dans le Bloc-notes et vérifier le code. Faites très attention aux points suivants :
· Les majuscules / minuscules ;
· Les points-virgules ;
· Les guillemets ;
· L’orthographe des mots-clés.
Une fois le code modifié, enregistrez à nouveau votre travail et recommencez cette étape.
Vous pouvez également visualiser le résultat attendu en ligne :
6. Quizz
Quel outil utilise-t-on
pour écrire du code JavaScript ?
Un
éditeur de texte
Un
navigateur
Quel outil utilise-t-on
pour "exécuter un programme" écrit en JavaScript ?
Un
éditeur de texte
Un
navigateur
7. Ce que l’on a fait
Pour que
vous puissiez suivre la démarche du développement de ce code, nous allons
revoir ce code pourvus de commentaires.
Note : Qu’est-ce qu’un
commentaire ? C’est une annotation du développeur qui est complètement
ignorée par le programme (ou par le navigateur dans le cas d’un commentaire
HTML) et qui est utilisée pour rendre le code plus clair ou pour donner
quelques explications sur celui-ci.
Testez
l'utilisation des commentaires! Ajoutez-en dans le fichier
"alerter.htm", vous verrez que les commentaires n’ont aucune
influence sur le programme!
Remarque
:
En HTML, les commentaires s’écrivent comme suit :
En HTML, les commentaires s’écrivent comme suit :
<!-- commentaire HTML -->
En JavaScript, les commentaires sur UNE ligne s’écrivent comme suit :
// commentaire JavaScript sur une
ligne
Quelques exemples de commentaires en JavaScript se trouvent dans les compléments.
Continuons
pour voir le code en détail.
8. Explication 1/5 - Le code complet
Voici le code
complet et commenté de cette première page.<html>
<head>
<title>
Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
</title>
<!-- début du script -->
<script>
// fonction PRINCIPALE appelée au chargement de la page
function Main(){
// ouverture de la fenêtre d’alerte
alert("Bienvenue dans l’univers de la BD !");
}
</script>
</head>
<!-- éxécution du script au CHARGEMENT de la page (onload="") -->
<body onload="Main();">
</body>
</html>
Voyons-le plus en
détail.
9. Explication 2/5 - les balises HTML
En surbrillance,
lignes 1 à 7 et 13 à 18, ce cont les balises HTML de la page.Vous retrouvez les balises <html>, <head>, <title> et <body> que vous utilisez à chaque création de document HTML.
Sont comptés parmi ces éléments HTML :
·
la balise <script></script> :
c'est la balise HTML qui permet de placer le Javascript au sein du HTML,
·
les commentaires HTML : <!-- COMMENTAIRE -->
<html>
<head>
<title>
Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
</title>
<!-- début du script -->
<script>
// fonction PRINCIPALE appelée au chargement de la page
function Main(){
// ouverture de la fenêtre d’alerte
alert("Bienvenue dans l’univers de la BD !");
}
</script>
</head>
<!--exécution du script au CHARGEMENT de la page (onload="") -->
<body onload="Main();">
</body>
</html>
Remarque : en complément, vous pouvez revoir la structure de base d’un
document HTML. 10.
Explication 3/5 - le script
La balise <script> est une balise HTML qui signifie l’intégration d’un
script dans le document HTML : tout ce
qui se trouve entre les balises <script> et </script> doit être écrit en JavaScript.Qu’est-ce qu’un script ?
Un script est une suite d’instructions (ordres) interprétées à l’exécution d’un programme. (vous verrez cela plus en détail dans le module suivant).
<html>
<head>
<title>
Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
</title>
<!-- début du script -->
<script>
// fonction PRINCIPALE appelée au chargement de la page
function Main(){
// ouverture de la fenêtre d’alerte
alert("Bienvenue dans l’univers de la BD !");
}
</script>
</head>
<!--exécution du script au CHARGEMENT de la page (onload="") -->
<body onload="Main();">
</body>
</html>
11. Explication 4/5 - la
fonction Main();
function
Main(){…} est
la fonction
PRINCIPALE du
programme. Tout ce
qui se trouve à l’intérieur des accolades {} fait partie de la fonction Main().Cette fonction est appelée à un certain moment. Ce moment est, dans ce cas-ci, le CHARGEMENT de la page, ligne 16 : <body onload="Main();">
Remarque : "onload" signifie "au chargement".
<html>
<head>
<title>
Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
</title>
<!-- début du script -->
<script>
// fonction PRINCIPALE appelée au chargement de la page
function Main(){
// ouverture de la fenêtre d’alerte
alert("Bienvenue dans l’univers de la BD !");
}
</script>
</head>
<!--exécution du script au CHARGEMENT de la page (onload="") -->
<body onload="Main();">
</body>
</html>
12. Explication 5/5 - l'instruction alert();
alert("Bienvenue dans l’univers de la BD !"); est la commande qui
dit au programme d’ouvrir une fenêtre d’alerte et d’y afficher le texte
"Bienvenue dans l’univers de la BD !".Remarquez que la commande se termine par un ; .
Vous pouvez revoir l´exécution du programme à la page suivante.
<html>
<head>
<title>
Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
</title>
<!-- début du script -->
<script>
// fonction PRINCIPALE appelée au chargement de la page
function Main(){
// ouverture de la fenêtre d’alerte
alert("Bienvenue dans l’univers de la BD !");
}
</script>
</head>
<!--exécution du script au CHARGEMENT de la page (onload="") -->
<body onload="Main();">
</body>
</html>
13. Synthèse
Pour écrire un
programme en JavaScript, il suffit d’ajouter les balises <script></script> dans un document
HTML.Ces balises <script></script> sont généralement placées dans l’en-tête d’une page, cela permet de regrouper le code et de ne pas trop mélanger l’HTML et le JavaScript.
Le code JavaScript sera inséré à l’intérieur de ces balises.
Comme le code JavaScript se trouve dans un document HTML, on peut l’éditer dans n’importe quel éditeur de document HTML. Le plus simple des programmes est le Bloc-notes.
Pour exécuter le programme, il suffit d’ouvrir le document HTML dans un navigateur.
Le langage JavaScript est sensible à la casse, c’est-à-dire aux majuscules/minuscules. La commande alert("Bonjour") est exécutée normalement alors que la commande Alert("Bonjour") produit une erreur.
14. Appliquez : afficher une alerte
Appliquez
directement cette matière en créant un programme similaire à l’aide du bouton
"action" :"Créer un simple programme qui affiche le texte "Bonjour tout le monde !" dans une fenêtre d’alerte."
Le squelette du "programme" est déjà écrit.
Pour vous aider, récupérez le code du programme alerter.htm.
Attention ! Faites bien attention aux :
- fautes de frappe
- majuscules / minuscules
Résultat
Solution
<html>
<head>
<title></title>
<script>
function Main(){
alert("Bonjour tout le monde !");
}
</script>
</head>
<body onload="Main();">
</body>
</html>
15. Afficher du texte dans le document
Voici une
variante du premier exercice :Plutôt que d’afficher le texte "Bienvenue dans l’univers de la BD !" dans une fenêtre d’alerte, affichons-le dans le document (nom du fichier : ecrire.htm).
Pour ce faire, il suffit de changer la commande alert("Bienvenue dans l’univers de la BD !") en document.write("Bienvenue dans l’univers de la BD ! ")
Voici le code modifié :
<html>
<head>
<title>
Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
</title>
<script>
// Intégration d’un script dans le document
function Main(){
// fonction PRINCIPALE appelée au chargement de la page
document.write("Bienvenue dans l’univers de la BD !") ;
// écriture dans le document
}
</script>
</head>
<body onload="Main();">
</body>
</html>
Enregistrez ce
code sous "ecrire.htm" et ouvrez le fichier…
16. Pourquoi Main() ?
Voici encore un
commentaire sur le code que nous venons de découvrir.Nous avons vu que le code était englobé dans la fonction Main(){ }.
Cette fonction est utilisée dans un but pratique : elle permet d'exécuter le programme lors de différents événements. Ainsi par exemple, si vous remplacez onload par onunload dans le code, le programme s'exécutera non pas au chargement de la page mais lorsque l'utilisateur quitte celle-ci. Dans les compléments, vous verrez différents exemples de ce type.
D'autre part, au module 2, vous verrez que le programme peut aussi être exécuté lorsque l'utilisateur clique sur un bouton, dans un formulaire.
appeler
la fonction cocotte() au lieu de main() fonctionnerait tout autant. Mais par
convention, il est conseillé d'utiliser main(). À vous de voir...
17. Fonction principale
L’utilisation de
la fonction Main() est également utile pour la prise en
main d’un langage de programmation car de nombreux langages, comme par exemple
le langage Java, nécessitentl’utilisation d’une fonction dite
"principale".Dans le complément "une solution encore plus simple", vous verrez qu'on peut cependant travailler sans cette fonction.
18. Quizz
La commande qui permet
d’afficher un texte dans une fenêtre d’alerte est…
Main()
alert()
document.write()
La commande qui permet
d’afficher un texte dans le document est …
Main()
alert()
document.write()
19. Synthèse
Un programme
écrit en JavaScript est en fait une simple page HTML contenant :· des balises HTML
· du code JavaScript
On différencie le code HTML et le code JavaScript en plaçant ce deuxième entre les balises HTML <script> et </script>.
Pour acquérir de bonnes habitudes de programmation, on utilise une fonction "principale" que l’on appelle communément "Main()". Cette fonction est appelée à un certain moment dans l’affichage de la page (par ex. : onload qui est l’événement "au chargement de la page").
_____
20. Mémo
Préparons-nous
Afin de
travailler dans les meilleures conditions possibles, voici ce dont nous aurons
besoin pour ce cours:- Le bloc notes (ou Notepad++, disponible ici: https://notepad-plus-plus.org/fr/)
- Un navigateur (Internet Explorer, Chrome, Firefox, Safari, ...)
N'oubliez pas qu'une fois votre fichier sauvegardé, vous devez modifier son extension en .htmà la place de .txt (le .html est également autorisé).
Lancez votre premier programme
Une fois votre première
page créée, vous pouvez avoir envie de la tester. Il vous suffit pour cela
de double-cliquer sur le fichier html,
et votre premier programme s'exécutera.Si rien ne se passe, n'oubliez pas de vérifier les points suivants:
· Les majuscules / minuscules, le langage Javascript est en effet sensible à la casse
· Les points-virgules
· Les guillemets
· L’orthographe des mots-clés
Les commentaires
Ceux-ci sont
différents, en fonction de la partie de la page dans laquelle on se trouve.Si vous êtes dans le code HTML, les commentaires s’écrivent comme ceci :
<!-- commentaire HTML -->
En JavaScript, les commentaires sur UNE ligne s’écrivent comme suit :
// commentaire JavaScript sur une ligne
Sur plusieurs lignes, il suffit de commencer par /* et de finir par */ comme dans cet exemple:
/*
Si vous lisez ceci
votre cours de JavaScript
avance énormément!
*/
Le code
Vous avez vu tout
au long de ce premier chapitre comment le JavaScript se marie au
langage HTML.Pour rappel, voici le squelette d'une page HTML contenant du JavaScript :
<html>
<head>
<title>
Titre de la page
</title>
<script>
</script>
</head>
<body>
</body>
</html>
La différence
avec une "simple" page HTML vient donc de ces balises: <script></script>
La fonction Main();
Choisir le
nom Main() n'est qu'une convention, vous pouvez l'appeler LaFraise(), ou comme il vous plaira,
tant que vous respectez son nom (et les majuscules)
quand vous y faites référence dans votre programme.Cette fonction englobe votre code. Elle est utilisée dans un but pratique : elle permet d'exécuter le programme lors de différents événements. Si vous remplacez par exemple onload par onunload dans le code, le programme s'exécutera non pas au chargement de la page mais lorsque l'utilisateur quitte celle-ci.
Afficher du texte
1. Pour afficher
du texte dans une fenêtre d’alerte (attention aux majuscules) : alert("") ;2. Pour afficher du texte dans le document : document.write("") ; C'est tout simple, on part du "document", et on utilise sa fonction "write". Ce qui est inscrit entre guillemets sera affiché dans le document (la page web).
Les événements
Dans la partie
HTML, on peut choisir de déclencher une fonction Javascript lors d'un
événement.Voici quelques exemples d’événements :
- <body onload="Main() ;"> // appel de la fonction Main() au chargement de la page
- <body onunload="Main() ;"> // appel de la fonction Main() au déchargement de la page
- <img src="…" onmouseover="Main() ;"> // appel de la fonction Main() lors du survol de l’image
- <img src="…" onclick="Main() ;"> // appel de la fonction Main() lors du clic sur l’image
- <input type="button" value="quitter" onclick="Main() ;"> // appel de la fonction Main() lors du clic sur le bouton
Bon à savoir
Le JavaScript
est interprété et non compilé. C'est le navigateur qui se charge de cette interprétation.
De ce fait, il peut y avoir des différences
d'interprétation entre différents navigateurs.
Compléments
En complément,
vous trouverez des informations plus détaillées sur les notions vues, des
exemples de programmes exécutés lors de différents événements et un exercice
récapitulatif.
A. Rappel : Structure HTML de base
Certaines balises
sont nécessaires à la bonne interprétation d’une page.Voici le squelette de base d’un document HTML :
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
(la balise
<title> est requise pour toutes les pages HTML)
B. Exécuter un programme JavaScript
Pour exécuter un programme
JavaScript, il suffit d’ouvrir la page HTML qui contient le code
JavaScript dans un navigateur. Ce code est interprété en même temps que
l’ouverture du fichier par le navigateur, comme l'HTML.Il y a donc cohabitation entre le code JavaScript et le code HTML dans un même fichier, c’est ce qui fait toute la particularité de ce langage !
Il y a tout de même un petit "HIC" à tout cela : c’est le navigateur qui interprète le langage HTML et les scripts JavaScript. Il existe donc quelques petites différences d’interprétation entre les différents navigateurs.
Dans ce cours, nous nous limitons à montrer des exercices utilisant des commandes "compatibles". Il y a toutefois quelques cas particuliers dans les compléments de modules.
C. Une solution encore plus simple !
Reprenons
l’énoncé du premier exercice : "Ecrire un programme qui affiche une
fenêtre d'alerte contenant le texte "Bienvenue dans l’univers de la BD
!"".Pour le même résultat, il existe un code plus simple :
<html>
<head>
<title>
Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
</title>
<!--début du script JavaScript -->
<script>
// Intégration d’un script dans le document
alert("Bienvenue dans l’univers de la BD !") ;
// ouverture de la fenêtre d’alerte
</script>
<!--fin du script JavaScript -->
</head>
<body>
</body>
</html>
On a retiré la
fonction "Main()" et le programme s’exécute correctement. La commande
JavaScript "alert()" est exécutée au même moment que
son interprétation. En clair, cela signifie
que le navigateur lit les instructions du document HTML de haut en bas et va
donc exécuter l’instruction "alert()" dès le début de notre exemple
puisque cette instruction est située avant le <body>.Cette fonction Main() n’est en fait pas obligatoire mais simplement utile car elle permet d’associer une action (par ex. alert(…)) à un événement (par ex. onload="Main() ;").
Pour une meilleure approche de programmation, nous continuerons à travailler avec cette fonction Main(), cela vous permettra de passer plus facilement à d’autres langages de programmation comme, par exemple, Java.
Notez que le nom n'a pas d'importance ici : vous pourriez remplacer Main() par Zozo() ou Pomme() dans le code de la page sans modifier le résultat
D. Les événements
Les événements ont été créés pour
ajouter de l’interactivité entre un visiteur et une page Web.Voici quelques exemples d’événements :
- <body onload="Main() ;"> // appel de la fonction Main() au chargement de la page
- <body onunload="Main() ;"> // appel de la fonction Main() au déchargement de la page
- <img src="…" onmouseover="Main() ;"> // appel de la fonction Main() lors du survol de l’image
- <img src="…" onclick="Main() ;"> // appel de la fonction Main() lors du clic sur l’image
- <input type="button" value="quitter" onclick="Main() ;"> // appel de la fonction Main() lors duclic sur le bouton
Ces événements se retrouvent toujours dans une balise HTML. A ces événements, on associe l’appel d’une fonction JavaScript, par exemple la fonction Main() ; .
Voici quelques exemples (code + exécution) de programmes appelant la fonction Main() lors de différents événements.
1. Afficher un message d'au revoir
Un programme
affiche "Merci de votre visite. A bientôt !" lorsque l’utilisateur
quitte la page.L’événement utilisé est onunload, cet événement peut uniquement être placé dans la balise <body>, il signifie "au déchargement de la page".
<html>
<head>
<title>
Ecrire un programme qui affiche le texte "Bienvenue dans l’univers de la BD !"
</title>
<!-- début du script -->
<script>
// fonction PRINCIPALE appelée
function Main(){
// ouverture de la fenêtre d’alerte
alert("Bienvenue dans l’univers de la BD !");
}
</script>
</head>
<!--exécution du script au DECHARGEMENT de la page (onunload="") -->
<body onunload="Main();">
</body>
</html>
Au lieu d’appeler
la fonction Main() au chargement
de la page (onload), on l’appelle
au déchargement de la page (onunload).
Vous ne verrez l’alerte que lorsque vous quitterez la page.
2.Afficher un message lors du survol d'une image
Un programme
affiche "Voici le dernier tome de Spirou et Fantasio !" lorsque l’on
survole l’image avec le curseur de la souris.L’événement utilisé est onmouseover. Cet événement se déclenche lorsque l’on survole l’élément dans lequel il a été placé.
<html>
<head>
<title>
Un programme qui alerte "Voici le dernier tome de Spirou et Fantasio !" lorsque l’on survole l’image
</title>
<script>
// Intégration d'un script dans le document
function Main(){
alert("Voici le dernier tome de Spirou et Fantasio !") ;
// ouverture de la fenêtre d'alerte
}
</script>
</head>
<body>
<img src="spirou33.gif" onmouseover="Main();">
</body>
</html>
La
fonction Main() est appelée lors du survol de l’image (onmouseover).
E. Les commentaires JavaScript
Il existe deux
moyens d’écrire des commentaires en JavaScript :Commentaires sur une ligne :
// ceci est un commentaire sur une ligne
Commentaires sur
plusieurs lignes :/*
Ceci
est
un
commentaire
sur
plusieurs
lignes
*/
// … pour une ligne de commentaires
/* … */ pour plusieurs lignes de commentaires
Lequel de ces commentaires
est incorrect ?
//
ce programme alerte l’utilisateur d’un message de bienvenue // cette alerte
s’affiche automatiquement au chargement de la page
/*
ce programme alerte l’utilisateur d’un message de bienvenue cette alerte
s’affiche automatiquement au chargement de la page */
//
ce programme alerte l’utilisateur d’un message de bienvenue cette alerte
s’affiche automatiquement au chargement de la page //
F. Ecrire dans le document
La commande document.write() est bien pratique pour afficher
du contenu dans le document. Ce contenu peut contenir des balises
HTML :Attention ! N’essayez pas d’écrire au format HTML dans une fenêtre d’alerte. Une fenêtre d’alerte n’affiche que du texte et pas d’HTML.document
.write("<b>Bienvenue dans le monde de la BD !</b>");
G. Exercice : Ecrire dans le document
"Ecrire un
programme qui affiche le texte "Bienvenue dans le monde de la bd !"
au format titre1 (<h1>)."
Résultat
Solution
<html>
<head>
<title></title>
<script>
function Main(){
document.write("<h1>Bienvenue dans le monde de la BD !</h1>")
}
</script>
</head>
<body onload="Main();">
</body>
</html>
1. Objectifs
Dans ce module,
vous allez apprendre à :- afficher du texte dans un champ texte d’un formulaire.
- récupérer de l’information à partir d’un champ texte d’un formulaire.
C’est grâce aux formulaires qu’un utilisateur peut communiquer avec un programme.
C’est cette communication entre un programme et l’utilisateur qui rend un outil interactif et qui permet une gestion personnalisée des actions menées.
2. Communiquer à l’aide des formulaires
Un formulaire
permet une communication entre l’utilisateur et le site (ou les pages du site).Les données sont envoyées au serveur, généralement dans une base de données via un programme ou une application Web.
Le JavaScript est utilisé, entre autres, pour éviter l’envoi d'un formulaire vide au serveur en validant le formulaire avant l’envoi.
Un formulaire peut aussi fonctionner sans base de données, simplement pour rendre une page plus interactive. Nous en verrons quelques exemples dans ce cours.
3. Rappel sur les formulaires
Un formulaire
peut contenir différents types de champs : champs texte, cases à cocher,
boutons radio, boutons...Dans le cadre de ce cours, nous travaillerons uniquement avec des champs texte et des boutons.
Voici un exemple de formulaire :
Le code est le suivant :
<form name="info" action="mailto:spirou@franquin.be">
Votre nom :
<input type="text" name="nom">
Votre prénom :
<input type="text" name="prenom">
<input type="button" value="Envoyer" onclick=" Main( );">
</form>
4. Les balises des formulaires
Pour insérer un
formulaire dans une page Web, on utilise la balise suivante :<form name="info" action="mailto:spirou@franquin.be">
<!-- Contenu du formulaire -->
</form>
Dans ce cours,
nous ne nous intéresserons qu’à l’interaction entre une page Web et
l’utilisateur, nous ne préciserons donc pas l’attribut action.Par contre, l'attribut "name" est très important : en JavaScript, il faut nommer un formulaire et les champs qui y sont inclus pour pouvoir les atteindre. Dans ce cas-ci, le nom du formulaire est info.
La balise pour un champ texte est : <input type="text" name="nom">.
Dans ce cas-ci, le nom du champ texte est nom.
La balise pour un bouton est:
<input type="button" value="Envoyer" onclick="Main();">
Attention
! Les
noms du champ texte et du formulaire sont très importants !Le nom d’un élément HTML (un formulaire ou un champ) doit toujours:
· être en un seul mot,
· être sans accent,
· commencer par une lettre ou " _ ".
5. Un programme qui écrit
Vous allez voir
comment un programme peut transmettre des
messages à l’utilisateur à l’aide des formulaires…Reprenons l’énoncé de "alerter.htm" avec une petite modification :
"Créer un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" dans un champ texte d’un formulaire" (nom du fichier : ecrireForm.htm).
6. Le code du programme
Voici le code du
programme :<html>
<head>
<title>
Créer un programme qui affiche le texte "Bienvenue dans l’univers de la BD !" dans un champ texte d’un formulaire
</title>
<script>
function Main(){
document.accueil.message.value = "Bienvenue dans l’univers de la BD !" ;
}
</script>
</head>
<body onload="Main();">
<form name="accueil">
<input type="Text" name="message" size="40">
</form>
</body>
Recopiez ce code dans le Bloc-notes, enregistrez-le sous "ecrireForm.htm" et exécutez-le.</html>
Ce programme écrit un message dans un champ texte se trouvant dans un formulaire.
Ce code mérite quelques explications supplémentaires :
1. On a créé un formulaire portant le nom "accueil"
2. Dans ce formulaire, on a créé un champ texte portant le nom "message"
3. Dans le programme, on atteint la valeur du champ "message" se trouvant dans le formulaire "accueil" par la commande suivante : document.accueil.message.value. Cette valeur est égale à "Bienvenue dans l’univers de la BD !".
document.accueil.message.value : on atteint le document
document.accueil.message.value : on atteint le formulaire nommé "accueil"
document.accueil.message.value : on atteint le champ texte nommé "message"
document.accueil.message.value : on atteint la valeur du champ texte
La propriété value permet d’assigner une valeur dans le champ texte (vous allez voir plus loin que, grâce à la propriété value, on peut aussi récupérer le texte se trouvant dans un champ).
7. Appliquez : dire bonjour dans un champ texte
Appliquez
directement la matière vue en effectuant un exercice similaire à l'aide du
bouton "action":"Ecrire un programme qui affiche "Bonjour tout le monde !" dans un champ texte nommé "message" se trouvant dans un formulaire nommé "accueil". Ce texte doit s’afficher lors d’un clic sur un bouton (<input type="button" value="Dis Bonjour !" onclick="Main() ;">)."
Les étapes de développement :
1. Créer le formulaire
contenant un champ texte et un bouton,
2. Ajouter le contenu de la
fonction Main,
3. Ajouter l’événement qui
appelle la fonction Main.
Quelques
petits conseils :- N’oubliez pas de bien nommer le formulaire et le champ texte,
- Pour que le texte s’affiche entièrement, n’hésitez pas à agrandir la taille du champ texte :
<input type="Text" name="message" size="40">,
- Faites attention aux majuscules/minuscules,
- N’oubliez pas de guillemet, d’accolade, de parenthèse, …
Résultat
Solution
<html>
<head>
<title></title>
<script>
function Main(){
document.accueil.message.value="Bonjour tout le monde!";
}
</script>
</head>
<body>
<form name="accueil">
<input type="text" name="message" size="40">
<input type="button" value="Dis bonjour" onClick="Main();">
</form>
</body>
</html>
8. Conclusion
Nous avons vu ici
des exemples de communication du programme vers
l'utilisateur :un programme transmet de l’information à l’utilisateur en affichant des messages à l’écran.
En JavaScript, on peut écrire du texte à l’aide de :
- La méthode "alert("…")" : cette méthode affiche du texte dans une fenêtre d’alerte
- La méthode "document.write("…")" : cette méthode écrit du texte dans le document
- La propriété "document.formulaire.champ.value = "…"" : on écrit dans un champ texte d’un formulaire (formulaire étant le nom du formulaire et champ étant le nom du champ texte).
_____
9. Quizz
Lequel de ces formulaires
HTML porte un nom correct ?
<form
name="l’accueil">
<form
name="accueil">
<form
name="accueil site">
Laquelle de ces commandes
permet de récupérer la valeur du champ "montant" du formulaire
"calcul" ?
document.calcul.montant.valeur
document.montant.value
document.calcul.montant.value
10. Un programme qui lit
Voyons maintenant
un exemple de communication de l'utilisateur vers le
programme.L'utilisateur va écrire dans un formulaire. Afin de nous assurer que le programme a bien reçu l'information, nous allons lui demander de répéter l'information reçue.
(pour les besoins de cet exemple, nous utiliserons la notion de variable, qui sera expliquée au module 4)
11. Exemple de programme qui lit
"Ecrire un
programme qui demande à l’utilisateur de proposer une injure du capitaine
Haddock dans un champ texte. Lorsque l’utilisateur clique sur le bouton
"Répéter l’injure", la proposition s’affiche dans un autre champ
texte du formulaire" (nom du fichier : demanderForm.htm)<html>
<head>
<title>
Programme qui lit
</title>
<script>
var prop;
// on déclare la variable proposition
function Main(){
prop = document.echo.proposition.value ;
// on enregistre la proposition dans la variable proposition
document.echo.injure.value = prop;
// on écrit la valeur proposée dans le champ texte " injure "
}
</script>
</head>
<body>
<form name="echo">
<input type="text" name="proposition">
<input type="button" value="Répéter la proposition" onclick="Main()">
Le capitaine Haddock dit :
<input type="text" name="injure">
</form>
</body>
Remarque : Dans ce programme, prop est le nom d’une variable. Cette variable va contenir une valeur. Cette notion de variable est expliquée plus en détail dans le module 4.</html>
Enregistrez ce programme sous "demanderForm.htm" et exécutez-le.
Le résultat :
Vous obtenez un formulaire.
Vous insérez votre proposition dans le champ texte et cliquez sur le bouton "Répéter l’injure".
Automatiquement, votre proposition s’affiche dans le deuxième champ du formulaire.
Ce programme lit un message inséré par l’utilisateur dans un champ de formulaire.
12. Appliquez : demander le prénom
Appliquez
directement la matière vue en effectuant un exercice :"Voici un programme qui demande votre prénom via un formulaire et qui affiche le texte "Bonjour [PRENOM]" dans une fenêtre d’alerte. Modifiez ce programme pour que ce texte s’affiche dans un 2ème champ du formulaire placé après le bouton (Code du deuxième champ : <br><input type="text" name="echo" size="40">)".
Résultat
Quel est votre prénom?
Solution
<html>
<head>
<title>Afficher le texte "Bonjour [PRENOM]" dans un champ texte du formulaire</title>
<script>
var proposition;
function Main(){
proposition = document.questionnaire.prenom.value ;
document.questionnaire.echo.value="Bonjour "+proposition;
}
</script>
</head>
<body>
<h1>Quel est votre prénom? </h1>
<form name="questionnaire">
<input type="Text" name="prenom">
<input type="Button" value="Envoyer" onclick="Main();">
<br>
<input type="text" name="echo" size="40">
</form>
</body>
</html>
13. Conclusion
Communication utilisateur => programme :Le programme récupère de l’information de l’utilisateur en lisant des messages.
En JavaScript, on peut récupérer du texte à l’aide de l'instruction"document.formulaire.champ.value" qui permet la récupération de la valeur insérée dans le champ nommé "champ" du formulaire nommé "formulaire".
Il existe une autre méthode permettant de récupérer de l’information provenant de l’utilisateur: la méthode "prompt". Cette méthode est expliquée dans les compléments de ce module.
14. Quizz
Laquelle de ces commandes
récupère le contenu du champ "montant" du formulaire
"calcul" dans la variable "prix" ?
prix
= document.calcul.montant.value ;
prix
= document.montant.calcul.value ;
document.calcul.montant.value
= prix ;
15. Synthèse
Informer
l’utilisateur et récupérer de l’information provenant de l’utilisateur rend
votre programme interactif.Le dialogue programme/utilisateur permet la transmission à l’utilisateur d’information comme des messages d’avertissement, des messages d’erreur, … C’est cette interactivité qui rendra votre programme attrayant, abordable et accessible à tous.
Le dialogue utilisateur/programme permet la récupération d’information provenant de l’utilisateur. En JavaScript, on utilise cette communication pour valider les données d’un formulaire, récupérer le nom d’une personne afin de personnaliser un message, afficher ou traiter des données fournies par l’utilisateur comme des calculs (âge, TVA, année bissextile, …), des petits jeux (serpent, puissance 4, démineur, …), …
16. Exercice récapitulatif
Cet exercice vous
permettra de mettre en pratique les notions vues au cours de ce module :Ecrire un programme qui demande un mot de passe via un formulaire, ce mot de passe est récupéré lors du clic sur le bouton "connexion". Le programme affiche ensuite une alerte pour remercier l’utilisateur (nom du fichier : login.htm).
Etapes du développement :
1. Créer le formulaire contenant
un titre : <h3>Ce site est sécurisé !</h3>
un champ texte : <input type="password" name="motdepasse">
Attention ! Au lieu de mettre <input type="text">, il vaut mieux utiliser la balise <input type="password"> afin que le mot de passe soit masqué lors de l’encodage.
un bouton : <input type="button" value="connexion">
2. Dans la fonction Main() :
Récupérer le mot de passe, ce mot de passe doit être enregistré dans une variable.
Afficher un message de remerciement dans une alerte.
3. Appeler la fonction Main() lors du clic sur le bouton
Conseil : Reportez-vous aux exemples de ce module !
Remarque : Cet exercice n’est bien sûr pas complet, il faudrait ajouter une vérification du mot de passe. Pour un maximum de sécurité, cette vérification s’effectue côté serveur.
17. Mémo
Les formulaires
Un formulaire permet d'établir
une communication entre le site et le
visiteur. Le JavaScript permet entre autres de vérifier que le formulaire n'est pas vide au moment de l'envoi
des données.Les formulaires contiennent plusieurs types de champs: du texte, des boutons, des cases à cocher, ...
Les balises d'un formulaire sont <form></form>
Voici un formulaire avec quelques champs :
<form name="quizz" >
<input type="text" name="q1">
<input type="button" value="Envoyer" onclick="Main()">
N'oubliez pas de lui donner un nom (ici "quizz") pour pouvoir exploiter son contenu plus tard. Ceci est également valable pour les champs insérés.</form>
Ces noms doivent toujours :
· être en un seul mot,
· être sans accent,
· commencer par une lettre ou " _ ".
Pour écrire une information
Voici les trois notions
vues jusqu'ici pour afficher quelque chose à l'écran :On peut afficher du contenu dans une pop-up qui va s'ouvrir dans le navigateur.
On peut également afficher ce contenu dans la page.alert("information");
Et pour finir, on peut afficher une valeur dans un formulaire.document
.write("information");
C'est assez simple, il suffit d'écrire dans le document (la page web), qui contient un formulaire (ici appelé "formul1"), lui-même contenant un champ texte "message", auquel nous allons assigner une valeur :
document
.formul1
.message
.value
="information";
Pour lire une information
C'est simplement
le contraire, on prend la variable "information" et on y glisse le contenu de la
valeur qui est dans le champ "message"
du formulaire "formul1", lui-même stocké
sur ce document (la page web) :(information est une variable. La notion de variable sera expliquée dans le module 4.)information
=document
.formul1
.message
.value
;
Il existe une autre méthode permettant de récupérer de
l’information provenant de l’utilisateur: la méthode "prompt".
On s'en sert de
la façon suivante :proposition
=prompt("Quel est votre fruit préféré? :","Ecrivez votre réponse ici");
document
.write(proposition
);
Les actions et événements
Dans un programme
contenant des formulaires, il y a souvent :· un événement : l’utilisateur clique sur un bouton (par exemple: "paiement")
· une action : par exemple, alerter l’utilisateur avec le texte : "Cette page est sécurisée !"
Cette action doit être exécutée lorsque l’événement se produit.
Voici le code adéquat :
<form>
<input type="Button" value="paiement" onclick="Main();">
</form>
Ainsi que quelques exemples d'événements
- onclick : lorsque l’on clique (sur un bouton, par
exemple)- onchange : lorsque l’on effectue un changement (dans une liste déroulante, par exemple)
- onfocus : lorsque l’on "active" un élément (clic dans un champ texte, par exemple)
- onblur: lorsque l’on "désactive" un élément (utilisation de la touche "tabulation" pour sortir d’un champ texte, par exemple)
- onsubmit : lorsque l’on soumet le formulaire (se place dans la balise <form>)
Les différents langages rencontrés
Toutes ces
informations semblent compréhensibles car écrites dans un langage "humain", mais ce n'est
qu'une traduction du binaire, composé de 0 et
de 1,
vers quelque chose de plus lisible pour un être humain normalement constitué.On appelle cela un langage de programmation, à l'opposé du langage machine, binaire. Le HTML, quant à lui, n’est pas un langage de programmation car il ne crée pas des programmes, il décrit la façon dont une page doit s’afficher, c’est un langage de description.
Un langage de programmation est composé de mots-clés et d’une structure logique. Actuellement, les langages de programmation ont atteint une certaine maturité : on y retrouve toujours les mêmes notions de base : variables, structures itératives, structures conditionnelles, fonctions, …
Le DHTML
Le JavaScript
permet de rendre une page web interactive.
Cette technologie qui permet la communication entre
le langage JavaScript et le langage HTML s’appelle DOM pour Document
Object Model (Modèle Objet du document).L’ensemble des technologies rendant une page plus dynamique s’appelle le DHTML (dynamic HTML). Ce n'est pas un langage, mais plutôt le résultat de la collaboration entre 4 technologies : HTML, CSS (les feuilles de style), DOM et JavaScript.
Compléments
Dans les
compléments, nous allons voir plus en détails ce qu'est un programme. Nous
découvrirons aussi un autre moyen de communication utilisateur-programme : la
fenêtre prompt. Enfin, nous verrons des exemples intéressants d'événements dans
des formulaires.
A. Comment passer de l’énoncé au programme ?
Maintenant que
vous commencez à programmer, vous vous posez peut-être une des questions
suivantes :- Par quoi commencer ?
- Comment réaliser ceci ?
- Comment récupérer l’information ?
Je vous propose de prendre un énoncé et de l’analyser pour déterminer les étapes du développement du programme…
Voici l’énoncé d’un programme à réaliser :
"Ecrire un programme qui alerte l’utilisateur que la page est sécurisée lorsque l’utilisateur clique sur le bouton "Paiement"". (nom du fichier : securite.htm)
Mettez-vous à la place de l’utilisateur du programme :
En tant qu’utilisateur, vous devriez voir s’afficher une fenêtre d’alerte contenant le texte suivant : " Cette page est sécurisée ! ". Cette alerte devrait s’afficher au moment où l’utilisateur clique sur le bouton "Paiement" se trouvant dans la page.
Dans ce programme, il y a :
· un événement : l’utilisateur clique sur le bouton "paiement"
· une action : alerter l’utilisateur avec le texte : "Cette page est sécurisée !"
Cette action doit être exécutée lorsque l’événement se produit.
1. L’événement qui déclenche l’action est le "click" du bouton "paiement"
<input type="Button" value="paiement" onclick="Main();">
2. L’action du programme est :
function Main(){
alert("Cette page est sécurisée !") ;
}
Assemblons ces morceaux de code pour former le programme.
Voici le code du programme répondant aux spécifications de l’énoncé :
<html>
<head>
<title>
Ecrire un programme qui alerte l’utilisateur que la page est sécurisée lorsque l’utilisateur clique sur le bouton
</title>
<script>
function Main(){
alert("Cette page est sécurisée !");
}
</script>
</head>
<body>
<form>
<input type="Button" value="paiement" onclick="Main();">
</form>
</body>
Remarque : Ce code est similaire au programme "alerter.htm" réalisé au module 1. La seule différence est que l’action est exécutée à l’événement onclick d’un bouton et non à l’événement onload de la page.</html>
Enregistrez ce code sous "securite.htm". Vous pouvez exécuter votre programme…
B. Ce que l’on a fait
Techniquement,
vous venez de traduire une spécification exprimée en langue
française en une suite d’instructions compréhensibles par
une machine.Pour vous faciliter la tâche de programmation, il faut structurer les idées de manière à pouvoir les représenter sous forme schématique.
La représentation logique d’un programme s’appelle l’algorithmique : un algorithme est une suite d'opérations visant à la résolution d'un problème.
C. Langage machine et langage de programmation
Il est certain
qu’une machine (à moins qu’elle ne soit programmée pour ça) ne peut pas comprendre un ordre écrit en
français. La langue française est composée d’une grammaire et d’une conjugaison
trop complexes pour une machine.Un ordinateur est une machine somme toute très basique puisqu’elle ne comprend que des suites de 0 et de 1 ! La plus grande difficulté est de "traduire" ce que l’on veut faire en une suite de 0 et de 1 compréhensibles par la machine…pas si simple !
Afin d’éviter de programmer en une suite de 0 et de 1, on a créé des langages intermédiairesqui sont
· compréhensibles à l’être humain de par ses mot-clés (vocabulaire) en anglais et sa structure logique (grammaire)
· compréhensibles par la machine car chaque instruction correspond à une suite de 0 et de 1.
Ces langages intermédiaires sont appelés " langages de programmation ".
D. Conclusion
La traduction
entre le "langage humain" et le "langage machine"
s’effectue via un langage de programmation.Un langage de programmation est un langage qui, comme son nom l’indique, permet de créer des programmes.
Remarque : Le langage HTML n’est pas un langage de programmation car il ne crée pas des programmes, il décrit la façon dont une page doit s’afficher, c’est un langage de description !
Un langage de programmation est composé de mots-clés et d’une structure logique.
E. Quizz
Un langage de
programmation est
une
suite de 0 et de 1 compréhensibles par la machine
est
composé d’instructions qui correspondent à une suite de 0 et de 1
compréhensibles par la machine
est
composé d’une grammaire et d’une conjugaison compréhensibles par la machine
F. Historique des langages de programmation
Le premier
langage de programmation "officiel" est le FORTRAN, apparu en 1958. Depuis,
beaucoup d’autres langages ont été créés, chacun différent selon
l’environnement d’utilisation. Certains n’ont pas eu de succès et ont disparu ;
d’autres, par contre, sont toujours utilisés de nos jours.Voici quelques langages de programmation assez connus :
- COBOL
- BASIC
- Pascal
- Visual Basic
- C,C++
- Perl
- Java
Actuellement, les langages de programmation ont atteint une certaine maturité : on y retrouve toujours les mêmes notions de base : variables, structures itératives, structures conditionnelles, fonctions, …
·
Pour en savoir plus sur l'histoire des langages de programmation :
G. Le JavaScript, un langage de programmation
Le JavaScript a
été conçu par Netscape en collaboration
avec Sun dans le but de créer un
langage simple, léger, s’exécutant côté client (exécuté par le navigateur sur
votre propre PC), permettant l’interactivité entre une page Web
et un utilisateur.Le JavaScript est également utilisé par des technologies côté serveur comme ASP (Active Server Pages).
Ce langage est devenu "standard" en 1998 sous le nom d’EcmaScript (ECMA262).
·
Pour en savoir plus sur les spécifications du langage :
H. Quizz
EcmaScript…
Est un
langage tout à fait différent de JavaScript
Est le nom
repris pour la standardisation du JavaScript
N’existe
pas
On utilise le JavaScript
Principalement
dans les technologies du Web
Dans
divers domaines de l’informatique : Applications Windows, Applications pour
PDA, …
I. JavaScript et l’interactivité
La puissance de
JavaScript vient de sa capacité à communiquer avec
les éléments d’une page Web et à les modifier (changer le contenu,
changer de taille, changer de couleur, …). Cette technologie qui permet
la communication entre le langage JavaScript et le langage HTML
s’appelle DOM pour Document Object Model (Modèle Objet du document).L’ensemble des technologies rendant une page plus dynamique s’appelle le DHTML (dynamic HTML).
Le DHTML n’est donc pas un langage, il est le résultat de la collaboration entre 4 technologies: HTML, CSS, DOM et JavaScript.
·
Pour en savoir plus sur le DHTML :
J. Quizz
La technologie servant à
rendre les pages Web plus dynamiques s’appelle
Le
JavaScript
Le
DHTML
Le
DOM
La technologie permettant
l’accès aux éléments (objets) du document s’appelle
Le
JavaScript
Le
DHTML
Le
DOM
K. La fenêtre "prompt"
Vous avez vu
comment afficher du texte dans le document, dans une fenêtre d’alerte et dans
un champ du formulaire.Vous avez également vu comment récupérer de l’information à partir d’un champ texte.
Voici un autre moyen qui va vous permettre de récupérer de l’information : La fenêtre "prompt".
Voici l’énoncé d’un programme :
" Ecrire un programme qui demande à l’utilisateur de proposer une injure du capitaine Haddock dans une fenêtre prompt. Lorsque l’utilisateur clique sur le bouton "Répéter l’injure", la proposition s’affiche dans le document" (nom du fichier : demander.htm)
<html>
<head>
<title>
Ecrire un programme qui demande à l’utilisateur de proposer une injure du capitaine Haddock dans une fenêtre prompt. Lorsque l’utilisateur clique sur le bouton "Répéter l’injure", la proposition s’affiche dans le document
</title>
<script>
var proposition;
//déclaration de la variable proposition
function Main(){
proposition = prompt("Proposez une injure du capitaine Haddock :","Ecrivez votre proposition ici") ;
// stockage de la valeur proposée dans la variable proposition
document.write("Le capitaine Haddock dit : ") ;
document.write(proposition) ;
// on écrit la valeur de la proposition dans le document
}
</script>
</head>
<body onload="Main();">
</body>
</html>
Enregistrez ce programme
sous "demander.htm" et exécutez-le.Remarque : Dans ce programme, proposition est le nom d’une variable. Cette variable va contenir une valeur. Cette notion de variable est expliquée plus en détail dans le module 4 mais vous l’utilisez déjà pour les besoins de l’exercice.
L. La fenêtre "prompt" (suite)
Ce
programme lit un message inséré par l’utilisateur dans une fenêtre promptLa commande " prompt " a deux paramètres :
prompt("Quel est votre âge ?","insérez votre âge ici")
1. la question ou l’introduction (Quel est votre âge ?)
2. la phrase d’aide se trouvant dans le champ texte de la fenêtre (insérez votre âge ici)
La commande prompt la plus simple serait prompt("","") mais n’aurait aucun intérêt.
Par contre, la phrase d’aide est optionnelle, comme ceci : prompt("Quel est votre âge ?","")
M. Quizz
Quelle commande ne
récupère pas l’âge de l’utilisateur ?
age
= prompt("Quel est votre âge ?","") ;
age
= prompt("Quel est votre âge ?","insérez votre âge ici") ;
age
= alert("Quel est votre âge ?") ;
Trouvez la commande
erronée :
age
= prompt("Quel est votre âge ?", "insérez votre âge ici",
"") ;
age
= prompt("Quel est votre âge ?"," insérez votre âge ici ")
;
age
= prompt("Quel est votre âge ?","") ;
N. Les événements d’un formulaire
Nous avons vu
dans ce module comment exécuter un programme en cliquant
sur un bouton. En fait, il est possible d'exécuter un programme lors de
différents événements.Voici les principaux événements que l’on retrouve dans les éléments d’un formulaire :
- onclick : lorsque l’on clique (sur un bouton, par exemple)
- onchange : lorsque l’on effectue un changement (dans une liste déroulante, par exemple)
- onfocus : lorsque l’on "active" un élément (clic dans un champ texte, par exemple)
- onblur: lorsque l’on "désactive" un élément (utilisation de la touche "tabulation" pour sortir d’un champ texte, par exemple)
- onsubmit : lorsque l’on soumet le formulaire (se place dans la balise <form>)
Voici quelques exemples en ligne utilisant ces différents événements :
O. Appliquez : une fenêtre prompt
Appliquez directement
la matière vue en effectuant un exercice similaire :"Ecrire un programme qui demande le prénom de l’utilisateur à l’aide d’une fenêtre prompt et qui l’affiche dans le document."
La variable doit etre nommée "proposition".
La fenêtre prompt doit comporter ces textes :
1. "Quel est votre prénom ?"
2. "Inscrivez votre prénom ici"
Résultat
Solution
<html>
<head>
<title>Ecrire un programme qui demande le prénom du visiteur via une fenêtre prompt et qui affiche son nom dans le document</title>
<script>
var proposition;
function Main(){
proposition = prompt("Quel est votre prénom ?","Inscrivez votre prénom ici");
document.write("Bonjour ");
document.write(proposition);
}
</script>
</head>
<body onLoad="Main();">
</body>
</html>
P. Quizz
Lequel de ces événements
ne retrouve-t-on pas dans un élément de formulaire ?
onclick
onchange
onload
L’événement que l’on
utilise pour vérifier s’il y a eu un changement de valeur est
onclick
onchange
onsubmit
A quoi sert l’événement
onsubmit ?
A
soumettre le formulaire
A
effectuer une action juste avant l’envoi du formulaire
A
effectuer une action juste après l’envoi du formulaire
Q. Appliquez : l’événement onblur
Voici un exercice
permettant de mettre en pratique ce que nous avons vu dans le complément qui
précède."Ecrire un programme qui affiche le message de remerciement dans une alerte, lorsque l'on perd le focus d'un formulaire (onblur)"
Résultat
Solution
<html>
<head>
<title>Ecrire un programme qui affiche un message de remerciement dans une alerte lors de la perte de focus dans un formulaire (onblur)</title>
<script>
function Main(){
alert("Merci pour votre remarque");
}
</script>
</head>
<body>
<form name="accueil">
<h3>Veuillez entrer votre remarque:</h3>
<input type="text" name="remarque" onblur="Main();">
</form>
</body>
</html>
1. Objectifs
Dans ce module,
vous apprendrez à mieux connaître le langage JavaScript, quelles sont ses particularités, comment il est interprété, …En réalisant les exercices des modules précédents, vous avez sans doute remarqué qu’une faute de frappe, et donc une erreur, est vite arrivée. Il est donc important de savoir détecter et corriger une erreur…
2. Qui interprète un programme JavaScript ?
Comme pour une
page HTML, c’est le navigateur qui interprète le code JavaScript.C’est donc le navigateur qui traduit, au fur et à mesure, le code JavaScript en un format compréhensible par l’ordinateur.
Remarque : Contrairement au langage Java, le Javascript n’est pas un langage compilé, il est interprété. Un programme écrit dans un langage "compilé" est traduit dans un langage compréhensible par la machine "une fois pour toutes" avant de pouvoir être utilisé, cette étape s’appelle la compilation. Les instructions du langage "interprété" seront par contre traduites au fur et à mesure lors de l’exécution du programme.
L’avantage du JavaScript : l’utilisateur n’a pas besoin d’installer un plugin (contrairement à une animation Flash), tout ce dont il a besoin est un navigateur qui interprète le JavaScript (c’est-à-dire pratiquement tous les navigateurs actuels : Internet Explorer, Firefox, Chrome, etc.).
L’inconvénient du JavaScript : Comme pour le code HTML, le code JavaScript peut être interprété différemment en fonction des navigateurs. Cela signifie que l’on pourra constater des différences à l’écran lors de l’exécution de certaines instructions.
3. Les particularités du JavaScript
JavaScript est un
langage de programmation. Chaque langage de programmation possède- un ensemble de mots représentant le "vocabulaire" du langage
- une structuration logique représentant la "grammaire" du langage
Voici quelques particularités propres au langage JavaScript…
4. La sensibilité à la casse
Le langage
JavaScript est sensible à la casse. Cela signifie qu’il fait
la différence entre un "A" majuscule et un "a" minuscule.La fonction :
function main(){
…
}
est différente de la fonction :
function Main(){
…
}
Remarque : Vous pouvez bien évidemment utiliser les majuscules/minuscules dans le contenu textuel : "bienvenue dans l’univers de la bd !" ou "BIENVENUE DANS L’UNIVERS DE LA BD !". Les majuscules/minuscules n’auront d’importance au niveau du texte que lorsque l’on comparera deux valeurs. Par exemple : "TINTIN" est différent de "tintin".
5. Appliquez : la sensibilité à la casse
Il y a 3 erreurs
dans ce code. Corrigez-le afin qu'il s'éxécute correctement.
Résultat
Solution
<html>
<head>
<title>Casse</title>
<script>
function Main(){
document.write("Bienvenue dans le monde de la BD !") ;
}
</script>
</head>
<body onload="Main();">
</body>
</html>
6. Un ";" à la fin de chaque instruction
Vous avez
certainement remarqué qu’en fin de ligne, on ajoute un point-virgule.Ce point-virgule sert à séparer les instructions.
Qu’est-ce qu’une instruction ?
Une instruction, c’est l’ordre (l’action) que le programme va commander à la machine.
Un programme est composé d’une suite d’instructions.
Pour un code plus lisible, on écrit une instruction par ligne :
alert("Bienvenue dans l’univers de la BD !") ;
alert("Merci de votre visite !") ;
Dans ce cas, les points-virgules en fin d’instructions ne sont pas obligatoires.
Pour un code plus compact, on peut écrire plusieurs instructions sur une ligne :
alert("Bienvenue dans l’univers de la BD !") ; alert("Merci de votre visite !") ;
Dans ce cas, le point-virgule est nécessaire entre deux instructions !
Remarque : Pour un code plus homogène et bien écrit, on met un point-virgule à la fin de chaque instruction, même s’il y a un retour à la ligne.
7. Appliquez ! Un ";" à la fin de chaque
instruction
Ajoutez les
points-virgules à la bonne exécution du programme.
Résultat
Solution
<html>
<head>
<title>Casse</title>
<script>
function Main(){
document.write("Bienvenue dans le monde de la BD!<br>");document.write("Sur ce site, vous trouverez toute information concernant la bande dessinée...<br>");document.write("...Bonne visite!");
}
</script>
</head>
<body onload="Main();">
</body>
</html>
8. Les mots réservés
alert, function, prompt, … sont des mots réservés
à l’exécution du programme, on ne peut donc pas utiliser ces mots autrement que
dans la structure logique (grammaire) définie par le langage.Par exemple, on ne pourra jamais appeler une fonction function sans obtenir une erreur :
function function(){
alert("Bienvenue dans l’univers de la BD !") ;
}
N’oubliez pas que le JavaScript est sensible à la casse ! Il faut donc faire très attention à l’utilisation des majuscules/minuscules des mots réservés !
Document.Write("Bienvenue dans l’univers de la BD !") vous apportera une erreur dans votre programme.
Dans les compléments, vous trouverez un tableau contenant la liste des mots réservés en JavaScript.
9. Les caractères spéciaux
Dans du contenu,
on peut retrouver des caractères spéciaux, par exemple, un guillemet (").Or, le guillemet est utilisé pour délimiter le début et la fin d’une chaîne de caractères, comme ceci :
alert("Bienvenue dans l’univers de la BD !")
Comment faire pour écrire "Bienvenue dans l’univers de la "BD" !" sans obtenir une erreur ?
Il va falloir dire au programme de ne pas interpréter les guillemets se trouvant autour de BD. Ces guillemets représentent simplement du texte.
Voici comment on ajoute des guillemets dans du texte :
alert("Bienvenue dans l’univers de la \"BD\" !")
Il suffit de mettre un antislash (ou backslash ou "\") devant le guillemet pour qu’il soit interprété comme du texte.
En complément, vous trouverez la liste de tous les caractères spéciaux en JavaScript.
10. Quizz
Pour qu’un guillemet soit
interprété comme du texte, on ajoute devant celui-ci…
message="Vous
avez dit \"bizarre\" !" ;
message="Vous
avez dit /"bizarre/" !" ;
message="Vous
avez dit //"bizarre//" !" ;
11. Accès à un objet du document
En JavaScript, on
travaille en "collaboration" avec une page HTML.Comme vous l’avez vu dans le module 2, il est possible de communiquer avec des éléments d’une page HTML comme par exemple un champ texte :
document.accueil.message.value = "Bienvenue dans l’univers de la BD !" ;
(accueil étant le nom du formulaire et message étant le nom du champ texte)
Chaque élément d’une page HTML est accessible via un chemin hiérarchique logique :
dans le document, on trouve un formulaire accueil dans lequel on trouve le champ message.
On atteint donc la valeur du champ par le chemin : document.accueil.message.value.
A ne pas oublier : Pour atteindre un élément d’un document, il faut lui donner un nom. C’est par son nom que l’on atteindra l’élément.
12. Appliquez : accès à un objet du document
Complétez le HTML
afin que le script s'éxécute correctement.
Résultat
Solution
<html>
<head>
<script>
function Main(){
document.quizz.question1.value = "Quel est le nom du chien de Boule ?";
}
</script>
</head>
<body onload="Main();">
<form name="quizz">
<input type="text" name="question1">
</form>
</body>
</html>
13. Conclusion
Chaque langage de
programmation possède des particularités qu’il faut maîtriser pour éviter
des erreurs de syntaxe.Il existe de nombreux livres et sites Internet concernant la "grammaire" du langage JavaScript. Vous trouverez des ressources dans les compléments de ce module.
14. L’erreur est humaine
Toutes ces
particularités du langage peuvent vous amener à faire des erreurs, par exemple
mettre un "A" majuscule pour la commande "alert()".Il faut bien admettre que l’erreur est humaine et que, si ce n’est pas la première, ce ne sera pas non plus la dernière !
Dans un programme, on peut retrouver deux types d’erreurs :
- les erreurs de syntaxe : faute de frappe, oubli de guillemet, …
- les erreurs logiques : appel de la fonction Main() alors qu’elle n’existe pas, oubli d’appel de la fonction Main() au chargement de la page, …
Voici comment gérer les erreurs d’un programme.
15. Comment détecter une erreur ?
Une erreur se détecte
facilement dans un programme car généralement, il ne tourne pas
correctement ;-)Néanmoins, le navigateur prévient lorsqu’il rencontre une erreur dans un programme : généralement, vous obtenez un " horrible " message d’alerte …
… et un picto d’alerte s’affiche dans la barre d’état (en bas à gauche) du navigateur.
Généralement, une erreur en entraîne une autre : vous pouvez obtenir plusieurs messages d’alerte à la suite !
Remarque : Si vous n’obtenez pas la grande fenêtre d’alerte, il vous suffit de double-cliquer sur le picto d’alerte en bas à gauche de l’écran du navigateur.
16. Comment retrouver une erreur ?
Les messages
d’erreur du navigateur Internet Explorer précisent la ligne et l’endroit sur la
ligne où il trouve l’erreur… ATTENTION ! L’emplacement réel de l’erreur
n’est pas toujours celui proposé par le navigateur !Le meilleur moyen de détecter l’emplacement exact d’une erreur est de mettre la ligne suspecte en commentaire, comme ceci :
<html>
<head>
<title>
Comment retrouver une erreur
</title>
<script>
function Main(){
// alert("Bienvenue dans le monde de la "BD" !");
}
</script>
</head>
<body onload="Main();">
</body>
</html>
Si la page
s’affiche sans erreur, c’est que l’erreur se trouve bien au niveau de la ligne
en commentaire.Comme il n’existe pas d’outils de débogage (= détecteur de bug) vraiment performants pour le langage JavaScript, cette astuce de programmeur va vous être bien utile !
=> Il ne reste plus qu’à trouver l’erreur dans la ligne…
17. Les points importants à vérifier
Quelles sont les
erreurs possibles dans un programme ?- Erreur d’écriture :
functoin Main() au lieu de function Main()
- Problème de majuscule/minuscule
document.Write() au lieu de document.write()
- Oubli de fermeture de parenthèses ou d’accolades
alert("Bienvenue" au lieu de alert("Bienvenue")
- Conflit d’utilisation de guillemets
alert("Qui a dit :"Je pense donc je suis ! " ?") au lieu de alert("Qui a dit:\"Je pense donc je suis ! \" ?")
- Oubli de point-virgule entre deux instructions se trouvant sur la même ligne
document.write("Bonjour !<br>") document.write("Comment allez-vous ?") au lieu de document.write("Bonjour !<br>"); document.write("Comment allez-vous ?")
- Utilisation d’un mot réservé pour le nom d’une fonction
function function(){…} au lieu de function messageBienvenue(){…}
18. Conclusion : Les bonnes manières pour programmer
Pour éviter un
maximum d’erreurs, il faut être systématique :- Chaque fois que vous ouvrez une accolade, fermez-la directement. Idem pour une parenthèse ou un guillemet. Cela vous évitera d’omettre un élément fermant.
- Placez une instruction par ligne. Le code sera plus lisible et retrouver les erreurs sera plus simple.
- Indentez votre code (ajoutez des retraits), cela permet également de rendre le code plus clair.
19. Mémo
Interprété ou compilé?
A la différence
d'autres langages comme le Java, le JavaScript n'est pas compilé mais interprété par
le navigateur. De ce fait, son code est portable sur
plusieurs navigateurs sans la moindre
modification, mais son interprétation peut être légèrement différente d'un à
l'autre.
Les particularités du JavaScript
Etant donné qu'il
s'agit d'un langage de programmation, il possède des mots qui forment son "vocabulaire", et une structuration logique, qui
représente sa "grammaire".Ce langage est sensible à la casse (majuscule / minuscule): Main() et main() sont donc deux fonctions différentes.
Il est également sensible à la ponctuation, n'oubliez jamais votre ; à la fin d'une instruction.
Les caractères spéciaux, quant à eux, doivent être précédés d'un \ pour s'afficher sans être interprétés par le navigateur.
Voici comment on ajoute des guillemets dans du texte :
alert("Bienvenue dans l’univers de la \"BD\" !")
Les mots réservés
Le JavaScript n'autorise pas
l'usage de certains mots pour nommer une fonction ou une variable, comme alert, function, ou
encore prompt.La liste des mots réservés (déjà utilisés ou à venir) peut être trouvée sur ce site:
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Mots_r%C3%A9serv%C3%A9s
Une fois tous vos éléments nommés correctement, vous pouvez enfin y accéder, voici la façon pour y parvenir:
Si on suit un chemin hiérarchique logique dans le document, on trouve un formulaire "accueil" dans lequel est placé le champ "message".
On atteint donc la valeur du champ "message" par le chemin : document.accueil.message.value
Ca ne marche pas?
Pas de stress, la
plupart des erreurs viennent de trois sources :- les erreurs de syntaxe : faute de frappe, oubli de guillemets, de point-virgule, utilisation d'un mot réservé, ...
- les fautes de frappe : différence entre majuscules/minuscules, inversion de lettres, ...
- les erreurs logiques : appel de la fonction Main() alors qu’elle n’existe pas, oubli d’appel de la fonction Main() au chargement de la page, ...
Pour voir la source de l'erreur, vous pouvez vous inspirer du message d'alerte ou du pictoprésent dans la barre d'état du navigateur.
En général, les messages d'erreur sont assez incompréhensibles. On peut toutefois s'en sortir avec un peu de logique: tout ce qui a été ouvert doit être fermé, les majuscules respectées, les ; bien placés, les noms d'objets bien écrits, ...
Ensuite, rien de plus simple, vous mettez les lignes suspectes en commentaire (avec le // comme vu précédemment), et vous relancez la page incréminée.
Pensez également à changer de navigateur, Firefox vous offre une description des bugs plus claire. En règle générale, il est souvent recommandé de tester son programme dans plusieurs navigateurs.
Améliorez-vous
Pour finir,
n'oubliez pas les bonnes manières pour programmer: tout ce qui est ouvert doit
être fermé directement, aérez votre code, commentez-le au besoin et
indentez-le.
Compléments
Voici quelques
explications supplémentaires concernant les particularités du langage
JavaScript
A. Langage compilé / Langage interprété
Il
existe deux types de langages :· les langages interprétés (par exemple le JavaScript)
· les langages compilés (par exemple le Java).
Un langage interprété est un langage qui est traduit en un langage compréhensible par la machine au moment de son exécution.
Un langage compilé est un langage qui est traduit en un langage compréhensible par la machine lors de la compilation, ce qui rend l’exécution du programme plus rapide car il n’y a plus de "traduction" à effectuer pendant l’exécution du programme.
Les avantages et les inconvénients des deux types de langages :
Contrairement au langage interprété, chaque modification d’un langage compilé nécessite une recompilation du programme pour que les modifications soient prises en compte à l’exécution de celui-ci…
Pour un langage compilé, les erreurs de syntaxe sont détectées à la compilation et non à l’exécution. Vous obtiendrez donc moins d’erreurs à l’exécution de votre programme puisqu’elles auront été détectées avant !
Remarque : Le fait que le JavaScript soit un langage interprété est un choix délibéré : cela le rend
· plus accessible car il se trouve directement dans une page HTML,
· plus léger car le format du code est de type ASCII (on peut visualiser le code avec le Bloc-notes).
B. Quizz
Le langage JavaScript est
un langage
interprété
par le navigateur
compilé
et exécuté par le navigateur
C. Liste des mots réservés
Voici la liste
des mots à éviter en tant que nom de fonction ou nom de variable.Sachez que certains mots ne sont pas encore utilisés par le langage mais sont prévus pour une utilisation future. C’est le cas pour le mot réservé "debugger" qui n’a pas encore d’utilisation mais qui pourrait en avoir dans le futur…
Liste des
mots reserves en Javascript |
||
abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false |
final finally float for function goto if implement import in instanceof int interface long native new null package private protected |
public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with |
D. Liste des caractères spéciaux
Pour éviter des
conflits de guillemets (guillemets déclarant du contenu textuel et guillemets
faisant partie du contenu textuel), on utilise les caractères spéciaux en
précédant le guillemet d’un antislash (\) .alert("Dans quelle BD trouve-t-on la phrase : \"Je ne suis pas gros, je suis juste un petit peu enveloppé !\" ?")
Une fenêtre d’alerte n’accepte pas le format HTML. Impossible, donc, d’écrire en couleur ou en gras… Par contre, les caractères spéciaux permettent l’ajout d’un retour à la ligne avec le caractère \n (l’équivalent du <br> en HTML).
Pour formater le contenu textuel d’une fenêtre d’alerte, on utilise également les caractères spéciaux :
alert ( "Bienvenue dans l’univers de la BD !\ nSur ce site, vous trouverez toute l’information concernant la bande dessinée…\n…Bonne visite !")
Liste des caractères
spéciaux |
|
\b \f \n \r \t \" \' \\ |
touche de suppression saut de ligne d'impression retour à la ligne appui sur la touche ENTREE (retour chariot) tabulation guillemets doubles guillemets simples caractère antislash |
E. Savoir lire les messages d’erreur…
Il n’est pas
simple de comprendre les messages d’erreurs affichés par les navigateurs. En
effet, ceux-ci sont des messages génériques et traduits de
l’anglais… Ce qui les rend donc moins lisibles !Voici quelques erreurs possibles en fonction des différents messages obtenus avec Internet Explorer :
Objet attendu :
- Vous avez fait une faute de frappe : Alert au lieu de alert
- Vous faites appel à un objet qui n’existe pas : <body onload="fctPrincipale() ;"> alors que la fonction fctPrincipale() n’existe pas
‘)’ attendu :
- Il y a un conflit de guillemets dans une chaîne de caractères : alert("Qui a dit : "Je pense donc je suis" ?")
‘ ;’ attendu
- Il y a un conflit de guillemets dans une chaîne de caractères : message ="Qui a dit : "Je pense donc je suis" ?" ;
Constante de chaîne non terminée
- Il manque les guillemets de fermeture de la chaîne de caractères
‘document.form.message.valeur’ a la valeur NULL ou n’est pas un objet
- La propriété "valeur" n’existe pas pour un élément du formulaire
‘document.form.messagessssss.value’ a la valeur NULL ou n’est pas un objet
- Le champ messagessssss n’existe pas ou bien le formulaire form n’existe pas
Cet objet ne gère pas cette propriété ou cette méthode
- La propriété ou la méthode de l’objet est incorrecte : document.Write()
F. Les erreurs JavaScript avec Firefox
Un des atouts de
Firefox est son débogueur JavaScript. Beaucoup plus puissant
que celui d’Internet Explorer, il décrit les "bugs" plus clairement.Voici le message obtenu lors de l’exécution du programme erreur.htm (voir complément précédent) :
Ce message est clair : le programme n’arrive pas à trouver la fin de la chaîne de caractères. Le pointeur est placé au début de la chaîne de caractères en question.
Pour obtenir cette petite fenêtre appelée Console JavaScript, il vous suffit de taper dans la barre des adresses (à la place de l’URL) : javascript:
Remarque : Lorsque vous êtes bloqué sur une erreur, essayez votre programme dans différents navigateurs, les différents messages pourront peut-être vous mettre sur la voie…
1. Objectifs
Dans les modules
précédents, vous avez appris à afficher du contenu et à récupérer des
informations provenant de l’utilisateur.Dans ce module, vous apprendrez à stocker ces données afin de les réutiliser.
2. Dire plusieurs fois la même chose
Dans le premier
module, vous avez affiché le texte "Bienvenue dans l’univers de la BD
!" dans le document.Reprenons cet énoncé avec une petite amélioration :
"Afficher 3 fois le texte "Bienvenue dans l’univers de la BD" dans le document" (nom du fichier : ecrire3fois.htm)
Ecrivez le code du programme répondant à cette spécification et enregistrez-le sous le nom "ecrire3fois.htm".
Vous trouverez la solution de l’exercice à la page suivante.
3. Solution de l’exercice
Le code est assez
simple :<html>
<head>
<title>
Afficher 3 fois le texte "Bienvenue dans l’univers de la BD" dans le document
</title>
<script>
function Main(){
document.write("Bienvenue dans l’univers de la BD !<br>") ;
// afficher une 1re fois
document.write("Bienvenue dans l’univers de la BD !<br>") ;
// afficher une 2e fois
document.write("Bienvenue dans l’univers de la BD ! <br>") ;
// afficher une 3e fois
}
</script>
</head>
<body onload="Main()">
</body>
Remarque: A la suite de "Bienvenue dans l’univers de la BD", on a ajouté la balise HTML <br>. Cette balise permet d’effectuer un retour à la ligne. Sans cette balise, le texte se serait affiché comme suit : Bienvenue dans l’univers de la BD !Bienvenue dans l’univers de la BD!Bienvenue dans l’univers de la BD ! (les trois phrases se suivent sans retour chariot !)</html>
4. Conclusion
Le texte est bien
affiché 3 fois, mais le code est "lourd" :1. Il est inutilement long, vous avez dû recopier le texte plusieurs fois
2. Si le texte de bienvenue change, vous voilà bon pour modifier plusieurs fois le texte !
5. Une solution plus "propre"
Voici un moyen
d’éviter la répétition du texte : stockons-le dans une variable
(nom du fichier : ecrire3foisV2.htm, V2 pour version 2).<html>
<head>
<title>
Afficher 3 fois le texte "Bienvenue dans l’univers de la BD" dans le document
</title>
<script>
var message;
function Main(){
message="Bienvenue dans l’univers de la BD !<br>";
document.write(message);
document.write(message);
document.write(message);
}
</script>
</head>
<body onload="Main()">
</body>
Enregistrez ce code sous le nom "ecrire3foisV2.htm" et exécutez le programme.</html>
Voilà qui résout les problèmes :
Le code est moins long et dans le cas de la modification du texte, le changement est automatique.
6. Ce que l’on a fait
Plutôt que
d’écrire à chaque fois une valeur, vous l’avez stockée dans une
variable.Une variable est une étiquette qui permet au programme de référencer une valeur.
Dans l’exemple précédent, la valeur est
"Bienvenue dans l’univers de la BD !"
et l’étiquette de cette valeur (le nom de la variable) est
message.
Cette variable a été définie au préalable avec la commande: var message ; .
Et on lui a associé une valeur avec la commande : message = "Bienvenue dans l’univers de la BD !" ; .
7. Un programme qui lit (cf. module 2)
Rappelez-vous,
dans le module 2, vous avez déjà utilisé
la notion de variable en stockant le contenu inséré par l’utilisateur dans la
variable prop :<html>
<head>
<title>
Lecture de la valeur d’une variable
</title>
<script>
var prop;
// on déclare la variable proposition
function Main(){
prop = document.echo.proposition.value;
// on enregistre la proposition dans la variable proposition
document.echo.injure.value = prop;
// on écrit la valeur proposée dans le champ texte "injure"
}
</script>
</head>
<body>
<form name="echo">
<input type="text" name="proposition">
<input type="button" value="Répéter la proposition" onclick="Main()">
Le capitaine Haddock dit :
<input type="Text" name="injure">
</form>
</body>
</html>
8. Bien déclarer une variable
1.
Généralement , on déclare (crée) les variables en début de
programme .Remarque : il est possible de déclarer une variable dans une fonction. Dans ce cas, elle n’existe que dans cette fonction et n’est pas "utilisable" en dehors de celle-ci (vous verrez ceci plus en détail dans le module 9 : Les fonctions).
<html>
<head>
<title>
Déclaration de variable
</title>
<script>
var message;
function Main(){
//instructions de la fonction
}
</script>
</head>
<body onload="Main()">
</body>
</html>
2.
N’oubliez jamais de refermer les guillemets, vous obtiendriez une erreur !var3. Le nom d’une variable doit être écrit :message
="coucou
;
·
·
en un seul mot,
·
sans accent
·
et commencer par une lettre ou par "_" (underscore).
varmessage
;// nom de variable correct
var_message
;// nom de variable correct
var1
message
;// nom de variable incorrect
9. Quizz
Pour les réutiliser, on stocke les
données dans une
Variable
Valeur
Parmi ces 3 noms de variable, lequel
est correct ?
catégorie
1reProposition
_couleur
Laquelle de ces déclarations est
correcte ?
Var
texte ;
var
var ;
var
mode ;
10. Appliquez : utiliser les variables
Ce programme
affiche 4 fois le texte "Bienvenue dans l'univers de la BD!" de plus
en plus grand. Modifiez le code de ce programme afin de stocker le message dans
une variable nommée "texte".
Résultat
Solution
<html>
<head>
<title>Ecrire un programme qui affiche 4 fois le texte "Bienvenue dans le monde de la BD!" de plus en plus grand </title>
<script>
var texte;
texte="Bienvenue dans le monde de la BD!";
function Main(){
document.write("<h4>");
document.write(texte);
document.write("</h4>");
document.write("<h3>");
document.write(texte);
document.write("</h3>");
document.write("<h2>");
document.write(texte);
document.write("</h2>");
document.write("<h1>");
document.write(texte);
document.write("</h1>");
}
</script>
</head>
<body onload="Main();">
</body>
</html>
11. Quizz
Laquelle de ces
instructions ne récupère PAS la valeur du champ proposition dans la variable
injure ?
injure
= document.form.proposition.value ;
document.form.proposition.value
= injure ;
12. Manipulez plusieurs variables
Jusqu’à présent,
vous avez appris à stocker une valeur dans une variable et à afficher la valeur
de la variable telle quelle. Maintenant, vous allez travailler avec les
variables . Vous allez les réutiliser pour afficher du texte dynamique.Insérer, dans une page HTML, le texte lacunaire suivant :
Les … de cette bande … sont des petits … tout bleus
"Créer un programme qui demande les mots manquants (à l’aide d’un formulaire) à l’utilisateur et affiche le texte complété avec les mots proposés par l’utilisateur dans une fenêtre d’alerte." (nom du fichier : txtLacun.htm)
Si vous vous sentez d’attaque, essayez de faire l’exercice seul(e) !
Traduisons cet énoncé et trouvons les étapes principales du développement du programme :
1. La page HTML contient le texte " Les … de cette bande … sont des petits … tout bleus".
2. Le programme récupère LES propositions de l’utilisateur dans des variables à l’aide d'un formulaire.
3. Le programme affiche (dans une fenêtre d’alerte) le texte lacunaire complété par les propositions de l’utilisateur.
Les étapes de développement de ce programme sont décrites dans les 3 points suivants.
13. Explication du code 1/3
Voici le code de
départ.<html>
<head>
<title>
Texte lacunaire
</title>
</head>
<body>
<h1>Complétez le texte lacunaire suivant:
</h1>
<p>Les … de cette bande … sont des petits … tout bleus
</p>
</body>
</html>
Continuons ! 14.
Explication du code 2/3
Demandons les
mots manquants par le biais d'un formulaire (lignes 18 à 23) et stockons-les
dans des variables : prop1, prop2, prop3.Remarque : pour la première fois, vous avez utilisé 3 variables. Un programme peut contenir plusieurs variables.
<html>
<head>
<title>
Texte lacunaire
</title>
<script>
var prop1;
var prop2;
var prop3;
function Main(){
prop1=document.form.prop1.value;
prop2=document.form.prop2.value;
prop3 = document.form.prop3.value;
}
</script>
</head>
<body>
<h1>Complétez le texte lacunaire suivant:
</h1>
<p>Les … de cette bande … sont des petits … tout bleus
</p>
<form name="form">
1er mot manquant:
<input type="text" name="prop1"/><br>
2ème mot manquant:
<input type="text" name="prop2"><br>
3ème mot manquant:
<input type="text" name="prop3"><br>
<input type="button" value="Compléter le texte" onClick="Main();">
</form>
</body>
</html>
Continuons !
15. Explication du code 3/3
Affichons la
phrase complétée par l'utilisateur (ligne 12).<html>
<head>
<title>
Texte lacunaire
</title>
<script>
var prop1;
var prop2;
var prop3;
function Main(){
prop1=document.form.prop1.value;
prop2=document.form.prop2.value;
prop3 = document.form.prop3.value;
alert("Les " + prop1 + " de cette bande " + prop2 + " sont des petits " + prop3 + " tout bleus ") ;
}
</script>
</head>
<body>
<h1>Complétez le texte lacunaire suivant:
</h1>
<p>Les … de cette bande … sont des petits … tout bleus
</p>
<form name="form">
1er mot manquant:
<input type="text" name="prop1"/><br>
2ème mot manquant:
<input type="text" name="prop2"><br>
3ème mot manquant:
<input type="text" name="prop3"><br>
<input type="button" value="Compléter le texte" onClick="Main();">
</form>
</body>
</html>
Recopiez l’entièreté du code dans votre éditeur et enregistrez votre document
sous le nom "textLacun.htm". Il vous reste à exécuter ce programme. 16. Conclusion
Dans la
commande "alert("Les " + prop1 +
" de cette bande " + prop2 + " sont des petits " + prop3 +
" tout bleus ")", on a "collé" des chaînes de
caractères et des variables à l’aide de l’opérateur "+" : c’est
ce qu’on appelle la concaténation.N’oubliez pas d’ajouter un espace autour de la variable car vous pourriez obtenir le résultat suivant : Leshérosde cette bandedessinéesont des petitsbonshommestout bleus
17. Appliquez : la concaténation
Ecrire un
programme qui demande un prénom via un formulaire et qui affiche le texte
:"Il était une fois l’histoire de [PRENOM]. [PRENOM] se promenait sur la
plage. Soudain, [PRENOM] entendit une personne appeler :
[PRENOM] ![PRENOM] !… [PRENOM] se retourna mais se rendit vite compte
que la personne était en train de rappeler son chien [PRENOM] !!!".[PRENOM] étant la valeur de la variable prenom définie au préalable." (nom du fichier : concat.htm)
Etapes du développement :
1. créer le formulaire (name="form") demandant un prénom (name="prenom")
2. récupérer la proposition dans une variable (prenom)
3. afficher dans le document, avec write(), le texte "Il était une fois l’histoire de [PRENOM]. [PRENOM] se promenait sur la plage lorsque, soudain, [PRENOM] entendit une personne appeler : [PRENOM] ![PRENOM] !… [PRENOM] se retourna mais se rendit vite compte que la personne qui venait d’appeler était en train de rappeler son chien [PRENOM] !!!"
Résultat
Solution
<html>
<head>
<title>Concaténation</title>
<script>
var prenom;
function Main(){
prenom = document.form.prenom.value;
document.write("Il était une fois " + prenom + ". " + prenom + " se promenait sur la plage lorsque, soudain, "+prenom+" entendit une personne appeler : " + prenom + " !" + prenom + "!! " + prenom + " se retourna mais se rendit vite compte que la personne était en train de rappeler son chien " + prenom + " !!!");
}
</script>
</head>
<form name="form">
Votre prénom: <input type="text" name="prenom">
<input type="button" value="Afficher" onClick="Main();">
</form>
</body>
</html>
18. Quizz
Pour "coller" du
texte et des variables, on a utilisé l’opérateur :
+
"
*
Quel terme utilise-t-on
pour signifier que l’on "colle" du texte et des variables ensemble ?
La
déclaration
La
concaténation
La
collation
Laquelle de ces
instructions est correcte ?
alert("Les
" + prop1 + " de cette bande " + prop2 + " sont des petits
" + prop3 + " tout bleus ") ;
alert("Les
+ prop1 + " de cette bande " + prop2 + " sont des petits "
+ prop3 + " tout bleus ") ;
alert("Les
" + prop1 + " de cette bande " prop2 + " sont des petits
" + prop3 + " tout bleus ") ;
Sachant que la variable
"compteur" vaut 3, laquelle de ces instructions s’affichera sans
erreur ?
alert("Vous
avez gagné "+ compteur + BD d’Astérix et Obélix") ;
alert("Vous
avez gagné " + compteur + " BD d’Astérix et Obélix) ;
alert("Vous
avez gagné " + compteur + " BD d’Astérix et Obélix") ;
19. Synthèse
Dans tout
programme, dès que l’on travaille avec des données, on utilise des variables pour les stocker afin
de pouvoir les réutiliser.Les variables rendent le code plus clair, plus réutilisable, plus générique.
Les variables sont faites pour être manipulées, la concaténation est un exemple de manipulation de variables.
20. Mémo
Les variables
Une variable permet
de stocker une valeur. Cela limite les répétitions,
allège le code, et diminue le nombre
d'erreurs dues à une faute de recopiage.Il s'agit donc d'une étiquette qui permet au programme de référencer une valeur.
Le nom d’une variable doit être écrit :
· en un seul mot
· sans accent
· et commencer par une lettre ou par "_" (underscore).
La déclaration (ou création) d'une variable se fait généralement en début de programme. On peut la définir dans une fonction, mais elle n'existerait que dans cette fonction, et pas en dehors.
Les types de variables les plus fréquents:
· texte (on entoure le contenu de guillemets)
· numérique
· tableau de données, ce point sera abordé dans un chapitre ultérieur
· booléen (vrai/faux)
Définir une variable
var proposition;Et on lui attribue une valeur comme ceci:
proposition
="The quick brown fox jumps over the lazy dog";
Lire du contenu
Pour lire
le contenu d'une variable, il suffit
d'utiliser son nom sans guillemets, de cette façon:alertCeci affichera une pop-up indiquant la phrase "Nous sommes le " suivie du contenu de la variable jour.("Nous sommes le "
+
jour
);
Pour ajouter une variable dans du texte, nous avons fait une concaténation entre une chaîne de caractères et une variable grâce au signe "+".
Voici un second exemple
document
.write("Nous sommes le "
+
NumJour
+" jour de l'année.");
Peut-on utiliser une variable non déclarée ?
Oui, on appelle
cela une déclaration implicite. Cela n'est toutefois pas conseillé,
pour deux raisons:- la plupart des autres langages nécessitent la déclaration des variables dans leur code, autant directement prendre de bonnes habitudes.
- en déclarant vos variables, vous avez un endroit où elles sont toutes reprises, leur type (entier, booléen, ...) ainsi que leur nom, ceci permet de limiter les erreurs dans votre code.
Travailler sur du texte
En plus de
la concaténation, il existe d'autres fonctions permettant de traiter du texte.Une d'entre-elles est le "substring", qui isole une partie d'une chaîne de caractères:
var prop ;
var prop6let ; // proposition 6 lettres
prop = document.BD.prop.value; // on récupère la proposition dans le formulaire
prop6let = prop.substr(0,6); // on part de la lettre 0, on reprend les 6 premières lettres, et on stocke tout ça dans la variable prop6let
Si d'autres méthodes permettant de traiter les chaînes de caractères vous intéressent, vous pouvez lire les compléments de ce cours, qui vous parlent de l'objet String() plus en détail.
Compléments
Dans les
compléments, vous découvrirez plus d'informations sur les variables et le
travail avec du texte. Vous apprendrez ainsi à manipuler des chaînes de
caractères, les tronquer, les mettre en gras ou en majuscules...
A. Déclarer une variable ?
Comme il a été
dit dans ce module, une variable doit en principe être déclarée avant d’être
utilisée.Voici cependant un exemple de programme utilisant une variable sans la déclarer :
<html>
<head>
<title>
Pas de déclaration de variable
</title>
<script>
function Main(){
injure = document.BD.prop.value;
// récupération de la valeur insérée
// la variable injure n'a pas été déclarée
document.BD.echo.value = injure;
// affichage de la variable injure dans le champ echo
}
</script>
</head>
<body>
<form name="BD">
<h1>
Proposez une des injures du capitaine Haddock
</h1>
<input type="text" name="prop">
<input type="button" value="répéter" onclick="Main()">
<input type="text" name="echo">
</form>
</body>
Recopiez ce code et enregistrez-le sous "echoV2.htm".</html>
Faut-il vraiment déclarer une variable ?
La réponse est
NON … en JavaScript !Lorsqu’on ne déclare pas une variable, la déclaration s’effectue d’elle-même. C’est ce que l’on appelle la déclaration implicite.
Voici encore une souplesse du JavaScript : la déclaration de variables n’est pas obligatoire.
Sachez que peu de langages acceptent cette méthode et que l’on vous conseille de l’éviter si vous souhaitez prendre de bonnes habitudes pour la suite ;-)
B. Quizz
En JavaScript, la
déclaration d’une variable
Est
automatique
Est
nécessaire et obligatoire
2. La déclaration
implicite de variables existe
Dans
tous les langages
Dans
quelques langages
C. Texte, nombres, booléens, …
Jusqu’à présent,
vous avez rencontré un seul type de variable : le type texte (ou chaîne de
caractères).Ex : var message="Bonjour tout le monde" ;
Bien sûr, il n’y a pas que des variables de type texte, il existe d’autres types de variables :
·
type numérique
·
type booléen
·
type tableau de données
Pour différencier
le type d’une variable de type texte, il suffit "d’entourer" le
contenu par des guillemets :varSans les guillemets, vous auriez obtenu une erreur…message
="Bonjour tout le monde";
Dans le module suivant, vous allez apprendre à déclarer et utiliser des variables de type numérique. Par la suite, vous apprendrez également à déclarer et à utiliser des tableaux de données.
D. Travailler sur du texte
"Ecrire un
programme qui demande à l’utilisateur (via un formulaire) de proposer le nom
d’un héros de BD qui a 6 lettres. Cette proposition est répétée dans un
deuxième champ du formulaire." (nom du fichier :
tronquerTxt.htm)Explication :
Peu importe la proposition de l’utilisateur, le programme n’affichera que les 6 premières lettres.
Par exemple :
L’utilisateur propose capitaine Haddock.
Le programme répète : capita.
L’utilisateur propose spirou.
Le programme répète spirou.
=> Le programme doit tronquer la proposition de l’utilisateur en ne prenant que les 6 premières lettres.
Voici la commande (ligne 5) qui permet de tronquer une chaîne de caractères :
varprop
;
varprop6let
;
prop
=document
.BD.prop
.value
;
// récupération de la proposition
prop6let
=prop
.substr(0,6);
prop.substr(0,6) est la méthode qui permet de tronquer la chaîne de caractères contenue dans la variable prop en commençant au début de la chaîne (0) et en prenant exactement 6 lettres (6).// troncature de la variable prop
substr signifie substring, sous-chaîne de caractères ou morceau de chaîne de caractères.
Vous pouvez essayer de faire l’exercice seul. Voici le code du programme .
<html>
<head>
<title>
Tronquer du texte
</title>
<script>
var prop;
var prop6let;
function Main(){
prop = document.BD.prop.value;
// récupération de la proposition
prop6let = prop.substr(0,6); // troncature de la variable prop
document.BD.echo.value = prop6let; // affichage de la variable prop6let
}
</script>
</head>
<body>
<form name="BD">
<h1>
Proposez le nom d'un héros de BD contenant 6 lettres
</h1>
<input type="text" name="prop">
<input type="button" value="Répéter" onclick="Main();">
<input type="Text" name="echo">
</form>
</body>
</html>
Exécuter le code
Ce programme n’affiche que les six premiers caractères de la proposition introduite par l’utilisateur. Voir la page
Ce programme n’affiche que les six premiers caractères de la proposition introduite par l’utilisateur. Voir la page
Quizz
Soit la variable message
contenant le texte "Bienvenue dans l’univers de la BD !". Laquelle de
ces commandes récupère uniquement le mot "Bienvenue" ?
message.substr(0,8)
message.substr(0,9)
message.substr(0,10)
Toujours avec la même
variable message, quel mot récupère la commande message.substr(31,2) ? (Conseil
: faites le test dans un petit programme !)
BD
BD
!
la
F. Encore du travail sur le texte !
Il existe une
grande quantité de commandes permettant de travailler sur une chaîne de
caractères. Voici quelques exemples de ce qu'il est possible de réaliser avec
celles-ci.Il existe encore d’autres méthodes permettant de travailler sur une chaîne de caractères. Vous trouverez la liste de ces méthodes dans une référence du langage JavaScript en regardant à l’objet String() (qui signifie "chaîne de caractères").
http://devguru.com/content/technologies/javascript/home.html
Aucun commentaire:
Enregistrer un commentaire
Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.