Débuter la programmation Web en Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Débuter avec la programmation Javascript

Dans ce support nous débutons avec la programmation pour le Web. Le code Javascript est ce que l'on appelle un code client. Il s'exécute sur la machine de l'internaute connecté au site internet. Il ne sollicite donc pas le serveur. Il permet des interactions avec l'utilisateur mais ne peut pas rendre des pages dynamiques comme le feraient le PHP ou l'ASP.Net qui permettent de solliciter le serveur et ses bases de données pour fournir des résultats contextuels.

Lorsque nous développons des sites internet, il est très important d'équilibrer les charges. Si pour chaque demande, le serveur est sollicité et que le site jouit d'un trafic dense, ces sollicitations seront multipliées par le nombre d'internautes en cours de navigation. Le risque est d'engorger rapidement les ressources, d'allonger les temps de réponse, voire de faire tomber le serveur.

En d'autres termes, tout ce qui peut être calculé autrement que par le serveur doit passer par le client, soit votre navigateur. C'est précisément pour cela qu'intervient le code Javascript. Il permet de réaliser des interactions avec l'internaute sur des ressources préchargées ou non, pour fournir des résultats, modifier des apparences ou gérer les cookies par exemple.

Javascript et HTML
Un code Javascript peut s'intégrer directement dans une page Web HTML ou bien être désigné en directive externe pour plus de clarté dans le code. Pour simplifier l'apprentissage, nous choisissons d'intégrer nos premières lignes directement dans la page HTML.

Nous apprendrons le HTML, qui est un langage de balisage très simple, en même temps que le Javascript qui est un langage interprété. Cela signifie que le code n'est pas compilé mais directement exploité par le navigateur. Si une erreur existe, vous constatez le dysfonctionnement en mode exécution et non en amont comme la majorité des langages, tel que nous l'avions appris par exemple dans la formation pour débuter la programmation en VBA Excel.

Pour entrer directement dans le vif du sujet, nous proposons de créer dans un premier temps la structure HTML simplifiée de notre page. Pour l'édition, qu'il s'agisse du HTML ou du Javascript, un simple éditeur de texte suffit. Aucune License et aucun logiciel ne sont nécessaires. Néanmoins il est conseillé d'exploiter l'éditeur gratuit Notepad++ qui facilite grandement la structure, l'organisation et le codage pour de nombreux langages ouverts.

• Ouvrir l'explorateur Windows (Touche Windows + E),
• Ouvrir le dossier dans lequel vous souhaitez enregistrer les pages Web de formation,

Pour information, le support sur les raccourcis claviers Windows rappelle toutes les techniques efficaces du système d'exploitation, comme le raccourci (Windows + E) permettant d'accéder à l'explorateur de fichiers et dossiers.

• Cliquer avec le bouton droit de la souris sur un emplacement vide du dossier,
• Dans le menu contextuel, choisir Nouveau puis Document texte,
• Renommer ce fichier : debuter-javascipt puis changer l'extension en html,
• Puis valider en enfonçant la touche Entrée du clavier,

L'icône associée au fichier doit désormais être celle du navigateur défini par défaut sur votre système d'exploitation. A l'instar de Notepad++ pour le codage, nous préconisons l'emploi du navigateur Firefox pour l'exécution et le débogage. Ce dernier fournit des outils précieux aux développeurs afin de déceler les potentiels soucis.

Remarque : Nous aurions pu nous contenter de l'extension .htm pour notre page Web. Les deux extensions sont indifféremment reconnues.

• Cliquer avec le bouton droit de la souris sur le fichier Html,
• Dans le menu contextuel, pointer sur la rubrique Ouvrir avec,
• Dans le sous menu, choisir le navigateur comme Firefox par exemple,

La page s'affiche alors dans le navigateur choisi mais son contenu est vierge puisque le fichier lui-même est vide.

