INTERACTIONS SUR LE CLIENT WEB

Le “World Wide Web”, communément appelé “WWW” ou plus simple “Web” a été développé au CERN (Centre Européen pour la Recherche Nucléaire en Suisse) par le Britannique Sir Timothy John Berners-Lee et le Belge Robert Cailliau au début des années 90.

A cette époque les principaux centres de recherche mondiaux sont déjà connectés entre eux via Internet. Tim Berners-Lee met au point le système (le Web) permettant, à partir d’un document, de consulter d’autres documents en cliquant sur des mots clés, appelés liens hypertextes ou hyperliens.

La toute première page Web de l’histoire est encore disponible aujourd’hui : http://info.cern.ch/hypertext/WWW/TheProject.html

Les trois piliers du Web sont :

• le protocole HTTP (HyperText Transfert Protocol),
• les URL (Uniform Resource Locator) et
• le langage de description HTML (HyperText Markup Language).

1 - Le langage HTML

1.1 Définition

HTML est un langage de balisage permettant d’écrire de l’hypertexte, en anglais : Hypertext Markup Language, généralement abrégé HTML. Il permet donc de rédiger, de structurer et de mettre en forme le contenu de pages Web, mais aussi d’inclure des éléments multimédias, des formulaires de saisie, et des programmes informatiques.

Grâce au HTML nous allons pouvoir, dans un navigateur (Firefox, Chrome, Opera,…), afficher du texte, des images, des hyperliens (liens vers d’autres pages web)… etc. HTML n’est pas un langage de programmation (comme le Python par exemple), il n’y aura donc pas de SI ALORS SINON ou de REPETER JUSQU’A… C’est un langage de description seulement.

1.2 Outils de développement

Pour coder en HTML, un simple éditeur de texte suffit (bloc-notes, notepad++, Geany, visualstudio …) mais il est aussi possible d’utiliser des éditeurs et simulateur de pages Web en ligne comme replit, jsfiddle , liveweave, codepen ou jsbin …

1.3 Les balises

Entrons dans le vif du sujet …

Voici du code HTML :

<h1>Ceci est un titre</h1>
<h2 >Et voici un sous-titre</h2>
<p>Voici un <strong>mot</strong>. C’est beau, non ? </p>

Remarque : Quelques rares éléments de page n’ont qu’une balise ouvrante et un contenu (pas de balise fermante). Nous verrons cela plus loin.

Des éléments peuvent contenir d’autres éléments ex : l’élément <strong>mot</strong> est contenu dans l’élément <p>Voici un <strong>mot</strong> . C’est beau, non ? </p>.

Il est donc important d’imbriquer correctement les balises entre elles, par exemple ici : l’ouverture <strong> puis la fermeture </strong> se sont faites entre l’ouverture <p> et la fermeture </p>.

Le code HTML ci-dessous ne respecte pas une imbrication correcte des éléments entre eux :

<balise1> 
    <balise2> 
    </balise1>
</balise2> 

<balise1> 
    <balise2> 
    </balise2>
</balise1> 

Il est important de comprendre que chaque balise a une signification précise qu’il faut bien respecter (on parle de la sémantique des balises).

• Les éléments de titre permettent de définir certains textes comme des titres ou sous-titres pour le contenu. D’une certaine façon, ceux-ci fonctionnent comme pour un livre : on a le titre du livre (le plus important) puis les titres des différents chapitres et parfois des sous-titres au sein de ces chapitres. HTML contient des éléments pour 6 niveaux de titres : de <h1> à <h6>. La plupart du temps, 3-4 niveaux suffisent amplement :

  <h1>Mon titre principal</h1>
  <h2>Mon titre de section</h2>
  <h3>Mon sous-titre</h3>
  <h4>Mon sous-sous-titre</h4>
  

• Les balises <p> sont utilisés pour contenir des paragraphes de texte.

  <p>Voici un paragraphe <strong>important</strong></p>
  

• Les balises <strong> et <em> permettent de mettre en avant un élément important.

• Les balises <ul> (unordered list : liste non-ordonnée en anglais) et <ol> (ordered list : liste ordonnée en anglais) permettent de créer des listes dont chaque élément sera encadré par deux balises <li> (list item : élément de liste en anglais) et </li>.

  <p>Les élèves en NSI sont des </p>
  
  <ul>
    <li>chercheurs</li>
    <li>trouveurs</li>
    <li>furieux inventeurs</li>
    <li>joyeux artistes</li>
  </ul>
  
  <p>travaillant ensemble...</p>
  

