View
106
Download
1
Category
Preview:
Citation preview
Département Technologie de l’Information et de la Communication Module Internet (3)1
Internet
Département Technologie de l’Information et de la Communication Module Internet (3)2
Sommaire
• Javascript
Département Technologie de l’Information et de la Communication Module Internet (3)3
Javascript
Département Technologie de l’Information et de la Communication Module Internet (3)4
Javascript (1/3)
• Au début: – LiveScript,– développé par Netscape.
• Le 4 décembre 1995, suite à une association avec Sun, Netscape rebaptise son langage Javascript:– clin d'oeil au langage Java.
Département Technologie de l’Information et de la Communication Module Internet (3)5
Javascript (2/3)
• Permet de rendre un site interactif de manière simple (pour les non développeurs),– réagir aux actions de l'utilisateur.
Département Technologie de l’Information et de la Communication Module Internet (3)6
Javascript (3/3)
• Javascript n’est pas Java:
Javascript Java (applet)
langage interprété langage pseudo-compilé
code intégré au HTML code à part du document HTML, appelé à partir de la page
langage peu typé langage fortement typé
accessibilité du code confidentialité du code
pas d’écriture sur le disque dur pas d’écriture sur le disque dur
Département Technologie de l’Information et de la Communication Module Internet (3)7
Où placer le code?
• Dans la page HTML:– entre les balises:
<script language="javascript">
…
</script>
– language="javascript" est facultatif: • javascript est (actuellement…) le language de script par
défaut.
• Les fonctions sont déclarés dans l'en-tête de la page html: – entre <head> et </head>.
Département Technologie de l’Information et de la Communication Module Internet (3)8
Les Commentaires
// sera en commentaire
/* ceci sera aussi un
commentaire
sur plusieurs lignes */
Département Technologie de l’Information et de la Communication Module Internet (3)9
Pour les anciens navigateurs
• Pour résoudre le problème des anciens navigateurs qui ne supportent pas javascript: <script> <!--// code javascript--></script>
Département Technologie de l’Information et de la Communication Module Internet (3)10
Exemple (1/2)
<html><head><title>Ma première page avec javascript</title></head><body>
<script language="javascript"><!--//partie cachée aux anciens navigateursdocument.write("Bonjour tout le monde"); --></script>
</body></html>
Département Technologie de l’Information et de la Communication Module Internet (3)11
Exemple (2/2)
Département Technologie de l’Information et de la Communication Module Internet (3)12
Syntaxe
• Les instructions se terminent par ";".
• Casse:– majuscule != minuscule.
• Opérateurs:==, !=, =<, >=, <, >, &&, ||,
• Boucle: for(i = 0; i<5; i++){ // instructions }
while(a<b){ // instructions }
do{ // instructions } < while(a<b)
Département Technologie de l’Information et de la Communication Module Internet (3)13
Déclaration des variables
• Deux façons:– explicite (avec le mot clé var):
var st_chaine= "bonjour"; – implicite (sans mot clé):
st_chaine= "bonjour"; // st_chaine est globale– exemples:
var MaVariable1;MaVariable2 = 56;MaVariable1 = 32;
Département Technologie de l’Information et de la Communication Module Internet (3)14
Exercice 1
• Écrire un script qui affiche la page suivante:
Département Technologie de l’Information et de la Communication Module Internet (3)15
Les tableaux (1/2)
• 3 manières de déclarer un tableau:var Tab = new Array(); // déclaration d'un tableau vide– déclaration et initialisation en même temps:
• première méthode:var Tab = new Array("donnée 1", "donnée 2", "donnée 3");
• seconde méthode:var Tab = ["donnée 1", "donnée 2", "donnée 3"];
Département Technologie de l’Information et de la Communication Module Internet (3)16
Les tableaux (2/2)
• Utilisation:Tab[0] = "Bonjour à tous";
Tab[1] = "Rebonjour à tous";
• Tableaux associatifs:Tab["Jean"] = 16;
Tab["Paul"] = 14;
– exemple:document.write("Le second élément du tableau vaut "+Tab[1]);
document.write("La note de Paul est : "+Tab["Paul"]);
Département Technologie de l’Information et de la Communication Module Internet (3)17
Les fonctions (1/3)
• Définition:function nom_fonction(paramètres)
{
// instructions
}
Département Technologie de l’Information et de la Communication Module Internet (3)18
Les fonctions (2/3)
• Appel:nomDeLaFonction(arguments)
• La fonction doit être définie avant l'appel:– la définition sera placée dans l'en-tête de la page html.
Département Technologie de l’Information et de la Communication Module Internet (3)19
Les fonctions (3/3)
• Valeur de retour:– mot clé:
return– exemple:
function carre(nombre){var resultat = nombre*nombre;return resultat;}
Département Technologie de l’Information et de la Communication Module Internet (3)20
La fonction Alert
• Permet d'afficher un message: – une fenêtre avec du texte et un bouton OK.
• Syntaxe:alert("texte");
alert(variable);
– exemple: alert("bonjour");
Département Technologie de l’Information et de la Communication Module Internet (3)21
La fonction prompt
• Affiche une fenêtre avec du texte, une zone de saisie, un bouton OK et un bouton annuler:– permet la saisie de l'utilisateur.– exemple:
var reponse = prompt("Texte de la boîte","valeur par défaut");
– retourne:• la valeur de la zone de saisie,• null si l'utilisateur clique sur annuler.
Département Technologie de l’Information et de la Communication Module Internet (3)22
La fonction confirm
• Affiche une fenêtre avec du texte, un bouton OK et un bouton annuler: – permet de demander confirmation.– exemple:
var continuer = confirm("Voulez-vous continuer?");
– retourne:• true si l'utilisateur clique sur OK,• false sinon.
Département Technologie de l’Information et de la Communication Module Internet (3)23
Fonctions et boîtes de dialogue
• Déclaration:function fonctionTest(monTexte)
{
alert(monTexte);
}
• Appel : fonctionTest("bonjour");
– affichera une fenêtre avec le texte "bonjour"
Département Technologie de l’Information et de la Communication Module Internet (3)24
Exercice
• Écrire une page qui demande la saisie de 2 valeurs (à l'ouverture) et qui en affiche la somme:
– vous utiliserez la fonction parseFloat(chaine) pour convertir une chaîne de caractères en réel:
Département Technologie de l’Information et de la Communication Module Internet (3)25
Scripts externe
• Le script peut être enregistré dans un fichier indépendant de la page Web:– réutilisation du script dans une autre page.
• Le fichier est précisé dans <head>:– exemple:
<head>
<script type="text/javascript" src="fichier.js"></script>
</head>
Département Technologie de l’Information et de la Communication Module Internet (3)26
Les objets (1/5)
objet window
objet document
objet champ texte
objet bouton radio
objet formulaire
objet bouton
Département Technologie de l’Information et de la Communication Module Internet (3)27
Les objets (2/5)
• Les objets de base du navigateur sont les suivants: navigator
• contient des informations sur le navigateur de celui qui visite la page.
window• c'est l'objet où s'affiche la page, il contient donc des propriétés
concernant la fenêtre elle-même mais aussi tous les objets-enfants contenus dans celle-ci.
location• contient des informations relatives à l'adresse de la page à l'écran.
history• liste de liens visités précédemment.
document• propriétés sur le contenu du document (couleur arrière plan, titre, ...).
Département Technologie de l’Information et de la Communication Module Internet (3)28
Les objets (3/5)
• Pour accéder à un objet: – commencer par l'objet le plus élevé, puis descendre dans la
hiérarchie,– exemple:
• pour accéder au bouton semaine placé dans le formulaire test:
window.document.test.semaine
– remarque: • window est facultatif.
Département Technologie de l’Information et de la Communication Module Internet (3)29
Les objets (4/5)
• Pour accéder aux propriétés des objets:– opérateur "."nom_de_objet.nom_propriété– exemple:
document.nom_form.nom_radio.checked• permet de savoir si le bouton radio est coché (ON) ou NULL.
Département Technologie de l’Information et de la Communication Module Internet (3)30
Les objets (5/5)
NavigatorAppName
• retourne le nom du navigateur.
AppVersion• retourne la version.
Département Technologie de l’Information et de la Communication Module Internet (3)31
Exemple
• Objet navigator:<script language="javascript"><!--Navigateur = navigator.appName;if (Navigateur == "Netscape"){ document.write("Netscape"); }if (Navigateur == "Microsoft Internet Explorer"){document.write("Internet Explorer");}//--></script>
Département Technologie de l’Information et de la Communication Module Internet (3)32
Propriétés (1/6)
• Zone de texte:
Propriété Description
name nom du contrôle
defaultValue valeur par défaut du contrôle
value valeur en cours du contrôle
Département Technologie de l’Information et de la Communication Module Internet (3)33
Propriétés (2/6)
<html><body><form name="monFormulaire"><input type="text" name="leNom" value="valeur par
défaut"><br /></form><script>document.write(" name="+document.monFormulaire.leNo
m.name+"<br />");document.write("defaultvalue="+document.monFormulaire
.leNom.defaultValue+"<br />");document.write("value="+document.monFormulaire.leNom
.value+"<br />");</script></body></html>
Département Technologie de l’Information et de la Communication Module Internet (3)34
Propriétés (3/6)
• Case à cocher:
Propriété Description
name nom du contrôle
checked état en cours
defaultChecked bouton sélectionné par défaut ?
value valeur du bouton
Département Technologie de l’Information et de la Communication Module Internet (3)35
Propriétés (4/6)
• Boutons radio:
Propriété Description
name nom du contrôle
checked état en cours
defaultChecked bouton sélectionné par défaut
value valeur de l'élément case à cocher
Département Technologie de l’Information et de la Communication Module Internet (3)36
Propriétés (5/6)
• Liste de sélection:
Propriété Description
id nom de la liste déroulante
length nombre d'éléments de la liste
selectedIndex rang de l'élément sélectionné (à partir de 0)
value valeur de l'élément sélectionné
Département Technologie de l’Information et de la Communication Module Internet (3)37
Propriétés (6/6)
• Zone de texte (TextArea):
Propriété Description
name nom du champ textArea
defaultValue valeur par défaut du champ
value valeur courante du champ texte
Département Technologie de l’Information et de la Communication Module Internet (3)38
Les évènements (1/6)
• Avec HTML: – un seul événement:
• le click souris (assez limité...).
• Javascript ajoute les événements suivants qui peuvent être insérés dans les balises HTML du document: Click
• lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément.
Load• lorsque la page HTML est chargée par le navigateur.
Unload• lorsque l'utilisateur quitte ou change de page HTML.
Département Technologie de l’Information et de la Communication Module Internet (3)39
Les évènements (2/6)
• Javascript:MouseOver
• lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément.
MouseOut• lorsque le pointeur de la souris quitte un lien ou tout autre élément.
Département Technologie de l’Information et de la Communication Module Internet (3)40
Les événements (3/6)
• Javascript:Focus
• lorsqu'un élément de formulaire a le focus (i.e. devient la zone d'entrée active).
Blur• lorsqu'un élément de formulaire perd le focus ( i.e. lorsque
l'utilisateur clique hors du champ et que la zone entrée n'est plus active).
Change• lorsque la valeur d'un champ de formulaire est modifiée.
Select• lorsque l'utilisateur sélectionne un champ dans un élément de
formulaire.Submit
• lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire.
Département Technologie de l’Information et de la Communication Module Internet (3)41
Les événements (4/6)
• Javascript:Abort
• lorsque l'utilisateur interrompt le chargement de l'image.
Dblclick• lorsque l'utilisateur double-clique sur l'élément (un lien hypertexte
ou un élément de formulaire).
Dragdrop • lorsque l'utilisateur effectue un glisser-déposer sur la fenêtre du
navigateur.
Error• lorsqu'une erreur apparaît durant le chargement de la page.
Département Technologie de l’Information et de la Communication Module Internet (3)42
Les évènements (5/6)
• Javascript:Keydown
• lorsque l'utilisateur appuie sur une touche de clavier.
Keypress• lorsque l'utilisateur maintient une touche de clavier enfoncée
Keyup• lorsque l'utilisateur relâche une touche de clavier.
Reset• lorsque l'utilisateur efface les données d'un formulaire à l'aide du
bouton Reset.
Resize• lorsque l'utilisateur redimensionne la fenêtre du navigateur.
Département Technologie de l’Information et de la Communication Module Internet (3)43
Les évènements (6/6)
• Récupération d'un événement et appel de fonction:onNom_événement="nom_fonction();"
– exemple:
onClick="alert('Vous avez cliqué sur cet élément');"
Département Technologie de l’Information et de la Communication Module Internet (3)44
Exemple
<html><body><form><a href="page.html" onClick="alert('Vous avez cliqué sur le lien');"> lien</a></form></body></html>
Département Technologie de l’Information et de la Communication Module Internet (3)45
Exemple
<html><head><script language="Javascript">function bienvenue(){
alert("bienvenue sur ma page");}
function auRevoir(){alert("Au revoir");}
</script></head><body onLoad="bienvenue() " onUnload="auRevoir() "><h1>voici ma page</h1></body></html>
Département Technologie de l’Information et de la Communication Module Internet (3)46
Exemple
• À la fermeture:
Département Technologie de l’Information et de la Communication Module Internet (3)47
Les boutons
• 3 types: – bouton submit (déjà vu), – bouton reset (déjà vu),– bouton normal:
<input type="button" name="nom" value="cliquez ici">
Département Technologie de l’Information et de la Communication Module Internet (3)48
Exercice
• Écrire le code de la page suivante, permettant de sélectionner son système d'exploitation: – après chaque changement, la nouvelle valeur de la liste sera
affichée:
– remarque: • créer une fonction permettant l'affichage de la valeur de la liste.
Département Technologie de l’Information et de la Communication Module Internet (3)49
La méthode open() (1/3)
• La méthode open() (de l'objet window) permet d'ouvrir une fenêtre:window.open("URL","nom_de_la_fenetre","options_de_la_fenetre");
– exemple d'utilisation dans un lien hypertexte:
<a href=# onClick="window.open('URL', 'nom_de_la_fenetre',
'options_de_la_fenetre');return(false)">Lien</a>
Département Technologie de l’Information et de la Communication Module Internet (3)50
La méthode open() (2/3)
• Les options de la fenêtre sont les suivantes: directories = yes/no
• affiche ou non les boutons de navigation.
location = yes/no• affiche ou non la barre d'adresse.
menubar = yes/no• affiche ou non la barre de menu (fichier, edition, ...).
resizable = yes/no• définit si la taille de la fenêtre est modifiable ou non.
scrollbars = yes/no• affiche ou non les ascenseurs (barres de défilement).
Département Technologie de l’Information et de la Communication Module Internet (3)51
La méthode open() (3/3)
• Options de la fenêtre:status = yes/no
• affiche ou non la barre d'état.
toolbar = yes/no• affiche ou non la barre d'outils.
width = largeur (en pixels)• définit la largeur.
height = hauteur (en pixels)• définit la hauteur.
Département Technologie de l’Information et de la Communication Module Internet (3)52
Exercice
• Écrire un lien permettant d'afficher la page suivante:
Département Technologie de l’Information et de la Communication Module Internet (3)53
Exercice
• Écrire un script de telle sorte que lorsque la souris passe sur une image celle-ci est modifiée:
Département Technologie de l’Information et de la Communication Module Internet (3)54
Exercice
• Écrire une mini calculatrice:
Département Technologie de l’Information et de la Communication Module Internet (3)55
Références
http://www.javascriptfr.com/
http://www.toutjavascript.com/
http://www.allhtml.com/javascript/index.php
Recommended