• Basculer de nouveau sur l'explorateur Windows (ALT + Tab),
• Réaliser de nouveau un clic droit sur le fichier Html,
• Choisir cette fois : Editer avec Notepad++ ou : Ouvrir avec le bloc note,

Structure HTML du document
Avant de penser Javascript, le code doit être hébergé au sein d'une page HTML bien formée. Cette dernière doit avoir un entête et un corps, le tout encapsulé dans les balises déclarantes. Une balise ouverte doit être fermée, sauf exception comme la balise img pour les images.

• Saisir la balise ouvrante html, puis deux lignes plus bas, sa balise fermante, soit :

<html>

</html>

Nous bornons ainsi la page html, bornes entre lesquelles nous allons concevoir la structure du document et insérer le code Javascript. Les balises sont enrichies par ce que l'on appelle des attributs. Une vraie déclaration Html ne doit pas se contenter d'ouvrir et de fermer la balise sans identifier l'attribut xmlns ou au moins l'attribut lang : <html lang='fr'>. L'attribut xmlns (ns pour Name Space ou espace de noms) fait référence aux normes html à employer, issues du W3C. L'attribut lang permet d'identifier explicitement la langue utilisée par la page.

Mais ici nous débutons. Ces omissions n'ont pas d'importance dans la mesure où nos pages ne sont pour l'instant pas crawlées par des robots et donc pas interprétées. Nous allons donc à l'essentiel.

• Entre les balises HTML, créer l'entête du document comme suit :

<head>

</head>

Nous ouvrons puis fermons la balise head permettant de délimiter la section de l'entête. C'est dans cette section que nous déclarons conventionnellement les balises meta, le titre, les références aux styles et codes javascript externes, entre autres. Les balises meta permettent de communiquer avec les robots d'indexation comme GoogleBot pour décrire la page et indiquer le comportement à suivre. Un titre se définit entre les balises title.

• Entre les balises head, ajouter le titre suivant :

<title>Débuter avec Javascript</title>

• Enregistrer les modifications et basculer sur le navigateur (ALT + Tab),
• Enfoncer la touche F5 du clavier pour rafraîchir la page,

Comme vous le constatez, bien que le corps de la page soit toujours vide, elle possède désormais un titre qui apparaît généralement dans l'onglet du navigateur. C'est ce qu'illustre la capture ci-dessus. Un titre est incontournable dans la construction d'une page HTML, notamment pour les robots. Il ne doit généralement pas dépasser les 60 caractères, question de référencement naturel.

• Basculer dans l'éditeur Notepad (ALT + Tab) pour reprendre le code,
• Entre les balises fermantes Head et Html, créer le corps de la page comme suit :

<body>

</body>

Les balises body permettent de délimiter la partie principale de la page Html, celle qui sera directement visible dans le navigateur. C'est ce que nous allons illustrer.

• Entre les balises body, saisir le texte suivant : Bonjour tout le monde ,
• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur (ALT + Tab),
• Enfoncer la touche F5 du clavier pour actualiser les données,

Comme vous le remarquez, le texte s'affiche en effet correctement tout en haut de la page.

L'intérêt de ce support n'est pas d'apprendre à créer des pages Html statiques mais bien d'interagir avec les éléments par le code Javascript.

• Basculer sur le Notepad et supprimer le texte situé entre les balises body,

La déclaration de variables
Comme tout langage de programmation, le Javascript permet d'exploiter des variables. Toute variable avant d'être affectée doit être déclarée comme nous l'avions appris dans le support de formation VBA Excel sur la déclaration de variables. Elles permettent de stocker des données pour ensuite les manipuler. Mais avant tout, un code Javascript ne peut pas être inclus dans une page Html sans être annoncé par des balises spécifiques.

• Entre les balises body, ajouter la déclaration de la section du code Javascript comme suit :

<script type='text/javascript' language='javascript'>

</script>

