Module Internet (3) 1 Département Technologie de l’Information et de la Communication Internet

Département Technologie de l’Information et de la Communication Module Internet (3)1

Internet


Sommaire

• Javascript


Javascript


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.


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.


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


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


Les Commentaires

// sera en commentaire

/* ceci sera aussi un

commentaire

sur plusieurs lignes */


Pour les anciens navigateurs

• Pour résoudre le problème des anciens navigateurs qui ne supportent pas javascript: <script> </script>


Exemple (1/2)

<html><head><title>Ma première page avec javascript</title></head><body>

<script language="javascript"></script>

</body></html>


Exemple (2/2)


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é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;


Exercice 1

• Écrire un script qui affiche la page suivante:


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"];


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"]);


Les fonctions (1/3)

• Définition:function nom_fonction(paramètres)

{

// instructions

}


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.


Les fonctions (3/3)

• Valeur de retour:– mot clé:

return– exemple:

function carre(nombre){var resultat = nombre*nombre;return resultat;}


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");


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.


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.


Fonctions et boîtes de dialogue

• Déclaration:function fonctionTest(monTexte)

{

alert(monTexte);

}

• Appel : fonctionTest("bonjour");

– affichera une fenêtre avec le texte "bonjour"


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:


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>


Les objets (1/5)

objet window

objet document

objet champ texte

objet bouton radio

objet formulaire

objet bouton


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


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.


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.


Les objets (5/5)

NavigatorAppName

• retourne le nom du navigateur.

AppVersion• retourne la version.


Exemple

• Objet navigator:<script language="javascript"></script>


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


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>


Propriétés (3/6)

• Case à cocher:



checked état en cours

defaultChecked bouton sélectionné par défaut ?

value valeur du bouton


Propriétés (4/6)

• Boutons radio:



checked état en cours

defaultChecked bouton sélectionné par défaut

value valeur de l'élément case à cocher


Propriétés (5/6)

• Liste de sélection:


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é


Propriétés (6/6)

• Zone de texte (TextArea):


name nom du champ textArea

defaultValue valeur par défaut du champ

value valeur courante du champ texte


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.



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


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.


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.



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



• 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');"


Exemple

<html><body><form><a href="page.html" onClick="alert('Vous avez cliqué sur le lien');"> lien</a></form></body></html>


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>


Exemple

• À la fermeture:


Les boutons

• 3 types: – bouton submit (déjà vu), – bouton reset (déjà vu),– bouton normal:

<input type="button" name="nom" value="cliquez ici">


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.


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>



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



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


Exercice

• Écrire un lien permettant d'afficher la page suivante:


Exercice

• Écrire un script de telle sorte que lorsque la souris passe sur une image celle-ci est modifiée:


Exercice

• Écrire une mini calculatrice:


Références

http://www.javascriptfr.com/

http://www.toutjavascript.com/

http://www.allhtml.com/javascript/index.php

Documents

Module Internet (3) 1 Département Technologie de l’Information et de la Communication Internet