AU SOMMAIRE :

Nous avons vu qu’une page Web était structurée par le HTML et qu’elle était stylisée par le CSS.

Il existe un troisième “composant” qui permet également d’agir sur une page Web : le Javascript.

Le Javascript offre une infinité de possibilités, et, toujours dans cet esprit de simple initiation, nous ne verrons qu’une infime partie de ce dont Javascript est capable.
Disons pour simplifier qu’il permet des effets (apparition d’une petite fenêtre lorsque la page se charge ou lorsqu’on clique sur un bouton).

Javascript est en revanche beaucoup plus difficile à apprendre et à manipuler que le HTML notamment. Car Javascript est un langage de programmation, plus exactement un langage de scripts, tandis que le HTML est un langage de balisage.

D’OÙ VIENT LE JAVASCRIPT ?

Le Javascript a été créé par Brendan Eich en 1995, alors qu’il travaillait pour Netscape Communication Corporation. Car c’est le navigateur Netscape (ancien grand rival d’Internet Explorer).

À l’origine, Javascript s’appelait LiveScript. Étant donné qu’il s’inspire principalement du langage Java, il a été rebaptisé sous le nom que l’on connaît aujourd’hui. « Java » signifie « café » dans le jargon américain (comme nous, on dirait « kawa » ^^).

Ne pas confondre Java et Javascript. Java est un langage compilé appartenant à Sun Microsystems tandis que Javascript est un langage interprété.

PRINCIPES DU JAVASCRIPT

Pour faire appel à Javascript, il faut simplement mentionner dans le code HTML que des instructions sont écrites en Javascript.
Dans la pratique, on mettra le code Javascript dans un fichier séparé, exactement comme je vous ai montré pour le CSS.

C’est votre navigateur Web, par exemple Chrome, qui va interpréter le langage Javascript et exécuter les instructions.

Nous allons commencer par une commande très simple : une notification par alerte.

<html>
<head>
<!-- On peut placer le javascript ici. La mention TYPE est optionnelle -->
<script type="text/javascript">
alert(“Hello World !”);
</script>
</head>
<body>
</body>
</html>

Notez qu’on aurait pu écrire directement dans la page via document.write() … Cette commande peut servir à modifier du texte par exemple.

En mode développement de votre navigateur Web (restons sur Chrome ^^), il est possible d’exécuter des commandes qui vont nous permettre d’aller beaucoup plus vite qu’un aller-retour entre votre navigateur Web et votre éditeur de code (pratique couramment utilisé pour le design du site en CSS).

console.log(“Hello World !”)

Cette petite astuce évitera que votre navigateur s’affole lors d’un trop grand nombre d’alertes répétées !

Comme nous avons vu dans les principes de la programmation, Javascript utilise bien évidemment les variables, les tableaux (listes), les boucles, etc.

DOM

dom-tree

DOM (Document Object Model) constitue un peu le cœur du fonctionnement et de l’intérêt de Javascript. En effet, Javascript est capable de comprendre l’architecture HTML d’une page Web, et de fait, d’agir sur sa construction.

Très pratique quand on veut agir sur un DIV situé à un endroit bien précis sur la page, ou un formulaire pour lequel on voudrait tester la validité d’une information saisie par un internaute.

Voyons un exemple :

<body>
<div id="blocDeTexte">
<p> Lille est une ville très sympa ! </p>
</div>

<script type="text/javascript">
var monBloc = document.getElementById('blocDeTexte');
var contenu = monBloc.getAttribute('p'); // on sélectionne le paragraphe

alert(contenu); // le contenu s'affiche dans un pop-up
</script>
</body>

LES BIBLIOTHÈQUES

Comme le DOM n’est pas toujours bien interprété par les navigateurs Web (disons que le résultat peut différer d’un navigateur à l’autre), il existe des bibliothèques, ou framework, pour alléger la complexité de fonctionnement de javascript sur ces différents interpréteurs.

C’est en outre une façon de coder bien plus rapidement, même si, in fine, on perd plus ou moins la logique de Javascript.

La seule chose qu’on peut reprocher à mon avis à ces frameworks, c’est que Javascript s’efface peu à peu, avec un code qui n’a parfois plus grand chose à voir. Mais, très franchement, c’est un mal pour un bien !

Jquery

C’est très certainement le framework le plus connu et le plus utilisé sur le Web (télécharger jquery). Son fonctionnement est très simple :

<html>
<head>
<!-- On insert la bibliothèque (ici téléchargée) et... c'est prêt ! -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Votre code ici, ou mieux, dans un fichier externe ;-)
</script>
</head>
<body>
</body>
</html>

Ainsi, de…

window.onload = function() {}

… On passe à :

$( document ).ready(function() {

// Votre code ici.

});

Le DOM (voir l’explication ci-dessous) est alors bien plus facile à « repérer » avec le $([nom]).

$("#blocDeTexte").hide(); // je masque un bloc de texte grâce à son ID

N’hésitez surtout pas à consulter la document de Jquery.

Angular JS

Voici un autre framework, qui monte en notoriété, inventé par Miško Hevery et Adam Abronsw en 2009. Pas étonnant quand on sait que Google l’a popularisé. Il est à noter que ce framework implémente une version allégée de Jquery (JQLite).

Pour comprendre la logique et l’intérêt d’Angular JS, il faudrait évoquer ce qu’est le MVC (Model View Controller) et je n’ai pas parlé de la possibilité d’interaction client-serveur. Patience 🙂
L’architecture MVC n’est pas l’objet de cet article, donc je vais volontairement simplifier :  Angular JS est un outil utilisé lors de la fabrication des « vues » (ce que les internautes voient). C’est donc un outil de développement Front-end (partie visible du site).

Vous pouvez consulter le site d’Angular JS en suivant le lien.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*