C'est donc entre les balises script ouvrante et fermante que doit se situer le code. Notez la présence des attributs type et language pour définir précisément le langage par défaut. Nous aurions pu ne pas les définir et nous contenter d'ouvrir et de fermer la balise script. Le javascript étant le langage par défaut des pages Web, il est ainsi naturellement considéré et interprété.

Il est plus conventionnel et plus propre de définir la section Javascript en dehors du corps de la page, après la section body, puis d'appeler le code généralement écrit dans des fonctions. La page Html est ainsi mieux structurée et plus claire. C'est ce que nous ferons à l'avenir. Comme nous débutons ici, nous conservons notre déclarative dans les bornes du body.

C'est le mot clé var qui est utilisé pour la déclaration de variables suivi du nom de cette dernière. En Javascript les variables ne sont pas typées tout comme en Php, contrairement à de nombreux autres langages.

• Déclarer les variables nb1, nb2, msg1 et msg2 comme suit :

var nb1;
var nb2;
var msg1;
var msg2;

Vous notez la présence d'un point-virgule pour ponctuer chaque déclaration. Le point-virgule est en fait utilisé pour ponctuer quasiment chaque ligne de code Javascript. La syntaxe de ce langage est issue du C. Nous retrouverons beaucoup de similitudes notamment lorsque nous exploiterons les instructions de branchement et les boucles pour réaliser des traitements récursifs.

La syntaxe est très souple, elle permet d'optimiser les lignes de code. Ainsi nous aurions pu écrire :

var nb1; var nb2; var msg1; var msg2;

Ces variables sont certes déclarées mais elles ne sont pas affectées. En d'autres termes, elles ne stockent pour l'instant aucune donnée.

• A la suite du code, ajouter les affectations suivantes :

nb1=5; nb2=6; msg1='La déclaration de variables'; msg2='en Javascript';

Nous stockons le chiffre 5 dans la variable nb1, le chiffre 6 dans la variable nb2 et un texte dans les variables msg1 et msg2. C'est la raison pour laquelle nous employons des guillemets pour le texte et seulement pour le texte, soit les variables de type String comme on les appelle.

Comme les variables Javascript ne sont pas typées, on parle de variant, elles se typent automatiquement au moment de l'affectation. Ainsi, nb1 et nb2 sont devenues des variables numériques de type entier, capables de réaliser des opérations sur des nombres. En revanche, les variables msg1 et msg2 sont devenues des string sur lesquels nous pourrions exploiter des fonctions Javascript de traitement des caractères. Néanmoins, une affectation ultérieure pourrait réaffecter les variables nb1 et nb2 sur des string au même titre que les variables msg1 et msg2 pourraient se transformer en données numériques. C'est toute la souplesse de ce langage. Mais cette souplesse engage une grande rigueur de la part du programmeur, nous y reviendrons.

Méthodes et fonctions
Tout comme le VBA, le Javascript est un langage de programmation orienté objets. Ces objets désignent des éléments précis. Ainsi l'objet document permet comme son nom l'indique de désigner le document de la page Web dans lequel le code est encapsulé. Ces objets proposent des propriétés et méthodes. Les méthodes permettent de réaliser des actions. Ainsi la méthode write de l'objet document permet d'inscrire sur la page Html, l'information qui lui est passée en paramètre.

• A la suite du code, ajouter les deux instructions suivantes :

document.write(nb1 + nb2);
document.write(msg1 + msg2);

Entre les parenthèses de la méthode write, nous passons les paramètres à écrire. Dans le premier cas, nous passons la somme des deux variables numériques. Dans le second, nous passons la somme des deux variables textuelles, même si le procédé semble illogique.

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page Html,

Selon le résultat obtenu, illustré par la capture ci-dessus, nous pouvons faire plusieurs remarques. Tout d'abord, les variables numériques sont correctement sommées (11) et le résultat est effectivement affiché par la méthode write. Bien sûr, les variables de type string ne peuvent pas être sommées et javascript le comprend. Ces variables sont naturellement concaténées, c'est-à-dire assemblées dans l'ordre où elles sont énoncées dans le code. Une fois encore, c'est toute la souplesse du langage javascript qui interprète les données et s'adapte automatiquement. En VBA le caractère de concaténation est explicitement différent, il s'agit du Et commercial (&).

