Javascript/DHTML Informatique M2 Master GMI Aide mémoire

Javascript/DHTML
Informatique M2
Master GMI
Aide mémoire Javascript
Où placer le code Javascript ?
Code Javascript placé dans la page HTML :
<script type=text/javascript> … </script>
Importation d'un code Javascript externe (dans le fichier moncode.js) :
<script type=text/javascript src=moncode.js></script>
Code Javascript exécuté lors d'un événement (un clic sur une image par exemple) :
<img src=monimage.jpg onclick="...">
Comment manipuler une balise HTML en Javascript ?
Il faut donner un identifiant (unique dans la page) à la balise HTML :
<h1 id=montitre>Titre principal</h1>
Le contenu de la balise peut ensuite être récupéré :
alert(document.getElementById('montitre').innerHTML);
ou modifié :
document.getElementById('montitre').innerHTML='Un nouveau titre';
Comment manipuler le contenu d'un champ texte ?
Il faut donner un identifiant (unique dans la page) au champ de texte :
Texte : <input type=text id=montexte>
Le contenu du champ de texte peut ensuite être récupéré :
alert(document.getElementById('montexte').value);
ou modifié :
document.getElementById('montitre').value='Un nouveau texte';
Attention à ne pas oublier l'élément value. Si vous l'oubliez vous manipuler le champ de texte au lieu de
manipuler son contenu.
Comment manipuler les styles CSS en Javascript ?
Chaque propriété CSS est accessible en Javascript de la manière suivante :
document.getElementById('montitre').style.color='red';
Notez que le nom des propriétés CSS est modifié lorsqu'il y a un tiret. Le tiret étant un caractère interdit dans
un nom de variable en Javascript. Dans ce cas, le tiret disparaît et le mot suivant le tiret prend une
majuscule. Voici un exemple manipulant la propriété background-color en Javascript :
document.getElementById('montitre').style.backgroundColor='#4500ff';
Comment bien structurer son code Javascript ?
Il est conseillé de réaliser des procédures pour donner une cohérence à plusieurs instructions :
<script type=text/javascript>
function MaProcedure()
{
...
}
</script>
<a href=page2.html onmouseover="MaProcedure();">Mon lien</a>
Nils Schaefer
Université de Reims
1/1