JavaScript

Ne pas confondre avec Java (langage) !

JavaScript est un langage de programmation très utilisé par les sites Web comme Facebook, Twitter, etc. JavaScript permet de faire des animations sur des pages Web, de les modifier en fonction de ce que veut faire l’internaute... JavaScript permet au site Web d'avoir plusieurs possibilités pour l'internaute;

Pour cela, c’est le navigateur Web qui fait ce que dit le programme JavaScript alors que, d’habitude, c’est plutôt un serveur qui travaille pour construire ou envoyer une page Web à l’utilisateur.

Bien que leur nom semblent les rapprocher, JavaScript n’a rien à voir avec Java, un autre langage de programmation. L'acronyme js est couramment utilisé par les développeurs pour désigner le JavaScript.

Principe

JavaScript est un langage de programmation : cela veut dire que c’est un ensemble de mots et de caractères de ponctuation qui, correctement arrangés, peuvent être traduits dans un langage que l’ordinateur comprend et donc permettre de faire exécuter des tâches à cet ordinateur.

Comme JavaScript est un langage prévu pour les pages Web, il possède beaucoup d’outils pour modifier ce qui s’affiche dans le navigateur et très peu pour le reste, contrairement à d’autres langages plus généraux.

Une page Web est construite comme un arbre, avec une racine et un ensemble de "branches" qui en dépendent; cette ensemble s’appelle le DOM. On peut voir chaque chose qui s’affiche sur une page Web comme un nœud de ce « DOM » : les paragraphes, les images, les boutons, les liens, tout ! Le principe de JavaScript est de modifier ces "branches" (qu'on appelle des nœuds) et les relations entre eux pour transformer la page. Par exemple, imaginons une image sur une page web. Cette image, c'est un nœud du DOM comme dit ci-avant. Avec JavaScript, il est possible de donner des effets particuliers à cette image; par exemple, la grossir quand l'utilisateur met la souris dessus.

JavaScript peut aussi, bien sûr, effectuer des calculs et d’autres opérations invisibles. On peut également, avec JavaScript, afficher des petites fenêtres d’information (appelées « pop-up »), par exemple avant de quitter une page.

Aperçu

Dans une page Web, on écrit le JavaScript entre deux « mots » (plus précisément deux balises), qui indiquent au navigateur que ce n’est pas du texte « normal » :

<script>
  // On met du JavaScript ici
</script>

Il s'agit des balises <script> et </script>. La première sert à ouvrir la zone de texte où est écrit le JavaScript, la seconde sert à fermer cette zone. Si ces balises ne sont pas présentes, l'ordinateur ne devine pas qu'il doit interpréter du JavaScript, et va donc afficher le texte à l'écran.

Toutefois, il est grandement recommandé de préciser qu'on utilise le JavaScript la façon suivante, car la balise <script> peut servir à d'autres langages, tel que le VBScript par exemple.

<script type="text/javascript" >
  // On a précisé que ce code est bien du JavaScript
</script>

Quand on écrit des mots derrière les deux symboles « // » en JavaScript, on écrit un « commentaire » : c’est juste pour expliquer aux humains ce que fait le code; l'ordinateur ignorera le commentaire. On ne peut pas écrire comme ça hors des commentaires, car l’ordinateur croirait qu’on s’adresse à lui et ne comprendrait pas, puisque ce n’est pas du JavaScript mais du français !

Il y a donc deux parties dans un programme JavaScrupt : le code en JavaScript destiné à être lu et interprété par l'ordinateur, et les commentaires, destinés à expliquer le code aux humains qui seront amenés à le lire pour l'améliorer ou le corriger.

Voici un bout de code tout simple pour afficher un message, ou plus précisément une boîte de dialogue:

<script type="text/javascript" >
  alert("Coucou !")
</script>

Cela va afficher à l'internaute un petit message disant : « Coucou ! ». Pour faire disparaître le message, il suffit de cliquer sur le bouton Ok. Le mot alert est en fait le nom d'une fonction en JavaScript. Cette fonction sert à afficher des alertes à l'utilisateur. Toutes les fonctions s'écrivent avec un nom, puis deux parenthèses contenant un texte que les fonctions vont interpréter. Par exemple, ici la fonction alert va lire le texte « Coucou ! » et le renvoyer dans une fenêtre où le texte s'affichera. Les guillemets autour de « Coucou ! » servent à préciser que « Coucou ! » est du texte, car l'ordinateur a besoin que l'on lui explique que c'est un texte en français à afficher, autrement il tenterai de l’interpréter comme du code. Sans ces guillemets, l'ordinateur renverra une erreur.

Il faut impérativement séparer les différentes instructions que l’on donne en JavaScript par des point-virgules, sans quoi la machine ne saura pas où s'arrête chaque instruction :

<script type="text/javascript" >
  alert("Veux-tu vraiment quitter cette page ?");
  alert("Au revoir, alors !");
</script>

Ce code affichera un premier message disant : « Veux-tu vraiment quitter cette page ? ». Lorsque l’utilisateur aura répondu ok, la fenêtre se fermera et le second message JavaScript sera lu à son tour : un nouveau message s’ouvrira pour afficher « Au revoir, alors ! ».

JavaScript permet évidemment de faire des choses bien plus intéressantes que d’afficher de petits messages, par exemple, on peut faire un code qui traduit un nombre de secondes en un temps en année, mois et jour, ce quia déjà plus d'intérêt. On peut aussi faire des bandeaux qui s'affichent quand on clique sur un bouton, ou au contraire qui s'efface, on peut faire des menus déroulants (qui s'ouvre quand on passe la souris), et pleins d'autres choses encore!

