10 - Javascript(1)

JavaScript et autres langages

JavaScript vs Java

JavaScript simple vs programme complet

Programmation client vs serveur

Interpréteur dans tous les navigateurs

Interpréteur indépendant des logiciels de navigation

Sur les serveurs
Dans les applications
JScript.NET, ServerSide JavaScript, LiveWire Pro, SpiderMonkey et Rhino

Versions de Javascript

JavaScript (de Netscape)

1.0 à 1.5 (avant 2000)
1.5 support de ECMA V3 (à partir de Netscape 6; Firefox 1.0)
1.6 pour ECMA V4 (2005)
1.7, 1.8, 1.8.1 et 1.8.2 (de 2006 à 2009)
1.8.5 (Juillet 2010 – Firefox 4 – IE9 – Opera 11.6)

JScript (de Microsoft)

1.0 à 5.0 (avant 2000)
5.5 vaguement équivalent à JS 1.5 (support partiel de ECMA v3)
5.6 (dans IE 6), 5.7 (IE 7), 5.8 (IE 8)

Par la suite JS 1.8.5

ECMA Script (standardisation)
V1 et V2 (1998); V3 (2000); V4 (2005); V5 (2010); V6 (2015)

Sécurité dans un navigateur

Un script ne peut pas lire, ni écrire dans des fichiers sur le poste client, ne peut pas lire, ni effacer des données sensibles (privées).

Un script n’a pas accès au réseau, ne peut pas accéder à un autre ordi directement (autre que URL, CGI).

Confidentialité?

Problèmes potentiels??

Script qui appelle un ActiveX?
Script qui appelle un plugin?
Avenir?

Généralités du langage

Support des caractères Unicode (2 octets/car.)

Utilisation des caractères accentués ou alphabet cyrillique ou …??
Dans les commentaires et les chaînes pour ECMA v1 et v2
Partout pour ECMA v3 (JS 1.5 et JScript 5.5), mais ce ne sont pas tous les navigateurs qui supportent 100%.

En conclusion (ça veut dire quoi??):

Pas de caractères accentués dans vos programmes JavaScript. (compatibilité avec versions précédentes et pour divers logiciels de navigation)
Exceptions: chaînes de caractères et commentaires (on va voir plus loin)

Faites attention à la casse (i.e. A <> a).

Espace et changement de ligne.

Un ; à la fin de chaque instruction.

Exemple exécution de Javascript

See the Pen 1945-10-1 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

La page complète ressemble à :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<script type="text/javascript">
		document.write("Bonjour les amis!");
		document.write("Voici une 2e ligne de texte");
	</script>
	<p>
      Le programme ci-haut sera interprété et le message inséré directement à la place de celui-ci. 
    </p>

</body>
</html>

Inclusion JavaScript en HTML

<html>
  <head> 
  <script type="text/javascript">
    programme javascript
  </script>
  </head>
  <body>
    <p>Paragraphe 1</p>
    <script>
      programme javascript
    </script>
    <p>Paragraphe 2</p>
    <script>
      programme javascript
    </script>
    <p>
      Paragraphe 3
    </p>
  </body>
</html>

Note: l’attribut type n’est pas nécessaire

Inclusion conteneur JS

On peut inclure autant de conteneur <script> que l’on désire dans notre page Web.

Chaque conteneur est exécuté à l’endroit où il est inséré.

Y-a-t-il un impact d’insérer un conteneur <script> dans la section <body> vs <head>?

Oui… si l’exécution du script est très longue la page tardera à s’afficher et donnera l’impression au lecteur de ne pas être disponible (dans les cas extrêmes de lenteur).

À moins de nécessité absolue on cherchera à mettre le conteneur <script> le plus loin possible dans la section <body>, une fois que la page est affichée.

Utilisation <script> dans <head>

<html>
  <head>
    <script type="text/javascript">…</script>
  </head>
  <body>
  </body>
</html>

Interprétée avant la section <body>.

Pour exécuter un programme avant l’affichage de la page Web.

Lorsqu’on a besoin d’exécuter le programme afin de permettre l’affichage correct de la page Web.

En général on cherchera à mettre nos programmes le plus loin possible sur la page Web pour ne par ralentir l’affichage du reste des éléments.

Fichier source séparé

