Wiki SGY.io

Outils pour utilisateurs

Outils du site

Piste : • langage
web:javascript:langage

Table des matières

Le JavaScript

Il a été inventé par Netscape en même temps que Java dans le milieu des années 1990, mais n'est pas Java. Grossièrement, ce qui les approche est la syntaxe, rien d'autre. Le JavaScript est un langage de programmation script qui s'insère dans un document HTML.

Chaque navigateur moderne intègre un moteur d'exécution du script. Ce langage est normalement restreint au navigateur, c'est à dire qu'il n'a pas accès directement aux ressources de l'ordinateur, mais des problèmes de sécurité prouvent le contraire.

Microsoft a sorti sa propre version de JavaScript qui s'est appelé JScript. Une norme européenne est née pour standardiser qui est le ECMAScript, qui est officiel, normalisé et qui est basé essentiellement sur le JavaScript de Netscape.

Exemples de code

Nommer les variables

Règles
var pas espace Ne doit pas contenir d'espace
var 1chiffre Pas de chiffre au début
var avec_souligne Les underscore sont acceptés
var get$ ou var $_$, ou var $ Le signe de dollar est accepté, mais c'est mieux de ne pas utiliser. À noter que $ est souvent utilisé pour référer à la fonction jQuery.
var bonNomIci Le plus souvent on utilise la notation camelCase. La première lettre est minuscule et les autres mots de la variable sont en majuscules

Insertion dans HTML

Le code s'insère dans le document HTML avec la balise <SCRIPT>. Il est conseillé de l'insérer dans l'entête de la page, entre <HEAD></HEAD>, mais techniquement le script peut être placé n'importe où entre les balises <BODY></BODY>. 

<script language="javascript">
 
//.. le code ici
 
</script>

Ou encore, avec un fichier externe : 

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

Les commentaires

Les commentaires sont fait comme en Java : 

//
 
/*   */

Masque le code JavaScript

De moins en moins pertinent, mais il peut être intéressant de masquer le code JavaScript pour les navigateurs qui ne supportent pas le langage.

Exemple de script

Interagir avec l'utilisateur

Les variables et les types de données

Déclaration

La déclaration et l'initialisation de variable se fait comme suit : 

var x = "valeur_initiale";
x = "valeur_initiale";
Nom = "Pierre";
var Age = 45;

Le mot clé var est optionnel sauf lorsqu'on redéclare localement une variable globale (comme on le verra avec les fonctions).

Les identificateurs sont sensibles à la casse (case-sensitive), doivent commencer par une lettre ou par le caractère de soulignement (_).

Une variable globale est une variable qui est déclarée à l'extérieur de toute fonction. Elle est alors visible dans toute la page Web tant qu'elle n'est pas re-déclarée localement.

Les types de données

Il faut noter qu'à la différence des autres langages, comme Java et C/C++, le type de donnée n'est pas spécifié explicitement à la déclaration, il est induit par la valeur de la variable :

  1. Une chaîne est entre double-quotes: “ceci est un exemple de chaîne”.
  2. Un numérique peut être entier ou réel: 3.0, -44, 0xF5A, 6.5E3
  3. Un booléen comme true ou false.

On peut utiliser les caractères d'échappement suivants dans les chaînes de caractères:

\b backspace
\f form feed
\n changement de ligne
\r retour chariot
\t tabulation
\\ back-slash
\“ double-quote

JavaScript est faiblement typé, on peut utiliser une même variable pour différents types de données. Par exemple: 

var y = "bonjour"; 
y = 33.5; 
alert("La valeur de y est" + y);

Les opérateurs

Opérateurs arithmétiques

Opérateurs et descriptions
+ addition de nombres ou concaténation de chaînes
- Soustraction ou moins unaire
* multiplication
/ division
% reste de la division
++ incrémentation (++a et a++ sont équivalents à : a = a+1)
-- décrémentation (–a et a– sont équivalents à : a = a-1)

Opérateurs d’affectation

Opérateurs et descriptions
= affectation
+= affectation de somme (a+=5 est équivalent à : a = a+5)
-= affectation de soustraction (a-=7 est équivalent à : a = a-7)
*= affectation de produit (a*=2 est équivalent à : a = a*2)
/= affectation de quotient (a/=5 est équivalent à : a = a/5)
%= affectation de reste (a%=3 est équivalent à : a = a%3)

Opérateurs de comparaison