• Il existe des balises qui sont à la fois ouvrantes et fermantes (de la forme <balise/>) comme :

  • la balise <br/> permettant de sauter une ligne,
  • les commentaires <!-- ceci est un commentaire -->

1.4 Indentation

Un code HTML mal indenté devient illisible rapidement donc empêche tout travail en équipe :-(

Voila un exemple de code HTML non indenté :

<!DOCTYPE html>
<html>
<head>
<title> Première page HTML</title>
<meta charset="utf-8">
</head>
    
<body>
<h1>Je viens d'écrire un titre en HTML !</h1>
<p> Et voilà un premier paragraphe ;)</p>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title> Première page HTML</title>
        <meta charset="utf-8">
    </head>
    
    <body>
        <h1>Je viens d'écrire un titre en HTML !</h1>
        <p> Et voilà un premier paragraphe ;)</p>
    </body>
</html>

1.5 Attributs de balise

Il est possible d’ajouter des “paramètres” à une balise ouvrante, on parle d’attribut. Une balise peut contenir plusieurs attributs :

<ma_balise attribut_1= "valeur_1" attribut_2="valeur_2">

Il existe beaucoup d’attributs différents. Voir le site référence developer.mozilla.org

<h1>Ceci est un titre</h1>
<h2> <font color="pink">Ceci est un sous titre</font> </h2>
<p> <font color="brown"> Ceci est un <strong> paragraphe </strong>.Avez-vous bien compris ?</font> </p>

Les attributs peuvent recevoir différentes valeurs. Ici, l’attribut s’applique à l’élément (la balise) font et cet attribut prend deux valeurs différentes pink et marron dans l’exercice.

En réalité ces attributs “cosmetiques” ne sont pas conseillés en HTML. Ce sont des informations que l’on va plutôt indiquer dans des feuilles de style CSS.

Les attributs les plus fréquents en HTML seront class ou encore id que l’on appelle attributs sélecteurs car ils permettent de sélectionner un élement (balise) précis ou un groupe d’éléments à personnaliser ensuite avec la feuilles de style CSS.

1.6 Anatomie d’une page Web

Nous venons de découvrir (re-découvrir) quelques éléments HTML de base. Regardons comment les organiser au sein d’un fichier pour créer une page HTML complète.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ma page de test</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Mon image de test">
  </body>
</html>

Cet exemple contient :

• <!DOCTYPE html> : Balise utilisée au début des années 1991-1992. Elle n’est plus utilisée aujourd’hui mais permet juste de s’assurer que la page puisse fonctionner y compris sur les “vieux” navigateurs.
• <html></html> : Cet élément encadre tout le contenu de la page. Cet élément est parfois appelé l’élément racine.
• <head></head> : Cet élément est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché, comme les paramètres destinés aux moteurs de recherche, ou les appels d’autre fichiers.
• <body></body> : Cet élément est celui qui contient tout le contenu que vous souhaitez afficher pour qu’il soit vu par les visiteurs : cela peut être du texte, des images, des vidéos, des jeux, des pistes audio jouables, et ainsi de suite.
• <meta charset="utf-8"> : Cet élément définit le jeu de caractères qui devrait être utilisé pour le document et indique que c’est utf-8.
• <title></title>: L’élément <title> définit le titre de votre page. Ce titre apparaît sur l’onglet lorsque la page est chargée. Ce titre est également utilisé pour sauvegarder un marque-page ou par les moteurs de recherche.

<!doctype html>
<html lang="fr">
    <head> 
        <meta charset="utf-8"> 
        <title>Memento HTML</title>
    </head>
    <body> 
        <h1>Hello World! Ceci est un titre</h1>
        <p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
    </body> 
</html>

1.7 Les liens

Les liens hypertextes sont l’élément fondateur qui permet que le web soit une toile sur laquelle on peut naviguer de page en page.

Pour créer un lien, il suffit d’utiliser l’élément <a> (signifie anchor , ancre en anglais ) et de renseigner son attribut obligatoire href (hypertext reference en anglais) qui précise l’adresse de destination :

<a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a>