Enfin une dernière remarque s'impose. Bien que les instructions de codes aient été écrites sur deux lignes, leur retranscription se fait sur la même ligne, sans aucun espace. Comme la méthode write de l'objet document permet de retranscrire strictement l'information textuelle qui lui est passée en paramètre, rien n'empêche de concaténer ces informations avec des balises Html qui seront dès lors interprétées en tant que telles par le navigateur.

• Revenir dans l'éditeur de la page Html,
• Puis, modifier le code précédent comme suit :

document.write(nb1 + nb2);
document.write('<br />');
document.write(msg1 + ' ' + msg2);

Entre la première et la deuxième ligne de code, nous insérons l'inscription de la balise auto-fermante pour le saut de ligne (<br />). Puis, dans la concaténation des valeurs textuelles, nous ajoutons un espace entre guillemets afin de séparer les informations.

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page,

Les informations sont désormais présentées de façon plus claire. En partant de ce principe, avec la connaissance des balises Html triviales, nous pourrions insérer ces données dans un calque, créé à la volée, et pour lequel nous définirions une couleur différente de celle du fond de la page Html. La balise Html pour définir un calque est la balise div. Pour lui attribuer une couleur de fond, nous devons exploiter son attribut style. La balise div doit être ouverte avant l'inscription des données et refermée à la fin.

• En conséquence, revenir dans l'éditeur de code javascript,
• Adapter le code comme suit :

document.write('<div style='background-color:yellow;color:red;'>');
document.write(nb1 + nb2);
document.write('<br />');
document.write(msg1 + ' ' + msg2);
document.write('</div>');

Grâce à la méthode write de l'objet document, nous ouvrons tout d'abord la balise permettant de créer le calque. Grâce à son attribut style, nous en profitons pour régler la valeur de certaines de ses propriétés comme sa couleur de fond (background-color:yellow) sur du jaune (yellow) et sa couleur de police (color:red) sur du rouge. Notez que chacune de ces propriétés est énumérée séparée par un point-virgule. Nous employons des simples côtes car le paramètre de la méthode write utilise des doubles côtes. Bien sûr, à la toute fin, nous n'oublions pas de fermer le calque sans quoi ce dernier n'aurait pas de borne (document.write('</div>')).

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page,

Comme vous pouvez le voir, les informations sont identiques mais encapsulées dans un calque pour lequel la couleur de fond et la couleur de texte ont dynamiquement été modifiées.



Il s'agit d'un bref aperçu et d'une introduction aux possibilités qui s'offrent à nous et que nous ne manquerons pas de mettre à profit dans les futures formations. Nous savons désormais que les calques, leurs textes ou encore les images de la page peuvent être manipulés par le code.

write est une fonction particulière dans la mesure où elle est attachée à un objet. C'est la raison pour laquelle on parle de méthode. Mais comme tout langage, javascript propose des fonctions permettant de réaliser des actions seules. C'est le cas notamment de la fonction alert() qui permet d'afficher à l'écran, le message qui lui est passé en paramètre, sous forme de boîte de dialogue.

• Revenir dans l'éditeur de code,
• A la suite, toujours avant la balise fermante du script, ajouter cette instruction :

alert('Le résultat de la multiplication de ' + nb1 + ' par ' + nb2 + ' donne :' + nb1*nb2);

• Enregistrer les modifications et tester le résultat dans le navigateur,

