docJavascript Introduction HTML et Javascript HTML et Javascript
download 
Plainte Transcription
Javascript Introduction HTML et Javascript HTML et Javascript
Introduction
Javascript
z Javascript permet de rendre dynamique un site internet
développé en HTML.
z Javascript permet de développer de véritables
applications fonctionnant exclusivement dans le cadre
d'Internet.
z Le Javascript est un langage de script simplifié orienté
objet dont la syntaxe est basée sur celle du Java.
z Contrairement à un applet Java qui est un programme
compilé, les scripts écrits en Javascript sont interprétés
– Le JavaScript est écrit directement au sein du
document HTML sous forme d'un script encadré par des
balises HTML spéciales.
HTML et Javascript
HTML et Javascript
z la page HTML devra TOUJOURS contenir les
deux balises spécifiques et indispensables
z Tenir compte des navigateurs
<script type="text/javascript">
............
</script>
z Possibilité de spécifier une version de javascript
<noscript>
Cette page utilise javascript
</noscript>
z Le code JavaScript s’intègre de deux manière
avec le code HTML
1. Insertion directe dans le code HTML
<script type="text/javascript1.3">
............
</script>
2. Insertion comme un module externe
Insertion dans une page HTML
Insertion et exécution événementielle
Il existe 2 manières d'insérer du code JavaScript dans une
page HTML
z Le code s'exécutera seulement lors d'un événement généré
par intervention de l'utilisateur.
1. Insertion pour exécution directe
<html>
<head>
<title>…</title>
</head>
<body>
<script type="text/javascript">
alert('coucou');
</script>
</body>
</html>
<html>
<head>
<title>…</title>
<script type="text/javascript">
function bye()
{
alert('Bye!!!');
}
</script>
</head>
<body onunload="bye(); ">
<p>Execution a la fermeture de la page</p>
</body>
</html>
1
Insertion par appel de module externe
Entrée et sortie de données avec JavaScript
z On peut insérer du code JavaScript en faisant
appel à un fichier (extension .js) se trouvant à
n’importe quelle adresse (URI).
z 3 types de boites de messages peuvent être affichés en
utilisant Javascript
<script src="URL">
…
</script>
Inconvénient : l'appel au code externe génère
une requête supplémentaire vers le serveur, et
encombre le réseau
– Méthode alert()
alert('Salut!!!');
– Méthode confirm()
confirm('Etes vous sur ?');
– Méthode prompt()
prompt('Quel est votre nom ?','toto');
La structure d’un script en JavaScript
Les variables (1)
La syntaxe du langage Javascript s'appuie sur le modèle de Java et C
z Déclaration et affectation
z Règles générales
z L'insertion des espaces peut s'effectuer n'importe où dans le
script.
z ; à la fin de chaque commande
z 2.5 et pas 2,5
z Le langage Javascript est sensible à la casse
z Il existe deux méthodes permettant d'intégrer des
commentaires à vos scripts.
//Double slash devant le texte
/*Encadrer le texte par slash étoile et
étoile slash */
– var pour déclarer une ou plusieurs variables.
– = pour l'affectation d'une valeur .
– Si une valeur est affectée à une variable sans que
cette dernière ne soit déclarée, alors Javascript la
déclare automatiquement.
//Declaration
var i, j;
//Affectation
i = 0;
//Déclaration
var max = 10;
//Déclaration
var caractere
de i, de j et de k.
de i.
et affectation de max.
et affectation de caractere
= ["a", "b", "c"];
Les variables (2)
Les variables (3)
z Déclaration et affectation
z Contraintes concernant les noms de variables
– La lecture d'une variable non déclarée provoque une erreur
– Une variable correctement déclarée mais dont aucune
valeur n'est affectée, est indéfinie (undefined).
z La portée
– les variables peuvent être globales ou locales.
– Les noms de variables ne peuvent contenir que des lettres,
chiffres, ou le caractère "_" (underscore)
var indice_tab1;//valide
– Les caractères spéciaux et accentués sont interdits (é, à, ç,
ï, etc..) ainsi que les espaces, les nombres sont autorisés
– Les majuscules et les minuscules ont leur importance.
– Une variable globale est déclarée en début de script et est
accessible à n'importe quel endroit du programme.
var Indice, indice;//sont 2 variables différentes
– Une variable locale est déclarée à l'intérieur d'une fonction
et n'est utilisable que dans la fonction elle-même.
– Les mots réservés JavaScript ne peuvent être utilisés
comme noms de variable.
2
Les variables (4)
Valeurs spéciales
z Pas de déclaration de type : le type d’une variable
dépend de la valeur stockée dans cette variable.
z JavaScript inclut aussi deux types de
données spéciaux :
var variable = 'nom';
var variable = 2;
z trois principaux types de valeurs
– Chaîne de caractère
– Nombre
– Booléen :true (vrai) et false (faux).
Les opérations sur les chaînes
– Concaténation
var etudiant = "nom" + " prenom";//nom prenom
– Longueur d’une chaîne
var etudiant = "nom" + " prenom";
var longueur = etudiant.length;//10
– nième caractère d’une chaîne
var etudiant = "nom" + " prenom";
var lettre5 = etudiant.charAt(4);//p
– Extraction d’une partie de la chaîne
var date1 = "16/10/06";
var mois = date1.substring(3,4);//10
zNull : possède une seule valeur, null, qui signifie
l’absence de données dans une variable
zUndefined : Lorsque aucune valeur a été affectée
à une variable, elle est non définie (undefined).
Les fonctions prédéfinies (1)
z isFinite
– Détermine si le parametre est un nombre fini.
Renvoie false si ce n'est pas un nombre ou l'infini
positif ou infini négatif.
isFinite(240) //retourne true
isFinite("Un nombre") //retourne false
z isNaN
– détermine si le paramètre n’est pas un nombre
(NaN : Not a Number).
isNaN("un nombre") //retourne true
isNaN(20) //retourne false
Les fonctions prédéfinies (2)
Les fonctions
z parseFloat
z Définition
– analyse une chaîne de caractères et retourne un nombre
décimal.
– Renvoie NaN (Not a Number) si l'argument évalué n'est pas
un nombre
var numero="32";
var nombre=parseFloat(numero); // retourne 32
z parseInt
– Analyse une chaîne de caractères et retourne un nombre
entier de la base spécifiée.
– La base peut prendre les valeurs 16 (hexadécimal) 10
(décimal), 8 (octal), 2 (binaire).
//sans parametres
function bye()
{
alert('Bye!!!');
}
//avec parametres
function bye(mot1,mot2)
{
alert('Bye ' + mot1 + mot2 +'!!! ');
}
z Appel
bye();
bye("Harry", "Potter");
var nom = "Potter";
var prenom = "Harry";
bye(prenom, nom);
var note=15.5;
var arrondi = parseInt(note, 10); //retourne 15
3
Priorité croissante
Les opérateurs (1)
Les opérateurs (2)
+
Concatène des chaînes etudiant = "nom" + " prenom";
+
Additionne
somme = 2 + 5;
-
Soustrait
somme = 2 - 5;
*
Multiplie
somme = 2 * 5;
/
Divise
moyenne = somme / 3;
% Modulo
nbre_pair = nbre %2;
++ Incrémentede 1
compteur++;
--
Décrémente de 1
somme--;
Les tests
if(nom = = "")
alert('entrez votre nom');
else
alert ('bonjour' + nom);
Les boucles
for (i=1 ; i < 10 ; i++)
{
alert('i vaut ' + i);
}
x < 2 ; compteur < 101
'notte' < 'pomme'
>
Supérieur strict
x > 2 ; compteur > x
'chat' > 'chien'
<=
Inférieur ou égal
x <= 2 ;
>=
Supérieur ou égal
x >= 2 ;
= =
Opérateurs
logiques
Egal ( "identique à" ) x = = 2 ;
!=
Différent
&&
ET
(x >2 && x < 5)
||
OU
(x < -2 || x > 2)
x != 2 ;
z switch () case:
if(nom = = "")
alert('entrez votre nom');
z if( ){ } else{ }
z for ( ){ }
Inférieur strict
Les tests
z if( ){ }
if(nb == 1)
alert('nb vaut 1');
Opérateurs de
comparaison
<
var pays;
pays = prompt("votre pays d'origine=","France");
switch (pays)
{
case 'Allemagne':
alert("Guten Tag");
break;
case 'Italie' :
alert("Buon giorno");
break;
case 'France' :
alert("Bonjour");
break;
default:
alert("Je ne parle pas votre langue");
}
Les Objets (1)
z while( ){ }
var i = 1;
while (i < 10)
{
alert('i vaut ' + i);
i++;
}
z do{ }while( )
do
{
nom = prompt ('entrez votre nom');
}while(isFinite(nom));
– Les objets de JavaScript, sont soit des entités pré définies du langage,
soit créés par le programmeur.
z Le navigateur est un objet : navigator.
z La fenêtre du navigateur aussi : window.
z La page HTML est un autre objet : document.
z Un formulaire à l'intérieur d'un document, est aussi un objet.
z Un lien hypertexte dans une page HTML est encore un objet : link
– Les objets javascript peuvent réagir à des "Evénements".
– Tous les navigateurs ne supportent pas les mêmes objets
4
Les objets (2)
Les objets (3)
z L’opérateur New
z L’opérateur Typeof
zL'opérateur typeof renvoie une chaîne de
caractères indiquant quel est le type de l'opérande.
– L'opérateur new est utilisé pour créer une
nouvelle instance ou un nouveau type d'objet
défini par l'utilisateur ou de l'un des types d'objets
prédéfinis, Array, Boolean, Date, Function, Image,
Number, Object ou String.
nouvel_objet = new type_objet(parametres)
texte = new String("Une chaîne de caractère");
– Accès aux propriétés d’un objet
nouvel_objet.propriété
var longueur = texte.length;
L'objet String (1)
– Propriété :
z length : retourne la longueur de la chaîne de caractères;
– Méthodes :
z anchor( ) : formate la chaîne avec la balise <a> nommée;
z b( ) : formate la chaîne avec la balise <b>;
z big( ) : formate la chaîne avec la balise <big>;
z charAt( ) : renvoie le caractère se trouvant à une certaine
position;
z charCodeAt( ) : renvoie le code du caractère se trouvant à une
certaine position;
z concat( ) : permet de concaténer 2 chaînes de caractères;
z fromCharCode( ) : renvoie le caractère associé au code;
z indexOf( ) : permet de trouver l'indice d'occurrence d'un
caractère dans une chaîne;
L'objet Array
– Propriété :
z length : retourne le nombre d'éléments du tableau;
– Méthodes :
z concat( ) : permet de concaténer 2 tableaux;
z join( ) : converti un tableau en chaîne de
caractères;
z reverse( ) : inverse le classement des éléménts du
tableau;
z slice( ) : retourne une section du tableau;
z sort( ) : permet le classement des éléments du
tableau;
var i = 1; typeof i; //retourne number
var nom="toto"; typeof nom; //retourne string
var jour = new Date();typeof jour; //retourne object
var choix = true;
var cas = null;
typeof choix; //retourne boolean
typeof cas; //retourne object
typeof parseFloat; //retourne function
typeof Math; //retourne object
L'objet String
z italics( ) : formate la chaîne avec la balise <i>;
z lastIndexOf( ) : permet de trouver le dernier indice
d'occurrence d'un caractère;
z link( ) : formate la chaîne avec la balise <a> pour
permettre de faire un lien;
z slice( ) : retourne une portion de la chaîne;
z substr( ) : retourne une portion de la chaîne;
z substring( ) : retourne une portion de la chaîne;
z toLowerCase( ) : permet de passer toute la chaîne
en minuscule;
z toUpperCase( ) : permet de passer toute la chaîne
en majuscules;
L'objet Math
– Méthodes :
z abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos(
), atan( ), max( ), min( ), sqrt( ) sont les opérations
mathématiques habituelles;
z atan2( ) : retourne la valeur radian de l'angle entre l'axe
des abscisses et un point;
z ceil( ) : retourne le plus petit entier supérieur à un
nombre;
z floor( ) : retourne le plus grand entier inférieur à un
nombre;
z pow( ) : retourne le résultat d'un nombre mis à une
certaine puissance;
z random( ) : retourne un nombre aléatoire entre 0 et 1;
z round( ) : arrondi un nombre à l'entier le plus proche.
5
L'objet Date (1)
– Propriété : aucune;
– Méthodes :
z getFullYear( ), getYear( ), getMonth( ), getDay( ),
getDate(), getHours( ), getMinutes( ), getSeconds( ),
getMilliseconds( ): retournent respectivement l'année
complète, l'année (2chiffres), le mois, le jour de la
semaine, le jour du mois, l'heure, les minutes, les
secondes et les millisecondes stockés dans l'objet Date;
z getUTCFullYear( ), getUTCYear( ), … retournent
respectivement l'année complète, l'année (2chiffres), …
stockés dans l'objet Date en temps universel;
z setFullYear( ), setYear( ), … remplacent respectivement
l'année complète, l'année (2chiffres), … dans l'objet
Date;
Les objets du navigateur (1)
L'objet Date (2)
z setUTCFullYear( ), setUTCYear( ), … remplacent
l'année complète, l'année (2chiffres), … dans
l'objet Date en temps universel;
z getTime( ) : retourne le temps stocké dans l'objet
Date;
z getTimezoneOffset( ) : retourne la différence entre
l'heure du client et le temps universel;
z toGMTString( ), toLocaleString( ), toUTCString( ) :
convertissent la date en chaîne de caractère selon
la convention GMT, selon la convention locale ou
en temps universel;
Les objets du navigateur (2)
– L'objet le plus haut dans la hiérarchie est window qui
correspond à la fenêtre même du navigateur.
– L'objet document fait référence au contenu de la fenêtre.
– document regroupe au sein de propriétés l'ensemble des
éléments HTML présents sur la page. Pour atteindre ces
différents éléments, nous utiliserons :
z soit des méthodes propres à l'objet document, comme
la méthode getElementById( ), qui permet de trouver
l'élément en fonction de son identifiant (ID);
z soit des collections d'objets qui regroupent sous forme
de tableaux Javascript tous les éléments de type
déterminé.
L'objet window (1)
z Propriétés : (accessibles avec IE et N)
– closed : indique que la fenêtre a été fermée;
– defaultStatus : indique le message par défaut
dans la barre de status;
– document : retourne l'objet document de la
fenêtre;
– history : retourne l'historique de la session de
navigation;
– location : retourne l'adresse actuellement visitée;
– name : indique le nom de la fenêtre;
L'objet window (2)
– navigator : retourne le navigateur utilisé;
– opener : retourne l'objet window qui a créé la
fenêtre en cours;
– parent : retourne l'objet window
immédiatemment supérieur dans la hiérarchie;
– self : retourne l'objet window correspondant à la
fenêtre en cours;
– status : indique le message affiché dans la barre
de status;
– top : retourne l'objet window le plus haut dans la
hiérarchie.
6
L'objet window (3)
z Méthodes :
– blur( ) : enlève le focus de la fenêtre;
– close( ) : ferme la fenêtre;
– focus( ) : place le focus sur la fenêtre;
– moveBy( ) : déplace d'une distance;
– moveTo( ) : déplace la fenêtre vers un point spécifié;
– open( ) : ouvre une nouvelle fenêtre;
– print( ) : imprime le contenu de la fenêtre;
– resizeBy( ) : redimensionne d'un certain rapport;
– resizeTo( ) : redimensionne la fenêtre;
– setTimeout( ) : évalue une chaîne de caractère après un
Créer une fenêtre
NvelleFenetre=window.open (“URL”, “NomFenetre”, “caractéristiques”)
PetiteFenetre=window.open("forms.xhtml", "petite",
"width=200, height=200,toolbar=0, status=1, location=0,
directories=0, menubar=0, scrollbars=0, resizable=1");
Barre d’outils (toolbar)
certain laps de temps.
Barre de menu(menubar)
Adresse (location)
Ascenseur (scrollbar)
dossier (directories)
Barre d’état (status)
Autres action sur une fenêtre
L'objet document (1)
z Fenêtre active
z Propriétés :
– title : indique le titre du document.
– applets : retourne la collection d'applets java
PetiteFenetre.focus();
z Modifier le texte de la barre d’état
PetiteFenetre.status=“votre message”;
z Fermer
PetiteFenetre.close();
L'objet document (2)
– referrer : indique l'adresse de la page précédente;
z Méthodes :
– close( ) : ferme le document en écriture;
– open( ) : ouvre le document en écriture;
– write( ) : écrit dans le document;
– writeln( ) : écrit dans le document et effectue un
retour à la ligne
– getElementById(ID) retourne l’élément
correspondant à l’ID
présente dans le document;
– cookie : permet de stocker un cookie;
– forms : retourne la collection de formulaires
présents dans le document;
– images : retourne la collection d'images présentes
dans le document;
– links : retourne la collection de liens présents
dans le document;
Exemple
<h1 id="titre" style="color:#4488bb"> Titre 1</h1>
<p><input type="button" name="nom" value="Go!"
onclick="change();" /></p>
function change()
{
var entete;
entete = document.getElementById("titre");
document.getElementById("titre").innerHTML= "Titre 2";
//entete.firstChild.nodeValue= "Titre 2";
entete.style.color = "#bb4488";
}
7
L'objet navigator
z Propriétés
– nodeName : nom du noeud
– nodeType : 1 pour les balises HTML, 3 pour les
textes, 9 pour les documents
– nodeValue : le texte contenu dans le nœud texte
– innerHTML : contenu HTML d’un nœud
– firstChild : premier enfant
Les événements (1)
– Javascript détecte les actions de la souris sur les
boutons et ses déplacements
– onload
– onclick
– onmouseover
– onmouseout
– ...
– Il est possible d’appeler l’exécution de fonctions à
partir d’événements
z Propriétés
– appName : application (Netscape, Internet
Explorer)
–
–
–
–
–
–
appVersion : numero de version.
platform : système d’exploitation (Win32)
plugins
language
mimeTypes
JavaEnabled()
Les événements (2)
z Evénement onload
zSe produit lorsque une page web est chargée dans
la fenêtre du navigateur
zToute la page (y compris les images qu’elle
contient si leur chargement est prévu) doit avoir
été chargée pour qu’il ait lieu
zCet événement peut être associé à une image
seulement ; auquel cas, il se produit une fois son
chargement terminé
<body onload="alert('page chargée');">
Exemple de l'événement onload
</body>
Les événements (3)
Les événements (4)
z Evénement onclick
z Événement onmouseover
z Analogue à onClick sauf qu’il suffit que l’utilisateur
place le pointeur de sa souris sur l’un des éléments
précités (lien hypertexte, image, bouton, texte, etc.)
pour qu’il ait lieu
z Se produit lorsque l’utilisateur clique sur un élément
spécifique dans une page, comme un lien hypertexte,
une image, un bouton, du texte, etc.
z Ces éléments sont capables de répondre séparément à
cet événement
z Il peut également être déclenché lorsque l’utilisateur
clique n’importe où sur la page s’il a été associé non pas
à un élément spécifique, mais à l’élément body tout
entier
<input type=“button" Value="cliquer ici”
onclick="alert('Clic')” />
z Événement onmouseout
z A l’inverse de onMouseover, cet événement se
produit lorsque le pointeur de la souris quitte la zone
de sélection d’un élément.
<img src="image.gif" onmouseover="src='image2.gif';"
onmouseout="src='image.gif';" />
8
Nommage des objets-éléments
– Pour pouvoir manipuler un objet en javaScript, il doit
posséder un nom
– Pour pouvoir distinguer les différents objets-éléments d’une
page web, il suffit de leur donner un nom à travers de
l’attribut NAME
–
–
–
–
–
<Table Name=« tableau1 »>…
<Table Name=« tableau2 »>…
<Form id = « formulaire1 »>…
<Form id =« formulaire2 »>…
<Textarea Name =« texte1»>…
– Dans le cas où l’objet serait unique alors pas besoin de nom
pour désigner cet objet
– Exemple : le cas de body (une seul body par document),
document (un seul document par fenêtre)
Manipulation des objets
– Pour adresser un objet, il ne suffit pas de donner
son nom : il faut aussi préciser son « chemin
d’accès » dans l’arborescence de la structure
– Si le nom de la fenêtre est omis, le navigateur
utilisera par défaut la fenêtre courante
– Il est possible aussi d’omettre window.document :
l’adressage réussi puisqu’il n’y a qu’un seul objet
« document» dans la fenêtre
Exemple
Gérer les erreurs
z En xhtml, utiliser forms[…] ou getElementByID car les
formulaires n’ont pas de nom
z Sous Firefox
<form id="form0">
<input name="zone1" type="text" value="nom" /></form>
<form id="form1">
<input name="zone2" type="text" value="prenom" /></form>
<input type="button" name="modifier" value="modif"
onclick="change();" />
<script type="text/javascript">
function change(){
window.document.forms[0].zone1.value='Bonjour';
window.document.getElementById("form1").zone2.value='Sa
lut';}
</script>
– Javascript: dans la barre d'adresse du navigateur
– Ou Outils / Console JavaScript
z Sous IE
– Outils / Options Internet / Onglet Avancé
– Décocher Désactiver le débogueur de script
– Cocher Afficher une notification de chaque erreur
de script
9
