Accueil » Développement » Apprendre JavaScript

Sommaire
  1. JavaScript c'est quoi ?
  2. JavaScript pour quoi faire ?
  3. Commencer avec JavaScript
    1. La syntaxe JavaScript
    2. Les commentaires JavaScript
    3. L'indentation en JavaScript (bientôt disponible)
    4. Les variables JavaScript (bientôt disponible)
  4. Les évènements en JavaScript
  5. Les dépendances JavaScript (bientôt disponible)
  6. Outils JavaScript
  7. Aller plus loin

JavaScript c'est quoi ?

Le JavaScript (ou JS) est un langage de programmation qui s'intègre dans une page (x)HTML. C'est pourquoi, il est impératif d'avoir des connaissances en (x)HTML.

Pour faire simple, on mettra du JavaScript dans une page HTML pour rendre celle-ci intéractive, mais seulement côté visiteur (ou client), à la différence du langage PHP qui s'éxécute côté serveur.

Voilà pour la très brève histoire, passons à la pratique...

JavaScript pour quoi faire ?

Apprenez tout d'abord que c'est votre navigateur qui va se charger d'interpréter le JavaScript. Attention donc à ne pas en abuser, cela pourrait ralentir considérablement votre site.

Le code JavaScript se place généralement entre <head> et </head, c'est-à-dire dans l'entête du document HTML. Mais il peut également se placer dans le corps (<body>) du document, souvent tout en bas (ou, cas possible, en haut et/ou en bas). Techniquement, il peut être mis à n'importe quel endroit dans le corps :


<!DOCTYPE html>
<head>
<script></script>
</head>
<body>
<script></script>
</body>
</html>

Vous pouvez écrire autant de scripts que vous souhaitez dans une page HTML, sachez juste que leur ordre est important puisque ceux-ci seront lus linéairement. Au possible, essayez de rassembler tous vos scripts dans un seul script (sauf si vous constatez un conflit).

Le JavaScript peut également se trouver dans un fichier séparé avec l’extension .js. C'est souvent le cas lorsqu'on embarque des bibliothèques JavaScript telles que JQuery, MooTools, Dojo... ou lorsque l'on développe un gros projet.

Ainsi, pourra t-on créer des diaporamas, des sliders, des menus animés, des jeux vidéos... (animations que l'on peut faire de façon plus limitée avec CSS3)

Commencer avec JavaScript

La syntaxe JavaScript :

<script>
alert('Mon premier code en JavaScript');
</script>

NB : Chaque instruction en JavaScript doit être terminée par un point virgule.

Lorsque vous débutez avec JavaScript, la première chose à faire est de tester votre code. Pour cela il existe les boites de dialogue.

Celles-ci affichent une fenêtre comportant un message qui servent avant tout à dialoguer avec l'utilisateur.

Les commentaires JavaScript :

Il y a deux façons d'écrire un commentaire en JavaScript : les commentaires mono-ligne et les commentaires multi-lignes.


// ceci est un commentaire se situant en fin de ligne

/* ceci est un commentaire qui peut s'étaler 

sur plusieurs lignes */

/* on peut également utiliser cette syntaxe sur une seule ligne */

Les évènements en JS :

Evènements avec souris :
  1. onclick (voir exemple) : Une action se déclenche lorsque l'on clique sur un élément.
  2. ondblclick (voir exemple) : Même fonction que onclick mais l'action se déclenche avec un double clic.
  3. onmousedown (voir exemple) : L'événement se produit lorsque l'utilisateur appuie sur un élément avec l'un des boutons de la souris.
  4. onmouseenter (voir exemple) : L'événement se produit lorsque le pointeur de la souris est déplacé sur un élément.
  5. onmouseleave (voir exemple) : L'événement se produit lorsque le pointeur de l'utilisateur déplace le pointeur de la souris sur un élément.
  6. onmousemove : L'événement se produit lorsque le pointeur se déplace alors qu'il se trouve sur un élément.
  7. onmouseover : L'événement se produit lorsque le pointeur est déplacé sur un élément, ou sur l'un de ses enfants
  8. onmouseout : L'événement se produit lorsque l'utilisateur déplace le pointeur de la souris sur un élément, ou sur l'un de ses enfants
  9. onmouseup : L'événement se produit lorsque l'utilisateur relâche un bouton de la souris sur un élément.

Outils JavaScript :

Comme son nom l'indique, il s'agit d'un outil en ligne permettant la compression de votre code JS. Il en existe plusieurs dans le même genre : jscompress

Outil intéressant qui vous permettra de rendre votre code JavaScript plus propre et optimisé : jsbeautifier.

Une explication bien formulée sur cet air de jeu qu'est jsfiddle

JSLint est un outil qui va repérer vos erreurs, tout simplement.

Aller plus loin :

Un site très complet dédié au JavaScript (EN) javascript.info

Documentation complète sur JavaScript.

Découvrir Vanilla.js et ici