Opérateurs et descriptions
== égal à
!= différent de
> supérieur à
>= supérieur ou égal à
< inférieur à
⇐ inférieur ou égal à
!= différent de
&& ET logique (AND)
|| OU logique (OR)
! NON logique (NOT)

Les structures de contrôle

La structure if

if (x==33) 
  alert("x vaut 33"); 
else if (nom!="Pierre") 
  alert("Où est Pierre? "); 
else 
  alert("Bonjour Pierre ");

A noter qu'avant JavaScript 1.2 (fourni avec Netscape 4.0), la conversion automatique s'effectue pour les opérandes des opérateurs d'égalité et d'inégalité. Par exemple, avec : var x = 5; la condition suivante est considérée true: if (x == “5”)… Mais avec JavaScript 1.2, la condition est considérée fausse. On doit convertir une des opérandes vers le type de l'autre avec : if (string(x)==“5”)… ou avec : if (x == (“5”-0))…

Les structures répétitives

Ces structures sont: for, while et do…while. Elles sont identiques à celles du langage C.

Les fonctions

Une fonction est un ensemble d’instructions destinées à réaliser une tache spécifique et que l’on pourra utiliser à plusieurs reprises.

Définition

Voici un exemple simple de fonction. C’est une fonction similaire à celles qu’on a utilisé dans les exemples précédents : c’est la fonction programme() : 

<HTML> 
  <HEAD> 
    <TITLE> Premier exemple de fonction </TITLE> 
<SCRIPT LANGUAGE="javascript"> 
<!-- 
function programme() 
{ 
alert("Bonjour et bienvenue a votre premier programme javascript."); 
} 
--> 
</SCRIPT> 
  </HEAD> 
  <BODY ALIGN="Center"> 
    Cliquez sur le bouton pour executer la fonction javascript:<P> 
    <FORM> 
      <INPUT TYPE="Button" VALUE="Executer" OnClick="programme()"> 
    </FORM> 
  </BODY> 
</HTML>

Paramètres ou arguments

Les fonctions seraient d’un usage limitée si on ne pouvait pas faire dépendre leur comportement du contexte de leur utilisation. Par exemple, la fonction f1() ci-dessus afficherait toujours le même message : bienvenue dans la fonction f1(). Il serait plus intéressant de faire une fonction plus souple à laquelle on spécifiera au moment de l’appel le message qu’elle devra afficher. C’est là que les paramètres interviennent. Voici une nouvelle version f2() de f1() qui reçoit en paramètre le message à afficher :

Retour du résultat

Les fonctions précédentes reçoivent des paramètres et affichent des messages à l’écran avec alert(). Avec ces fonctions, on ne peut pas récupérer un résultat qu’on peut insérer directement dans une expression. Ceci devient possible avec l’instruction return. L'expression de retour ne doit pas avoir de parenthèses pour l'encadrer.

Variables locales et globales

Une variable déclarée dans une fonction avec le mot réservé var a une portée limitée au corps de la fonction : cette variable ne peut pas être utilisée à l’extérieur de la fonction. On l’appelle variable locale.

Une variable déclarée à l’extérieur de toute fonction ou dans une fonction mais sans le mot réservé var a une portée globale : cette variable peut être utilisée à l’intérieur ou à l’extérieur de la fonction. On l’appelle variable globale.

Immediately Invocable Function Expressions

(function () {
  // ...
}());

Le modèle objet document

Travailler avec des objets

Nous avons vu les différents types de données en JavaScript : les valeurs numériques, les chaînes de caractères et les booléens. Ainsi :

  1. Pour représenter le nom d’un étudiant, on utilise le type chaîne de caractères.
  2. Pour représenter la note d’un étudiant, on utilise le type numérique.

Mais alors, comment faire si je veux avoir une variable qui représente un étudiant en entier, avec toutes ses caractéristiques ? Pour cela, il faut créer un objet etudiant. Pour créer un objet etudiant, il suffit de définir la fonction constructeur d'un objet etudiant: 

function etudiant(numero, nom, age, moyenne) 
{ 
  this.numero = numero; 
  this.nom = nom; 
  this.age = age; 
  this.moyenne = moyenne; 
}

Pour déclarer une variable Etud1 de type objet etudiant : 

Etud1 = new etudiant(345,"Pierre",25,89.6);

On peut ensuite accéder et modifier les propriétés de l'objet : 

