Ministère de l'Environnement, de l'Énergie et de la Mer
Menu d'accessibilité
Cours Informatique
Pour accéder à un environnement de développement sommaire permettant de faire les exercices, cliquer ici
Il est important que les erreurs JavaScript soient signalées.
Avec Internet Explorer, double cliquer sur le triangle jaune à gauche de la barre d'état pour avoir le message d'erreur. On peut aussi avoir une notification de chaque erreur de script en cochant la case adéquate dans les options internet (onglet "avancé").
Avec Mozilla, il faut afficher la console JavaScript.
Windows XP Service Pack 2 bloque par défaut les Javascript, si le fichier HTML est local. Il faut activer l'option "Autoriser l'exécution de fichiers avec du contenu actif sur mon ordinateur" dans les options internet (onglet "avancé", section "sécurité").
Première chose que l'on fait en apprenant un nouveau langage de programmation.
alert('message') est la fonction qui permet d'afficher des informations.
Les caractères spéciaux peuvent être utilisés dans les chaînes (\n retour à la ligne, \t tabulation). Le caractère \ permet d'insérer apostrophes et guillemets dans une chaîne: on utilise \'
Pour afficher une valeur numérique il n'est pas nécessaire de mettre entre guillemets.Une variable est une sorte de case dans laquelle on met de l'information.
Le nom d'une variable doit être une lettre ou commencer par une lettre.
On crée une variable par le mot clé 'var'.
On affecte une valeur ou le résultat d'un calcul par '='.
Types de données: nombres entiers, réels, chaines de caractère, booléens, dates,...
var X=3.1416;
var TEXTE='mon texte';
var I=3;
var REPONSE=false;
var RESULTAT;
RESULTAT=I*3+2;
RESULTAT=2*RESULTAT;
Exemple d'opérateurs arithmétiques possibles pour les calculs: + - * /
Autre opérateur d'affectation: n+=3 incrémente n de 3. De même pour les autres opérateurs arithmétiques.
'+=' fonctionne aussi pour les chaînes de caractères.
Exercice: affecter la valeur numérique 2 à une variable du nom de votre choix, afficher sa valeur.
Exercice: faire le calcul 3+5*2, afficher le résultat
La typage des données étant assez faible, une variable déclarée dans un type peut être utilisée dans un autre type sans que de message d'erreur n'apparaisse. Le navigateur risque de ne pas supporter et de provoquer une erreur, mais personne ne vous dira exactement pourquoi.
reel=parseFloat(chaine) analyse une chaîne de caractères et retourne sa valeur en virgule flottante
entier=parseInt(chaine,10) retourne la valeur entière de la chaîne de caractères dans la base indiquée
eval(chaine) convertit aussi une chaîne de caractères en valeur numérique. Cette fonction évalue les expressions dans une chaîne de caractères et renvoie la valeur correspondante. Elle permet aussi d'interpréter des commandes à la volée.
JavaScript convertit automatiquement les entiers en chaînes de caractères, ce qui vous permet de concaténer des entiers avec des chaînes de caractères pour donner finalement une chaîne.
Si nom est une variable qui a la valeur 'Toto'
'Bonjour, '+ nom équivaut à 'Bonjour, Toto'
Exercice:Créer la variable nom, afficher cela
var valeur=prompt('Donner une valeur :','défaut')
'Prompt' retourne une valeur de type chaîne de caractère.
Exercice: demander 'Quel âge as tu?', le stocker dans un variable, puis afficher 'Tu as XX ans'
Permet d'aiguiller vers des actions différentes suivant la valeur testée.
if (condition) {
actions si vrai
}
else {
actions si faux
}
Le else est facultatif.
Opérateurs de comparaison: == (ne pas utiliser '=' !!) > < >= <= != (différent). On peut tester plusieurs valeurs avec && (et) et || (ou).
Les {} permettent de regrouper plusieurs commandes (bloc).
On a coutume d'indenter le contenu d'un bloc afin de le mettre en évidence.
En utilisant des else if on peut tester successivement plusieurs valeurs.
Exercice: si l'age stocké est supérieur ou égal à 20 ans, afficher 'En route vers l'âge mûr' et sinon : 'Bien jeune!'
On répête une action tant que la valeur de sortie n'est pas atteinte.
Attention, en cas d'erreur on peut planter l'explorateur!!
Deux types de boucles:
while(condition) {actions}
for (var i=debut;i<=fin;i++) {
actions
}
i++ signifie incrémenter i. (équivaut à i=i+1 ou i+=1)
Exercice: Demander "combien de tours?", faire une boucle "for" qui affiche successivement "tour numéro XX"
function monModule()
{
//Déclarations+lecture variables
var resultat;
//Calcul
instruction1;
instruction2;
//Affichage
alert(resultat);
}
On peut déclarer des variables dans le corps d'une fonction. Elles ne seront alors visibles que dans cette fonction (variable locale).
Les variables déclarées en dehors des fonctions sont appelées variables globales.
prompt(question,defaut) est une fonction qui retourne une valeur.
On définit une fonction utilisateur par:
function f(x,y)
{
var resultat;
commandes
return resultat;
}
x et y sont les paramètres de la fonction. On peut les utiliser dans le corps de la fonction.
Une procédure est une fonction qui ne retourne pas de résultat (pas de return). Alert(message) est une procédure.
Exercice:Mettre sous forme de fonctions les programmes des exercices précédents
Exercice:Créer un programme permettant d'afficher la table de multiplication d'un nombre
Exercice: écrire une fonction carre qui retourne le carré d'un nombre. Demander un nombre et afficher "le carré de XX est XX".
Exercice: même démarche pour la fonction "factorielle"
Javascript permet de lire et de mettre à jour les informations contenues dans les formulaires de pages HTML.
à titre d'exemple, le formulaire HTML :
<FORM NAME="monFormulaire"> <INPUT NAME="monChamp"> </FORM>
donne la sortie :
La valeur du texte entré est accessible en lecture ou écriture par la variable document.monFormulaire.monChamp.value
Le formulaire dans un document est stocké dans un tableau appelé forms, le premier formulaire est noté forms[0], la deuxième est forms[1] etc..
Les éléments d'un formulaire sont stockés dans un tableau appelé elements, le premier champ est noté elements[0].
Ainsi la valeur du texte entré qui était document.monFormulaire.monChamp.value peut être aussi appelé document.forms[0].elements[0].value.
Vérification d'une case à cocher ou d'un bouton radio:
if (document.form1.elements[0].checked) {...}
Pour les boutons radio, il est indispensable de passer par le tableau elements (car les différents boutons ont le même nom!)
(On peut aussi affecter manuellement true ou false à checked)
Pour le SELECT, on récupére le texte sélectionné par:document.formulaire.champListe.options[document.formulaire.champListe.selectedIndex].text
Le numéro d'option sélectionné est accessible par:
document.formulaire.champListe.selectedIndex
(on peut aussi affecter manuellement une valeur pour sélectionner une option) Sélection multiple: if (document.formulaire.champListe.options[3].selected)
Exercice: Afficher dans une boite de dialogue (alert()) le contenu de la zone de texte contenant le programme. En sachant que le nom du formulaire est "formulaire" et le nom de la zone de texte est "programme".
| Commande | Javascript | avec IHM |
|---|---|---|
| Lire NOM | NOM=prompt('entrez NOM','')) | NOM=document.form1.NOM.value |
| Lire N | N=parseInt(prompt('entrez N','')) | N=parseInt(document.form1.N.value) |
| Lire X | X=parseFloat(prompt('entrez X','')) | X=parseFloat(document.form1.X.value) |
| Afficher N | alert(N) | document.form1.N.value=N |
JavaScript peut être implanté dans une page HTML de plusieurs façons :
Liens javascript, l'URL est de la forme:
javascript:alert('Bonjour')
On peut aussi utiliser des liens JavaScript complexes, càd ne se limitant pas à l'appel d'une fonction (déconseillé!)
L'URL suivante est valide!
javascript:function factorielle(n) {return n<=1?1:n*factorielle(n-1);}var n=prompt('Chiffre dont vous voulez la factorielle:', '12');alert(n+' ! = '+factorielle(n));
On peut indiquer des choses pour les anciens navigateurs dans un bloc NOSCRIPT
Au niveau des évènements :