Attention à ne pas oublier la partie avec https:// ou http:// qui représente le protocole utilisé, au début de l’adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu’il fonctionne correctement.

Il est également possible de créer une ancre dans une page, c’est-à-dire de marquer un endroit précis d’une page pour s’y rendre par un lien hypertexte. Les ancres se définissent grâce à l’attribut name ou id.

• La syntaxe est la suivante : <balise id="MonAncrePreferee"> ... </balise>
• L’appel d’une ancre se fait de la manière suivante : <a href="#MonAncrePreferee"> ... </a>
• On peut aussi accéder à une section particulière d’une autre page : <a href="url/nom_du_fichier.html#MonAncrePreferee"> ... </a>

  <!-- Mettre l'ancre ici -->
  
  1	</br>	2	</br>	3	</br>	4	</br>	5	</br>	6	</br>	7	</br>	8	</br>	9	</br>	10	</br>	11	</br>	12	</br>	13	</br>	14	</br>	15	</br>	16	</br>	17	</br>	18	</br>	19	</br>	20	</br>	21	</br>	22	</br>	23	</br>	24	</br>	25	</br>	26	</br>	27	</br>	28	</br>	29	</br>	30	</br>	31	</br>	32	</br>	33	</br>	34	</br>	35	</br>	36	</br>	37	</br>	38	</br>	39	</br>	40	</br>	41	</br>	42	</br>	43	</br>	44	</br>	45	</br>	46	</br>	47	</br>	48	</br>	49	</br>	50	</br>	51	</br>	52	</br>	53	</br>	54	</br>	55	</br>	56	</br>	57	</br>	58	</br>	59	</br>	60	</br>	61	</br>	62	</br>	63	</br>	64	</br>	65	</br>	66	</br>	67	</br>	68	</br>	69	</br>	70	</br>	71	</br>	72	</br>	73	</br>	74	</br>	75	</br>	76	</br>	77	</br>	78	</br>	79	</br>	80	</br>	81	</br>	82	</br>	83	</br>	84	</br>	85	</br>	86	</br>	87	</br>	88	</br>	89	</br>	90	</br>	91	</br>	92	</br>	93	</br>	94	</br>	95	</br>	96	</br>	97	</br>	98	</br>	99	</br>	100	</br>	101	</br>	102	</br>	103	</br>	104	</br>	105	</br>	106	</br>	107	</br>	108	</br>	109	</br>	110	</br>	111	</br>	112	</br>	113	</br>	114	</br>	115	</br>	116	</br>	117	</br>	118	</br>	119	</br>	120	</br>	121	</br>	122	</br>	123	</br>	124	</br>	125	</br>	126	</br>	127	</br>	128	</br>	129	</br>	130	</br>	131	</br>	132	</br>	133	</br>	134	</br>	135	</br>	136	</br>	137	</br>	138	</br>	139	</br>	140	</br>	141	</br>	142	</br>	143	</br>	144	</br>	145	</br>	146	</br>	147	</br>	148	</br>	149	</br>	150	</br>	151	</br>	152	</br>	153	</br>	154	</br>	155	</br>	156	</br>	157	</br>	158	</br>	159	</br>	160	</br>	161	</br>	162	</br>	163	</br>	164	</br>	165	</br>	166	</br>	167	</br>	168	</br>	169	</br>	170	</br>	171	</br>	172	</br>	173	</br>	174	</br>	175	</br>	176	</br>	177	</br>	178	</br>	179	</br>	180	</br>	181	</br>	182	</br>	183	</br>	184	</br>	185	</br>	186	</br>	187	</br>	188	</br>	189	</br>	190	</br>	191	</br>	192	</br>	193	</br>	194	</br>	195	</br>	196	</br>	197	</br>	198	</br>	199	</br>	200	</br>	201	</br>	202	</br>	203	</br>	204	</br>	205	</br>	206	</br>	207	</br>	208	</br>	209	</br>	210	</br>	211	</br>	212	</br>	213	</br>	214	</br>	215	</br>	216	</br>	217	</br>	218	</br>	219	</br>	220	</br>	221	</br>	222	</br>	223	</br>	224	</br>	225	</br>	226	</br>	227	</br>	228	</br>	229	</br>	230	</br>	231	</br>	232	</br>	233	</br>	234	</br>	235	</br>	236	</br>	237	</br>	238	</br>	239	</br>	240	</br>	241	</br>	242	</br>	243	</br>	244	</br>	245	</br>	246	</br>	247	</br>	248	</br>	249	</br>	250	</br>	251	</br>	252	</br>

  <!-- Mettre le lien vers l'ancre ici -->

