Pour savoir où est le cours :
En cas d'incohérence entre les deux, suivre les indications du site de deptinfo.
<script type="text/javascript"> function calculerLaSomme() { var n1= parseInt(document.getElementById('nombre1Ex1').value); var n2= parseInt(document.getElementById('nombre2Ex1').value); document.getElementById('resultatEx1').value= n1+n2; } </script> nombre 1<input type="text" name="nombre1Ex1" id="nombre1Ex1"/> nombre 2<input type="text" name="nombre2Ex1" id="nombre2Ex1"/> Résultat<input type="text" name="resultatEx1" id="resultatEx1"/> <button type="button" onclick="calculerLaSomme()"> calculer la somme</button>
nombre 1 | |
nombre 2 | |
Résultat |
Plusieurs solutions :
script
<script type="text/javascript"> ... code javascript </script>(à réserver à du code court et non réutilisable)
<script type="text/javascript" src="monSource.js"></script>
<button onclick="alert('click !')">clickez moi</button>
On peut aussi remplacer une URL par du javascript, en précisant javascript:
comme protocole:
comme pour les événements, on gardera le code le plus court possible.
<a href="javascript:alert('bonjour')">...</a>
<script type="text/javascript"> a= 'salut'; a= 3; a= a + 2; </script> <button onclick="alert('valeur de a '+ a)">montrer a</button>
var
:
<script type="text/javascript"> var a; </script>Notez que ça ne fixe pas son type pour autant.
function
.return
<script type="text/javascript"> function somme(a,b) { return a+b; } </script> <button onclick="alert(somme(3,2))"> montrer somme</button>
à noter:
somme
<script type="text/javascript"> // marche aussi sans var... var exempleVariable1= 0; function augmenter1() { exempleVariable1= exempleVariable1 + 1; } </script> <button onclick="augmenter1(); alert(exempleVariable1);"> montrer exempleVariable1 </button>Dans cet exemple, la variable exempleVariable1 modifiée par la fonction est la même que la variable globale.
var
.<script type="text/javascript"> // Variable globale exempleVariable2. var exempleVariable2= 0; function augmenter2() { // On déclare une variable locale exempleVariable2. // La nouvelle variable cache la variable globale var exempleVariable2=55; exempleVariable2= exempleVariable2 + 1; } </script> <button onclick="augmenter2(); alert(exempleVariable2);"> montrer exempleVariable1 </button>
length
(leur longueur) charAt(pos)
retourne une StringcharCodeAt(pos)
retourne le code ISO 88591 du caractèresplit(separateur)
: renvoie le tableau obtenu en découpant la chaîne.
s= "un,deux,trois"; t= s.split(",");
s= "un,deux,trois"; i= s.indexOf("tr"); // i vaut 8
Notez que ces deux fonctions sont très permissives. Elles acceptent des chaînes qui commencent par un nombre, et, s'il y a du texte après, elle l'ignorent. Pour tester si elles ont réussi, on utilisera la fonction isNaN().
s="1234"; i= parseInt(s); if (isNaN(i)) { alert(s + " n'est pas un nombre"); }
tab= new Array(); // Création du tableau tab[0]= 2; tab[1]= 3; s= 0; for (i= 0; i < tab.length; i++) { s+= tab[i]; }
tab= new Array("un", "deux", "trois");
length
s= tab.join(""); // s vaut undeuxtrois s= tab.join(":"); // s vaut un:deux:trois
if (CONDITION) { ACTIONS1; } else { ACTIONS2; }
for (INIT; TEST; INCREMENT) { ACTIONS; }exemple
s= 0; for (i= 0; i < tab.length; i++) { s= s+ tab[i]; }
while (CONDITION) { ACTIONS; }
do { ACTIONS; } while (CONDITION);
switch (VALEUR_A_TESTER) { case VAL1: ACTIONS; break; case VAL2: ACTIONS; break; default: ACTIONS; }Contrairement au C et au Java, la valeur à tester peut être une chaîne de caractères:
switch (reponse) { case "oui": alert("merci"); break; case "non": alert("au revoir"); break; }
document
, qui représente la page web.getElementById
Un texte
<p id="dom1">Un texte</p> <button onclick="document.getElementById('dom1').style.color='red';">peindre</button>
<script type="text/javascript"> function setCSS() { var elt= document.getElementById('controleParCSS'); var cssValue= document.getElementById('cssValue').value; var cssName= document.getElementById('cssName').value; switch (cssName) { case 'background': elt.style.background= cssValue; break; case 'color': elt.style.color= cssValue; break; case 'fontSize': elt.style.fontSize= cssValue; break; case 'display': // none : caché ; inline : dans le cours du texte; block : comme un bloc. elt.style.display= cssValue; break; case 'position': // static, absolute ou relative elt.style.position= cssValue; break; case 'left': elt.style.left= cssValue; break; case 'right': elt.style.right= cssValue; break; case 'top': elt.style.top= cssValue; break; case 'bottom': elt.style.bottom= cssValue; break; case 'width': elt.style.width= cssValue; break; case 'float': // élément flottant : left, right, none elt.style.cssFloat= cssValue; } // empêche le rechargement de la page return false; } </script>
On utilise en particulier la propriété "display", et sa valeur "none", pour faire apparaître et disparaître des éléments.
<button onclick="document.getElementById('coucou').style.display='none';">cacher</button> <div style="border: 2px solid red" id="coucou"> Vous le voyez ? </div>Exercice: écrire une fonction qui bascule l'élément entre l'état "caché" et l'état visible, et vice-versa.
On peut changer ce qu'une image affiche en modifiant sa propriété "src":
<img id="img1" src="ledlightblue.png" onmouseover="document.getElementById('img1').src='ledgreen.png'" onmouseout="document.getElementById('img1').src='ledlightblue.png'"/>