Bibliothèques et Frameworks

Le javascript pur reste tout de même assez difficile d'utilisation, surtout pour les débutants, sans compter les incompatibilités entre navigateurs. C'est pourquoi des bibliothèques et des frameworks ont été développés, pour permettre d'utiliser plus facilement le javascript. Parmi les plus connus, on trouve :

La célèbre bibliothèque JQuery redoutable par sa simplicité et son efficacité.
Son concurrent la bibliothèque Mootools.
Le framework Dojo.

Viennent ensuite d'autre bibliothèques moins répandues telles que Prototype, YUI, ExtJs etc.

Pop-up

Les pop-up en JavaScript sont les plus utilisés pour faire de la publicité. Les fenêtres pop-up sont des fenêtres qui s'ouvrent automatiquement quand l'internaute ouvre une page web d'un site. Autre que la publicité, les pop-up peuvent également servir pour autre chose, comme imprimer un contenu, par exemple une recette de cuisine. L'internaute clique sur un bouton, et une pop-up s'ouvre automatiquement affichant dans une nouvelle fenêtre la version imprimable de la recette. Il y a plusieurs manière de lancer un pop-up: au chargement de la page, en cliquant ou bien en passant la souris sur un lien...

Exemple d'une fenêtre pop-up s'ouvrant lorsque l'internaute ouvre une page web

Voici un exemple d'une pop-up. Copiez le code ci-dessous et collez le dans un éditeur de texte comme Bloc-notes, ou Notepad++ (n'utilisez pas de logiciel de traitement de texte comme Microsoft Word ou OpenOffice) Enregistrez le fichier où vous voulez en faisant "Enregistrer-sous". Mettez le nom pop-up.html, et faites bien attention de sélectionner "Tous les fichiers" dans la petite liste déroulante nommée "Type", en dessous de là où vous mettez le nom du document. Ensuite, double cliquez dessus! Si tout s'est bien passé, vous verrez votre navigateur s'ouvrir, et vous dire qu'il a bloqué l'ouverture de 3 pop-up, à moins qu'il soit (très) ancien. Pour autoriser la pop-up :

en utilisant Firefox, faites "Options", puis Autoriser les pop-up pour...
pour Google Chrome, cliquez sur "Fenêtre Pop-up bloquée", puis sélectionnez "Toujours autoriser", puis rechargez la page
pour Internet Explorer ou Microsoft Edge, un bandeau va apparaître en bas de la page, cliquez simplement sur "Autoriser une fois"