1.8 Les images

La balise <img> permet d’intégrer une image dans la page, à l’endroit où l’élément apparaît. Deux attributs sont importants à compléter :

<img src="images/mon_image.png" alt="Mon image de test">

• l’attribut src (pour source) contient le chemin vers le fichier de l’image.
• l’attribut alt (pour alternatif) contient un texte descriptif de l’image à l’intention des utilisateurs qui ne peuvent pas voir l’image. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d’écrans pour lire le texte de cet attribut.

D’autres attributs sont utilisables avec <img>:

<img src="https://www.w3.org/html/logo/badge/html5-badge-h-solo.png" width="63" height="64" alt="HTML5 Powered" title="HTML5 Powered">

1.9 Créer une page

2 - Mettre en forme une page web avec CSS

2.1 Modifications de style dans chaque balise HTML

Comme nous l’avons vu, il y a plusieurs façons de développer une page Web.

JsBin est une première étape. Il faut le considérer plus comme un simulateur de page Web que comme un éditeur.

Le moyen le plus simple de rédiger une page web est de créer un fichier index.html avec un éditeur de texte comme bloc-notes, notepad++, Geany, visualstudio …

Enfin, une approche intermédiaire consiste à utiliser un éditeur ou plutôt environnement d’édition en ligne comme repl.it (nécessite une création de comptes) ou trinket.io (sans création de comptes).

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Memento HTML</title>
  </head>
  <body>
    <h1 style="text-align: center">Memento HTML</h1>
    <h2 style="color:grey; font-style: italic;">Éléments de base</h2>
    <p>
      Les éléments de base constituent la colonne vertébrale de tout document HTML. 
      Ils se trouvent sur toutes les pages web après la déclaration du doctype qui définit la version de HTML utilisée par la page. 
      Les éléments décrivant le contenu d'une page web se trouvent entre la balise ouvrante <code style="background-color: #f0f0f0">&lt;html&gt;</code> et la balise fermante <code style="background-color: #f0f0f0">&lt;/html&gt;</code>. 
      L'élément <code style="background-color: #f0f0f0">&lt;html&gt;</code>  est parfois appelé l'élément « racine ». 
    </p>
			
    <ul>
      <li><code style="background-color: #f0f0f0">&lt;html&gt;</code> : représente la racine d'un document HTML. Tout autre élément du document doit être un descendant de cet élément.</li>
      <li><code style="background-color: #f0f0f0">&lt;head&gt;</code> : fournit des informations générales (métadonnées) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style.</li>
      <li> ... </li>
    </ul>
  </body>
</html>

On observe dans le code ci-dessus, l’utilisation des attributs dans les balises ouvrantes pour modifier la couleur du texte style="color:grey", l’alignement du texte style="text-align: center" ou la couleur de l’arrière-plan d’un texte style="background-color: #f0f0f0".

2.2 Bloc de style en début de page HTML

Dans une page Web, il est recommandé que tous les titres <h1> soient mis en forme de manière identique, de même pour <h2> ou <code>. Nous allons donc utiliser une méthode moins répétitive pour associer ces balises avec leur attribut style.

<style>
  h2{
    color:grey;
    font-style: italic;
  }
    
  code{
    background-color: #f0f0f0;
  }
</style>

Nous venons de découvrir une manière “non répétitive” de paramétrer le style d’affichage de différentes balises HTML. Cependant, un inconvénient persiste.

Un site Web compte plusieurs dizaines de pages. Il est donc nécessaire de copier-coller le bloc <style> sur chacune et de refaire ce copier-coller à chaque fois que l’on décide de modifier le style de tel ou tel <h1> ou <li>… etc.

Comment améliorer cela ?

2.3 Feuilles de style CSS

Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web.

De la même façon que HTML, CSS n’est pas un langage de programmation, mais un langage de description. C’est un langage de feuille de style, c’est-à-dire qu’il permet d’appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d’une page HTML qui sont paragraphes p et afficher leurs textes en rouge avec ce code CSS :

p {
  color: red;
}