alert("Bonjour " + Etud1.nom + " votre moyenne est : " + Etud1.moyenne);

Etud1.moyenne = Etud1.moyenne – 10 ; 

alert("Vous avez ete penalises de 10pts. Votre moyenne est : " + Etud1.moyenne);

Important → Il faut bien retenir la façon avec laquelle on accède aux propriétés d’un objet : on utilise l’opérateur point (.). Ainsi :

  1. Etud1.nom est la propriété nom de l’objet Etud1.
  2. Etud1.moyenne est la propriété moyenne de l’objet Etud1.
  3. Etud2.moyenne est la propriété moyenne de l’objet Etud2.

JavaScript n’est pas un langage de programmation orienté objets. C’est plutôt un langage basé sur les objets. Nous venons de voir comment créer un nouvel objet etudiant, mais JavaScript offre aussi une multitude d’objets prédéfinis qui offrent plusieurs fonctionnalités. En réalité, il est plus fréquent de travailler avec les objets prédéfinis qu’avec de nouveaux objets.

Structure de l’objet document

Une page web apparaît à l’écran dans la fenêtre du navigateur. JavaScript va diviser cette fenêtre en objets et, plus important, va vous permettre d’accéder à ces objets et de les utiliser.

La page s’affiche dans une fenêtre : c’est l’objet prédéfini window. Cette fenêtre contient un document HTML : c’est l’objet prédéfini document. Si le document contient, par exemple, un formulaire, alors l’objet formulaire (form) va être une propriété de l’objet document.

Si le formulaire contient, par exemple, une case à cocher (checkbox), alors celle-ci va être une propriété de l’objet form.

On voit donc que ces objets prédéfinis forment une hiérarchie d’objets : 

window -> document -> form -> checkbox

Pour accéder à un objet, il faut donner le chemin complet en allant du contenant le plus extérieur jusqu'à l'objet en question. Rappelons que l’accès à un objet interne se fait avec l’opérateur point (.) : 

window.document.form.checkbox

Cependant, l’objet window étant le plus externe, donc toujours présent, il est repris par défaut par JavaScript. Il devient alors optionnel, et on écrit simplement : 

document.form.checkbox

Signalons, enfin, que les objets sont identifiés par leur attribut NAME donné dans la balise HTML qui insère l'objet.

Accéder aux objets contenus dans un document

Accès à la fenêtre mère

Il est possible d'avoir un accès à la fenêtre qui a ouvert une nouvelle fenêtre pop-up. Cette nouvelle fenêtre peut faire référence à sa fenêtre mère, qui l'a ouverte avec opener. 

window.opener.location

Les méthodes standard des objets

  • focus(); → Donne le focus à un élément du formulaire : document.formuaire.txtNom.focus()

Les événements

  • onload
  • onclick

Validation des formulaire

L'avantage de valider avec le JavaScript est de ne pas envoyer des données inutilement vers le serveur. Cet aspect est surtout vrai anciennement avec les connexions basse-vitesse ou bien pour des serveurs chargés.

Principes élémentaires

  1. Ne pas appeler la fonction de validation avec le bouton submit mais plutôt avec avec onsubmit de la balise <form>
  2. Le code exécuté de la fonction de validation doit retourner false pour bloquer l'envoi du formulaire si la validation n'est pas correcte.

Ajax

L'amalgame des technologies (Asynchronous JavaScript and XML) permet d'aller chercher des informations, faire des requêtes, sans tout rafraîchir toute la page. L'AJAX se sert de l'objet XMLHttpRequest pour mettre à jour les données. C'est l'objet XMLHttpRequest qui fait la requête au serveur, récupère les données et les mets disponibles aux scripts JavaScript en format XML.

Comme le XML peut paraître plus compliquée pour des données simples, JSON (JavaScript Object Notation) peut sembler une meilleure approche.

Chaines

Fonctions utiles sur les chaines

supplant

if (typeof String.prototype.supplant !== 'function') {
	String.prototype.supplant = function(o) {
		return this.replace(/{([^{}]*)}/g,
			function(a, b) {
				var r = o[b];
				return typeof r === 'string' ? r : a;
			});
		}
	}
}

Nombres

Décimales approximatives

a = 0.1;
b = 0.2;
c = 0.3;
 
(a + b) + c === a + (b + c)

Le resultat sera false.

web/javascript/langage.txt · Dernière modification : 2022/12/10 14:53 de sgariepy