Le Javascript est un langage de programmation « client » permettant de manipuler le code source d’une page HTML ce qui inclut le HTML, le CSS et le Javascript lui-même.
Le Javascript est interprété par votre navigateur. Chaque navigateur est responsable d’interpréter « adéquatement » le code reçu d’une page web. Or, certaines fonctionnalités retournent des résultats différents d’un navigateur à l’autre. Pour pallier à cette lacune et pour rendre les manipulations de Javascript plus simples et accessibles, des librairies compatibles dans tous les navigateurs ont été créées. Bien qu’il en existe plusieurs, nous utiliserons jQuery dans le cours puisque c’est la librairie utilisée par WordPress.
jQuery est une librairie en Javascript permettant d’en faire beaucoup en codant peu.
Avec cette librairie, vous serez en mesure de:
- Manipuler le HTML d’une page web
- Manipuler le CSS d’une page web
- Créer des effets visuels et animations
- Intercepter des événements
- Effectuer des appels AJAX
- et plus encore!
jQuery est utilisé par des projets comme Google, Microsoft, WordPress, Wikipedia, etc.
Vous devrez, lors de ce cours, aider le site MonTelephone.ca avec son formulaire de validation de numéro de téléphones. L’objectif est de réduire le nombre de validations faites du côté serveur en le faisant en javascript avec jQuery. Une fois le numéro de téléphone valider, vous devrez afficher en AJAX la dernière requête faite au serveur.
Source de l’exercice (zip): MonTelephone.ca
Les objectifs de l’exercice sont:
- Comprendre l’utilité du Javascript;
- Utiliser le Javascript à l’aide de la librairie jQuery;
- Identifier des événements pouvant survenir dans une page web (clic, mouse hover, mouse up, mouse down, scroll, resize, etc);
- Valider de l’information prise dans un formulaire;
- Modifier la structure de la page web selon les événements;
- Créer un appel asynchrome au serveur pour écrire ou lire de l’information.
Une fois l’exercice complété, vous ne deviendrez pas un programmeur Javascript. L’objectif est de vous initier aux possibilités offertes par le langage. Vous pouvez également consulter la solution de l’exercice en cliquant sur le point de cette phrase.
Utilisation
Pour utiliser jQuery, vous pouvez télécharger les fichiers directement sur jQuery.com ou utiliser le fichier mis sur le CDN de Google ou Microsoft.
Supposons que votre page HTML actuelle est:
<!DOCTYPE html> <html> <head> <title>Premier exemple jQuery</title> </head> <body> <h1>Bienvenue sur mon premier exemple en jQuery!</h1> </body> </html>
Pour ajouter l’accès à la librairie via le CDN de Google, ajoutez la ligne suivante dans la partie <head>:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Note: assurez-vous d’utiliser la dernière version de jQuery et de ne pas faire un simple copier-coller.
Ça y est! Vous êtes prêt à utiliser jQuery dans votre page.
Votre page HTML ressemble maintenant à ceci:
<!DOCTYPE html> <html> <head> <title>Premier exemple jQuery</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <h1>Bienvenue sur mon premier exemple en jQuery!</h1> </body> </html>
Ajout de code Javascript
Pour ajouter du Javascript dans une page, vous devez utiliser la balise <script>. Il est conseillé d’insérer cette balise à l’intérieur de la balise <body>. Pour des raisons de clareté, nous insérerons notre Javascript au bas de la page.
Commençons par un petit message d’accueil. Insérez le code suivant:
<script>
alert('Bienvenue en Javascript');
</script>
Gestion d’événements
De façon générale, le Javascript est utilisé suite à un événement. Un événement est une action détectée sur une page web. Les événements peuvent être interceptés et du code peut leur être lié. On peut penser par exemple à:
- Clic (click)
- Double-clic (double click)
- Clique de droite (right click)
- Passer la souris au-dessus (mouse over)
- Ne plus être au dessus (mouse out)
- Élément recevant le focus (on focus)
- Élément perdant le focus (on blur)
- Après le chargement de la page (ready)
- etc.
Une bonne pratique est de toujours débuter à utiliser du code Javascript une fois que tous les fichiers de styles et fichiers Javascript sont chargés. On doit également s’assurer que le code HTML de la page a été chargé puis généré par la navigateur. Autrement, si on tente de lire la hauteur d’un balise <div> par exemple, il est possible que la hauteur retournée soit 0 pixel. Pourquoi ? Parce que le code n’a pas encore été interprété par le navigateur. Autrement dit, le visuel n’est pas créé donc aucun des éléments ne possède une hauteur.
Pour résoudre ce « problème », il existe deux solutions:
- Insérer le code Javascript à la fin du fichier (juste avant </body>) de façon à permettre au navigateur de lire et interpréter le HTML avant d’exécuter le Javascript.
- Utiliser l’événement « ready » qui permet de savoir à quel moment le navigateur a terminé de tout charger et interpréter.
La façon la plus simple est d’utiliser « ready ». L’appel du « ready » est possible grâce à jQuery. Voici un exemple de code:
jQuery( document ).ready(function( $ ) {
alert('La page est chargée et interprétée.');
});
Une fois que la page est chargée et interprétée, le message s’affiche! Vous venez de manipuler l’événement « ready ».