Médiaforma

All posts tagged class

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la section précédente, vous avez vu qu’une classe pouvait être appliquée à plusieurs balises en affectant le nom de la classe à l’attribut class des balises concernées. Ici, je vais vous montrer comment restreindre le champ d’action d’une classe.

Le document HTML est des plus classiques. Il fait référence à la feuille de styles externe styles3.css. Le corps du document contient un titre de niveau 2 et de classe rouge, un paragraphe de classe rouge et un simple texte sans classe.

Maintenant, nous allons définir une classe rouge spécifique à la balise <h2> et une autre classe rouge spécifique à la balise <p>. Pour cela, il suffit de faire précéder le point décimal de la classe par le nom de la balise concernée.

C’est ainsi que nous définissons la classe p.rouge qui sera dédiée à la balise <p> et la classe h2.rouge qui sera dédiée à la balise <h2>. Pour bien montrer que les caractéristiques de ces deux classes sont différentes, la propriété font-family (c’est-à-dire la police) de la classe p.rouge est initialisée avec la valeur Courrier New et celle de la classe h2.rouge avec la valeur fantasy. Remarquez au passage les guillemets qui entourent le nom de la police dans la classe p.rouge. Ils sont nécessaires parce que le nom de la police contient un espace. Enfin, la taille des caractères de classe h2.rouge est fixée à 30 pixels avec la propriété font-size.

Affichons ce document dans un navigateur.  Comme vous pouvez le voir, la classe rouge est bien différente lorsqu’elle est appliquée aux balises <h2> et <p>.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Une classe CSS permet de modifier les caractéristiques d’une balise en fonction de son attribut class.

Pour mieux comprendre de quoi il est question, nous allons raisonner sur un exemple. Trois balises <h2> sont ajoutées au document HTML. La première a un attribut class initialisé à rouge, la deuxième a un attribut class initialisé à noir et la troisième a un attribut class initialisé à vert. Plus simplement, on dira que la première balise <h2> est de classe rouge, la deuxième de classe noir et la troisième de classe vert.

Affichons le document dans un navigateur. Les trois titres H2 apparaissent en noir. Si vous trouvez cela étrange, interrogez-vous : est-ce qu’il ne manque pas un peu de code CSS pour obtenir les couleurs demandées ? Bien sûr que si : il faut définir les classes rouge, noir et vert dans le fichier styles2.css (puisque c’est ce fichier qui est spécifié dans la balise <link>).

Voici la feuille de styles à utiliser :

Comme vous le voyez, la définition d’une classe n’a rien d’insurmontable. Pour cela, il suffit de faire précéder le nom de la classe d’un point décimal, de le faire suivre d’un espace et d’accolades ouvrante et fermante et de préciser la ou les propriétés à modifier entre les accolades.

Ici :

  • la classe noir affecte la valeur black à la propriété color ;
  • la classe rouge affecte la valeur red à la propriété color ;
  • la classe vert affecte la valeur green à la propriété color.

Affichons à nouveau le document dans le navigateur. Cette fois-ci l’effet recherché est bien obtenu :

Là où les classes deviennent vraiment magiques, c’est quand vous les utilisez dans plusieurs balises. Ainsi par exemple, vous pouvez très bien utiliser les classes noir, rouge et vert dans des balises <p>, <td> ou n’importe quelle autre balise qui concerne des éléments textuels.

Ici par exemple, nous définissons un tableau constitué de deux cellules. La première contient un texte affiché en vert via la balise <td> de classe vert et la deuxième un texte affiché en rouge via la balise <td> de classe rouge :

Affichons ce document dans un navigateur. Intéressant non ?


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans les rubriques précédentes, vous avez appris à définir les sélecteurs “.” et “#” pour modifier respectivement le style d’une balise possédant un certain attribut id ou class.

Je vous propose d’aller plus loin en découvrant quelques-unes des possibilités offertes par les sélecteurs. Ici, nous allons utiliser une feuille de styles interne, mais vous pourriez tout aussi bien utiliser une feuille de styles externe, stockée dans un fichier d’extension .css.

Commencez par insérer une balise <style> et son terminateur </style> dans l’en-tête du document.

Pour redéfinir les caractéristiques de la balise <h2>, tapez h2, sans les caractères “<” et “>” entre les balises <style> et </style>. Ajoutez une accolade ouvrante et une accolade fermante et indiquez les propriétés à modifier entre les accolades. Ici par exemple, nous modifions la couleur des caractères de titre h2.

Allons un peu plus loin. Supposons que le document contienne plusieurs titres de niveau 2, et donc, plusieurs balises <h2>. En modifiant le style h2, toutes les balises <h2> vont être affectées. Par contre, pour que seules certaines d’entre elles soient modifiées, vous utiliserez une ou plusieurs classes.

Ici par exemple, toutes les balises <h2> sont de couleur rouge, mais seules les balises <h2> de classe special sont en italique.

Voyons le résultat de ce code dans un navigateur. Comme vous pouvez le voir, les deux balises <h2> sont de couleur rouge, mais seule la balise <h2> de classe special est en italique :

Cette technique est également applicable aux attributs id, via le sélecteur #. Ici, toutes les balises <h2> sont de couleur green, mais seules la balise <h2> d’identifiant special est en italique :

Voyons le résultat dans un navigateur avec une commande Launch dans le menu Exécution :


Comme tous les langages, Java est composé d’un certain nombre de mots-clés. Nous allons les passer en revue dans cette section.

Commentaires

Pour faciliter la compréhension et la maintenance du code, il est souvent utile d’ajouter des commentaires dans le source d’une application ou d’une applet.

