JavaScript

« JavaScript » expliqué aux enfants par Vikidia, l’encyclopédie junior
(Redirigé depuis Javascript)
Aller à : navigation, rechercher
Confusion 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 jouer des animations sur des pages Web, de les modifier en fonction de ce que veut faire l’internaute... JavaScript permet à l'internaute d'interagir avec le site web sur lequel il se trouve.

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

Attention 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[modifier]

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 nœuds qui en dépendent ; cette ensemble s’appelle le DOMPrécision. 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 nœuds et les relations entre eux pour transformer la page. Par exemple, considérons 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[modifier]

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 du 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. Pour que le code javascript fonctionne, ces balises sont donc nécessaires.

Toutefois, il est grandement recommandé d'utiliser la syntaxe suivante, car la balise <script> peu servir à d'autres langages, tel que le VBScript par exemple :

<script type="text/javascript" >
  // on met du JavaScript ici
</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 ne lira pas les commentaires. 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 javascript : 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:

<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 interpréter le texte « Coucou ! » et le renvoyer dans une fenêtre d'alerte. Les guillemets autour de « Coucou ! » servent à préciser que « Coucou ! » est du texte, car l'ordinateur a besoin que l'on lui explique de quel type de texte javascript il s'agit, il ne devine pas toujours. Ce texte aurait pu être interprété comme une expression mathématique par exemple, et pas comme du texte. Ainsi la fonction n'aurait peut-être pas marché.


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 la seconde instruction JavaScript sera exécutée à 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. Imaginons qu’un internaute ait entré dans un champ un nombre de secondes. Le code suivant récupère cette durée en secondes, la transforme en années, mois et jours et la renvoie à l’utilisateur dans le même champ :

<script type="text/javascript" >
  var sec = document.getElementById("champ").value;
      // On a récupéré les chiffres écrits par l’utilisateur dans un champ
      // En JavaScript, on définit les variables (ici « sec ») avec le mot-clef « var »
  sec = parseInt(sec);
      // On a transformé cette suite de chiffres (une « chaîne de caractères ») en un nombre pour les calculs, grâce à la fonction parseInt()
  var j = Math.floor(sec / 86400);
      // Il y a 86400 secondes dans une journée, donc on fait la division entière du nombre de secondes donné par le nombre de secondes dans une journée
      // On a utilisé Math.floor() pour ne pas avoir de nombre décimal (division euclidienne aussi appelée division entière)
  var m = Math.floor(j / 30);
      // Pour simplifier, on fait comme s’il y avait 30 jours dans un mois (on peut faire plus précis)
  j = j % 30;
      // On a enlevé à la variable « j » les jours déjà comptés dans la variable « m » (« mois »)
  var ans = Math.floor(m / 12);
      // Il y a 12 mois dans une année
  m = m % 12;
      // On a enlevé à la variable « m » les mois déjà comptés dans la variable « ans » en utilisant l'opérateur (+ et 
  var reponse = sec + " secondes font " + j + " jours, " + m + " mois et " + ans + " années !";
      // On a fabriqué la phrase de résultat
  document.getElementById("champ").value = reponse;
      // On a écrit la réponse dans le champ de tout à l’heure
      // On pourrait aussi l’afficher dans une fenêtre pop-up avec alert().
</script>

Avec ce code, si l’utilisateur a écrit, par exemple, « 76636812 » dans le champ de texte, le programme lui répondra instantanément la phrase « 76636812 secondes font 17 jours, 5 mois et 2 années ! ». Le résultat n’est pas exact parce qu’on a supposé que tous les mois comportaient 30 jours (en réalité, 76636812 secondes font plutôt 2 ans, 5 mois et 7 jours).

Bibliothèques et Frameworks[modifier]

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[modifier]

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 quand l'internaute ouvre une page HTML d'un site.Les pop-up servent surtout à faire de la publicité, mais ils peuvent servir également pour autre chose, comme imprimer une page web comme une recette de cuisine. l'internaute clique sur la page web ouvrant la recette de cuisine, et une pop-up s'ouvre automatiquement affichant dans une nouvelle fenêtre la version imprimable de la recette de cuisine.Un pop-up peut s'ouvrir de divers façon!L'internaute en survolant le lien provoque l'ouverture du pop-up.En ouvrant une page web le pop-up s'ouvre automatiquement,et j'en passe.

Exemple d'une fenêtre pop-up s'ouvrant lorsque l'internaute ouvre une page web Pour ceux qui ont déjà quelques connaissances en JavaScript et HTML, ouvrez votre bloc note ou notepad, et collez le code ci-dessous .Enregistrez sous popup.html. et ouvrez ce fichier.Si vous avez bien suivit mes instructions votre navigateur vous prévient qu'il a empêché trois fenêtres pop-up de s'ouvrir!Si vous êtes sous Mozilla Firefox en cliquant sur option, votre navigateur vous propose d'afficher les pop-up.Cliquez sur l'un des pop-up et il vous ouvre la page de vikidia sur le javascript !

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>pop-up</title>
</head>
<body>
<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 onLoad="popupmulti()"> 
</body>
</html>

Ce qui est embêtant dans le pop-up que je vous ai montré, c'est que comme vous avez pu le constater, la plupart des navigateurs le bloque,à moins que vous ne soyez sur la première version d'Internet Explorer. Voici un autre pop-up, que aucun navigateur n'arrive à bloquer ! Ouvrez votre bloc note ou notepad, et collez le code ci-dessous puis enregistrez le sous popup2.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, c'est pourquoi les navigateurs ne peuvent pas immédiatement proposer à l'internaute de la bloquer.

<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("http://fr.vikidia.org/")
  alert("Merci beaucoup")
  alert("Bye!Bye!")
</script>
</body>
</html>


Pop-up s'ouvrant au passage de la souris sur un lien.Ouvrez votre bloc note, et collez ce code ci-dessous,enregistrez le sous popup3.html!Je vous laisse découvrir la surprise, quand vous survolez le lien.

<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('Aller sur vikidia a l adresse URL :fr.vikidia.org/.','blue','','#FFFFFF','VAG Rundschrift D',4)" onClick="fermerNote()">Le lien a survoler pour ouvrir le popup</a>
</body>
</html>

Voici un autre popup très intéressent, et franchement drôle!Quand l'internaute ouvre la page HTML, une fenêtre popup s'ouvre automatiquement et bouge de manière que l'internaute n'arrive pas à la fermer!Je vous laisse découvrir ce popup sur ce lien.

Liens externes[modifier]

Langages de programmation.svg
Les langages de l’informatique
Portail des techniques - Tous les articles sur les moyens de transport, l'informatique, les outils et les matériaux.
Portail de l'informatique - Histoire, logiciels, Internet…