Bonjour,

Vous avez deja vu precedement les langages html et css, qui vont vous permettre de construire et de
styliser des pages web. Mais cela manque un peu de dynamisme non ? Regardons du cote du javascript
pour changer tout ca !

Le javascript est, contrairement au html et css qui etaient plutot des langages de descriptions, un
langage de programmation. Il possede les meme bases que la plupart des langages de programmation.
Nous allons les decouvrir ensemble pas-a-pas.

Pour commencer voyons comment mettre du javascript dans notre page html, il suffit d'utiliser la balise
prevue a cet effet:

<script type=”text/javascript”>
mon code javascript ici
</script>

Les variables:
Tout d'abord, quesqu'une variable ?
En informatique une variable est un element qui associe un nom a une valeur.
Pour faire nos test nous utiliseront la fonction javascript alert(). Cette fonction permet de faire
apparaitre une fenetre avec du text dedans. Voici un exemple:

alert('toto');

vous affichera une fenetre dans laquelle se trouvera le texte suivant: toto.

Notez le ';' a la fin de la ligne, cela permet de dire au navigateur que nous allons passer a une autre
instruction, il est donc essentiel de le mettre a la fin de chacune de vos ligne.

Maintenant que nous avons vu comment afficher, voyons les variables. Tout d'abors nous allons voire
comment assigner une valeur a une variable:

var mavariable = 'toto';

Voyons maintenant ce que nous affiche:

alert(mavariable);

Si vous n'avez pas commis d'erreur la pop-up devrait vous afficher toto.

Bien sur nous pouvons stocker plusieurs type de donnees dedans, faite le meme test avec les valeur
suivante:

var mavariable = 42;

var test = 42;
var mavariable = test;
var mavariable = test + 8;

Comme vous pouvez les voir cela marche tres bien avec des nombres, mais on peut aussi dire qu'une
variable est egale a une autre variable, ce qui lui fera prendre la valeur de cette derniere.

Les boucles:
Les boucles sont un autre element qui va nous permettre d'effectuer une action en chaine selon une
condition de fin definie. Il existe plusieurs type de boucles mais nous verrons ici la boucle while.

Voici comment l'utiliser:

var stop = 5;
var start = 0;

while (start < stop)

{
start = start + 1;
}

N'hesitez pas a nous poser des question si vous ne comprenez pas ce code.

Ici il s'agit d'une boucle tres simple. Nous avons notre variable start qui vaut 0, notre variable stop qui
vaut 5.

Nous allons ensuite creer une boucle, ce qui se trouve entre parenthese represente la condition d'arret,
ici tant que la variable start est strictement inferieure a la variable stop.

Ensuite dans la boucle nous augmentons la valeur de start de 1;

La boucle va donc continuer jusqu'a ce que la variable start soit a 5.

Faites un alert(start); apres la boucle pour voir sa valeur.
Il s'agit ici d'une boucle tres simple, si vous etes a l'aise avec ce code, n'hesitez pas a effectuer d'autres
actions dans cette boucle (un alert, assigner une valeur, etc...);
Les conditions:

Une condition, comme son nom l'indique, va permettre d'executer une action ou une autre en fonction
de la veracite de la condition, pour faire des conditions, nous utilisons les mots clefs if(si), else(sinon),
et else if(sinon si), voici un exemple:

var test = 42;

if (test < 10)

{
alert('inferieur a 10');
}
else if (test == 42)
{
alert('egale a 42');
}
else
{
alert('superieur a 10');
}

Ici nous allons avoir une alerte avec le texte: “egale a 42”, car test est bien egale a 42. Comme je
n'utilise pour cet exemple que peux d'operateur de comparaison (==, <), voici une liste des principaux
operateurs de comparaison:

== egale
> strictement superieur
>= superieur ou egale
< strictement inferieur
!= different de

Les fonctions:

les fonctions vont nous permettre de definir tout un bloc d'instruction et de l'appeller au besoin, un bon
exemple vaut cependant mieux qu'un long discourt:

function aff_test()
{
alert('test');
}

Certes cette fonction ne sert pas a grand chose, mais une fois definie, nous allons pouvoir l'appeller a
tout moment:

exemple:
aff_test();

affichera une alert “test” si nous l'appelons apres avoir definie la fonction. Mes les possibilite sont tres
grandes donc, nous verrons plus de fonction par la suite

Les events:

Les events sont, comme leur nom l'indique, des evenements. En javascript, ces evenement sont
“ecoutable”, c'est-a-dire que nous allons pouvoir faire un sorte d'ecouter un event, par exemple un clic
sur un element, et d'effectuer une action lorsque cela ce produit.

Prenons ce code pour exemple:

<!DOCTYPE HTML>
<html>
<head>
<title>Ma premiere page web</title>
</head>

<body>
<div id="blocPrincipale">
<h1 id="titre">Mon titre en gros</h1>
<p id="paragraphe">
Mon paragraphe de texte
</p>
</div>
</body>

</html>

Ce code represente une page tres basique en html, nous allons y ajouter quelques ecouteurs
d'evenement pour la rendre dynamique.

Notez tout d'abord que j'utilise ici l'attribut html “id”, ce dernier va nous permettre d'identifier un
element de notre code html.

Pour pouvoir l'utiliser, nous allons proceder comme ceci:

var titre = document.getElementById('titre');

la fonction document.getElementById('titre') va nous permettre de recuperer l'element html qui porte

l'id “titre” et de s'en servir, voyons un exemple:

definition une fonction:

function changeBackground()
{
document.getElementById('titre').style.backgroundColor = “blue”;
}

cette fonction recupere donc l'element titre et modifie la couleur de fond de ce dernier. Appliquons
maintenant un ecouteur d'evenement sur ce titre:

var titre = document.getElementById('titre');

titre.addEventListener(“click”, changeBackground(), false);

voici donc comment se presente un ecouteur d'event. Il se place sur un element html, on definie sur
quelle action il doit se declancher(ici sur un click de souris), lors de ce click il appelera la fonction
changeBackground().

Voici ce que doit donner le code:

<!DOCTYPE HTML>
<html>
<head>
<title>Ma premiere page web</title>
</head>

<body>
<div id="blocPrincipale">
<h1 id="titre">Mon titre en gros</h1>
<p id="paragraphe">
Mon paragraphe de texte
</p>
</div>
</body>

</html>

<script type="text/javascript">

function changeBackground()
{
document.getElementById("titre").style.backgroundColor = "blue";
}

var titre = document.getElementById("titre");

titre.addEventListener("click", changeBackground, false);
</script>

Maintenant vous n'avez plus qu'a vous amuser et a regrader les different event que vous pouvez ecouter
Vous trouverez beaucoup d'informations sur le site w3schools et n'hesitez pas a nous poser des
questions.