LEÇON 1:RAPPELS SUR LE LANGAGE HTML ET GENERALITES SUR LE JAVASCRIPT

Imprimer

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

Compétences visées

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.

Attribut= ‘’valeur ‘’. Exemple : <p align= ‘’center’’> permet de center le paragraphe

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.

1-Principe de fonctionnement du JavaScript

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.

2-Importance

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.

3-Limites

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>

Syntaxe : <script language="JavaScript"> /* code javascript */</script>

Exemple : <script language="JavaScript"> alert(’’Bonjour’’) ;</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>

document.write (”Bonjour”);

</script>

</head>

<body>

…

</body>

</html>

Balise <SCRIPT> dans le corps du document

<html>

</head>

<body>

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>

<body>

</body>

</html>

CONCLUSION

Concluez vous-même ....

12/10/2016