JavaScript
JavaScript
JavaScript
• Le JavaScript (JS) est le langage à balises qui vient compléter le HTML: il
permet de rendre la page Web interactive (dynamique).
2
Utilisation du code JS dans une page Web
• Embarquer directement le code JavaScript dans un document HTML à l’intérieur de la
balise <script>.
– Si cette balise est placée dans la section head, le code JavaScript sera accessible avant
l’affichage de la page Web.
– Si cette balise est placée dans la section body, le code JavaScript sera accessible lors de
l’affichage de la page Web.
<script language="javascript"> //ou bien <script type="text/javascript">
alert("Le code JS est à l’intérieur de la balise <script>");
</script>
• Placer le code JavaScript dans un fichier externe de type texte qui doit être liés aux
documents HTML où sera exécuté ce code.
Fichier test.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
3
Exécution du code JS
• Le code Javascript est appelé par le pseudo protocole JavaScript: comme une valeur
de l’attribut href de la balise <a>.
<a href="javascript:alert('Par le pseudo-protocole javascript:');">
Cliquer pour exécuter le code Javascript
</a>
• Le code Javascript est exécuté suite à des événements déclenchés par l’interaction
des utilisateurs avec les documents HTML. Par exemple un clic souris sur les
éléments HTML ou lors de leurs survole par le pointeur de la souris.
4
Règles générales
• L’insertion des espaces peut s’effectué n’importe où dans le script, donc n’hésitons pas à les
utiliser pour éclaircir nos écritures.
• Pour rendre plus clair et plus compréhensible notre programme, on peut placer des
commentaires :
– En utilisant le double slash //: tout ce qui se trouve à droite est commentaire.
– En utilisant /* et */: pour écrire un commentaire sur plusieurs lignes doit être placé
entre
• Un nombre à virgule est séparé par un point (.) et non par une virgule (0.5 et non 0,5)
• Javascript est sensible à la casse: Nom est différente de nom et de NOM
• Une instruction simple est une expression qui se termine avec un point-virgule ; et un bloc
d’instructions est un ensemble d’instructions simples et/ou des blocs d’instructions
rassemblées entre une accolade ouvrante et une accolade fermente.
expression; // Instruction simple
{ // Bloc d’instructions
instruction(s); // une ou plusieurs instructions simples et/ou blocs
}
5
Déclaration et affectation de variables
• Les variables sont des contenants qui permettent de manipuler facilement des
valeurs numériques ou autres.
– Le mot-clé var permet de déclarer une ou plusieurs variables.
– Après la déclaration de la variable, il est possible de lui affecter une valeur. La déclaration
et affectation en même temps:
var nom, age; //déclaration de plusieurs variables
nom="toto"; //affectation d'une chaine de caractère
age=35; //affectation d'une valeur numérique
var prenom=titi; //déclaration et affectation
6
Opérateurs et expressions JavaScript
• Le langage JavaScript utilise les mêmes opérateurs que ceux utilisés par le langage C (opérateurs
arithmétiques, opérateurs de comparaison et opérateurs logiques). Il est de même pour les
expressions qui doivent être construites en suivant les mêmes règles syntaxiques que celles du
langage C.
Opérateur Effet
Opérateurs arithmétiques
+, *, -, /, %(modulo)
(10%4=2 c'est le reste de la division entière )
<=, >=, >, <, ==, != Opérateurs de comparaison
++, -- Opérateur d'incrémentation et de décrémentation
||, &&, ! Opérateurs logique
=, +=, *=, -=, /=, %= Opérateurs d'affectation (x+=4 est équivalente x=x+4)
7
Structures conditionnelles en JavaScript
• En Javascript, les structure de programmation conditionnelles sont les même
qu’on langage C :
8
Structures répétitives en JavaScript
• En Javascript, les structure de programmation répétitives sont les même qu’on
langage C :
Boucle dont la condition est testée au début : while
while (condition) {
Instruction(s); // simple ou bloc d’instructions exécuté si condition est vrai
}
La boucle for
for (initialisation; condition; expression_arithmetique) {
Instruction(s); // simple ou bloc d’instructions
}
9
Fonctions en JavaScript
• La déclaration de fonctions en Javascript se fait par utilisation du mot-clé function suivi d’un
blanc, du nom de la fonction et des paramètres de la fonction entre une parenthèse
ouvrante et une parenthèse fermente.
• Le corps d’une fonction est délimité par deux accolades {}. Il contient le code Javascript qui
est exécuté à chaque appel de la fonction et éventuellement une instruction return dans le
cas ou la fonction retourne une valeur.
function nomFonction(paramètres) {
// corps de la fonction
return (valeur);
}
• L’appel de la fonction se fait simplement par son nom. Les paramètres de la fonction sont
séparés par le caractère virgule, et ils sont passés à la fonction par valeur pour les types
primitifs et par adresse pour les objets. Il est de même pour la valeur retournée qui peut être
de type simple ou un objet.
nomFonction(par1, par2, …) ;
var v=nomFonction(par1, par2, …) ;
10
Objet en JavaScript
• Un objet est une structure complexe qui peut contenir des données
correspondantes aux propriétés de l’objet et des méthodes qui définissent son
comportement.
– Les propriétés d’objets sont simplement des variables de type primitif ou de type objet
– Les méthodes sont simplement des fonctions Javascript.
• La déclaration des objets se fait de manière similaire que la déclaration de fonctions, c’est à
dire par utilisation du mot-clé function :
function Objet() {
this.p; // une propriété p
11
Accès aux propriétés et méthodes d'un objet
• Pour accéder aux propriétés et méthodes d’un objet, on utilise le nom de l’objet suivi d’un
point et du nom d’une propriété ou d’une méthode. Dans ce dernier cas, il faut ajouter les
parenthèses ().
• Dans le corps des fonctions qui correspondent aux méthodes d’un objet, on utilise le mot-clé
this pour accéder à ses propriétés et ses méthodes.
• Il est possible de déclarer des objets permettant l’initialisation des propriétés au moment de
la création de nouveaux objets, dans ce cas il faut déclarer ces objets avec les paramètres
nécessaires.
function Objet(paramètre) {
this.p=paramètre; // une propriété initialisée par passage d’un paramètre
}
var A=new Object(valeur); // crée l’objet A et initialise sa propriété p
12
Objets prédéfinis en JavaScript
• Le langage Javascript offre deux types d’objets :
– Objets built-in : ce sont des objets prédéfinis par le langage Javascript : Date(), Math(),
Array(), String(), Image().
– Objets du navigateur : ce sont des objets crées automatiquement au moment de
l’ouverture de la fenêtre du navigateur window: navigator, document et history.
13
L'objet window
• L’objet window représente la fenêtre du navigateur. Il possède quelques propriétés de type simple,
comme l’attribut status, et d’autres attributs de type objet comme navigator, history et document. Il offre
quelques méthodes, dont les méthodes d’interaction permettant le dialogue homme/machine.
<script language="javascript">
alert("Bienvenu dans ma page Web !");
</script>
14
L'objet window
• Une autre méthode de l'objet window permettant de dialoguer avec l'utilisateur:
– prompt(message) : affiche une boîte de dialogue contenant le message passé en paramètre, une
zone de saisie de texte au clavier et deux boutons Ok et Annuler. Si on clique sur le bouton OK la
valeur entrée au clavier est retournée par cette fonction et si on clique le bouton Annuler la fonction
retourne la valeur null.
<script language="javascript">
prompt("Saisissez votre texte :", "Texte par défaut");
</script>
• L’objet window possède aussi la méthode open() qui permet de créer dynamiquement de
nouvelles fenêtres et la méthode close() pour fermer les fenêtres ouvertes.
15
L'objet document
• L'objet Document permet de manipuler tous les objets qui sont inclus dans le documents
HTML (images, textes, formulaires…) par leurs noms ou leurs ids.
• Il existe de nombreux méthodes (et attributs) qui s'appliquent sur l'objet document.
• Cet objet possède deux méthodes open() et close(). La première méthode permet l’ouverture
des documents affichés par des fenêtres pour permettre leur modification dynamique, et la
deuxième méthode permet leur fermeture.
16
Les méthodes de l'objet Document
• getElementById(): méthode qui retourne un objet HTML à partir de son id
<input type="text" id="toto">
<script type="text/javascript">
document.getElementById("toto").value="texte par défaut";
</script>
17
Propriétés de l'objet document
– bgcolor: Elle permet de changer dynamiquement la couleur de fond de la page
Web.
<a href="javascript:void(document.bgColor=’#339999’)">Fond bleu</a>
<a href="javascript:void(document.bgColor=’#66FF99’)">Fond vert</a>
18
Propriétés de l'objet Document
• innerHTML: est une propriété qui permet de modifier le contenu d’un paragraphe
ou d’insérer un objet dans la page.
<p id="paragraphe">texte texte</p>
<script type="text/javascript"> //ou bien <script language="javascript">
document.getElementById("paragraphe").innerHTML ="Texte changé";
</script>
//Navigateur affiche : Texte changé
19
Sous-objet style de l'objet Document
• Le sous-objet style permet de définir dynamiquement un attribut de style local style
sur la balise concernée.
<span id="citation">
Mieux vaut tard que jamais.
</span>
<script language="javascript">
document.getElementById("citation").style.color="#888888";
document.getElementById("citation").style.fontStyle="italic";
</script>
• Les attributs du sous-objets style sont les propriétés que nous avons déjà vu en
CSS. Si la propriété est composée, alors le tiret est enlevé et le caractère
immédiatement suivant est capitalisé; par exemple font-style devient fontStyle.
• La valeur à appliquer à l'attribut est la même que celle déclarée en CSS, juste que
cette fois, il faut la placer entre des guillemets, car elle est vue en Javascript en
tant que chaîne de caractères.
20
Les événements
• onClick: Exécute une action lors du clic sur un élément : bouton, champs, ...
<form>
<input type="text" name="champ_texte" value="valeur d’origine">
<input type="button" name="bouton" value="Changer"
onclick="champ_texte.value='valeur après clic'">
</form>
• onChange: Exécuter une action lorsqu’une option ou un champ est changé.
<form action="" name="formulaire">
<input type="text" name="valeur" value="Changez ce texte"
onchange="affich_newvalue.value='Valeur changée'">
<input type="text" name="affich_newvalue" value="">
</form>
• onBlur: L’action est exécutée lorsque l’élément perd le focus par exmple sortir
d’une zone de type "text" dans laquelle on est rentré.
<form>
<input type="text" name="champ_texte" value="Ma valeur d’origine"
onblur="champ_texte.value='J ai perdu le focus'">
</form>
21