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

 

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