Avant de commencer

À quoi ça sert ?

Javascript permet de manipuler le HTML et le CSS en faisant des animations par exemple. Il peut faire peur aux designers, mais peut s'avérer puissant même pour un débutant. Il suffit d'aller étape par étape et surtout d'avoir de bonnes bases en HTML & CSS. On va éviter de voir Javascript en profondeur, parce que c'est long à maîtriser. Il suffit de voir les bases dans un premier temps, puis d'utiliser jQuery qui va vraiment te faciliter la vie.

CSS3 ne suffit pas ?

CSS3 permet de faire quelques animations comme des déplacements au survol, mais reste très limité. Les effets ne marchent que pour les navigateurs récents, contrairement au Javascript.

Qu'est-ce que ce cours va te permettre de faire ?

Si tu es motivé et que tu es prêt à travailler, tu pourras comprendre des codes tout fait que tu va reprendre, et faire des animations de base dont un webdesigner a besoin. Ce qui est aussi important de savoir, c'est que le Javascript est un langage de programmation comme un autre : en l'apprenant, il te sera plus simple d'en apprendre d'autres comme le PHP.


Pour commencer

Insère du Javascript dans une page HTML

Voici le code qui permet d'insérer du Javascript dans une page HTML. La bonne pratique consiste à charger le Javascript dans un fichier externe, mais on peut utiliser ce code pour les exercices de ce cours.

<script language="javascript">
Place ici le code de ton script
</script>

Commente autant que tu peux

C'est important de mettre des commentaires pour te permettre de comprendre plus facilement et de travailler en équipe.

// pour les commentaires d’une ligne.

/* pour les commentaires
  répartis sur plusieurs lignes */

Met un point virgule à la fin de chaque ligne

Il est indispensable de mettre un point de virgule à la fin de chaque ligne, sinon le code ne marche pas.

document.write("Salut, ça gaze ?");


Les variables

Une variable est comme une bouteille. On peut y mettre de l'eau, puis la boire, et puis y mettre des chocapics (pourquoi pas ?). En Javascript, on va avoir besoin de variables pour se simplifier la vie. On peut y mettre du texte ou un nombre par exemple.


Pour créer une variable, il suffit d'écrire "var" suivi d'un espace et du nom que tu veux attribuer à la variable. Il faut faire attention à éviter quelques mots clés réservés, et de ne pas utiliser de lettres trop exotiques (lettres de A à Z en minuscules et majuscules mais sans d’accents, chiffres, tiret, souligné).


// je créé ma variable qui s'appelle maBouteille
var maBouteille;

// je lui attribue une information
maBouteille = "eau";

// je l'affiche
document.write(maBouteille);

// et je peux changer sa valeur
maBouteille = "chocapics";

// et l'afficher de nouveau
document.write(maBouteille);

Qu'est-ce qui va s'afficher à ton avis ? Teste le code pour voir !

Concaténation

Si on met un "+" entre des variables "texte" ou du texte directement, on va simplement les fusionner. Cela s'appelle la concaténation.


// je créé ma variable maBouteille en affectant la valeur "eau"
var maBouteille = "eau";

// je créé ma variable monAssiette en affectant la valeur "lasagnes"
var monAssiette = "lasagnes";

// je fusionne les 2 en mettant un texte " et " entre les 2
var concatenation = maBouteille + " et " + monAssiette;

// j'affiche le contenu de ma variable concatenation
document.write(concatenation);

Qu'est-ce qui va s'afficher à ton avis ? Teste le code pour voir !

Chiffres

Attention, si tu veux mettre un nombre dans ta variable, il ne faut pas mettre de guillement. Ce qui donne maBouteille = 3 au lieu de maBouteille = "3". Sinon, le navigateur va considérer que c'est du texte, et donc on ne pourra pas faire de calculs avec. On peut additionner (+), soustraire (-), diviser (/) ou encore multiplier (*) des nombres.

En savoir plus

Si tu es motivé à lire une documentation plus complète, tu peux aller faire un tour du côté de Editeur Javascript.


Les conditions

Les conditions sont centrales pour tous les langages de programmation. Comme dans la vraie vie, elles permettent de définir ce qu'il faut faire en fonction d'un paramêtre. Par exemple : si j'ai plus de 50 euros, je vais aux Fouquet's. Voici comment le représenter en Javascript :

// je créé ma variable monArgent et lui affecte le nombre 60
monArgent = 60;

// je vérifie si monArgent est plus grand que 50
if (monArgent > 50) {

  // si oui, cela execute ce qui suit
  document.write("Je vais aller aux fouquet's ce soir, youpi");
}

J'ai utilisé un moyen de comparaison entre 2 nombres. Voici les différents comparateurs :

On va rajouter une action si on ne valide pas la condition. Si on a pas 50€, on achete un Grec.

monArgent = 10;
if (monArgent > 50) {
  document.write("Je vais aller aux fouquet's ce soir, youpi");
} else {
  // sinon, cela execute ce code là
  document.write("Je n'ai pas le choix, je vais aller au Grec");
}

On peut rajouter le nombre de condition que l'on veut. Si on a plus de 100€, on va restaurant de la tour Eiffel, et si on a 1000€, on va manger dans un avion.

monArgent = 10;
if (monArgent > 1000) {
  document.write("Je vais manger dans un avion, la grande classe.");
} else if(monArgent > 100) {
  document.write("Je vais manger au restaurant de la tour Eiffel.");
} else if (monArgent > 50) {
  document.write("Je vais aller aux fouquet's ce soir, youpi");
} else {
  document.write("Je n'ai pas le choix, je vais aller au Grec");
}

Voilà ! C'est simple, et cela va t'être utile pour pas mal d'animations.


Les fonctions

Les fonctions permettent de faire une action que l'on va pouvoir paramêtrer avec une ou plusieurs information. Dans la vie, la fonction pourrait être "marcher", et on pourrait par exemple paramêtrer le nombre de mêtres à effectuer. En Javascript, on pourrait créer une fonction qui agrandit la taille d'une police.

// on créé une fonction qui s'appelle augmenteTaillePolice
function augmenteTaillePolice () {
  document.getElementById("taille_police").style.fontSize = "50px";
}

// j'execute ma fonction
augmenteTaillePolice();

// créé maintenant une élément HTML avant ce code avec l'ID "taille_police"

Note : Le DOM

J'ai utilisé le DOM (Document Object Model) pour changer la taille de la police. Il correspond à un arbre HTML que l'on peu parcourir et éditer ses propriétés CSS. Cela te permet d'éditer n'importe quel élément avec Javascript. Il y de nombreuses fonctions que l'on peu utiliser à partir de l'objet document, mais on va uniquement se concentrer sur getElementById() qui permet de récupérer un élément à partir du nom d'un ID. Document correspond à toute la page HTML, mais on ne va pas développer. Le plus important est de comprendre le principe, en jQuery, tout cela sera simplifié.


Avec des paramêtres

À venir