Chapitre 1
JAVASCRIPT: SCRIPT COTE CLIENT
 
 
Précédent Suivant
 

JavaScript: script côté client
HTML et programmation
* HTML n'est pas un langage de programmation
* Langage de structuration de l'information
* Tendance actuelle: séparer l'information de son apparence
* HTML contient l'information seulement
* Feuille de style (CSS) contient la présentation de l'information
* Avantages de HTML
* Développement facilité
* Intégration multimédia
* Texte, images, liens, vidéo...
* Inconvénients de HTML
* Présentation statique de l'information
* Pas d'interaction avec l'utilisateur
Scripts "côté client" dans HTML
* Script = langage de programmation interprété
* N'a pas besoin d'être compilé
* Programme directement traduit à son exécution
* Rapidité de développement
* Exécution plus lente qu'un programme compilé
* Possibilité de mettre du script "côté client" dans HTML
* Implique que le navigateur comprend ce langage
* Langage couramment utilisé: JavaScript
* JavaScript peut être désactivé dans un navigateur
* Permet la conception de pages Web dynamiques
* Modifier dynamiquement la présentation du contenu
* Répondre aux actions de l'utilisateur
* Vérifier des formulaires
* ...
Client-serveur: HTML simple (1/2)
Client-serveur: HTML simple (2/2)
* Sur le serveur: code HTML
<html>
<body>
<p>Bienvenue !</p>
</body>
</html>
* Le client reçoit: code HTML identique
<html>
<body>
<p>Bienvenue !</p>
</body>
</html>
Client-serveur: code JavaScript (1/2)
Client-serveur: code JavaScript (2/2)
* Sur le serveur: code HTML + JavaScript
<html>
<body>
<script type="text/javascript">
document.write("<p>Bienvenue !</p>");
</script>
</body>
</html>
* Le client reçoit: code HTML + JavaScript identique
<html>
<body>
<script type="text/javascript">
document.write("<p>Bienvenue !</p>");
</script>
</body>
</html>
* Le navigateur affiche: code HTML
<html>
<body>
<p>Bienvenue !</p>
</body>
</html>
Client-serveur: code PHP (1/2)
Client-serveur: code PHP (2/2)
* Sur le serveur: code PHP
<html>
<body>
<?php
echo "<p>Bienvenue !</p>";
?>
</body>
</html>
* Le client reçoit: code HTML
<html>
<body>
<p>Bienvenue !</p>
</body>
</html>
Inclusion de script dans HTML
* Inclusion du code
* <script type="nom langage">
code
</script>
* Entre les balises <head>...</head>
* Eléments communs à toute la page
* Initialisation de variables globales
* Exemple: var compteur = 0;
* Définition de fonctions
* Exemple: function affiche_compteur() { ... }
* Entre les balises <body>...</body>
* Exécution de fonctions
* affiche_compteur();
* Mise à jour de variables globales
* ++compteur;
Un exemple de JavaScript
<html>
<head>
<script type="text/javascript">
var compteur = 0;
function affiche_compteur()
{ document.write("compteur = " + compteur); }
</script>
</head>
<body>
<p>J'incrémente le compteur...</p>
<script type="text/javascript"> ++compteur; </script>
<p>J'affiche le compteur...</p>
<p><script type="text/javascript">
affiche_compteur();
</script></p>
</body>
</html>
* JavaScript interprété en même temps que le HTML
* "document.write" génère du HTML à l'endroit même du code JavaScript
Inclusion d'un fichier de script
* Besoin de réutiliser un code dans plusieurs pages
* Possibilité d'écrire du script dans un fichier séparé
* Extension généralement utilisée pour JavaScript: ".js"
* Exemple d'un fichier "fonctions.js"
var compteur = 0;
function affiche_compteur()
{ document.write("compteur = " + compteur); }
* Code d'inclusion d'un fichier
* Placé dans l'entête HTML
* Format générique
* <script src="nom fichier" type="nom langage"></script>
* Exemple JavaScript
* <script src="fonctions.js" type="text/javascript">
</script>
Réagir à des événements
* Définir le langage de script par défaut
* <meta http-equiv="Content-Script-Type"
content="type langage"/>
* Evénements
* Clic de souris
* Chargement d'une page
* Modification d'un champ de formulaire
* ...
* Insertion de script pour réagir à un événement
* <balise onévénement="code script">...</balise>
* Exemple: <img onmouseover="++compteur;"/>
Qu'est-ce que le DHTML ?
* DHTML: Dynamic HTML
* Ne désigne pas une technologie précise
* Terme DHTML un peu passé de mode
* Maintenant c'est plutôt AJAX (Asynchronous JavaScript And XML)
* Mais les procédés subsistent
* DHTML regroupe plusieurs technologies pour le dynamisme des pages Web
* HTML: HyperText Markup Language
* Structuration de l'information
* CSS: Cascade Style Sheet
* Feuille de style
* Présentation de l'information
* DOM: Document Object Model
* Modèle objet du document
* Représentation de tous les éléments du document (HTML + CSS)
* JavaScript
* Gestion des événements du document
* Modification dynamique du document