About the Author

OpenTuto

Rechercher avec une classe (les sélecteurs jQuery)

Nous avons vu précédemment comment rechercher un élément HTML avec son identifiant. Sur le même principe nous pouvons rechercher un élément HTML qui possède une classe spécifiée et lui appliquer une mise en forme CSS.

Rechercher avec une classe

Nous reprenons l’exemple précédent dans lequel le script va rechercher l’élément HTML qui possède la classe .bordure et lui appliquer une bordure en CSS.

Voici l’affichage obtenu

les sélecteurs jQuery: Rechercher avec une classe

les sélecteurs jQuery: Rechercher avec une classe

Rechercher avec l’identifiant (les sélecteurs jQuery)

Les sélecteurs CSS sont des critères de choix pour cibler les éléments d’une page web. Notez qu’il existe aussi des sélecteurs propres à jQuery. Dans cet article nous allons étudier la syntaxe du sélecteur qui permet de rechercher les éléments HTML des pages avec l’identifiant.

Rechercher avec l’identifiant

Dans cet exemple, nous avons trois paragraphes <p>, dont le second possède l’identifiant #deuxieme: <p id="deuxieme">.

L’objectif du script jQuery est d’appliquer une mise en forme CSS sur ce deuxième paragraphe identifié seul. Nous allons pouvoir le rechercher avec son identifiant #deuxieme.

Explication :

Une fois la page chargée avec le DOM, $(document).ready(function(){...});, le script recherche l’élément HTML avec l’identifiant #deuxieme: $("#deuxieme"). Une fois trouvé, une mise en forme CSS est appliquée à l’aide de la méthode jQuery css().

Voici l’affichage obtenu

Le même exemple en utilisant la recherche avec une classe.

Initialiser un script jQuery

La syntaxe

Une fois que vous avez lié vos pages web avec la bibliothèque jQuery, il faut maintenant indiquer à votre script qu’il peut être utilisé. Pour ce faire, il faut initialiser le script.

Le caractère $ est l’alias qui permet de cibler jQuery à partir du document (document) qu’est la page web. Cela permet de créer un objet jQuery.

Quand la page et tous ses éléments constitutifs sont chargés (ready()) nous pouvons utiliser le script : function(){...};.

Initialiser un script jQuery

La première syntaxe est la plus complète et la plus simple à comprendre. Mais, pour aller plus vite, vous pouvez aussi utiliser la syntaxe courte :

Ces deux syntaxes sont strictement identiques et elles produiront les mêmes résultats.

Télécharger et intégrer la bibliothèque jQuery

Les différentes versions de jQuery

La première solution consiste à télécharger la bibliothèque jQuery et à l’implémenter dans votre site. Pour ce faire, allez sur le site de jQuery : http://jquery.com

page de téléchargement jquery

Page de téléchargement jQuery

Sur cette page d’accueil, cliquez sur le bouton Download jQuery v3.3.1. Vous êtes alors dirigé vers la page http://jquery.com/download/. Vous y trouverez toutes les versions de la bibliothèque jQuery.

Il existe deux versions principales de jQuery : la version standard et la version slim.

  • La version standard est la version complète de jQuery, avec toutes les fonctionnalités.
  • La version slim ne possède pas toutes les fonctionnalités, elle n’inclut pas l’AJAX, les effets et les fonctions dépréciés.

Pour chaque version, standard et slim, vous pouvez utiliser la version compressed production ou la version uncompressed, development.

Télécharger les fichiers

Vous pouvez donc télécharger la version de développement pour concevoir vos sites web en local, sur vos machines, et la version de production pour la publication de ceux-ci chez un hébergeur. Dans les deux cas, nous allons télécharger la version standard, complète de jQuery.

Pour télécharger la version de production, sur la page de téléchargement :

Télécharger la version de production de jQuery

Télécharger la version de production de jQuery

Lier la bibliothèque jQuery

Maintenant, vous devez lier chacune de vos pages web où doit intervenir un script jQuery au fichier jQuery.

Pour bien organiser les fichiers de vos sites, je vous conseille de créer un dossier nommé js pour y placer toutes vos bibliothèques JavaScript.

Exemple d'une page web utilisant la librairie jQuery

Exemple d’une page web utilisant la librairie jQuery


Lier jQuery via un CDN

La deuxième solution qui s’offre à vous pour utiliser la bibliothèque jQuery est de la lier avec chacune de vos pages web par l’intermédiaire d’un serveur dédié sur le Web. Ces serveurs qui hébergent des bibliothèques et d’autres services web s’appellent des CDN : Content Delivery Network. Ils délivrent tous ces services et ces contenus de manière très rapide. Il existe de nombreux CDN qui hébergent la bibliothèque jQuery.

Pour lier vos pages web à jQuery avec un CDN, il suffit de créer une liaison <script> dans la section <head> de vos pages web :

  • Google CDN

Voir aussi :


Dans l’article suivant, nous verrons comment initialiser un script jQuery.

jQuery : Scroll to element – Smooth Scroll

jQuery : Scroll to element – Smooth Scroll

Pour comprendre les détails de cet exemple, il faut obligatoirement voir la vidéo ci-dessous. Il faut au préalable télécharger jQuery 1 et Font Awesome 4 puis les intégrer dans la page index.html. Cette vidéo : https://www.youtube.com/watch?v=8j4q8v9G07k vous aide à préparer votre projet.

