Introduction à JavaScript

Un premier script


<script>
document.write("Bonjour Aubagne !");
</script>

Réajustements


<script language="javascript">
<!--

document.write("Bonjour Aubagne !");

//-->
</script>

La page html complète


<html>
<head>
<title>Un premier script</title>
</head>

<body>

<h2>Un premier script</h2>

<script language="javascript">
<!--

document.write("Bonjour Aubagne !");

//-->
</script>

</body>
</html>

Un premier script

Valeurs

JavaScript reconnait les types de valeurs suivants :
  • les nombres, par exemple 42 et 3.14159,
  • les valeurs logiques : soit true, soit false,
  • les chaines de caractères comme "toto",
  • null, la valeur nulle
  • et undefined, une valeur non définie. 

<script language="javascript">
<!--

document.write(42 + "<br>");
document.write(3.14159 + "<br>");
document.write(true + "<br>");
document.write(false + "<br>");
document.write(null + "<br>");
document.write(undefined + "<br>");

//-->
</script>

Variables

Une variables est utilisée pour stocker des valeurs à l'intérieur d'un script. Son nom doit commencer par une lettre (de 'a' à 'z' et de 'A' à 'Z') ou bien un tiret de soulignement ('_'). 

<script language="javascript">
<!--

pi = 3.1415928;
y_a_un_bug = false;
prenom = "Marcel";
nom = "Cerdan";

document.write(pi + "<br>");
document.write(y_a_un_bug + "<br>");
document.write(prenom + " " + nom + "<br>");

//-->
</script>

Expressions

  • Expressions arithmétiques
    • L'addition 'a + b',
    • la soustraction 'a - b',
    • la multiplication 'a * b',
    • la division 'a / b'
    • et le modulo 'a % b'.
  • Expressions logiques
    • le et 'a && b',
    • le ou 'a || b'
    • et le non '!a'.
  • Comparaisons
    • l'égalité 'a == b',
    • l'innégalité 'a != b',
    • l'inférieur strict 'a < b',
    • l'inférieur ou égal 'a <= b',
    • le supérieur strict 'a > b'
    • et le supérieur ou égal 'a >= b'. 
pi = 3.14159;
deg = 180;
rad = 2;
document.write(rad + " radians = "
        + (rad*180)/pi + "degres");

document.write((true && false) + " <br>");
document.write((true || false) + " <br>");
document.write(!false);

document.write((5 == 4) + " <br>");
document.write((rad <= pi) + " <br>");
document.write((-8 < -4) && (5.1 >= 5.1));

Structures de controle

if... else
Utiliser le if pour exécuter certaines instructions si une expression logique est vraie utiliser le else optionnel si il faut exécuter d'autres instructions lorsque l'expression est fausse. 
if (rad < pi)
{
   document.write(rad + " est inferieur a " + pi);
}
else
{
   document.write(rad + " est superieur a " + pi);
}

switch... case
Utiliser le switch pour évaluer une expression devant etre étre égale à l'une des valeurs des case. 
switch(rad)
{
case 1 :
  document.write("un");
  break;
case 2 :
  document.write("deux");
  break;
case 3 :
  document.write("trois");
  break;
default :
  document.write("quatre ou plus");
  break;
}

do... while
Utiliser le do... while pour exécuter des instructions jusqu'à ce qu'une expression logique est fausse. 
i = 1;
do
{
  document.write(i + "<br>");
  i = i + 1;
}
while (i <= 10);

while
Utiliser le while pour exécuter des instructions tant qu'une expression logique est vraie. 
i = 1;
while (i <= 10)
{
  document.write(i + "<br>");
  i = i + 1;
}

for
La boucle for est une simplification du while. 
for (i = 1; i <= 10; i = i + 1)
{
  document.write(i + "<br>");
}

Imbrication des structures de controle

Un switch... case dans un for 
for (i = 1; i <= 6; i = i + 1)
{
  switch(i)
  {
  case 1 :
    document.write("un");
    break;
  case 2 :
    document.write("deux");
    break;
  case 3 :
    document.write("trois");
    break;
  default :
    document.write("quatre ou plus");
    break;
  }
  document.write("<br>");
}

Un for imbriqué dans un autre for 
for (i = 1; i <= 10; i = i + 1)
{
  for (j = 1; j <= 10; j = j + 1)
  {
    document.write(i + j + " ");
  }
  document.write("<br>");
}

Exercice 1

Afficher une (belle) table de multiplications, comme ceci :

Solution


<script language="javascript">
<!--

document.write("<table align=center><td bgcolor=#008060><table>");
for (i = 1; i <= 10; i = i + 1)
{
  document.write("<tr>");
  for (j = 1; j <= 10; j = j + 1)
  {
    document.write("<td align=right bgcolor=#dddddd><font size=5>"
                   + i * j + "</td>");
  }
  document.write("</tr>");
}
document.write("</table></td></table>");

//-->
</script>

