Kamertic - Intégration des TICs dans l'Enseignement

Kamertic - Intégration des TICs dans l'Enseignement

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>

<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 ....



12/10/2016
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 13 autres membres