JavaScript : premiers pas

Présentation de JavaScript

Définition de JavaScript

JS (JavaScript) est un langage de programmation de scripts orienté objet.

Un langage de programmation

Comme tout langage de programmation on peut créer et manipuler des variables, définir et appeler des fonctions et on dispose de structures de contrôles (tests logiques, boucles).

Un langage de scripts

Cela signifie qu'il s'agit d'un langage interprété (code source exécuté par le navigateur).
Attention JavaScript peut être désactivé par le navigateur !

Un langage orienté objet

Le langage comprend des objets natifs mais on peut créer d'autres objets. Chaque objet dispose de méthodes et de propriétés.

Rôle de JS

JS c'est le langage de programmation pour HTML. Avec JS on peut animer non seulement des éléments HTML mais aussi des objets SVG (SVG est un langage de dessin qui s'intègre facilement dans une page web). Donc avec JS on peut créer un interaction entre la page web et le visiteur ; votre page devient dynamique ; on parlait avant de DHTML (Dynamic HTML).
On peut aussi ajouter / supprimer des éléments HTML de la page. De façon générale on dit que l'on peut modifier le DOM. Mais nous y reviendrons.

Histoire du JS

Il ne faut pas confondre JavaScript avec Java. Brendan Eich s'est inspiré de Java pour créer JavaScript en 1995. Il travaillait alors pour Nestcape et donc Nestcape 2 fut le premier navigateur à disposer d'un interpréteur JS. Le langage fut ensuite standardisé sous le nom d'ECMAScript.

Comparaison JS et PHP

Il s'agit de deux langages de script : langages interprétés. Voilà pour les points communs.
Le langage PHP permet aussi de dynamiser une page mais un navigateur est incapable d'interpréter du code PHP ! Dans le cas d'une page web contenant du PHP l'interprétation est faite par le serveur qui adresse du HTML au navigateur (au client). C'est pour cette raison que l'on parle de programmation côté client pour JS et côté serveur pour PHP.

Premier script

Une page Web avec du code JavaScript

Ci-dessous le code correspondant de la page :

<!doctype html> <html lang ='fr'><head> <title>page avec JavaScript</title> <meta charset = 'utf-8'> <style> h1{width : 800px ; margin-left : auto ; margin-right : auto ; } </style> </head> <body> <h1>Première page avec du JS </h1> <script> /* ce script affiche le périmètre et la surface d'un cercle de rayon 4 cm */ var vsurface = 4 * 4 * 3.14; // calcul de la surface dans la variable vsurface var vperimetre = (4 + 4) * 3.14; // calcul de la circonférence dans la variable vperimetre alert('circonférence du cercle : ' + vperimetre + ' cm' ) ; // affichage circonférence alert('surface du cercle : ' + vsurface + ' cm2' ) ; // affichage surface </script> </body></html>
Testez cette page !

Commentaire du code

Le code JS doit être écrit à l'intérieur du conteneur SCRIPT c'est à dire entre la balise <script> et la balise </script>
Le script comprend des instructions et des commentaires.
Une instruction se termine impérativement par un point-virgule.
Un commentaire sur plusieurs lignes commence par /* et se termine par */
Un commentaire de fin de ligne se place après le point-virgule et est précédé de 2 "slashs" (barres obliques).

Le paramètre de la fonction alert est une expression avec emploi de l'opérateur de concaténation (+)
alert('surface du cercle : ' + vsurface + ' cm2' ) veut dire : afficher dans la boîte de dialogue la chaîne 'surface du cercle :' suivie du contenu de la variable vsurface suivie de la chaîne 'cm2'

Les fonctions

Dans le script JS de la page nous avons appelé deux fois la fonction alert. Il s'agit d'une fonction native de JS ! Donc nous n'avons pas besoin de la définir.
Pour appeler une fonction dans une instruction il faut l'écrire puis indiquer entre parenthèses un ou plusieurs paramètres (on dit aussi arguments).

Le caractère +

Attention en JavaScript le caractère + peut selon le contexte signifier addition ou concaténation ...
Si les éléments sont de type numérique il y a addition ; si les éléments sont des chaines il y a concaténation.

Emplacement du code JS

Code JS dans la page

Dans l'exemple le code JS est dans la page (on parle de code JS interne). Le code JS est placé dans le conteneur SCRIPT c'est à dire entre la balise ouvrante <script> et la balise fermante </script>
Mais où positionner le conteneur SCRIPT avec son code ?
Par le passé il était conseillé de positionner le conteneur SCRIPT à l'intérieur du conteneur HEAD. C'était maladroit. En effet le navigateur charge la page séquentiellement le code. Donc dans cette hypothèse il va exécuter le code JS avant de charger les éléments HTML.
Si le code JS est lourd l'affichage des objets HTML de la page va donc être ralenti !

Mais ce n'est pas le plus grave. Imaginez que le code JS manipule des éléments HTML et que de surcroît il s'exécute automatiquement dès son chargement. Vous aurez alors un "plantage" !
En effet le script est censé manipuler le DOM alors que celui-ci n'a pas encore été créé ...

Il est donc préférable de placer le code JavaScript dans le conteneur BODY mais après tous les éléments HTML donc juste avant </body>.

Code JS externalisé

Imaginons que dans plusieurs pages nous ayons besoin du même code JS. Il serait idiot de dupliquer le script dans chaque page.
Comme pour le CSS nous pouvons externaliser le JS ! Nous créons alors un fichier d'extension .js que nous nommons cercle.js et qui ne contient que du code JavaScript !

Le contenu du fichier "cercle.js"

Dans ce fichier les balises <script> et </script> sont alors inutiles puisque ce fichier ne contient que du JS !

		/* ce script affiche le périmètre et 
		la surface d'un cercle de rayon 4 cm */
		var vsurface = 4 * 4 * 3.14; // calcul de la surface dans la variable vsurface
		var vperimetre = (4 + 4) * 3.14; // calcul de la circonférence dans la variable vperimetre
		alert('circonférence du cercle : ' + vperimetre + ' cm' ) ; // affichage circonférence
		alert('surface du cercle : ' + vsurface + ' cm2' ) ; // affichage surface 

Le code de la page web

Le code de notre page devient alors tout simplement :

<!doctype html> <html><head><title>nom du fichier : page1.htm</title> <meta charset = 'utf-8'> <style> h1{width : 800px ; margin-left : auto ; margin-right : auto ; } </style> </head> <body> <h1>Première page avec du JS </h1> <script src = "cercle.js" ></script> </body></html>

Remarque : Alors que le lien vers un fichier CSS se fait avec la balise link, le lien vers un fichier JS se fait avec le conteneur SCRIPT et l'attribut src
Ici on suppose bien sûr que la page et le fichier de script externe sont dans le même dossier. Retour menu