Exercice 2

Il vous est maintenant facile d'afficher les 3 nuanciers suivants :

Solution


<script language="javascript">
<!--

document.write("<table align=center cellspacing=20><tr>
               <td bgcolor=#000000><table cellspacing=0>");
for (i = 10; i < 100; i = i + 10)
{
  document.write("<tr>");
  for (j = 10; j < 100; j = j + 10)
  {
    document.write("<td bgcolor=#00"
                   + i + "" + j + "><font size=5>&nbsp;&nbsp;&nbsp;</td>");
  }
  document.write("</tr>");
}
document.write("</table></td><td bgcolor=#000000><table cellspacing=0>");
for (i = 10; i < 100; i = i + 10)
{
  document.write("<tr>");
  for (j = 10; j < 100; j = j + 10)
  {
    document.write("<td bgcolor=#"
                   + i + "00" + j + "><font size=5>&nbsp;&nbsp;&nbsp;</td>");
  }
  document.write("</tr>");
}
document.write("</table></td><td bgcolor=#000000><table cellspacing=0>");
for (i = 10; i < 100; i = i + 10)
{
  document.write("<tr>");
  for (j = 10; j < 100; j = j + 10)
  {
    document.write("<td bgcolor=#"
                   + i + "" + j + "00><font size=5>&nbsp;&nbsp;&nbsp;</td>");
  }
  document.write("</tr>");
}
document.write("</table></td></tr></table>");

//-->
</script>

Tableaux


animaux = new Array(5);

animaux[0] = "chat";
animaux[1] = "chien";
animaux[2] = "chameau";
animaux[3] = 3.1415926;
animaux[4] = false;

for (i = 0; i < 5; i++)
        document.write(animaux[i] + "<br>");



animaux = new Array("chat", "chien", "chameau", 3.1415926, false);

for (i = 0; i < 5; i++)
        document.write(animaux[i] + "<br>");

Exercice 3

Ecrire un programme qui affiche la somme des éléments d'un tableau, comme ceci :


Solution

t = new Array(10);


for (i = 0; i < 10; i++)
  t[i] = Math.ceil(20*Math.random());

document.write("Contenu du tableau : ");
for (i = 0; i < 10; i++)
  document.write(t[i] + " ");

somme = 0;
for (i = 0; i < 10; i++)
  somme = somme + t[i];

document.write("<br><br>La somme est : " + somme);

Exercice 4

Ecrire un programme qui trie un tableau de 10 éléments, comme ceci :


Solution

t = new Array(10);

for (i = 0; i < 10; i++)
  t[i] = Math.ceil(20*Math.random());

for (i = 0; i < 10; i++)
  document.write(t[i] + " ");

for (i = 0; i < 10; i++)
  for (j = i + 1; j < 10; j++)
    if (t[i] > t[j]) {
      k = t[i];
      t[i] = t[j];
      t[j] = k;
    }

document.write("<hr>");

for (i = 0; i < 10; i++)
        document.write(t[i] + " ");




t = new Array(3);

t[0] = new Array(3);
t[1] = new Array(3);
t[2] = new Array(3);

t[0][0] = 1; t[0][1] = 2; t[0][2] = 3;
t[1][0] = 4; t[1][1] = 5; t[1][2] = 6;
t[2][0] = 7; t[2][1] = 8; t[2][2] = 9;

for (i = 0; i < 3; i++)
        for (j = 0; j < 3; j++)
                document.write(t[i][j] + " ");

Images


<img src=ane.gif width=150 height=150>
<img src=mouton.gif width=150 height=150>
<img src=abeille.gif width=150 height=150>


for (im in document.images)
        document.write(document.images[im].src + "<br>");

plus


Objets

Un objet est une collection de propriétés et de méthodes. Une propriété est en fait une variable contenue dans l'objet, une méthodes une est une fonction spécifique à un objet.

L'objet document

for (prop_doc in document)
        document.write(prop_doc + " -- " + document[prop_doc] + "<br>");

L'objet document.images

for (prop_img in document.images)
        document.write(prop_img + " -- " + document.images[prop_img] + "<br>");

L'objet document.images[0]

for (prop in document.images[0])
        document.write(prop + " -- " + document.images[0][prop] + "<br>");

L'objet navigator

for (prop_nav in navigator)
        document.write(prop_nav + " -- " + navigator[prop_nav] + "<br>");

L'objet String

Les chaines de caractères sont des objets de type String. L'objet String nous fournit différentes méthodes.

charAt(i)

Fournit le i-ème caractère d'une chaine. 
animal = "Chien";
document.write(animal.charAt(2) + " ");
document.write(animal.charAt(4) + " ");
document.write(animal.charAt(0) + "<br>");

phrase = "Elu par cette Crapule";
for (i = 0; i < phrase.length; i++)
        document.write(phrase.charAt(phrase.length - i - 1));

indexOf(s)

Fournit la position du premier caractère de la premiere apparition de la chaine s dans une chaine. 
phrase = "Le maire si compétent remercia la mercière";
document.write(phrase.indexOf("merci"));

lastIndexOf(s)

Fournit la position du premier caractère de la derniere apparition de la chaine s dans une chaine. 
phrase = "Le maire si compétent remercia la mercière";
document.write(phrase.lastIndexOf("merci"));

split(s)

Cette méthode découpe le texte en fonction de la chaine s. 
phrase = "Le maire si compétent remercia la mercière";
mots = phrase.split(" ");
for (i = 0; i < mots.length; i++)
        document.write(mots[i] + "<br>");

substring(i, j)

Cette méthode donne la sous-chaine comprise entre l'indice i et l'indice j. 
phrase = "Le maire si compétent remercia la mercière";
for (i = 0; i < phrase.length; i++)
        document.write(phrase.substring(0, i) + "<br>");
for (i = 0; i < phrase.length; i++)
        document.write(phrase.substring(i, phrase.length) + "<br>");

toLowerCase() et toUpperCase()

phrase = "Le maire si compétent remercia la mercière";
document.write(phrase.toLowerCase() + "<br>");
document.write(phrase.toUpperCase() + "<br>");

L'objet Array

Cet objet fournit lui aussi des méthodes très interressantes...

join(s)

L'inverse de split(s) 
phrase = "Le maire si compétent remercia la mercière";
mots = phrase.split(" ");
document.write(mots.join("*") + "<br>");
document.write(mots.join("<br>"));

reverse()

Inverse l'ordre des éléments d'un tableau. 
phrase = "Le maire si compétent remercia la mercière";
mots = phrase.split(" ");
document.write(mots.reverse().join("<br>"));

sort()

Trie les éléments d'un tableau dans l'ordre lexicographique. 
phrase = "Le maire si compétent remercia la mercière";
mots = phrase.split(" ");
document.write(mots.sort().join("<br>"));

L'objet Math

Propriétés

for (i in Math)
        document.write("+ Math." + i + " = " + Math[i] + "<br>");

Méthodes

abs(x)Valeur absolue de x
cos(a)Cosinus de a
sin(a)Sinus de a
tan(a)Tangente de a
asin(x)Arc-sinus de x
acos(y)Arc-cosinus de y
atan(r)Arc-tangente de r
exp(x)Exponentionnelle de x
log(x)Logarithme de x
sqrt(x)Racine carree de x
random()Nombre aléatoire
ceil(r)Valeur approchée de r par défaut
floor(r)Valeur approchée de r par excès
max(a, b)Plus grand des deux
min(a, b)Plus petit des deux
round(r)Valeur approchée de r

Formulaires

Texte


<form name=form1>
<input name=bonjour type=text value="Bonjour !">
</form>

<script>
document.write(document.form1.bonjour.value);
</script>

Bouton


<form name=form2>
<input name=chaine type=text>
<input type=button value="Changer" onClick="change()">
</form>

<script>
function change()
{
  document.form2.chaine.value = "Hello !";
}
</script>



<form name=form3>
<input name=chaine type=text>
<input type=button value="Incremente" onClick="incremente()">
</form>

<script>
function incremente()
{
  document.form3.chaine.value = 
    parseInt(document.form3.chaine.value) + 1;
}
</script>

Exercice

Réaliser un convertisseur francs vers euros, comme ceci :
Francs :
Euros :

Solution


<form name=calcul>

<table align=center>
 <tr>
  <td align=right><b>Francs :</td>
  <td><input name=francs value=0></td>
 </tr>
 <tr>
  <td align=right>Euros :</td>
  <td><input name=euros value=0></td>
 </tr>
 <tr>
  <td align=center colspan=2>
    <input type=button value="Convertir" onClick="convertir()">
  </td>
 </tr>
</table>

</form>

<script>
function convertir()
{
  document.calcul.euros.value = eval(document.calcul.francs.value) / 5.56;
}
</script>

Boutons radio et à cocher


<form name=rbout>
<input type=radio name=animal value="Chien" onClick="chRadio()">Chien<br>
<input type=radio name=animal value="Chat" onClick="chRadio()">Chat<br>
<input type=radio name=animal value="Cheval" onClick="chRadio()">Cheval<br>
<input type=checkbox name=animal value="Hamster" onClick="chRadio()">Hamster<br>
<input type=checkbox name=animal value="Poisson" onClick="chRadio()">Poisson<br>
<input type=checkbox name=animal value="Oiseau" onClick="chRadio()">Oiseau<br>

<input type=text name=chaine>
</form>

<script>
function chRadio(s)
{
  s = "";
  for (i = 0; i < document.rbout.animal.length; i++)
    if (document.rbout.animal[i].checked)
      s = s + document.rbout.animal[i].value + " ";
  document.rbout.chaine.value = s;

}
</script>
Chien
Chat
Cheval
Hamster
Poisson
Oiseau

Sélections