Pour que cela fonctionne, il faut appliquer le CSS au document HTML, sinon la mise en forme décrite dans le fichier CSS n’affectera pas l’affichage de la page HTML dans le navigateur.

<link href="style.css" rel="stylesheet" type="text/css">

2.4 Anatomie d’une règle CSS

Comme pour le langage HTML, il existe des règles et une vocabulaire à connaître en CSS :

Dans l’exemple ci-dessous :

• p : est le sélecteur de balise,
• color : est la propriété paramétrée,
• grey : est la valeur de la propriété choisie,
• l’ensemble color:red est la déclaration.

    p{
        color:red;
    }

Cette structure s’appelle un ensemble de règles (ou seulement « une règle »). Les différentes parties se nomment :

• Sélecteur est le nom de l’élément HTML situé au début de l’ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l’occurrence, les éléments p). Pour mettre en forme un élément différent, il suffit de changer le sélecteur.

• Déclaration est une règle simple comme color: red, qui détermine les propriétés de l’élément que l’on veut mettre en forme.

• Propriétés sont les différentes façons dont on peut mettre en forme un élément HTML (dans ce cas, color est une propriété des éléments p).

• Valeur de la propriété se situe à droite de la propriété, après les deux points. Celle-ci permet de choisir une mise en forme parmi d’autres pour une propriété donnée (par exemple, il y a d’autres couleurs que red pour la propriété color).

Syntaxe à respecter :

• chaque ensemble de règles, à l’exception du sélecteur, doit être entre accolades {}.
• pour chaque déclaration, il faut utiliser deux points : pour séparer la propriété de ses valeurs.
• pour chaque ensemble de règles, il faut utiliser un point-virgule ; pour séparer les déclarations entre elles.

Ainsi, si on veut modifier plusieurs propriétés d’un coup, on peut utiliser plusieurs déclarations dans une seule règle en les séparant par des points-virgules :

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

2.5 Sélecteurs d’élément (dit aussi selecteurs de balise)

Dans l’exemple ci-dessus, le sélecteur applique une mise en forme à tous les éléments p (toutes les balises p). C’est ce qu’on appelle un sélecteur d’élément (ou de balise). Il permet de sélectionner tous les éléments HTML d’un type donné.

Remarque : En l’absence de règles de style CSS, les balises comme <h1>, <p>, ou <strong> appliquent un style par défaut. Le fait d’utiliser des attributs <style> associées aux balises HTML, permet “d’écraser” le style par défaut.

De même qu’il existe des styles par défaut, il existe des priorités pour appliquer les styles qui sont détaillés dans un fichier style.css ou directement dans le fichier index.html.

<p>Ce texte est en rouge, comme souhaité dans le fichier CSS</p>
<p style="color: blue;">Ce texte est en bleu, car l'attribut <code>color</code> dans la balise est prioritaire sur le code du fichier CSS</p>

2.6 Selecteur de classe

Un sélecteur peut aussi modifier le style de tous les éléments d’une page qui sont d’une classe donnée (dans une page web, plusieurs éléments peuvent partager une même classe).

<h1>Voici un titre</h1>
<p class="classe_intro">et ceci un bout d’introduction</p>
<p>Voici un paragraphe quelconque avec un <strong>mot important</strong> ainsi qu’un <a href="http://ndlr.fr">lien</a>.</p>
<h2 >Un titre "h2"</h2>
<p class="classe_intro">avec son paragraphe d’intro</p>

.classe_intro{
    text-align: right;
    color: #808080;
}

2.7 Selecteur d’identifiant (ID)

Un sélecteur peut aussi modifier le style de l’élément d’une page qui possède l’ID fourni (dans une page HTML donnée, on ne peut avoir qu’un seul élément pour un ID donné).

<h1>Titre</h1>
<p class="classe_intro" id="intro_1">Un premier paragraphe intro</p>
<p>Voici un paragraphe quelconque avec un <a href="http://ndlr.fr">lien</a>. </p>
<h2 >Un titre "h2"</h2>
<p class="classe_intro">Un autre paragraphe d’intro</p>

#intro_1{
    font-weight: bold;
    text-align: center;
}

3 - Le langage JavaScript

Après avoir découvert HTML et son grand associé CSS, voyons le troisième compère devenu incontournable dans le développement web, le JavaScript. Le but n’est pas d’apprendre un nouveau langage de programmation, mais d’étudier quelques exemples d’interactions entre JavaScript et une page web.