Et maintenant, vous pouvez enfin voir votre pop-up vers Vikidia!

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
		<title>Pop-up</title>
	</head>
	<body onLoad="popupmulti()">
		<script><!--
			function popupmulti(){
			window.open('http://fr.vikidia.org/wiki/Javascript', 'w3', 'width=1000,height=900,left=140,top=90');
			window.open('http://fr.vikidia.org/wiki/Javascript', 'w3', 'width=1000,height=900,left=140,top=90');
			window.open('http://fr.vikidia.org/wiki/Javascript', 'w3', 'width=1000,height=900,left=140,top=90');
			}
		--></script>
	</body>
</html>

Le souci sur le code ci-dessus, est que la plupart des navigateurs bloquent automatiquement le pop-up, car cela peut rapidement devenir énervant si pleins de fenêtres s'ouvraient dès que vous allez sur le moindre site. Par contre, essayez le code ci-dessous... Comme avant, copiez/collez le dans une fenêtre Bloc Notes, et enregistrez le fichier sous le nom pop-up2.html. N'oubliez pas non plus de sélectionner "Tous les fichiers" dans le champ "Type".

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
		<title>Super pop-up</title>
	</head>
	<body>
		<script>
			  alert("Rendez-vous sur vikidia l'encyclopédie des 8 à 13 ans!")
			  alert("L'addresse: http://fr.vikidia.org/")
			  alert("Merci beaucoup! ")
			  alert("Bye bye!")
		</script>
	</body>
</html>>

Le navigateur ne bloque pas ce pop-up. N'est-ce pas super ? En fait ce n'est pas vraiment un pop-up mais plutôt une boîte de dialogue, et comme elle est moins gênante, les navigateurs ne la bloquent pas (mais vous pouvez voir cependant que le navigateur, à la deuxième boîte de dialogue, affiche un bouton pour interdire l'affichage d'autres boîtes de dialogue).

Un pop-up particulier

J'ai encore mieux! Essayez ce code-ci maintenant, et appelez le... pop-up-surprise.html!

<!DOCTPYE html>
<html>
	<head>
		<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
		<title>Super pop-up souris</title>
	</head>
	<body>
		<script LANGUAGE="JavaScript">
		<!--
		var fenetreNote=null;
		function afficheNote(message, couleurFond, fond, couleurTexte, typePolice, tailleCaracteres) {
			fenetre = window.open('', 'Note', 'toolbar=no, location=no, directories=no, status=no, scrollbars=no, resizable=yes, copyhistory=no, ' + 'width=250' + ', height=100');
			fenetreNote = fenetre;
			if (fenetreNote != null) {
				doc = fenetre.document;
				texte = '<' + 'HTML' + '><' + 'HEAD' + '><' + 'TITLE' + '>' + message + '</' + 'TITLE' + '><' + '/HEAD' + '><' + 'BODY BACKGROUND=' + '"' + fond + '"' + ' BGCOLOR=' + '"' + couleurFond + '">';
				texte += '<CENTER>';
				texte +='<FONT FACE="' + typePolice +'"';
				texte += ' SIZE=' + tailleCaracteres;
				texte += ' COLOR=' + '"' + couleurTexte +'">';
				texte += message + '</CENTER> </FONT>';
				texte += '</' + 'BODY' + '><' + '/HTML' + '>';
				doc.write(texte);
				doc.close();
			}
		}
		function fermerNote() {
			if (fenetreNote != null) {
				fenetreNote.close( );
				fenetreNote = null;
			}
			}
		
		//--></script>
		<a href="fr.vikidia.org/" onMouseOver="afficheNote('Allez sur vikidia a l\'adresse URL suivante: fr.vikidia.org/.', 'blue', '', '#FFFFFF', 'VAG Rundschrift D', 4)" onClick="fermerNote()">Passe ta souris sur ce lien... et voit! (et éventuellement appuie sur le bouton pour autoriser l'affichage des pop-up)</a>
	</body>
</html>

Liens externes

Les langages de l’informatique

Langages de programmation :
Ada • ActionScript • Assembleur • C • C++ • C# • F# • Fortran • Go • Haskell • Java • Pascal • JavaScript • Lisp • LOGO • Lua • Objective-C • OCaml • Perl • PHP • Python • Ruby • Small Basic
Divers (dont langages de balisage) :
CSS • HTML • JSON • XML • LaTeX • SQL • Hello World

This article is issued from Vikidia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.