LEÇON 1:RAPPELS SUR LE LANGAGE HTML ET GENERALITES SUR LE JAVASCRIPT
CHAPITRE 1 : PROGRAMMATION EN JAVASCRIPT
Leçon 1 : Rappel sur le langage HTML et généralités sur le JavaScript
A la fin de cette leçon l’élève doit être capable de :
- Définir JavaScript, script
- Importance et limites de JavaScript
- Donner la structure d’un programme JavaScript ;
INTRODUCTION
Le langage HTML simple permet de créer de pages Web statiques ;ces pages sont des documents figés, un peu comme des photos, et sont bien loin celles présentes sur le Web. Pour rendre ces pages interactives on ajoutera une nouvelle couche de programmation au langage html : le JavaScript
I- QUELQUES RAPPELS ET DEFINITIONS
Le HTML (HyperText Markup Language) est un langage permettant de créer les pages web statiques. Une page web étant un document contenant du texte, des images, des vidéos, des tableaux, des diagrammes ou graphiques accessibles à partir d’un navigateur. Le navigateur interprète les instructions contenues dans le document HTML. Ces instructions (balises) sont des mots prédéfinis encadrés par les chevrons < et>. Elles fonctionnent le plus souvent en paire
- balise ouvrante (exemple <HTML>)
- balise fermante (exemple </HTML>)
Les balises sont souvent enrichies par des attributs qui ont pour but de donner des informations supplémentaires sur la manière dont la balise doit être interprétée. Un attribut est composé de son nom suivi du signe « = » et de sa valeur entre guillemets.
Afin de rendre les pages web statiques nous allons introduire la notion de JavaScript.
Le JavaScript est une couche de programmation supplémentaire qui vient s’ajouter au langage HTML (langage de base des pages web) dans le but de le rendre interactive les pages web.
NB : le JavaScript s’exécute coté client
II-Présentation de JavaScript
Le JavaScript a été créé par la société NETSCAPE en 1995, à l’origine il se nommait LIVESCRIPT. Les éditeurs html (bloc note, notepad, simpletext, Gedit) sont aussi utilisés en JavaScript, mais il en existe d’autres, WYS/WYG (what you see is what you get) capable de générer automatiquement des codes JavaScript. Exemple : JavaScript Editor, Web Expert.
JavaScript est un langage de programmation des scripts orienté objet. Dans cette assertion apparaissent des notions qu’il convient de définir brièvement.
- Langage de programmation : c’est un langage qui permet au programmeur d'écrire ensemble d’actions (instructions) qui sera analysé (ou exécuter) par l'ordinateur.
- Script : c’est une suite d’instructions simples, écrit dans un langage interprété, permettant d’automatiser certaines tâches.
Pour réaliser un programme à l’aide du langage JavaScript, le programmeur a besoin de deux éléments :
- Nécessité d’un script
C’est la suite d’instructions qui devra être exécutée pour résoudre le problème identifié par le programmeur. Cette suite d’instructions (code source) est saisie dans un éditeur de texte. Comme éditeur on peut citer Notepad++, Wordpad, Gedit, Bloc Note,…
- Nécessité d’un « interpréteur » de script
Il est indispensable de posséder un interpréteur de code pour faire fonctionner un code JavaScript. Cet interpréteur se charge de lire le code puis de réaliser les actions attendues. Chaque navigateur possède un interpréteur.
En classe de première, les pages Web que nous avons conçues étaient statiques, c’est-à-dire que leur contenu n’était pas modifiable, et ne réagissaient pas aux actions de l’utilisateur sauf pour ce qui est des clics sur les liens hypertextes. JavaScript va ajouter de l’interactivité. On va pouvoir :
- Répondre à des actions de l’utilisateur (clic sur un lien ou sur un bouton, survol d’une image avec la souris, etc) ;
- Récupérer des valeurs entrées par l’utilisateur pour exécuter des commandes (exemple de la validation d’un formulaire, calculs simples sur les valeurs entrées, gestion des dates et des heures) ;
- Créer et de lire des cookies ;
- Gérer la navigation (menu dynamique) ;
- Réaliser des animations graphiques ;
- Lire et écrire des éléments HTML.
JavaScript reste limité pour les raisons ci-après :
- JavaScript est très dépendant du navigateur (l’exécution d’un script JavaScript peut donner des résultats différents d’un navigateur à un autre) et un certain nombre (comme Lynx ou Internet Explorer) le supportent mal ;
- JavaScript ne permet pas d’écrire ou de lire le disque dur. Il n’est donc pas possible de créer des pages Web dynamiques (pages créées en fonction des besoins de l’utilisateur ou des entrées d’une base de données), de concevoir un forum de discussion, un script de sondage ou de vote. Pour cela, on va utiliser des langages de script comme PHP, CGI ou ASP ;
- JavaScript n’échange pas avec d’autres machines connectées.
Impossible donc de créer une page de chat (discussion en direct).
III- STRUCTURE D'UN PROGRAMME JAVASCRIPT
Pour insérer un code JavaScript dans un code html on utilise la balise <script>…. </script>
Le code JavaScript peut être placé aussi bien dans l’entête (head) que dans le corps (body) de la page html. Dans tous les cas il est annoncé par la même balise.
Lorsque le code se situe dans l’entête il est placé entre les balises<head> et </head>. Une page html peut avoir plusieurs scripts javascript.
Exemple :
- Balise <SCRIPT> dans l’entête du document HTML
|
<html> <head> <script language=”javascript”> document.write (”Bonjour”); </script> </head> <body> … </body> </html> |
- Balise <SCRIPT> dans le corps du document
|
<html> <head><title> ma page </title> <script src=”mon_fichier_externe.js”> </script> </head> <body> <script language=”javascript”> document.write(”bonjour ”); </script> </body> </html> |
NB:Code JavaScript dans un fichier externe
Il est possible également de faire appel du code stocké dans un fichier extérieur au document HTML.
La balise <SCRIPT> fera simplement référence un nom de fichier sur le serveur! Cela peut avoir plusieurs avantages :
- Alléger la page HTML et la rendre plus lisible ;
- Factoriser le code pour plusieurs pages HTML, et le rendre ainsi réutilisable et plus facilement maintenable
|
<html> <head><title> ma page </title> <script src=”mon_fichier_externe.js”> </script> </head> <body> </body> </html> |
CONCLUSION
Concluez vous-même ....
A découvrir aussi
- Leçon 1 : Concepts fondamentaux et Structure d’un programme JavaScript
- Leçon 19 : Adresses IP non routables
- Les fonctions, les boîtes de dialogue
Inscrivez-vous au site
Soyez prévenu par email des prochaines mises à jour
Rejoignez les 30 autres membres