• index.html

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
      <title>Ma page</title>
      <link rel="stylesheet" href="style.css">
        
  </head>
  <body>
    <h1>Découvrons le JavaScript</h1>
    <p>Voici un début de page sobre !!!</p>
    <img src="http://wikiclic.com/wp-content/uploads/2015/06/javascript-icon.png">

  </body>

</html>

• style.css

h1{
  text-align: center;
}

• script.js

alert("Le JavaScript fonctionne !");

Pour l’instant notre code JavaScript n’est pas exécuté par notre navigateur Web. Comme pour le code CSS, il nous faut dire au code HTML où se trouve le code JavaScript.

<script src="script.js"></script>

Cette fois, le code JavaScript s’exécute et ouvre une boite de dialogue appelé ausi fenêtre “pop-up”. C’est dû à l’instruction alert du code JavaScript.

let monParagraphe = document.querySelector('p');
monParagraphe.textContent = 'Et voilà une page dynamique bien plus sophistiquée !!!';

Que s’est-il passé ?

Le texte du paragraphe <p> a été changé en “Et voilà une page dynamique bien plus sophistiquée !!!” en utilisant JavaScript.

Pour cela, on a utilisé une fonction appelée querySelector() pour obtenir une référence sur le paragraphe et la stocker dans une variable appelée monParagraphe. C’est assez proche de ce qu’on a fait avec les sélecteurs CSS. En effet, lorsqu’on souhaite manipuler un élément, il faut d’abord le sélectionner.

Ensuite, nous fixons à "Et voilà une page dynamique bien plus sophistiquée !!!" la valeur de la propriété textContent de la variable monParagraphe (elle représente le contenu du paragraphe).

Dans ces exemples, les instructions JavaScript sont exécutées dès l’ouverture de la page web, mais il est possible de ne les exécuter qu’à l’apparition d’un événement comme un clic de souris, par exemple.

<button onclick="maFonction()">Cliquer ici</button>

function maFonction()
{
    alert("Le JavaScript fonctionne !")
}

A présent, l’instruction alert est exécutée uniquement dans le cas où l’utilisateur clique sur le bouton. C’est l’événement onclick du bouton qui lance l’exécution de la fonction JavaScript maFonction().

Testons d’autres possibilités d’interactions entre l’utilisateur et la page web. Modifions le style d’une balise ou mieux encore, la class d’une balise en passant par le code CSS.

• index.html

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p class="petit">Un petit texte</p>
    <p id="monParagrapheFavori">Un texte plus ou moins ...</p>
    <p class="grand">Un grand texte</p>
    <button onclick="maFonction()">Colorier en rouge</button>
      
    <script src="script.js"></script>
  </body>
</html>

• script.js

function maFonction() {
    document.querySelector("#monParagrapheFavori").style.color="red";
}

Dans le code HTML, nous venons d’ajouté à la balise <p>, un attribut id avec la valeur monParagrapheFavori.

Ainsi, le code JavaScript peut modifier le style de la balise ayant pour id monParagrapheFavori et seulement cette balise.

Voyons, à présent, comment modifier, avec JavaScript, les classes CSS afin de modifier l’apparence des pages Web.

• style.css

.petit {
    font-size:10px;
}

.grand {
    font-size:30px;
}

• script.js

function foncGrand()
{
    document.querySelector("#monParagrapheFavori").classList.remove("petit");
    document.querySelector("#monParagrapheFavori").classList.add("grand");
}

function foncPetit()
{
    document.querySelector("#monParagrapheFavori").classList.remove("grand");
    document.querySelector("#monParagrapheFavori").classList.add("petit");
}

Il est également possible de modifier directement le contenu d’une balise HTML.

function modifMessage()
{
    document.querySelector("#monParagrapheFavori").innerHTML = "Bravo ! Quel magnifique click sur le bouton !"
}

On remarque que [selecteur].innerHTML fonctionne de la même manière que [selecteur].textContent vu précédemment.

Il existe d’autres événements que onclick, par exemple, il est possible de détecter le “survol” par le curseur de la souris d’un élément HTML avec l’événement onmouseover.

<span onmouseover="foncGrand()" onmouseout="foncPetit()"  id="maDiv">Survolez-moi !!!</span>