Essais JavaScript

 

"Allez, on va faire la java !"

 

Le JavaScript est un langage qui permet d'améliorer le HTML: il permet de faire des animations, de jongler avec des fenêtres, valider un formulaire en cours de saisie, faire des calculs, traitement de chaîne, gérer des "cookies", faire du HTML dynamique, etc...

C'est un langage de programmation qui ressemble fort C, orienté objet, interprété (comme le HTML, et contrairement au Java qu'il ne faut pas confondre). Il permet donc de faire des choses encore plus puissantes que le HTML, mais il s'adresse aux programmeurs confirmés. Il permet d'utiliser des variables, des tests, des boucles, des tableaux, des objets, des fonctions, des évènements, des boîtes de dialogues...

En pratique, on englobe des passages en langage Javascript dans une page HTML.

Le gros inconvénient de ce langage est qu'il existe de nombreuses différences entre Netscape et Internet Explorer, et que le programmeur doit souvent prendre en compte dans son programme ces 2 navigateurs, ce qui complexifie encore la tâche (et en plus entre les versions successives).

Cette page n'est même pas un tutorial, mais juste quelques liens vers des guides, références et exemples JavaScript.

D'abord un très bon bouquin:
JavaScript, Michael Moncur (Le Tout en Poche, CampusPress, 10,88€)

Voici quelques sites concernant le manuel de référence du Javascript. Autrefois le manuel et le guide étaient sur le site de Netscape, l'inventeur de ce langage.

Autres sites:

Vous pouvez aussi directement télédécharger depuis chez moi un petit guide en HTML (zippé), en anglais.

Enfin, voici quelques-uns de mes essais (afficher les sources):

 

Quelques trucs en vrac

  1. Pour avoir la console JavaScript dans Netscape (pour voir les erreurs d'exécution), taper javascript: dans la barre d'adresse.
  2. Sous Internet Explorer, si vous voyez dans la barre d'état "Terminé, mais il existe des erreurs sur la page", double-cliquer sur cette barre pour avoir l'erreur JavaScript.
  3. Dans la barre d'adresse, on peut faire directement figurer un ordre JavaScript. Par exemple:
  4. On ne peut mettre un ; après un ordre JavaScript que s'il est suivi d'un autre ordre sur la même ligne. Réciproquement, on peut écrire une instruction sur plusieurs lignes si celle-ci est trop longue. On peut mettre ou non des espaces entre les opérateurs, et indenter comme on veut. On peut entourer les chaînes de guillemets ou de quotes. C'est cool.
  5. En plus des objets prédéfinis par le navigateur (navigator, window, screen), il y a aussi les objets String, Array, Math, Date...
  6. Le nom d'une variable peut être lui-même une variable (chaîne). Pour voir son contenu (ça revient à enlever les guillemets), on utilise eval(). C'est le truc qu'utilise la calculette (où l'on rentre une expression sans les guillemets, mais que le programme considère comme une chaîne texte). Exemples:
    ExpressionRésultatAction annexe
    eval("document.bgColor")
    eval("Math.PI")3.141592653589793
    eval("3+15*2")33
    eval("toto")undefined
    eval("window.status='coucou'")coucouModifie barre d'état
    eval("window.confirm('Etes-vous sûr ?')")trueBoîte de dialogue
    eval("open()")[Object]Ouvre une fenêtre
    Autre exemple: si une variable nomImage contient "ste_sophie" et que le nom de la 3ème image du document est "ste_sophie", il est équivalent d'écrire:
    document.images[2]
    document.images.ste_sophie
    document.images["ste_sophie"]
    document.images[nomImage]
    document.images.eval(nomImage)
  7. Un ordre JavaScript peut écrire dans le document courant avec l'ordre document.write().Exemple:
    document.write("Ligne de texte<br>")
  8. Un programme JavaScript (dans un HTML) est entouré des balises HTML <script> et </script>.
  9. On peut mettre aussi des ordres JavaScript directement dans un ordre HTML, par exemple dans un gestionnaire d'évènement. Exemple:
    <a href="toto.htm" onmouseover="document.write('vous avez survolé ce lien')">lien</a>
  10. Affichage d'un message dans la barre d'état (en bas de la fenêtre) lorsqu'on survole un lien:
    <a href="toto.htm" onmouseover="window.status='vous avez survolé ce lien'; return true" onmouseout="window.status=''">lien</a>
  11. On peut se créer des fenêtres de taille définie, sans boutons etc... pour y charger par exemple un lien ou une image (plutôt qu'un vulgaire target="_blank") de la façon suivante:
    <a href="toto.jpg" target="fen" onclick='window.open("","fen", "scrollbars=yes,resizable=yes,width=750,height=580")'>lien</a>
  12. Attention, autant en HTML on peut écrire indifféremment en minuscules ou en majuscules, JavaScript fait la distinction. Exemples: Math.PI, document.bgColor, window.open(), ...
  13. En HTML, on encadre un commentaire par <!-- et -->, en JavaScript, par /* et */ (ou // si sur une seule ligne).
  14. On peut écrire ses fonctions JavaScript dans un fichier à part, qu'on charge dans l'en-tête HTML avec:
    <script src="toto.js"></script>
    On écrit les éventuels scripts à la suite, après une nouvelle balise <script>.
  15. On écrit de préférence les fonctions dans l'en-tête (HEAD), et l'exécution de ces fonctions dans le corps (BODY) du document.
  16. On peut spécifier dans la balise <script> l'attribut LANGUAGE= avec comme paramètres possibles: JavaScript, JavaScript1.1, VBScript, ... En effet, on peut écrire aussi en Visual Basic. Mais par défaut c'est JavaScript.
  17. Il y a différentes versions (de compatibilité ascendante heureusement) entre JavaScript. Actuellement, on en est environ à la version 1.7. Par exemple, Internet Explorer 5.0 et Netscape 4.5 ne reconnaissent pas plus que JavaScript1.3.
    Votre navigateur, par exemple, reconnaît:
  18. Ajouter ce document dans les favoris avec:
    <a href="#" onclick="window.external.AddFavorite(location.href, document.title); return false">
    (ne marche qu'avec IE)
  19. Fonction acceptant un nombre variable d'arguments: 
    function toto() 
  {
  for (var i=0; i<toto.arguments.length; i++)
    // toto.arguments[i]
  }
  20. Il existe de nombreux sites où l'on peut traduire une page Web en n'importe quelle langue: dans un formulaire, on choisit la langue, et on écrit l'adresse de la page à traduire. Par exemple le site Systran. Repérez ce que exactement le bouton SUBMIT envoie (pour cela on peut transformer le ACTION en "mailto:", voir page sur HTML), et faites une fonction javascript qui fasse la même chose, comme par exemple celle-ci qui <a href="javascript:traduit('en')">traduit cette page en anglais</a>. Le source est dans myfunc.js.

 

Survol:

On appelle survol ou rollover le fait qu'une image (ou un texte) change lorsque la souris passe dessus, ou qu'une image apparaisse et disparaisse.

En fait, vous avez tous les éléments en main pour faire ça. Il faut que vous ayez à l'esprit les choses suivantes:

Remarques:

Exemples:

 

Jukebox:

L'inclusion d'objets en HTML est souvent tributaire de la version du navigateur. On peut employer Javascript pour rendre l'animation indépendante du matériel (mais c'est fastidieux). Voyez cet exemple, pris dans webreference.com.

Précédent

Retour sur HTML

Mise à jour: