RSS

Example of Category Table layout (FAQs/Languages category)

Apprendre JQuery - Leçon : Dissocier JS et HTML

PDFImprimerEnvoyer

Séparer vos fonctionnalités Javascript de votre code HTML permet d'ajouter une « couche » à vos développements. En effet, il vous sera plus facile de maintenir votre code et de travailler avec celui-ci. De plus, de cette manière, vous serez en mesure de réutiliser votre code dans vos prochains projets. Dans les faits, vous pouvez faire celà sans l'aide de JQuery, mais voyons ici comment JQuery peut vous aidez à dissocier votre code HTML, CSS et Javascript.
Avant toute chose, nous allons voir la méthode à ne pas faire car cette méthode vient à l'encontre du principe que nous essayons d'instaurer dans votre développement.

Mauvaise méthode :

<a onclick="fonctionBackup()" href="#">Sauvegarder</a>

** En ajoutant directement votre fonction Javascript dans votre code, vous appliquez le contraire de la notion en apprentissage ici. Votre code Javascript n'est pas séparer de votre couche d'affichage (HTML).

Bonne méthode

<a href="/backup.html" class="fonctionBackup">Sauvegarder</a>

** Dans le cas ici présent, nous n'avons aucun code Javascript. Afin de séparer nos 2 éléments, nous allons mettre toutes notres codes dans un fichier externe du genre « mesFonctionJS.js ». Voici maintenant la partie que vous attendiez tous, le code Javascript et JQuery :
 
$('a.fonctionBackup').click(function(){
    // Effectuer vos traitements ici
    alert('Le backup est en cours!');
});

La méthode « .click() » de JQuery permet d'attacher facilement l'événement d'un clique de souris à un sélecteur (class, id). Le code ici présent va ajouter à toutes les sélecteurs <a> ayant la classe « fonctionBackup » un événement onclick qui appelera la fonction et exécutera les traitements associés.


Ajouter cette page à votre réseau social favoris
Digg! Reddit! Del.icio.us! Mixx! Free and Open Source Software News Google! Live! Facebook! Technorati! StumbleUpon! Spurl! Furl! Blogmarks! Yahoo! Mister-Wong! DZone! Free Joomla PHP extensions, software, information and tutorials.

Rétrolien(0)

Adresse URI pour un rétrolien sur cet article

Commentaires (0)

Flux RSS pour les commentaires

Ecrivez un commentaire

Réduire l'éditeur | Agrandir l'éditeur

busy

Publicités

Nos services

Programmation Web

Que ce soit pour faire la conception d'un site Web ou pour la refonte d'un site existant, nous avons la solution.

La création et la conception Web sont au cœur de nos activités. Chaque concept et création sont différents, et chaque client est unique. Rien n’est laissé au hasard pour faire de votre création multimédia un outil unique de promotion.

Suite ...
Programmation Desktop

Quel que soit votre projet, nous pouvons le réaliser pour vous !

Grâce à notre expertise en programmation, nous sommes en mesure de concevoir une variété d’applications qui pourront vous permettre d’augmenter votre clientèle, de la fidéliser ou encore de réduire vos coûts d’opération ! Nos critères élevés de contrôle de qualité ainsi que la grande expertise de nos programmeurs et de nos chargés de projets contribuent au succès des mandats qui nous sont confiés.

Suite ...
Autres ...

Quel que soit vos projets ou vos idées, contactez nous!

Grâce à notre expérience et notre expertise en informatique, nous serons en mesure d'évaluer vos projets et nous pourrons trouver une solution à vos problèmes. Que ce soit de la programmation ou de la base de données ou bien tout autres problèmes informatiques, contactez nous, nous serons là pour vous.

Suite ...

Connexion