Le langage Java supporte trois types de commentaires :

Commentaires – Premier type

Les caractères “//” définissent un commentaire sur une (et une seule) ligne qui s’étend jusqu’au retour chariot de fin de ligne.

Les deux exemples ci-après sont corrects :

// Ce commentaire occupe une ligne
for (i=1; i<10; i++) // Le traitement est répété 10 fois

Par contre, l’exemple ci-après est incorrect. Les caractères “//” ne peuvent pas être placés à l’intérieur d’une instruction :

for (i=1; // Le traitement est répété 10 fois i<10; i++)

Commentaires – Deuxième type

Les signes “/*” et “*/” peuvent être utilisés pour placer des commentaires sur plusieurs lignes ; par exemple :

/* Ceci est un commentaire
   qui occupe deux lignes */

Contrairement au premier type de commentaire (//), il est ici possible de placer un commentaire à l’intérieur d’une instruction :

for (i=1; /* Le traitement est répété 10 fois */ i<10; i++)

Commentaires – Troisième type

Ce type de commentaire est destiné au programme javadoc.exe, livré avec le SDK. Il permet de documenter automatiquement une application.

Sans entrer dans les détails, sachez que les lignes de code qui commencent par les caractères “/**” contiennent des commentaires qui seront automatiquement insérés dans un document HTML lors de l’exécution du programme Javadoc.

Exemple :

/** Ces commentaires
  sont destinés au
  système JAVADOC
  qui génère de la documentation
  API à partir du code */

Identificateurs

Le terme “identificateurs” désigne les constantes, les variables et les objets utilisés dans le langage. Ces derniers commencent obligatoirement par une lettre (A à Z, a à z, ou une autre lettre appartenant au jeu de caractères Unicode dont la valeur hexadécimale est supérieure à H00C0), un caractère de soulignement (_) ou un dollar ($). Les caractères suivants peuvent être des lettres, des caractères de soulignement, des dollars ou des chiffres.

Par exemple, les noms suivants peuvent être utilisés pour référencer un identificateur :

Var12_5
Bien_que_très_long_ce_nom_est_acceptable
$Celui-ci_aussi

Par contre, ces deux identifiants ne sont pas autorisés :

Nombre d'itérations
4Var

Le premier, parce qu’il contient un espace. Le second, parce qu’il commence par un chiffre.

Remarque
Unicode est un standard qui permet des échanges de texte dans différentes langues.

Mots réservés du langage

Le tableau ci-après liste les mots clés du langage. Ces derniers ne peuvent pas être utilisés comme noms de variable, d’objet, de classe, etc. Leur utilisation sera décrite dans la suite de l’ouvrage.

Mot clé Signification
abstract Définit une classe ou une fonction qui n’a pas été totalement implémentée.
boolean Déclaration d’une variable booléenne.
break Fin prématurée d’une boucle.
byte Déclaration d’une variable byte.
case Teste si une variable a une valeur particulière dans un bloc switch.
catch Traitement suite à une exception.
char Déclaration d’une variable char.
class Déclaration d’une classe.
const Ce mot est réservé mais pas utilisé dans le langage.
continue Interdit l’exécution d’une boucle lorsqu’une condition logique est satisfaite.
default Permet d’exécuter un bloc d’instructions lorsque aucune des constantes case ne concorde avec l’expression placée après le mot switch.
do Boucle do while.
double Déclaration d’une variable double.
else Dans une instruction if else, permet d’exécuter un bloc d’instructions si la condition if n’est pas satisfaite.
extends Permet de sous-classer une classe parent.
false Valeur booléenne false.
final Indique à Java que la classe courante ne peut être sous-classée.
finally Permet d’exécuter systématiquement une portion de code à chaque occurrence d’une exception.
float Déclaration d’une variable float.
for Exécute répétitivement un bloc d’instructions.
goto Ce mot est réservé mais pas utilisé dans le langage.
if Teste une condition logique.
implements Détermine l’interface à utiliser.
import Fait référence à un package Java externe.
instanceof Détermine le type d’un objet.
int Déclaration d’une variable int.
interface Indique à Java que le code qui suit doit être utilisé pour définir une nouvelle interface.
long Déclaration d’une variable long.
native Permet d’appeler un programme externe.
new Permet de définir une nouvelle instance de classe.
null Correspond à une valeur non existante.
package Indique à Java le nom du package auquel se réfère le code qui suit.
private Définit une classe, une méthode ou une variable private.
protected Définit une classe, une méthode ou une variable protected.
public Définit une classe, une méthode ou une variable public.
return Définit la valeur retournée par une classe ou une méthode.
short Déclaration d’une variable short.
static Définit une classe, une méthode ou une variable static.
super Fait référence à la classe parent de la classe courante.
switch Permet d’effectuer un test multiple sur une variable.
synchronized Indique à Java qu’une seule instance de cette méthode peut être exécutée à la fois.
this Fait référence à l’objet courant.
throw Indique à Java qu’une exception particulière (autre que Errors et Runtime) doit être traitée dans le prochain bloc catch.
throws Détermine les exceptions gérées par le programmeur dans une déclaration de méthode.
true Valeur booléenne true.
try Définit un bloc de code dans lequel une ou plusieurs exceptions peuvent se produire. Un bloc try doit être suivi d’un bloc catch qui traite les exceptions correspondantes.
void Déclare une procédure Java qui ne renvoie aucune valeur.
volatile Les variables de type volatile peuvent changer de valeur indépendamment du programme Java (date et heure système par exemple)
while Exécute répétitivement un bloc d’instructions.