Comme le montre la capture ci-dessus, une boîte de dialogue se déclenche automatiquement. Elle présente le message résultant de la concaténation, passée en paramètre par le code javascript. Cette concaténation est toujours réalisée par le symbole + à chaque fois qu'il s'agit d'associer à un texte statique, une donnée variable (+ nb1). L'inverse est vrai lorsqu'il s'agit de poursuivre les informations statiques après une donnée variable (+ ' par '). Au final, la multiplication des deux variables est calculée dans le flux de la chaîne concaténée et retranscrite par la fonction Javascript alert() (nb1*nb2).

Interactions avec l'internaute
La boîte de dialogue déclenchée par la fonction javascript alert() est utile essentiellement à titre informatif. Elle attend la validation de l'internaute par clic sur le bouton Ok avant de permettre la poursuite de la lecture du code. Mais à aucun moment elle ne permet de communiquer réellement avec l'utilisateur, en prenant compte de ses choix par exemple. C'est la raison pour laquelle javascript propose deux autres fonctions.

Il y a tout d'abord la fonction confirm() qui permet d'adresser un message à l'utilisateur, sous forme de question, avec deux boutons, le premier pour confirmer et le second pour infirmer. En fonction du retour, à stocker dans une variable, des actions différentes et dynamiques peuvent être entreprises. Et puis il y a la fonction javascript prompt() qui permet à l'utilisateur de répondre en tapant du texte.

Comme ces deux boîtes de dialogue sont initiées par des fonctions qui retournent une valeur, celle de l'action utilisateur, nous devons stocker cette donnée dans une variable. Et pour connaître la nature de la réponse, un test avec une fonction alert() est tout à fait approprié.

• Dans la partie déclarative, ajouter la déclaration de variable suivante :

var rep='';

Cette fois, en même temps que nous déclarons la variable, nous l'affectons. Nous aurions pu utiliser ce procédé pour les quatre déclarations précédentes afin d'optimiser le code.

