Ce cours introduit à la programmation. La syntaxe retenue est
commune aux langages de programmation objets les plus répandus:
java, C++ et javascript.
Le langage 'javascript' est le plus simple à utiliser. C'est un
langage interprété, ce qui signifie que l'on peut exécuter immédiatement
un programme.
On travaille à partir du code "source".
C++ et java sont des langages qui nécessitent une compilation préalable.
Ils sont par ailleurs beaucoup plus "riches".
On travaille à partir du code "objet" (binaire).
Les navigateurs de Netscape et les explorateurs internet
contiennent un interpréteur javascript.
On peut donc programmer directement en javascript sur son
ordinateur personnel si l'on a l'un de ces programmes sans
installer d'autres programmes.
L'utilité première de Javascript est de personnaliser les pages
HTML du web.
Une commande se termine par un ;
Attention, JavaScript est sensible à la casse (majuscules ou
minuscules). En général on écrit les noms de variables et de
fonctions en minuscules en mettant seulement une majuscule à la
première lettre du deuxième mot (et des suivants) pour les noms
composés (par exemple: lastModified)
On peut insérer des commentaires dans son programme en faisant débuter
la ligne par //
Pour un commentaire multilignes, l'inclure entre /* et
*/
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.
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) 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'
var valeur=prompt('Donner une valeur :','défaut')
'Prompt' retourne une valeur de type chaîne de caractère.
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.
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.
function monProgramme()
{
//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.
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 stocké dans:
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)
| 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 :