javascript

Crée en 1995, javascript est un language de programmation qui est utilisé le plus souvent pour des pages web. La plupart du temps javascript sert à contrôler les données saisies dans les formulaires HTML et à interagir avec le document via l'interface DOM fourni par la navigateur.

Contrairement à des languages serveur comme PHP, le code Javascript est lisible par l'utilisateur. Il est donc déconseillé de coder avec des notions / mots clé confidentiels.

La balise <script>

La balise <script> permet d'insérer du javascript qui s'execute coté client. Pour intégrer du code javascript à vos page web, vous pouvez soit le mettre dans un fichier externe avec une extension .js soit l'écrire directement dans la page web.

Exemple script externe:

Exemple script interne:

	<script type="text/javascript">
	//<![CDATA[
	// code javascript
	//]]>
	</script>

Exemple code inline dans une balise HTML:

Les commentaires

Pour écrire un commentaire dans votre code, c'est à dire du texte qui ne sera pas interprété mais juste lisible pour le programmeur:

	<script type="text/javascript">
	/* Ceci est un commentaire */
	</script>

Déclarer une variable

La syntaxe pour déclarer une variable en javascript est la suivante

	<script type="text/javascript">
	var nom = 'olivier';
	</script>

Les alertes

Vous pouvez utiliser des commandes qui controleront votre navigateur.
Le plus connu est l'alerte navigateur :

	<script type="text/javascript">
	alert("Bonjour");
	</script>

Vous pouvez lui transmettre une variable:

	<script type="text/javascript">
	var nom = "olivier";
	alert( nom );
	</script>

Les consoles des navigateurs

Sur la plupart des navigateurs vous pouvez afficher la console via la touche F12 de votre clavier.

Exemple sur chrome:

	<script type="text/javascript">
	console.log( "variable: ", "val 1" );
	console.log( "tableau: ", new Array("val 1", "val 2") );
	console.log( "objet:", { nom : "engel", "prenom" : "olivier" } );
	function test(){ alert( "ok" ); }
	console.log( "fonction:", test );
	</script>

Les prompt

Vous pouvez récupérer une entrée utilisateur à l'aide de la commande prompt:

	<script type="text/javascript">
	var nom = window.prompt( "Quel est votre nom?" );
	alert( nom );
	</script>

Exemple prompt

Les operateurs

Les opérateurs de calcul en javascript:

	<script type="text/javascript">
	var r = 1 + 1; /* 2 */
	var r = 1 * 1; /* 1 */
	var r = 1 - 1; /* 0 */
	var r = 1 / 1; /* 1 */
	</script>

Les opérateurs d'affection:

	<script type="text/javascript">
	var r = 2;
	var r+= 1; /* 2+1 = 3 */
	var r-= 1; /* 2-1 = 1 */
	var r= 1; / 21 = 2 /
	var r/= 1; /* 2/1 = 2 */
	</script>

Les opérateurs d'incémentation:

	<script type="text/javascript">
	var r = 100;
	r++; /* 101 */
	r--: /* 100 */
	</script>

Les opérateurs de comparaison:

	<script type="text/javascript">
	var x = 500;
	x == 500; /* egal a = retourne TRUE */
	x != 501; /* different de = retourne TRUE */
	x > 501; /* supperieur a = retourne FALSE */
	x < 501; /* inferieur a = retourne TRUE */
	x >= 501; /* superieur ou egal a = retourne FALSE */
	x <= 501; /* inferieur ou egal a = retourne TRUE */
	</script>

Les opérateurs logiques: L'opérateur "OU":

	<script type="text/javascript">
	var x = TRUE;
	var y = FALSE;
	( x \|\| z ) /* TRUE */
	</script>

Le code ci-dessus vérifie si l'une des deux valeurs remplit la condition TRUE. L'opérateur "ET":

	<script type="text/javascript">
	var x = TRUE;
	var y = FALSE;
	( x && z ) /* FALSE */
	</script>

Le code ci-dessus vérifie si les deux valeurs remplissent la condition TRUE.

La concaténation

En javascript pour concaténer deux valeurs, il faut s'assurer que les variables ne sont pas toutes les deux de type numérique. Si c'est le cas, on ajoute une valeur de type string.

	<script type="text/javascript">
	var a = 15;
	var b = 30;
	var c = a + b; /* 45 */
	var d = a + "" + b; /* 1530 */
	</script>

Les tableaux

	<script type="text/javascript">
	var a = new Array();
	a[0] = "Valeur 1";
	a[1] = "Valeur 2";
	/* Autre syntaxe */
	var b = [];
	b[0] = 1;
	/* Autre syntaxe */
	var b = [];
	b.push( 1 );
	</script>

Pour parcourir un tableau en javascript vous pouvez utiliser la commande FOR:

	<script type="text/javascript">
	var a = new Array();
	a[0] = "Valeur 1";
	a[1] = "Valeur 2";

	for( i in a ){
	alert( a [i] );
	}
	</script>

Le tableau en javascript est un objet, vous pouvez donc appeler des méthodes qui permettront de le manipuler:

t.join	Retourne un chaine de caractère contenant tous les éléments d'un tableau
t.pop	Supprimer le dernier élément du tableau et retourne sa valeur
t.push	Ajoute un ou plusieurs éléments au tableau
t.reverse	Inverse l'ordre des éléments d'un tableau
t.shift	Supprime le premier élément d'un tableau
t.slice	Permet de scinder un tableau
t.splice	Ajoute ou supprime des éléments
t.sort	Trie un tableau
t.unshift	Ajoute un ou plusieurs élément au début du tableau

	<script type="text/javascript">
	var a = new Array( "olivier", "engel", "est", "batman" );
	alert( a ); /* ["olivier", "engel", "est", "batman"] */
	alert( a.join() ); /* olivier,engel,est,batman */
	alert( a.reverse() ); /* ["batman", "est", "engel", "olivier"] */
	alert( a.sort() ); /* ["batman", "engel", "est", "olivier"] */
	alert( a.pop() );
	</script>

Les objets

Les attributs :

	<script type="text/javascript">
	function Voiture(){
	this.roues = 4;
	}
	var ma_voiture = new Voiture();
	alert( ma_voiture.roues ); /* Retournera 4 */
	var ma_voiture = new Voiture();
	ma_voiture.roues = 6;
	alert( ma_voiture.roues ); /* Retournera 6 */
	</script>

Les méthodes :

	<script type="text/javascript">
	function Voiture(){
	this.roues = 4;
	this.getRoues = function(){
	alert( this.roues );
	}
	}
	var ma_voiture = new Voiture();
	ma_voiture.getRoues(); /* Rtournera 5 */
	</script>

JSON

Il est possible de stocker des informations structurées dans un format nommé JSON.

Exemple:

	<script type="text/javascript">
	var data = {};
	data.prenom = "olivier";
	data.nom = "engel";
	console.log( data );
	/* Object {prenom: "olivier", nom: "engel"} */
	</script>