Informations pratiques

Pour savoir où est le cours :

En cas d'incohérence entre les deux, suivre les indications du site de deptinfo.

JavaScript, langage et utilisation

Introduction

Les inconvénients :
Les règles :

Liens utiles

Un petit exemple pour commencer

	<script type="text/javascript">
	function calculerLaSomme() {
	  var n1= parseInt(document.getElementById('nombre1Ex1').value);
	  var n2= parseInt(document.getElementById('nombre2Ex1').value);
	  document.getElementById('resultatEx1').value= n1+n2;
	}
	</script>
	nombre 1<input type="text" name="nombre1Ex1" id="nombre1Ex1"/>
	nombre 2<input type="text" name="nombre2Ex1" id="nombre2Ex1"/>
	Résultat<input type="text" name="resultatEx1" id="resultatEx1"/>
	<button type="button" onclick="calculerLaSomme()">
		calculer la somme</button>
nombre 1
nombre 2
Résultat

Javascript dans une page web

Comment inclure du code dans une page ?

Plusieurs solutions :

La balise script

Appels javascript lié à des événements

Pseudo-url

On peut aussi remplacer une URL par du javascript, en précisant javascript: comme protocole:

comme pour les événements, on gardera le code le plus court possible.

<a href="javascript:alert('bonjour')">...</a>
	

Constructions de base

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

Variables en javascript

les fonctions

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

à noter:

Variables globale

<script type="text/javascript">
// marche aussi sans var...
var exempleVariable1= 0;
function augmenter1() {
	exempleVariable1= exempleVariable1 + 1;
}
</script>
<button onclick="augmenter1(); alert(exempleVariable1);"> montrer exempleVariable1 </button>
Dans cet exemple, la variable exempleVariable1 modifiée par la fonction est la même que la variable globale.

Variables locale

<script type="text/javascript">
// Variable globale exempleVariable2.
var exempleVariable2= 0;
function augmenter2() {
	// On déclare une variable locale exempleVariable2.
	// La nouvelle variable cache la variable globale
	var exempleVariable2=55;
	exempleVariable2= exempleVariable2 + 1;
}
</script>
<button onclick="augmenter2(); alert(exempleVariable2);"> montrer exempleVariable1 </button>

Types de données

les chaînes

Chaînes et nombres

Deux fonctions de javaScript sont particulièrement intéressantes:

Notez que ces deux fonctions sont très permissives. Elles acceptent des chaînes qui commencent par un nombre, et, s'il y a du texte après, elle l'ignorent. Pour tester si elles ont réussi, on utilisera la fonction isNaN().

	s="1234";
	i= parseInt(s);
	if (isNaN(i)) {
		alert(s + " n'est pas un nombre");
	}

les tableaux (Array)

Structures de contrôle

if

if (CONDITION) {
  ACTIONS1;
} else {
  ACTIONS2;
}

for

for (INIT; TEST; INCREMENT) {
  ACTIONS;
}
exemple
s= 0;
for (i= 0; i < tab.length; i++) {
  s= s+ tab[i];
}

while

while (CONDITION) {
  ACTIONS;
}

do...while

do {
  ACTIONS;
} while (CONDITION);

switch

switch (VALEUR_A_TESTER) {
  case VAL1:
  	ACTIONS;
  break;
  case VAL2:
  	ACTIONS;
  break;
  default:
  	ACTIONS;
}
Contrairement au C et au Java, la valeur à tester peut être une chaîne de caractères:
switch (reponse) {
	case "oui":
		alert("merci");
	break;
	case "non":
		alert("au revoir");
	break;
}

Manipulation de la page Web

But: pouvoir lire et modifier des éléments de la page web par programme.

Première approche du DOM

Propriétés des éléments

Un élément retourné par getElementById a plusieurs propriétés, que l'on peut lire et/ou écrire.

DOM et CSS (Cascading Style Sheets)

Les caractéristiques de cet élément sont contrôlées par les CSS.

	
<script type="text/javascript">
function setCSS() {
	var elt= document.getElementById('controleParCSS');
	
	var cssValue= document.getElementById('cssValue').value;
	var cssName= document.getElementById('cssName').value;

	switch (cssName) {
		case 'background':
			elt.style.background= cssValue;
			break;
		case 'color':
			elt.style.color= cssValue;
			break;
		case 'fontSize':
			elt.style.fontSize= cssValue;
			break;
		case 'display':
			// none : caché ; inline : dans le cours du texte; block : comme un bloc.
			elt.style.display= cssValue;
			break;
		case 'position':
			// static, absolute ou relative
			elt.style.position= cssValue;
			break;
		case 'left':
			elt.style.left= cssValue;
			break;
		case 'right':
			elt.style.right= cssValue;
			break;
		case 'top':
			elt.style.top= cssValue;
			break;
		case 'bottom':
			elt.style.bottom= cssValue;
			break;
		case 'width':
			elt.style.width= cssValue;
			break;
		case 'float':
			// élément flottant : left, right, none
			elt.style.cssFloat= cssValue;
	}
	// empêche le rechargement de la page
	return false;
}
</script>

DOM et CSS (suite)

On utilise en particulier la propriété "display", et sa valeur "none", pour faire apparaître et disparaître des éléments.

Vous le voyez ?
<button onclick="document.getElementById('coucou').style.display='none';">cacher</button>
<div style="border: 2px solid red" id="coucou">
Vous le voyez ?
</div>
Exercice: écrire une fonction qui bascule l'élément entre l'état "caché" et l'état visible, et vice-versa.

Manipulation des images

On peut changer ce qu'une image affiche en modifiant sa propriété "src":

une bille
<img id="img1" src="ledlightblue.png" onmouseover="document.getElementById('img1').src='ledgreen.png'"
	 onmouseout="document.getElementById('img1').src='ledlightblue.png'"/>