Quelques règles de syntaxe
Les mots clés sont en minuscules, tout le reste est en minuscule ou majuscule mais sensible à la casse.
Les variables sont non typées, et peuvent être ou non déclarées avec le mot clé ‘var’. Seules les déclarations de variables locales au sein d’une fonction sont obligatoires.
var ma_variable1;
autre_variable_sans_declaration = « au revoir » ;
Les chaines peuvent être entre guillemets ou entre cotes, et inclure symétriquement des cotes ou des guillemets . Une chaine peut être ‘éclatée’ sur plusieurs lignes grace au caractère ‘\’ :
chaine1 = « l’apostrophe est autorisée ici »
chaine2 = ‘ et la c’est le » ‘
document.write(« bonjour \
tout le monde »)
// ceci est un commentaire sur une ligne
/* ceci est un
commentaire sur
plusieurs lignes*/
Comment inclure du code
Un programme javascript peut apparaître à de multiple endroits et se présenter de différentes façons dans un document HTML.
Le moyen le plus répandu est d’utiliser une balise spéciale, la balise <SCRIPT>
<script type= »text/javascript »>
ici_des_instructions_javascripts
</script>
Compatibilité avec les vieilles versions de navigateur
C’est de moins en moins le cas mais dans le cas où de vieux navigateurs ne supporteraient le langage javascripts, afin d’éviter une erreur, on pourra masquer le code par des commentaires HTML (un navigateur supportant javascript, ignorera ces caractères…)
<script type= »text/javascript »>
<!–
document.write(« re bonjour »)
//–>
</script>
balise <SCRIPT> dans le corps du document
<html>
<body>
<script type= »text/javascript »>
document.write(« salut »)
</script>
</body>
</html>
balise <SCRIPT> dans l’entête du document
<html>
<head>
<script type= »text/javascript »>
document.write(« salut »)
</script>
</head>
<body>
…
</body>
</html>
javascript dans un fichier externe
Il est possible également de faire appel � du code stocké dans un fichier extérieur au document HTML. La balise <SCRIPT> fera simplement référence � un nom de fichier sur le serveur ! Cela peut avoir plusieurs avantages :
- alléger la page HTML et la rendre plus lisible
- factoriser le code pour plusieurs pages HTML, et le rendre ainsi réutilisable et plus facilement maintenable
<html>
<head>
<script src= »mon_fichier_externe.js »></script>
</head>
<body>
</body>
</html>
fonctions javascript
Ces fonctions seront généralement définies dans l’entête du document HTML, et peuvent être appelées plus loin dans le code
<html>
<head>
<script type= »text/javascript »>
function message()
{
alert (« Attention le nombre x vaut 0!!! »)
}
var x;
…
if (x==0) message();
…
</script>
</head>
<body>
…
</body>
</html>
gestion d’événement en javascript
Lorsqu’un événement utilisateur survient : clic de souris, chargement de la page, survol d’une image, … on peut déclarer du code javascript comme gestionnaire de cet événement (event handler).
Les instructions du programme déclenché pourront directement apparaître derrière l’événement, dans l’attribut d’une balise HTML, ou sous forme d’appel d’une fonction définie en amont dans la page.
<html>
<head>
<script type= »text/javascript »>
function message_bienvenue()
{
alert(« au chargement de la page je m’affiche ! »)
}
</script>
</head>
<body onload= »message_bienvenue() »>
</body>
</html>
URLs javascript
Une balise HTML qui a comme attribut un URL (une adresse Internet) peut accueillir du code Javascript, en lieu et place de cet URL.
Ainsi les balises suivantes :
<FORM ACTION= »url »…>,
<A href= »url »…>
<IMG src= »url »…>
<LINK REL=… href= »url »…>
<AREA href= »url »…>
…
acceptent un appel � du code javascript .
Dans un URL standard c’est en général le protocole ‘http:’ qui est utilisé et qui marque le début de l’URL. Ici on utilisera le pseudo protocole ‘javascript:’
<FORM NAME= « form1 » ACTION= »javascript:valider_formulaire_avant_envoi() »…>
Entrer un nom <INPUT TYPE= »TEXT »…>
…
</FORM>
// ici l’action n’est pas l’appel d’un document ou d’un programme du serveur
// mais l’appel de code javascript interne
Quelques exemples classiques cavec des formulaires :
L’utilisation de javascript est très fréquente avec les formulaires, car il est utile de vérifier les saisies de l’utilisateur AVANT l’envoi des données au serveur. Le javascript étant par définition exécuté sur le client (votre PC)
Il évite des aller-retours inutiles � chaque erreur de saisie.
<FORM NAME= « form2″ ACTION= » « …>
Entrer un nom <INPUT TYPE= »TEXT »…>
<INPUT TYPE= »SUBMIT » VALUE= »Envoi » onClick=test_valeurs()>
…
</FORM>
// ici l’action est vide
// mais c’est l’événement onclick appelle une vérification Javascript
// on peut aussi déclencher sur un evénement onSubmit de la balise <FORM>
// cela aura le même effet que précédemment
<FORM NAME= « form3″ ACTION= » mail.php » onSubmit= »test_valeurs()…>
Entrer un nom <INPUT TYPE= »TEXT »…>
<INPUT TYPE= »SUBMIT » VALUE= »Envoi »>
…
</FORM>
remarque : dans ce 2eme exemple il est probable que la fonction javascript test_valeurs() teste les entrées du formulaire et appelle ensuite un document pour effectuer l’action suivant le formulaire.
Dans certains cas le code javascript peut apparaitre simultanément dans plusieurs balises du formulaire, il sera alors executé dans l’ordre logique.
entités javascript
Une entité est un genre de symbole qui représente un caractère ou une chaine de caractères. Un exemple simple est l’entité ‘caractère espace’ que l’on note ‘& nbsp; ‘ ou l’entité caractère ‘inférieur’ ou ‘<‘ que l’on note ‘& lt;’.
Il est donc enfin possible de mettre du code Javascript dans n’importe quel attribut de balise, sous forme d’entité. Le code sera introduit par un ‘&’ et encadré par des accolades.
<BODY BGCOLOR= »&{couleur_du_theme();} » >
