JavaScript

Vous entrez dans la partie II du tutoriel. Cette partie contient des exemples montrant toute la portée de CSS dans Mozilla.

Chaque page de la partie II illustre la manière dont CSS interagit avec une autre technologie donnée. Ces pages ne sont pas prévues pour vous apprendre à utiliser ces autres technologies. Pour cela, vous devrez consulter d'autres tutoriels pour les comprendre en détail.

Au lieu de cela, ces pages sont conçues pour illustrer les nombreux usages de CSS. Pour les comprendre, vous devriez avoir une certaine connaissance de CSS, mais il n'est pas nécessaire de maîtriser aucune des autres technologies évoquées.

Information : JavaScript

JavaScript est un langage de programmation . Lorsque vous utilisez une application Mozilla (par exemple votre navigateur), une grande partie du code exécuté par votre ordinateur est écrit en JavaScript.

JavaScript peut interagir avec les feuilles de style, ce qui permet d'écrire des programmes modifiant le style d'un document dynamiquement.

Il existe trois manières de le faire :

En travaillant avec la liste de feuilles de style du document — par exemple en ajoutant, retirant ou modifiant une feuille de style.
En travaillant avec les règles d'une feuille de style — par exemple en ajoutant, retirant ou modifiant une règle.
En travaillant avec un élément individuel du DOM — en modifiant son style indépendamment des feuilles de style du document.

Plus de détails
Pour plus d'informations à propos de JavaScript dans Mozilla, consultez la page JavaScript de ce wiki.

Action : une démonstration en JavaScript

Créez un nouveau document HTML, doc5.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler pour en obtenir l'entièreté :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>

<HEAD>
<TITLE>Premiers pas en CSS avec Mozilla - Démonstration en JavaScript</TITLE>
<LINK rel="stylesheet" type="text/css" href="style5.css"></strong>
<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
</HEAD>

<BODY>
<H1>Exemple en JavaScript</H1>

<DIV id="square"></DIV>

<BUTTON type="button" onclick="doDemo(this);">Cliquez ici</BUTTON>

</BODY>
</HTML>

Créez un nouveau fichier CSS, style5.css. Copiez et collez-y le contenu ci-dessous :

/*** Démonstration en JavaScript ***/
#square {
  width: 20em;
  height: 20em;
  border: 2px inset gray;
  margin-bottom: 1em;
  }

button {
  padding: .5em 2em;
  }

Créez un nouveau fichier texte, script5.js. Copiez et collez-y le contenu ci-dessous :

// JavaScript demonstration
function doDemo (button) {
  var square = document.getElementById("square")
  square.style.backgroundColor = "#fa4"
  button.setAttribute("disabled", "true")
  setTimeout(clearDemo, 2000, button)
  }

function clearDemo (button) {
  var square = document.getElementById("square")
  square.style.backgroundColor = "transparent"
  button.removeAttribute("disabled")
  }

Ouvrez le document dans votre navigateur et appuyez sur le bouton.

Ce wiki ne permet pas d'utiliser JavaScript dans ses pages, il n'est donc pas possible de montrer la démonstration ici. Cela ressemble à ceci, avant et après que vous appuyiez sur le bouton :

Démonstration en JavaScript

Remarques à propos de cette démonstration :

Le document HTML est lié à la feuille de style de la manière habituelle et est également lié au script.
Le script traite des éléments individuels du DOM. Il modifie le style du carré directement. Il modifie le style du bouton indirectement en changeant un de ses attributs.
En JavaScript, document.getElementById("square") fonctionne de manière similaire au sélecteur CSS #square.
En JavaScript, backgroundColor correspond à la propriété CSS background-color.
Votre navigateur possède une règle de style interne pour button[disabled="true"] qui modifie l'apparence du bouton lorsqu'il est désactivé.

Challenge
Modifiez le script pour que le carré se déplace vers la droite de 20 em lorsque sa couleur change et revienne à sa place lors de l'opération inverse.

Pour continuer

Si vous avez eu des difficultés à comprendre cette page ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

Dans cette démonstration, le document HTML est lié au script même si seul l'élément button utilise le script. Mozilla étend CSS afin qu'il puisse lier du code JavaScript (ainsi que du contenu et d'autres feuilles de style) aux éléments sélectionnés. La page suivante en fournit la démonstration : Liaisons XBL

JavaScript

Information : JavaScript

Action : une démonstration en JavaScript

Pour continuer

Étiquettes et contributeurs liés au document