Nous ne souhaitons plus voir apparaître la boîte de dialogue commandée par la fonction alert(). Nous décidons donc de la passer en commentaire. Deux slashs successifs (//) en début de ligne permettent de passer en commentaire la ligne toute entière. Pour passer en commentaires un groupe de lignes, il faut débuter la première par un slash suivi d'une étoile (/*) et terminer la dernière inversement, soit une étoile suivi d'un slash (*/).

• Passer en commentaire l'instruction de la fonction alert() :

//alert('Le résultat de la multiplication de ' + nb1 + ' par ' + nb2 + ' donne :' + nb1*nb2);

• Puis à la suite, ajouter les instructions suivantes :

rep=confirm('Pour accéder à la navigation, vous devez accepter les cookies');
alert(rep);

Nous stockons ainsi dans la variable rep le résultat du clic utilisateur en retour de la question posée, passée en paramètre de la fonction javascript confirm(). Puis pour connaître la valeur correspondante, nous l'affichons à l'écran, sous forme de test temporaire, grâce à la fonction alert().

• Enregistrer les modifications, basculer sur le navigateur et rafraîchir la page,

Une boîte de dialogue se déclenche en effet. Elle affiche le message saisi dans les parenthèses de la fonction. Mais cette fois, elle est accompagnée de deux boutons pour offrir la possibilité à l'internaute d'émettre un choix. C'est ce qu'illustre la capture ci-dessous.



Si vous cliquez sur le bouton Ok, la fonction alert qui se déclenche dans la foulée, indique que la valeur correspondante est true et false dans le cas contraire. Il s'agit de valeurs booléennes. Une variable booléenne peut être soit vraie soit fausse. Cette indication est intéressante pour pouvoir proposer une issue adaptée à la réponse formulée. Mais à ce stade, il est trop tôt, certaines notions nous manquent comme la capacité à vérifier et valider des conditions.

• Revenir dans l'éditeur de code et passer les deux précédentes lignes en commentaires :

/*rep=confirm('Pour accéder à la navigation, vous devez accepter les cookies');
alert(rep);*/

• Puis à la suite du code, ajouter les deux instructions suivantes :

rep=prompt('Quelle taille de police souhaitez-vous afficher');
alert(rep);

Ces deux instructions sont très semblables aux précédentes. Seul le nom de la fonction change. Pourtant, le résultat est sensiblement différent.

• Enregistrer le code, basculer sur le navigateur et rafraîchir la page,

Une nouvelle boîte de dialogue se déclenche. Elle permet à l'internaute de répondre par une saisie cette fois. Si vous tapez une valeur numérique, la fonction alert() se déclenche à la suite du code et affiche le résultat stocké.

Modifier les propriétés des éléments Html
Il faut bien à un moment ou à un autre, que ce code Javascript soit utile pour influer ou interagir avec les éléments qui composent la page Html. Nous proposons d'exploiter la valeur récupérée et stockée dans la variable rep pour modifier la taille de police du calque (div) en conséquence. Une taille de police se définit en pixels (px). Donc nous devrons concaténer la valeur numérique stockée. Un div peut être désigné par le code Javascript s'il possède un identifiant défini par son attribut id.

• Revenir dans l'éditeur de code de la page Html,
• Passer le dernier alert en commentaire,
• Ajouter l'attribut id dans la construction du div, comme suit :

document.write('<div id='bloc' style='background-color:yellow;color:red;'>');

Ainsi nous nommons le calque de façon explicite et unique avec l'intitulé bloc. C'est par cet identifiant que la méthode getElementById() de l'objet document permet de piloter l'élément Html. A cette méthode, nous devons associer les propriétés dérivées qui permettront d'accéder en cascade jusqu'à la taille de police du calque. Cette taille fait partie des attributs de style. C'est pourquoi nous devons exploiter la propriété style. Et c'est très exactement la propriété dérivée fontSize de la propriété style pour le calque, qui permet de définir la taille de la police.

• A la fin du code, avant la fermeture de la balise script, ajouter la ligne suivante :

document.getElementById('bloc').style.fontSize = rep + 'px';

• Enregistrer les modifications et rafraîchir le navigateur,
• A l'invite de la fonction prompt, saisir une taille volontairement importante : 45 par exemple,
• Valider par Ok,

Comme vous le constatez, la taille de police du div s'adapte en conséquence de façon dynamique. Nous avons donc réussi à interagir avec l'utilisateur et à exploiter les résultats des données fournies. Mais à aucun moment nous n'avons été en mesure pour l'instant de tester la validité de ces informations. En effet, rien n'empêche l'internaute de saisir un texte plutôt qu'un nombre. Dans ce cas, le code aurait généré une erreur. Nous aurons donc vite besoin de gérer les conditions et critères.

Important : Le Javascript est un langage sensible à la casse. La méthode getElementById possède trois majuscules qui identifient l'association des mots le composant. Ainsi, getelementbyid ne serait pas reconnu pas Javascript. De la même façon, lorsque vous déclarez des variables, vous devez les exploiter en respectant la casse que vous avez définie.

Le code complet de notre page HTML, imparfait du fait des tests et commentaires, est le suivant :

<html>
<head>
<title>Débuter avec Javascript</title>
</head>

<body>
<script type='text/javascript' language='javascript'>
var nb1; var nb2; var msg1; var msg2; var rep='';

nb1=5; nb2=6; msg1='La déclaration de variables'; msg2='en javascript';

/* document.write(nb1 + nb2);
document.write(msg1+msg2);*/

document.write('<div id='bloc' style='background-color:yellow;color:red;'>');
document.write(nb1 + nb2);
document.write('<br />');
document.write(msg1 + ' ' + msg2);
document.write('</div>');

//alert('Le résultat de la multiplication de ' + nb1 + ' par' + nb2 + ' donne : ' + nb1*nb2);

/*rep=confirm('Pour accéder à la navigation, vous devez accepter les cookies');
alert(rep);*/

rep=prompt('Quelle taille de police souhaitez-vous afficher');
//alert(rep);

document.getElementById('bloc').style.fontSize = rep + 'px';
</script>
</body>
</html>