<body>
  <script src="premier.js">
  </script>
  Le programme ci-haut sera interprété et le message inséré directement à la place de celui-ci. Notez que le programme se trouve dans le fichier "premier.js".
</body>

Dans le fichier premier.js: (seulement les instructions JavaScript)

document.writeln("Bonjour les amis!");
document.writeln("Voici une 2e ligne de texte");

Avantages d’un fichier séparé

Ne pas mélanger HTML et JavaScript.

L’interprétation des programmes n’a pas d’influence pour le navigateur et les logiciels de validation.

Le chargement du même fichier de librairie JavaScript par deux pages différentes ne forcera pas un nouveau chargement (le navigateur utilisera celui qui est en cache). Permet de charger plus rapidement pour la 2e page du site.

Problème : un script n’a accès qu’aux éléments déjà chargé, pour cette raison, on l’incluera de cette façon :

  <script type="text/javascript" src="premier.js" defer>

Le script sera exécuté après le chargement de la page.

Commentaires dans les programmes

Pourquoi??

Faciliter la lecture du programme.
Identifier l’auteur.
Décrire les fonctions et particularités des programmes.
Décrire les différents éléments.
Ignorer une instruction pour déboguer.

Comment?

// le reste de la ligne est ignoré
/* un commentaire sur plusieurs lignes
    … 
    fin du commentaire */

Quelques fonctionnalités essentielles

alert("Un message quelconque destiné au lecteur!");
document.write("Un message!");
document.writeln("Un message!");
reponse=prompt("Entrez votre nom:");
confirm("Voulez-vous continuer?");

Exemple

See the Pen 1945-10-2 by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

<html>
  <head> 
  </head>
  <body>
    <p>Texte dans la page Web…</p>
    <script>
      document.writeln("<p>Voici le contenu Web</p>"); 
      document.writeln("<p>3e paragraphe");
      document.writeln(" suite du paragraphe</p>");
      alert("Petit message dans une fenêtre");
    </script>
  </body>
</html>

Après l’exécution du programme :

<html>
  <head> 
  </head>
  <body>
    <p>Texte dans la page Web…</p>
    <p>Voici le contenu Web</p>
    <p>3e paragraphe
      suite du paragraphe</p>
  </body>
</html>

Autre exemple

See the Pen Untitled by Axel Seguin (@axel-seguin-gmail-com) on CodePen.

<html>
  <head>
  </head>
  <body>
    <script>
      var reponse=prompt("Entrez votre nom:");
      var age=prompt("Entrez votre age:", "33");
      document.writeln("<p>Bonjour ");
      document.writeln(reponse);
      document.writeln(", vous avez ");
      document.writeln(age);
      document.writeln(" ans</p>");
    </script>
  </body>
</html>

Après l’exécution :

<html>
  <head> 
  </head>
  <body>
    <p>Bonjour Bob, vous avez 33 ans</p>
  </body>
</html>

Note: les instructions prompt ouvrent une fenêtre pour permettre de saisir des valeurs, supposons que les valeurs saisies sont Bob et 33.

Même exemple plus court :

<html>
  <head>
  </head>
  <body>
    <script>
      var reponse=prompt("Entrez votre nom:");
      var age=prompt("Entrez votre age:", "33");
      document.writeln("<p>Bonjour "+reponse+", vous avez ");
      document.writeln(age+" ans</p>");
    </script>
  </body>
</html>

Notez l’utilisation du + pour additionner les chaînes (en fait on dit concaténer les chaînes).

Erreurs de syntaxe

<html>
  <head> 
  </head>
  <body>
    <script>
      var reponse=pr       ompt("Entrez votre nom:");
      var age=prompt("Entrez votre age:", "33");
      document.writeln("<p>Bonjour "+reponse+", vous avez ");
      document.writeln(age+" ans</p>");
    </script>
  </body>
</html>

Ce programme ne fait rien… il ne me demande pas de valeur.

Pourquoi?

Remarquez l’erreur de syntaxe dans le script…

Lorsque le script contient une erreur de syntaxe, il est arrêté par le navigateur.

Comment savoir si une erreur est survenue?

Si le programme ne donne pas le résultat escompté, on sait qu’il contient une erreur. Mais si l’erreur arrive après l’affichage du résultat comment savoir?

Click droit puis Inspecter et choisir console.