C_introduction_javascript [Mode de compatibilité] - Jean

1
Jean-Philippe PERNIN
Université Stendhal
Département Informatique Pédagogique
Bureau I 113
Mél. : [email protected]
Initiation à Javascript
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 1
Les compléments à HTML
Objectif : ajouter de l’interactif
PHP (couplé avec SQL)
langage principalement utilisé pour
produire des pages Web dynamiques
JavaScript
langage permettant
davantage d ’interactivité sur les
pages HTML
Java
Environnement informatique (langage +
machine virtuelle) permettant l’exécution
de micro-applications (applets)
téléchargées par le réseau
Plugin :
Programme complémentaire au
navigateur permettant d ’exécuter un
certain type de document
(exemple Son, animation Flash)
HTML
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 2
Java et Javascript
• Malgré l’homonymie : aucun rapport
– JavaScript : langage de script associé à HTML
permettant de fournir davantage d’interactivité
– Java : système complet basé sur le téléchargement de
petites applications (applets)
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 3
Java et Javascript : comparatif
JavaScript Java
•Interprété
•Orienté objets, Possibilités
limitées, faiblement typé
•Programme source
embarqué dans le HTML
•récupérable, non vérifié
•Lecture accessible
•Compilé
•Orienté objets, Langage
complet
•Micro-applications (applets)
téléchargées par le réseau
•Protection des sources
•Requiert de véritables
compétences
d ’informaticien
Langage
Principe
Sécurité
Accessibilité

2
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 4
Javascript : fonctionnement
Réseau Internet
2
Serveur HTTP
Logiciel
Navigateur
Interprète le
HTML
Appel du code
JavaScript
3Le Navigateur interprète
le code JavaScript
(version suffisante
requise)
1Le code JavaScript est
embarqué dans la
page HTML
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 5
Balises de document et d’entête
Balise du document
Balise de l’entête
Balise de Titre
Fin de Titre
Fin de l’entête
Début de la description
Corps du document
Fin de la description
Fin du document
<HTML>
<HEAD>
<TITLE>
Mon document
</TITLE>
</HEAD>
<BODY>
Bonjour
Je m'appelle Superman
</BODY>
</HTML>
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 6
Javascript et HTML
3 solutions pour écrire du code Javascript
• Code directement écrit entre des balises HTML
• Code écrit dans des fonctions déclarées dans la
partie HEAD puis appelées depuis le HTML
• Code écrit dans des fichiers séparés puis
appelées depuis le HTML (suffixe.js)
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 7
Solution 1 :
Code directement écrit entre des balises HTML
<HTML>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="bouton1" VALUE="Question ?"
onClick="var nom = prompt('quel est ton nom ?', ''); alert('Bonjour
' + nom)">
<P>
</FORM>
</BODY>
</HTML> Code Javascript
Evénement

3
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 8
Les événements
Forme générale :
onEvenement="Action_Javascript_ou_Fonction();"
<HTML>
<HEADER>
<SCRIPT language="javascript">
function poserUneQuestion () {
var nom
nom = prompt('quel est ton nom ?', '')
alert('Bonjour ' + nom)
}
</SCRIPT>
</HEADER>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="bouton1" VALUE="Question ?"
onClick="poserUneQuestion () ">
<P>
</FORM>
</BODY>
</HTML>
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 9
Solution 2 : Code écrit sous forme de fonction
dans une balise <SCRIPT> dans la balise <HEADER>
Appel de la fonction
Définition de la fonction
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 10
Solution 3 : Code écrit dans un fichier externe .js
référence dans la balise <HEADER>
</HTML>
<HEADER>
<SCRIPT src = "fichier1.js">
</SCRIPT>
</HEADER>
<FORM>
<INPUT TYPE="button" NAME="bouton1" VALUE="Question ?"
onClick="poserUneQuestion () ">
<P>
</FORM>
</BODY>
</HTML>
function poserUneQuestion () {
var nom
nom = prompt('quel est ton nom ?', '')
alert('Bonjour ' + nom)
}
fichier1.js
Appel de la fonction
Appel à un fichier externe
Définition de la fonction
Jean-Philippe Pernin - DIP - Université Stendhal - Grenoble 3 11
Utilisations de JavaScript
• Contrôle de formulaires
• Effets graphiques (textes défilants, …)
• Calcul et affichage (horloge, …)
• Animation
• Etc.
• Caractéristique : l ’environnement connu est
celui du client (la page HTML)
• Inconvénient : Si erreur, plantage de la page