JavaScript, langage et utilisation

Introduction

Langage côté CLIENT
intégré aux navigateurs: pas de problème de déploiement comme avec les applets java ou flash
permet de rendre les applications plus intéractives
gros problèmes de standardisation

Les inconvénients :

gros (énormes. colossaux.) problèmes de standardisation
pas forcément activé (c.f. extension NoScript pour firefox) ;
un robot (ex. google) ne sais pas naviguer en utilisant JavaScript.

Les règles :

un site doit pouvoir fonctionner sans javascript.
le code doit tourner sur les principaux navigateurs et les principales plateformes (attention aux macs !)
pour un intranet avec une politique logicielle stricte, les choses sont plus faciles : le navigateur est connu.
privilégiez le code simple et l'utilisation de bibliothèques.

Liens utiles

Webdeveloper : http://chrispederick.com/work/webdeveloper/ ; extension de firefox très pratique.
www.quirksmode.org : site sur la compatibilité entre navigateurs. (en particulier http://www.quirksmode.org/dom/compatibility.html).
http://www.w3schools.com/ documentations diverses.
Dojo
Prototype

Javascript dans une page web

Comment inclure du code dans une page

Plusieurs solutions :

La balise script : À utiliser pour le code un peu long

	<script type="text/javascript">
		... code javascript
	</script>

inclusion de code, pour tout ce qui est réutilisable :

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

Pseudo-liens javascript, à réserver pour des appels de fonction :
```
		<a href="javascript:alert('bonjour')">...</a>
	
```

appels liés à des événements :

		<button onclick="alert('click !')">clickez moi</button>

Remarque importante

Le code est lu en même temps que la page
Les déclarations créent des objets javascript
Les instructions sont exécutées à la lecture
pour qu'une instruction soit correctement exécutée, elle doit faire référence à des objets qui existent. comparer les résultats suivants :
Ce paragraphe sera en rouge sur fond jaune
```
<p id='par1'>Ce paragraphe sera en rouge sur fond jaune </p>

<script type="text/javascript">
	document.getElementById('par1').style.backgroundColor='yellow';
	document.getElementById('par1').style.color='red';
</script>
```
et
Ce paragraphe ne va pas changer de couleur
```
<script type="text/javascript">
	document.getElementById('par2').style.backgroundColor='yellow';
	document.getElementById('par2').style.color='red';
</script>

<p id='par2'>Ce paragraphe ne va pas changer de couleur </p>
```
En revanche, une fonction peut référencer un élément qui n'existe pas encore. Ce qui importe, c'est qu'il existe quand la fonction est appelée.
Ce paragraphe sera aussi en rouge sur fond jaune
```
<script type="text/javascript">
	function changerCouleurPar3() {
		document.getElementById('par3').style.backgroundColor='yellow';
		document.getElementById('par3').style.color='red';
	}
</script>

<p id='par3'>Ce paragraphe sera aussi en rouge sur fond jaune </p>

<script type="text/javascript">
	changerCouleurPar3();
</script>
```

Constructions de base

Le code JavaScript est une suite d'instructions, dont certaines peuvent être des déclarations de fonctions et des affectations.

Les variables en javascript sont dynamiques et faiblement typées. Elles peuvent changer de type:

	<script type="text/javascript">
		a= 'salut';
		a= 3;
		a= a + 2;
	</script>
	<button onclick="alert('valeur de a '+ a)">montrer a</button>

Si une variable n'existe pas, lui donner une valeur la déclare automatiquement. Il est très fortement conseillé d'utiliser le mot clef var pour déclarer explicitement les variables, en particulier dans le corps des fonctions (pour être sûr d'en faire une fonction locale).
```
		var a= 3;
	
```

les fonctions :

	<script type="text/javascript">
	function somme(a,b) {
			return a+b;
	}
	</script>
	<button onclick="alert(somme(3,2))"> montrer somme</button>

Attention : les fonctions sont uniquement identifiées par leur nom.

Types de base : entiers, réels, booléens (true et false), fonctions, chaînes de caractères ;
les chaînes
- objets
- constantes déclarées entre "..." ou entre '...'.
- une propriété, length
- de nombreuses méthodes:
  - charAt(pos)
  - split(separateur) : renvoie le tableau obtenu en découpant la chaîne.
```
					s= "un,deux,trois";
					t= s.split(",");
				
```

les tableaux (Array)

doivent être créés, mais on n'a pas besoin de fixer leur taille:

tab= new Array();
tab[0]= 2;
tab[1]= 3;
s= 0;
for (i= 0; i < tab.length; i++) {
	s+= tab[i];
}

peuvent être initialisés à la création :
```
tab= new Array("un", "deux", "trois");
```

Sont en fait des tableaux associatifs:

tab= new Array();
tab["un"]= "deux";
// Déclaration en ligne d'un tableau associatif.
tab= {"java": "langage orienté objet", "lisp" : "language fonctionnel"};

les structures de contrôles : reprennent celles du C et de java : if, for, while, do ... while.
Il existe une nouvelle structure : for(.... in...), qui permet de parcourir les indices d'un tableau ou les propriétés d'un objet.
```
		function somme(tab) {
			result= 0;
			for (x in tab) {
				result= result+ tab[x];
			}
			return result;
		}
		
```
La structure switch a la même syntaxe qu'en java, mais fonctionne sur tout type de valeur.

Les objets en JavaScript

Créés par new.

Déclaration de classe, création d'objets

pour déclarer une classe, on déclare en fait son constructeur.
les champs (propriétés) sont définie comme this.NOM_PROPRIETE

les méthodes sont définies comme des propriétés de type function

function Etudiant(id,nom,prenom) {
	this.id= id;
	this.nom= nom;
	this.prenom= prenom;
	this.getRepresentation= function() {return "etudiant "+ prenom + " " + nom;};
}

turing= new Etudiant(1, "Turing", "Alan");
s= turing.getRepresentation();

On peut étendre dynamiquement un objet, en lui ajoutant des propriétés :
```
turing.age= 20;
```

On peut ajouter des propriétés à une classe, en les ajoutant à son prototype

// Ajouter une propriété "age", de valeur par défaut "18" à la classe Etudiant :
Etudiant.prototype.age= 18;

Javascript ne supporte pas l'héritage. On peut le bricoler.
Comme javascript est un langage dynamique, le polymorphisme fonctionne sans problème (sans lien avec l'héritage).

Les expressions régulières

Utiles pour les recherches et remplacement et les vérifications des champs de formulaire.
une expression régulière décrit les formes que peuvent prendre une chaîne de caractère (par exemple, n'être composée que de chiffres, comporter exactement deux mots...).
Une chaîne est reconnue par l'expression régulière R si elle a la forme décrite par R.
Une expression régulière peut se définir entre '/' : entiersRegexp= /[0-9]+/; ou en passant une chaîne de caractères au constructeur Regexp.

symboles utilisés :

symbole	sens	exemple
.	n'importe quel caractère	/.../ = 3 caractères quelconques
lettre, caractère "normal"	le caractère en question	/abc/ = un "a", puis un "b", puis un "c"
\	protège le caractère suivant	/\.txt/ = "point" txt
*	0 ou n fois le groupe précécent	Aa*\.txt/ = "A", 0 ou n fois 'a', puis ".txt"
+	1 ou n fois le groupe précécent	Aa+\.txt/ = "A", 1 ou n fois 'a', puis ".txt"
(...)	groupent	/(abc)*.txt/ = "abc" 0 ou n fois, puis ".txt"
\|	"ou"	/gif\|jpg/ = "gif" ou "jpg"
[...]	un caractère dans la liste	/[a-z]+/ = une suite non vide de lettres minuscules
[^...]	un caractère qui n'est pas dans la liste	/[^a-z]+/ = une suite non vide de caractères, sauf des minuscules
\d	un chiffre	/\d+/ = n'importe quel entier
\w	lettre, chiffre, ou "_"	/[A-Za-z]\w+/ = identifiant au sens java
\s	un espacement (au sens large)
\S	pas un espacement
$	début de texte
^	fin de texte	/^\d+$/ = reconnaît les chaînes formées uniquement de chiffres.

'i' placé après le '/' : ignore majuscules/minuscules : /[a-z]/+ reconnaît a..z et A..Z.

Utilisation : avec la méthode 'search' de string. Renvoie l'indice de la partie reconnue, -1 sinon.

			// Reconnaissance:
			estEntier= s.search(/^\d+$/);
			if (estEntier == 0) {
				// On a reconnu un entier
			} else {
				// estEntier vaut -1 ...
			}

JavaScript et les formulaires

Permet de valider les formulaires côté client. Attention : ne dispense pas de la validation côté serveur, qui est indispensable (sécurité).
On peut accéder aux formulaires par leur nom; de même pour leurs champs.
Soit par exemple le formulaire suivant :
```
<form name="personneForm">
	nom : <input type="text" name="nom">
	prénom :	<input type="text" name="prenom">
	initiale : <input type="text" name="initiale">
	<input type="submit">
</form>
	
```
- Le formulaire correspond à l'objet javascript document.personneForm.
- le champ "prenom" est désigné par l'objet document.personneForm.prenom
- sa valeur est désignée par document.personneForm.prenom.value
Pour valider un formulaire globablement, on utilise l'attribut onsubmit de form :
```
<form name="personneForm" onsubmit="return verifPersonne()">
```
Si l'attribut commence par "return", alors le formulaire n'est envoyé au serveur que si la valeur renvoyée par la fonction javascript est "true". Exemple :
```
		function verifPersonne() {
			return document.personneForm.prenom.value.charAt(0) == document.personneForm.initiale.value.charAt(0);
		}
		
```
nom :

prénom :

initiale :

Pour valider un champ, on utilise généralement onblur, qui est appelé quand on quitte le champ en question.

	<form name="onBlurTest">
		<input name="champBlur" onblur="testEntier(document.onBlurTest.champBlur)">
		<br><input >
		<br><input type="submit">
	</form>
	<script type="text/javascript">
	function testEntier(champ) {
		var s= champ.value;
		// supprime tout ce qui n'est pas chiffre.
		// le 'g' demande à la regexp de fonctionner plusieurs fois.
		champ.value= s.replace(/[^0-9]/g,'');
	}
	</script>

l'événement onchange est déclenché quand le focus est perdu et que la valeur a changé. Il est donc appelé moins souvent.

Les mystères du DOM

nom :
prénom :
initiale :