Javascript et Jquery

Le JavaScript, le langage de scripts :

javascript_logo

Le JavaScript est majoritairement utilisé sur Internet, conjointement avec les pages Web HTML. Le JavaScript s’inclut directement dans la page Web (ou dans un fichier externe) et permet de dynamiser une page HTML, en ajoutant des interactions avec l’utilisateur, des animations, de l’aide à la navigation, comme par exemple :

  • Animation de texte
  • texte-defilant
  • Créer un diaporama avec un aperçu « en grand » des images ;

nooblide-advanced-tutorial

  • Créer des alertes
  • 6mZQS

Le javascript permet de modifier le Document Object Model (abrégé DOM) qui est une interface de programmation pour le document HTML.

La structure DOM

Comme il a été dit précédemment, le DOM pose comme concept que la page Web est vue comme un arbre, comme une hiérarchie d’éléments. On peut donc schématiser une page Web simple comme ceci

DOM

Le DOM est donc une API qui s’utilise avec le document HTML, et qui va nous permettre, via le JavaScript, d’accéder au code HTML d’un document. C’est grâce au DOM que nous allons pouvoir modifier des éléments HTML (afficher ou masquer un <div> par exemple), en ajouter, en déplacer ou même en supprimer.

 

Le JavaScript est un langage dit client-side, c’est-à-dire que les scripts sont exécutés par le navigateur chez l’internaute (le client). Cela diffère des langages de scripts dits server-side qui sont exécutés par le serveur Web. C’est le cas des langages comme le PHP.

C’est important, car la finalité des scripts client-side et server-side n’est pas la même. Un script server-side va s’occuper de « créer » la page Web qui sera envoyée au navigateur. Ce dernier va alors afficher la page puis exécuter les scripts client-side tel que le JavaScript. Voici un schéma reprenant ce fonctionnement :

javascript

 

Le framework Jquery :

js-jquery

jQuery, un framework JavaScript :

Tout d’abord Jquery est un framework en javascript, il contient une énorme bibliothèque de fonctions JavaScript qui ont été écrites et regroupées en un seul et unique fichier pour plus de simplicité.

Ce qu’il faut vous dire, c’est que jQuery est vraiment une grosse boîte à outils.Le nombre de fonctions qui sont contenues dans ce simple fichier est vraiment grand. Et ces outils n’ont qu’un seul but : vous permettre d’écrire moins de code JavaScript, pour être toujours plus productif et efficace dans vos développements !

Comment ça marche :

Jquery modifie le DOM en pointant la balise visée par un « selecteur »

 

Les sélecteurs CSS :

$(‘p’); // je sélectionne tous les paragraphes

$(‘.maClasse’); // je sélectionne les éléments ayant .maClasse pour classe

$(‘#monId’); // je sélectionne l’élément qui possède l’identifiant #monId

 

Une sélection plus poussée :

$(‘p:first’); // sélection du premier paragraphe trouvé

$(‘a:last’); // ici, on sélectionne le dernier lien de la page

 

Les sélecteurs des formulaires :

$(‘input[type=button]’); // on sélectionne un input de type button

$(‘input:button’); // on sélectionne un input de type button

selecteur

Un évènement :

C’est quoi un évènement ?

Pour expliquer la chose simplement, dites-vous qu’un évènement est une action remplie par le navigateur, ou plus généralement l’utilisateur. Vous connaissez les conditions ? Pour les évènements, c’est un peu le même principe : on lance un bout de code quand une action est remplie.

$(document).ready(function(){
// Le code jQuery ici !
});

La syntaxe en elle-même est super simple, voyons ce que cela donne ici. Utilisons par exemple l’évènement click() qui est un évènement écoutant le clic de la souris.

$(« #uneDiv »).click(function(){
// Le code a exécuter !
});

evenement

L’écoute sur le clavier

Tout comme la souris, le clavier peut tout à fait être écouté par un script jQuery. L’utilisation la plus fréquente que l’on peut en faire est de détecter l’appui d’une touche et de lancer une action seulement si la bonne à été pressée. Les évènements associés ne sont pas très nombreux, on en trouvera seulement trois :

  • keydown(), qui se lance lorsqu’une touche du clavier est enfoncée ;

  • keypress(), qui se lance lorsqu’on maintient une touche enfoncée ;

  • keyup(), qui se lance lorsqu’on relâche une touche préalablement enfoncée.

 

$(document).keyup(function(touche){ // on écoute l’évènement keyup()

var appui = touche.which || touche.keyCode; // le code est compatible tous navigateurs grâce à ces deux propriétés

if(appui == 13){ // si le code de la touche est égal à 13 (Entrée)
alert(‘Vous venez d\’appuyer sur la touche Entrée !’); // on affiche une alerte
}
});

Le cas des formulaires

jqueryFormulaire

Le déclenchement virtuel

jQuery permet de simuler le déclenchement d’évènements grâce à une simple méthode. Pour faire court, vous n’avez pas besoin d’attendre que l’utilisateur remplisse une action précise pour lancer du code : vous pouvez exécuter virtuellement un évènement grâce à trigger() ! Il suffit de donner le type de l’évènement en tant qu’argument.

$(‘p’).click(function(){
alert(‘Cliqué !’);
});

$(‘p’).trigger(‘click’); // déclenche l’action au chargement du script

Publicités