index.html

style.css

main.js

 

Ajax – Charger un fichier distant

Dans ce tutoriel, nous allons changer le contenu dans une div par le contenu d’un fichier texte distant. Pourvoir le résultat final :

La structure du projet

Le projet se compose de deux fichier :

  • index.html contient le code HTML et JavaScript permettant de charger le texte à partir du fichier texte.txt et le mettre au lieux du teste dans la balise Div.
  • texte.txt contient le texte à charger.

index.html

texte.txt

 

L’héritage en programmation orientée objet avec PHP

L’héritage simple

Il est possible que des classes partagent des attributs et des méthodes. Ce principe est défini par la notion d’héritage qui fait que les classes peuvent être vues comme un ensemble de catégories et de sous catégories.

Pour définir un héritage entre deux classes il faut utiliser le mot-clé extends après le nom de la classe dans sa déclaration.

Exemple:

Le code ci-dessus définit une classe MountainBike qui hérite de la classe BiCycle. La classe MountainBike peut ainsi utiliser tous les attributs et toutes les méthodes de la classe BiCycle.

Il est aussi possible pour la classe MountainBike de redéfinir des attributs ou des méthodes portant les mêmes noms que la classe BiCycles.

Les traits

Les traits sont un mécanisme permettant de réutiliser du code.

Un trait peut être vu comme un ensemble de méthodes qui peuvent être incluses dans d’autres classes. Le contenu du trait est copié dans la classe qui veut l’utiliser. Il n’y a pas besoin d’instancier un trait.

L’avantage des traits est de réduire la duplication de code et de permettre l’utilisation de méthodes de classe sans avoir à passer par la notion d’héritage.

Un trait se définit en utilisant le mot-clé trait.

Pour inclure un trait dans une classe, il faut utiliser le mot-clé use.

La méthode maFonction() est maintenant disponible dans chaque instance de la classe maClasse.

Ce code va afficher :

I Love Opentuto.com!

Les classes abstraites

Une classe abstraite est une classe utilisée pour définir un type d’objet très générique, inutilisable directement, qui force les sous-types à avoir certaines particularités.

Une classe abstraite définit des méthodes et des attributs qui seront disponibles dans les classes qui l’étendent.

Pour indiquer qu’une classe est abstraite, il faut la préfixer du mot abstract.

Pour définir une classe abstraite voiture il faut écrire :

Il est aussi possible de définir des méthodes abstraites dans une classe. Cela permet d’obliger les classes dérivées à implémenter ces méthodes. Pour déclarer une méthode comme abstraite, il faut la préfixer du mot abstract.

Une classe contenant au moins une méthode abstraite doit obligatoirement être définie comme abstraite.

Par exemple, en définissant une classe abstraite comme suit :

Il est possible de définir une classe fille comme suit :

Ce qui permet d’écrire :

Les interfaces

Les interfaces sont utilisées pour vérifier que les objets correspondent à certaines spécifications, c’est-à-dire que chaque objet est conforme à certains comportements, qu’il peut gérer certains types d’évènements ou qu’il possède certaines fonctionnalités.

Pour déclarer une interface, il faut utiliser le mot-clé interface. Les méthodes définies dans une interface sont forcément publiques.

Pour indiquer qu’une classe implémente une interface précise, il faut utiliser le mot-clé implements. Une classe peut implémenter plusieurs interfaces. Dans ce cas, les noms des différentes interfaces sont séparés par des virgules.

  • Les interfaces peuvent hériter d’autres interfaces.
  • Les classes abstraites peuvent implémenter des interfaces.

 

Déclarer une classe et instancier un objet

Déclarer une classe et instancier un objet en PHP

Il est recommandé de lire cet article avant d’entamer ce post : Qu’est-ce que une classe, un objet et une instance

Déclarer une classe

Pour définir une nouvelle classe, il faut utiliser le mot-clé class. Ce mot est suivi du nom de la classe puis d’un bloc d’accolades contenant les propriétés et les méthodes définies.

La déclaration d’un attribut se fait en utilisant la syntaxe de déclaration des variables précédée d’un des mots-clés suivants :

  • private : l’attribut n’est accessible qu’à l’intérieur de la classe.
  • protected : l’attribut est accessible à l’intérieur de la classe et des classes dérivées.
  • public : l’attribut est accessible depuis toutes les classes de l’application.

La déclaration d’une méthode se fait en utilisant la syntaxe de déclaration des fonctions précédée d’un mot-clé identique à ceux utilisés pour déclarer un attribut.

Exemple :

Ce code définit une classe Bicycle contenant un attribut $cadence accessible uniquement dans cette classe, un attribut $speed accessible par des classes dérivées de cette classe ainsi qu’un attribut $gear et une méthode changeCadence accessibles par toute l’application.

Instancier un objet

Pour pouvoir utiliser un objet, il faut le créer à partir d’une classe.

L’instanciation d’un objet se fait en utilisant la syntaxe d’affectation précédée du mot-clé new.

Exemple :

Ce code va instancier un objet de la classe Bicycle.

Maintenant qu’une instance est disponible, il est possible d’avoir accès à ses attributs et ses méthodes.

Exemple :