Javascript!

Bon tuto: (comparé à celui-ci) MDN tuto

1. premier essai

voici un premier exemple de javascript: https://jsfiddle.net/890grq79/

En appuyant sur "Run", le script va être lancé et une popup affichée, grâce à la fonction "alert".

2. console javascript

Un outil important à connaitre en JS (javascript), c'est la console. Elle permet de voir s'il y a des erreurs dans votre code. Pour y accéder, il faut appuyer sur F12 (sur Chrome, je ne suis pas sur à propos de firefox) et cliquer sur "console".

On peut aussi afficher ce qu'on veut dans la console, ex: https://jsfiddle.net/890grq79/1/

3. variables et fonctions

Maintenant que la console est ouverte, je vais pouvoir vous expliquer quelques concepts importants et que l'on retrouve dans tous les langages de programmation: les variables et les fonctions.

Commençons par les variables: https://jsfiddle.net/890grq79/2/

Vous remarquerez que le mot "var" est utilisé pour définir une variable, et que dans ce cas ci la variable est:

• a. Assignée au texte "bonjour, ceci devrait être affiché dans la console javascript"
• b. Utilisée dans la fonction console.log()

4. variables

Le but d'utiliser des variables est qu'on peut les manipuler et les réutiliser à volonté: https://jsfiddle.net/890grq79/4/

Dans cet exemple ci, la variable "texte" a été utilisée 3X. Dans la fin, on crée une nouvelle variable "texteDeFin" qui est la concaténation de "texte" et d'un nouveau texte.

5. fonctions

Les fonctions sont un type particulier de variable, elles permettent de définir un block de texte et de pouvoir le rééxécuter autant de fois qu'on le désire, ex: jsfiddle

Vous noterez au passage que j'ai déplacé le script du code html vers la fenêtre javascript, cela revient au même que s'il était placé dans les balises "script".

On peut donc voir la définition d'une fonction "bonjour", qui contient du code délimité par { et }.

Ensuite on appelle cette fonction 3X d'affilée. Les fonctions ne sont jamais exécutées à moins qu'on ne les appelle. Enlevez les "bonjour()" et vous verrez qu'il n'y a plus rien d'affiché dans la console

6. l'appel des fonctions

Il y a plusieurs façons d'appeller une fonction, et l'une d'entre elles est l'attribut html "onclick": jsfiddle

Pour être utilisable sur la page, la fonction a été rajoutée à l'élément "window" qui est accessible de partout.

Si vous voulez utiliser des fonctions dans la page, c'est une manière propre de le faire.

7. manipuler du html

Maintenant que nous savons utiliser la base du javascript, nous pouvons nous intéresser à une partie plus visuelle: modifier du code html!

Voici un exemple de changement de couleur:

On peut aussi change/insérer le texte d'un élément html: