apprendre le javascript

Transcription

Javascript et interactivité dans les pages Html
Javascript est un langage de scripts qui s'ajoutent aux balises Html pour agrémenter la présentation et
l'interactivité des pages Web
Les scripts sont interprétés par le navigateur (dès Netscape 2 et MISE 3) donc accessibles dès
l'ouverture de la page.
Exemple de questionnaire réalisé sous Dreamweaver
Créer une nouvelle page Html
Saisir le texte relatif à une question, l'exposé d'un problème…
Insertion / Script
L'instruction alert("texte") affiche un message (dans le cas présent votre texte qui doit être saisi entre
guillemets) dans une
boite de dialogue
pourvue d'un bouton OK.
Pour continuer dans la
page, le lecteur devra
cliquer sur ce bouton.
Enregistrer la page
sous le nom test.htm
Visualiser le code inséré dans la page
<script language="JavaScript">
alert("attention à l'orthographe !")
</script>
Tester la page dans un navigateur
---------------------------------------------Dans la logique du langage Html, il faut signaler au navigateur par une balise, que ce qui suit est un
script et que c'est du Javascript (et non du VBScript). C'est la balise
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
---------------------------------------------Un icône représentatif de la position du script figure désormais dans la page Html (pour le voir, il est
nécessaire de demander l'affichage des "éléments invisibles", si c'est possible !)
Voici le symbole indiquant la précence d'un "invisible". En
cliquant dessus, la palette indiquant les propriétés de
l'objet permet d'accéder à son contenu pour le modifier au
besoin.
Pour permettre l'interactivité, il est souvent nécessaire de stocker temporairement une information
saisie par l'utilisateur via un champ de texte d'un formulaire et de la comparer au contenu d'une
variable préalablement déterminée par le concepteur de la page.
Iufm de Reims - Jacques Bresson - Interactivité et Javascript
page 1/5
Saisie du texte de la question :
Par exemple :
C'est la science qui étudie les processus de transmission et d'acquisition d'une discipline. On dit
souvent que son rôle est de transformer un savoir savant en un savoir à enseigner…
Insertion d'un champ de saisie dans la page
Commande : Insertion / Objet de formulaire / Champ de texte
Ou bien utiliser la palette flottante d'objets formulaires
Donner un nom à ce champ depuis la palette flottante de propriétés :
Nommer le champ de texte "reponse1"
La valeur saisie par l'utilisateur est stockée dans une boîte nommée "réponse1". On dit que cette boîte
est une variable (ce n'est rien d'autre qu'un espace de stockage dans la mémoire de l'ordinateur).
Il convient donc de créer un petit programme qui teste le contenu de cette variable et la compare au
texte de la réponse attendue.
On va donc créer une fonction qui sera stockée dans l'en-tête de la page html (en-tête qui ne
s'affiche pas dans la page.
Choisir d'afficher l'en-tête de la page puis cliquez dans la zone d’entête avant de générer la création de la fonction. De cette manière, elle
sera stockée dans la partie <Head> de la page Html.
Positionner donc le curseur dans l'en-tête puis, activer la commande : Insertion / script
Nom de la fonction suivie de ()
Si la valeur contenue dans la variable
reponse1 est égale à "didactique"
afficher ce message, sinon afficher le
message suivant.
On double le signe = car c'est une
comparaison des contenus des
variables
Attention function
et non fonction !
Ne pas oublier les { } encadrant les instructions
composant la fonction.
Il faut doubler les apostrophes pour éviter les
erreurs de syntaxe (par exemple : c''est bien)
Dans sa formulation la plus simple, l'expression if se présente comme suit
if (condition vraie) {
une ou plusieurs instructions;
}
Ainsi, si la condition est vérifiée, les instructions s'exécutent. Si elle ne l'est pas, les instructions ne
s'exécutent pas et le programme passe à la commande suivant l'accolade de fermeture.
IL est possible de compléter cette expression SI… ALORS par une instruction SINON, c'est
l'expression if...else
if (condition vraie) {
Si la condition est vérifiée
instructions1; instruction2
(true), le bloc d'instructions 1
}
s'exécute. Si elle ne l'est pas
else {
(false), le bloc d'instructions
instructions1bis; instruction2bis
2 s'exécute. Dans le cas où
}
il n'y a qu'une instruction, les
accolades sont facultatives.
page 2/5
Pour que cette fonction soit exécutée, il est nécessaire de créer un événement, par exemple un
clic sur un bouton.
Association d'un événement au bouton "vérifier
On souhaite qu'un clic de souris sur ce bouton provoque l'exécution de la fonction tester()
Le bouton étant sélectionné, il suffit d'afficher la fenêtre de comportements et d'ajouter le
comportement "Appel JavaScript"
On renseigne alors la boîte de dialogue en indiquant que c'est la fonction tester() qui devra être
exécutée
Enregistrer la page hml puis la tester (Fichier / aperçu dans le navigateur)
Exercice à réaliser
Recommencer l'opération pour la question2
Par exemple "Une fermière vend des œufs. Elle vend la moitié de ses œufs au premier client. Elle
vend la moitié du reste plus 6 œufs au second client. Elle n'a alors plus d'œufs ! Combien avait-elle
d'œufs au départ ?"
Il convient de mettre en place un nouveau champ de saisie, de le nommer reponse2, de créer
une nouvelle fonction tester2(), puis d'insérer un nouveau bouton pour lequel on définira un
comportement.
page 3/5
Cela fonctionne ?
Il est possible de tester en une seule fois les deux réponses, en utilisant un seul bouton de
vérification. On souhaiterait qu'il indique seulement le nombre de réponses bonnes, sans dire laquelle
est correcte s'il n'y en a qu'une sur les deux…
Voici l'exemple de la fonction qui permettrait cela
function tester3()
{
nombrebons=0;
if (reponse1.value == "didactique")
nombrebons=nombrebons+1;
if (reponse2.value ==24)
nombrebons=nombrebons+1;
alert("Tu as "+nombrebons+" bonne(s) réponse(s)")
}
Plus généralement…
Lorsque l'on travaille en javascript
On insère les champs dans des formulaires. Pour un questionnaire par exemple, on peut
insérer un formulaire pour chaque question
Choix des
C'est la commande : Insertion / formulaire qui le permet
boutons
Ou encore le bouton adéquat de la fenêtre d'objets
associés aux
formulaires
Il y a insertion dans la page d'une zone rectangulaire (tirets rouges) symbolisant
les limites du formulaire.
Si vous ne voyez pas cette zone, affichez les éléments invisibles de la page.
Donner un nom au formulaire :
Insérer ensuite le texte des question puis
les champs en les nommant également :
Comme tout langage Javascript obéit à une syntaxe…
En langage naturel on dirait : "le cendrier de l'automobile"
En javascript : voiture.cendrier.
Ainsi lorsque l'on souhaite obtenir (pour la comparer à une autre valeur) la valeur contenue dans une
variable reponse1, reponse1.value est insuffisant pour identifier de quelle variable on parle. Si cette
variable est insérée dans le formulaire question1, c'est la syntaxe suivante qui sera correcte
question1.reponse1.value
On pourra donc avoir les champs reponse1, reponse2, reponse3 pour la question1, mais aussi pour
les autres : question1.reponse1.value est bien un champ différent de question2.reponse1.value
page 4/5
Les différents scripts apparaissent dans la zone d'en-tête, au besoin il
faudra l'afficher.
Pour pouvoir réutiliser facilement des fonctions dans d'autres pages Html, il peut être plus facile de ne
pas inclure dans le descriptif de la fonction la valeur exacte à laquelle on compare une variable et de
stocker préalablement les réponses attendues dans d'autres variables.
Dans l'en-tête de la page Html, on affecte les variables
Placer le curseur dans l'en-tête puis Insertion/ script
Ainsi, dans le descriptif des fonctions qui suivra la
déclaration des variables, au lieu de tester :
If (question1.reponse1.value== "didactique")
On pourra écrire
If (question1.reponse1.value== trouvequestion1)
La mise à jour des questionnaires s'en trouvera facilitée.
Les variables sont précédées de
l'instruction var et son séparées
entre-elles par des ;
Le signe = signifie que l'on
affecte la valeur "didactique" à la
variable trouvequestion1
Remarque : le cas particulier des boutons radios
Les boutons radios sont insérés à partir des commandes de la fenêtre formulaire
Dans certains questionnaires, on préfèrera utiliser des boutons radios à cocher,
par exemple
Les deux boutons ont même nom (ici q1) mais deux valeurs différentes (0 ou 1)
Le test associé sera par exemple :
function verification()
{
if (quest1.q1[1].checked)
alert("bravo !")
if (quest1.q1[0].checked)
alert ("perdu !")
}
Mais le bouton radio étant composé d'une image, il
est possible de lui associer un comportement tel
qu'un clic sur le bouton provoque l'exécution d'un
scénario (le déplacement d'un calque contenant
une aide par exemple). Voir à ce sujet la
documentation relative à Dreamweaver (J.Bresson,
Iufm de Reims) disponible sur le site web de l'Iufm.
Pour en savoir plus sur le javascript :
www.imaginet.fr/ime/toc.htm
http://www.ccim.be/ccim328/js/if.htm
www.legratuit.com (voir liens vers javascript)
www.anima.net/html.html
www.imaginet.fr/ime/html32.htm
http://mediatheque.ircam.fr/docs/html
http://altern.org/jvscript
www.asaisir.com/a_la_page/data/trucs
http://move.to/joan
www.chez.com/proghtml/
http://www.philgate.com/web/index.html
www.script-france.net
www.ccimbe/ccim328/trucs/arceche.fr/~golesti
n/info/jvscript/dhtml.htm
www.javascriptcity.com
www.multimania.com/gratuitdunet/gratuit.html
page 5/5

apprendre le javascript

Transcription

Documents pareils

Tutoriel : Javascript | Catégorie : Divers | Ecrit par Mathieusub le 16

TD TD –– Javascript

Paramètres (arguments)

1 Utiliser JavaScript dans HTML

2 + 2 personnes, 50 m2 Platano est un appartement

Erreurs JavaScript (bogues) :

Offre de stage Développeur PHP/ASP

Lotus Notes Domino v7/v8, JavaScript

dreamweaver perfectionnement