Scribd
Importer
75 vues93 pages

Cours 7 Javascript Bases

Le document présente JavaScript comme un langage de programmation orienté objet utilisé pour créer des sites web interactifs, permettant une gestion flexible et une meilleure convivialité. Il décrit ses caractéristiques, ses domaines d'application, ainsi que les principes de base tels que la déclaration de variables, les types de données, et les structures de contrôle. Enfin, il aborde les bonnes pratiques pour l'insertion de code JavaScript dans les pages HTML et les problèmes de compatibilité.

Transféré par

Abdou Zoubiri
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
75 vues93 pages

Cours 7 Javascript Bases

Le document présente JavaScript comme un langage de programmation orienté objet utilisé pour créer des sites web interactifs, permettant une gestion flexible et une meilleure convivialité. Il décrit ses caractéristiques, ses domaines d'application, ainsi que les principes de base tels que la déclaration de variables, les types de données, et les structures de contrôle. Enfin, il aborde les bonnes pratiques pour l'insertion de code JavaScript dans les pages HTML et les problèmes de compatibilité.

Transféré par

Abdou Zoubiri
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 93

Le langage JavaScript

Le web interactif

• Les sites interactifs :


• À l'intérieur des pages HTML, le concepteur du site insère des
programmes , ce qui permet d'accroître les possibilités des sites Web.
• Permet une plus grande souplesse dans la gestion du site, sa mise à
jour et ses fonctionnalités.
• Une plus grande convivialité: interaction avec le client
Fonctionnement d’un site interactif coté client
JavaScript
• JavaScript est un langage de programmation de scripts principalement
utilisé dans les pages web interactives côté client.
• C’est un langage orienté objet inspiré de nombreux langages dont Java
mais il reste très différent de celui-ci.
• Implémentation de la norme ECMA-262 (standard ECMAScript).
• Le langage a été créé en 1995 par Brendan Eich, membre de la fondation
Mozilla, pour le compte de Netscape Communications Corporation.
Caractéristiques
JavaScript est orienté objet :
• Les fonctionnalités de base du langage et l'accès au système hôte sont
fournis par des objets
• Un programme est un regroupement d'objets communicants.
• Un objet est une collection de propriétés et de méthodes
Caractéristiques-suite
La syntaxe du langage ressemble intentionnellement à la syntaxe Java, en
moins strict, afin de le rendre facile à utiliser. Par exemple:
• Il n'est pas obligatoire de déclarer le type d'une variable avant de l'utiliser,
• La déclaration d’une fonction ne doit pas obligatoirement précéder son
utilisation.
Domaines d’application
Généralement, JavaScript sert :
• À contrôler les données saisies dans des formulaires HTML
• À interagir avec le document HTML via l’interface DOM (Document Object
Model) fournie par le navigateur.
• À modifier le contenu des pages web par programmation avec la méthode
Ajax (Asynchronous Javascript And XML)
Interfaces de scripts (APIs)
• L'interface de script la plus utilisée est le DOM (développée par le W3C): le
Document Object Model permet aux programmes et aux scripts d'accéder et
de mettre à jour de manière dynamique le contenu, la structure et le style des
documents.
• XMLHttpRequest permet de charger du contenu supplémentaire à partir du
Web sans charger un nouveau document  composant central d’AJAX,
• Les API HTML 5 , comme l'API de géolocalisation qui rend l'emplacement
actuel de l'utilisateur disponible pour les applications basées sur un navigateur,..
Applications web
• Les scripts permettent de plus en plus aux développeurs de créer un pont
entre le navigateur et la plate-forme sur laquelle il s'exécute,
• Cette interactivité supplémentaire fait que les pages Web se comportent
comme une application logicielle traditionnelle. Ces pages Web sont
souvent appelées applications Web et peuvent être mises à disposition
directement dans le navigateur en tant que page Web ou peuvent être
empaquetées et distribuées sous forme de widgets .
Insertion du code dans une page HTML
• Directement dans les balises Dans la balise <script> ... </script>
n’importe où dans la page. <balise onEvenement="code JavaScript">

• Dans des fichiers externes: <script src="NomFichier.js"></script>

• Les scripts externes sont pratiques lorsque le même code est utilisé dans
de nombreuses pages Web différentes, ils ont l'extension de fichier .js .
Où placer le code JavaScript?
• Pas de règle générale.
• Le browser traite la page Html de haut en bas (y compris le code
JavaScript), donc trop de code JS au début peut retarder le chargement de
la page.
• Pour s'assurer que le script est chargé et prêt à fonctionner à toute
interaction utilisateur on prendra l'habitude de déclarer systématiquement
certains éléments (par exemple les fonctions) dans les balises d'en-tête soit
entre <HEAD> et </HEAD>.
Conseils
• Le placement de scripts dans des fichiers externes présente certains
avantages:
• Il sépare HTML et code
• Cela rend HTML et JavaScript plus faciles à lire et à maintenir
• Les fichiers JavaScript mis en cache peuvent accélérer le chargement des pages
• Placer des scripts au bas de l'élément <body> améliore la vitesse
d'affichage, car la compilation de scripts ralentit l'affichage.
Problème de compatibilité: l’élément « noscript »
• L’élément NOSCRIPT permet de fournir un contenu de remplacement
pour les navigateurs qui ne peuvent pas exécuter un script.
• Prévoir de mettre le code JavaScript au sein d’un commentaire HTML
<!-- --> afin qu’il ne soit pas affiché par un navigateur non compatible.
Exemple
<HEAD>
<SCRIPT>
//<!--
Ici code javascript
//-->
</SCRIPT>
<NOSCRIPT>Votre navigateur n’accepte pas le Javascript.</NOSCRIPT>
</HEAD>
Principes de base de JS
• Un script est une suite d’instructions
• Les instructions seront séparées par des « ; »
• Il est fortement déconseillé de séparer les instructions uniquement par des
retours à la ligne (même si la spécification l’accepte)
• Isoler le script (dans un fichier ou dans la balise script) afin de respecter
les standards du W3C. (Ex : l'usage du signe « > » pour la comparaison
serait sans cela considéré comme une balise mal fermée)
Les commentaires en JavaScript
• Portion de code non interprétée. Celle ci peut servir à simplifier la
lecture par un agent humain, à documenter, ou à désactiver
temporairement une ou plusieurs instructions (tests).
• Commentaire sur une ligne //commentaire
• Commentaire multi ligne /* Ceci est un commentaire multi ligne.
Il contient plusieurs Lignes */
Les variables
• Les variables JavaScript sont des conteneurs pour stocker des valeurs de
données.
• Le nom d'une variable ne peut être composé que de caractères
alphanumériques, "_" et "$".
• JavaScript est sensible à la casse (majuscules et minuscules)
Déclaration des variables
Les variables peuvent être déclarées de deux façons :
• Soit de façon explicite: avec les mots-clés var ou let.
Par exemple : var Num = 1;
• Soit de façon implicite: On écrit directement le nom de la variable suivi de
la valeur que l'on lui attribue.
Par exemple : Num = 1;
Portée des variables déclarées avec var
Une variable déclarée avec var sera:
• Globale, si elle est déclarée en dehors de toute fonction
• Locale, si elle est déclarée à l’intérieur d’une fonction
Portée des variables déclarées avec let
Une variable déclarée avec le mot-clé let aura une portée:
• Globale, si elle est déclarée à l’extérieur de tout bloc ou fonction
• Si elle est déclarée dans un bloc {} , elle sera locale à ce bloc
• Si elle est déclarée dans une fonction, elle sera locale à cette fonction
Déclarer une variable sans mot-clé
Une variable peut être déclarée de façon implicite, il suffit d'écrire le nom de
la variable suivie du caractère = et de la valeur à affecter :
Ex) chaine= "bonjour"
• Ces variables auront toujours une portée globale
• Même si une déclaration implicite est tout à fait reconnue par le
navigateur, il est plus rigoureux de déclarer les variables de façon explicite
avec le mot var ou let.
Déclarer une constante
• const permet de déclarer une constante. Son comportement est semblable
à let (portée locale au bloc de déclaration), sauf que:
• On doit impérativement lui attribuer une valeur
• Si elle est de type simple, on ne peut pas la réaffecter (erreur)
• Si elle est de type objet, l’objet est constant, mais ses propriétés peuvent
être modifiées.
Les types de base
• JS définit plusieurs types de base (nombres, chaines de caractères,
booléen)
• JavaScript a des types dynamiques. Cela signifie que la même variable peut
être utilisée pour contenir différents types de données
• JS est un langage faiblement typé: il ne faut pas déclarer le type de
données d'une variable.
Number
• Désigne toute valeur numérique qu'elle soit entière (ex : 5) ou à "virgule
flottante" (ex : 5.5 ).
• Il également possible d'écrire ces valeurs sur une autre base qu'en décimal,
comme par exemple en hexadécimal (0xa310) ou avec une notation
scientifique (exponentielle : 1 2 3 e 5 )
String
• Désigne toute chaîne de caractères, c'est à dire n'importe quel texte, composé
d'une suite de caractères, encadrée par de simples quottes ( ' ' ) ou doubles
quottes ( " " ).
• Vous pouvez utiliser des guillemets dans une chaîne, à condition qu'ils ne
correspondent pas à ceux entourant la chaîne
Boolean
• Désigne un élément booléen, ne pouvant prendre que deux valeurs : true
ou false.
• Les booléens sont souvent utilisés dans les tests conditionnels.
Undefined et Null
• En JavaScript, une variable sans valeur a la valeur undefined et également
le type undefined .
• Null représente ‘pas de valeur’ : on peut vider un objet en le mettant à
Null, mais il garde son type
• Undefined et Null sont égaux en valeur mais différents en type.
Tableaux JavaScript
• Les tableaux JavaScript sont écrits entre crochets.
• Les éléments de tableau sont séparés par des virgules.
• Les index de tableau commencent à zéro: le premier élément est [0], le
second est [1], etc.
Ex) var wilaya = ["Alger", "Oran", "Constantine"];
• Tous les tableau JS sont énumérés, il n’y a pas de tableaux associatifs.
Objets JavaScript
• Les objets JavaScript sont écrits avec des accolades.
• Les propriétés d'objet sont écrites sous la forme de paires nom: valeur,
séparées par des virgules.
Ex) var personne = {Nom:"John", Prenom:"Doe", age:25, };
Accès aux objets
• Les objets ont des méthodes (fonctions ou actions) et des propriétés
(caractéristiques, valeurs)
• On accède à une propriété de l’objet par la syntaxe
objet.propriété ou objet["propriété"]
• On accède à une méthode d'objet avec la syntaxe suivante:
objet.méthode()
Types de base ou type objet?
• Les types simples (chaines de caractères, tableaux, …) en JS peuvent être
aussi manipulés en tant qu’objets, si on utilise le mot clé New.
ex) new Array crée un objet tableau
• Par souci de simplicité, de lisibilité et de vitesse d'exécution, nous
préférerons l’utilisation des types simples plutôt que le type objets, en ce
qui concerne tous les types de base de JS.
Tester le type de Variable
• Pour tester le type d’une variable, nous utilisons le mot clé typeof suivi de
l'identifiant de la variable à tester.
• Cette commande renverra une chaîne de caractères contenant le type.
Nb: les types Array et Date sot considérés comme des objets, et donc typeof
retournera la valeur object. La propriété constructor permet de donner la fonction
constructeur du type de l’objet, et donc de différencier les types d’objets.
Conversions implicites de types
• Pendant un calcul, JavaScript peut modifier le type des variables afin de
pouvoir faire le calcul, mais ceci peut donner des résultats inattendus:
Exemples:
"5" + 2 retournera "52" car 2 est converti en une chaine "2"
"5" - 2 retournera 3 car "5" est converti en un nombre 5
"5" * "2" retournera 10 car "5" et "2" sont convertis en nombres
Modifier explicitement le type d’une variable
• En plus des conversions de type implicitement réalisées par JavaScript,
certaines fonctions permettent de modifier explicitement le type d’une
variable:
• String() convertit l’argument en chaine de caractères.
• Number() convertit son argument en nombre
• L’operateur monaire + permet aussi de convertir une variable en nombre:
var y = "5"; // y est de type string
var x = + y; // x est de type number
Les opérateurs
• Opérateurs logiques:
Un opérateur logique permet de réaliser un test entre deux valeurs booléennes
(true ou false) afin de renvoyer une autre valeur booléenne. Il s'agit du OU
logique " || ", du ET logique " &&", et de la négation logique " ! ".
• Opérateurs de comparaison:
Les opérations de comparaison renvoient aussi une valeur booléenne. En
revanche, les opérandes peuvent s'appliquer sur tous les types de base. Il s’agit de
(==, !=, <, <=, >, >=)
Les opérateurs-suite
• Opérateurs mathématiques:
Les opérations dites "mathématiques" comprennent les quatre opérations
arithmétiques usuelles (+,-, *, /) et le reste de division entière (%). Elles
s'appliquent sur des opérandes numériques, et renvoient une valeur numérique.
• Opérateurs d’affectation
= (affecter une valeur à la variable),
+=, -=, *=, /=, %=, &=, |=, …
L’opérateur +
• Lorsqu’il est appliqué à deux nombres, cet opérateur permet de les
additionner
• Appliqué à deux chaines de caractères, il permet de les concaténer
• Si vous utilisez cet opérateur sur un nombre et une chaîne de caractères, il
retournera une chaîne
Structures de contrôle
Comme en C ou Java:
• Tests conditionnels:
If , if else, if elseif else, switch,
• Boucles:
while, do while, for
• Contrôle de boucle:
break, continue,
L'instruction if
• L'instruction if permet d'exécuter une série d'instructions si une condition
est réalisée. La syntaxe de cette expression est la suivante :
if (condition réalisée) {
liste d'instructions
}
L'instruction if ... else
L'expression if ... else permet d'exécuter une autre série
d'instructions en cas de non-réalisation de la condition. La
syntaxe de cette expression est la suivante :
if (condition réalisée) {
liste d'instructions}
else {
autre liste d'instructions (en cas de non-réalisation de la condition).}
L'instruction if ... elseif ... else
L'expression if ... elseif ... else permet d'enchaîner une série
d'instructions conditionnelles et évite d'avoir à imbriquer des
instructions if:
if (condition réalisée) { Liste d'instructions }
elseif (autre condition réalisée) { Liste d'instructions }
...
else (dernière condition réalisée) { Liste d'instructions }
L'instruction switch
• L'instruction switch permet de faire plusieurs tests de valeurs sur
le contenu d'une même variable.. Sa syntaxe est la suivante :
switch (Variable)
{
case Valeur1: Liste d'instructions; break;
….
default: Liste d'instructions; break;
}
L’instruction switch (suite)
• Les parenthèses qui suivent le mot clé switch indiquent une expression
dont la valeur est testée successivement par chacun des "case".
• Lorsque l'expression testée est égale à une des valeurs de "case" la liste
d'instruction correspondante est exécutée.
• Le mot clé break indique la sortie de la structure conditionnelle.
• Le mot clé default définit une liste d'instructions qui sera exécutée si
l'expression n'est égale à aucune des valeurs de test.
La boucle WHILE
La syntaxe de cette expression est la suivante :
while (condition réalisée)
{ liste d'instructions };
Cette instruction exécute la liste d'instructions tant que la condition est
réalisée. La condition de sortie pouvant être n'importe quelle structure
conditionnelle.
L'instruction do..While
Dans le Do..While la condition est vérifiée à la fin de chaque itération, et
non au début. Cela signifie que la boucle est exécutée au moins une fois,
puisque la condition n'est testée qu'à la fin de l'itération.
Sa syntaxe est la suivante:
Do { instructions }
While (condition);
La boucle FOR
for (expr1; expr2; expr3)
commandes
• expr1 est évaluée au début de la boucle. Au début de chaque itération,
l'expression expr2 est évaluée. Si l'évaluation vaut TRUE, la boucle
continue et l'instruction est exécutée. Si l'évaluation vaut FALSE,
l'exécution de la boucle s'arrête. À la fin de chaque itération, l'expression
expr3 est exécutée.
CONTINUE, BREAK
• L'instruction continue placée dans la boucle, permet de sauter certaines
itérations (sans mettre fin à la boucle) sous une certaine condition.
• On l'associe généralement à une structure conditionnelle (test), sinon les
lignes situées entre cette instruction et la fin de la boucle ne seraient
jamais utilisées.
• L'instruction break permet de sortir d'une structure for, foreach, while, do-
while ou switch.
Les fonctions
En JavaScript, il existe deux types de fonctions :
• les fonctions propres à JavaScript. On les appelle des "méthodes". Elles
sont associées à un objet.
• Les fonctions utilisateur écrites par le programmeur.
Fonctions utilisateurs
Déclaration
function nomfonction(param1, ..., paramN) {// code JavaScript }
Valeur de retour
function nomfonction(param1, ..., paramN) {return expression ;}
Appel
nomVariable = nomfonction(exp1, ..., expN);
Les événements HTML
• Les événements sont des "choses" qui arrivent aux éléments HTML.
• Un événement HTML peut être une action du navigateur ou de
l'utilisateur:
• Le chargement d'une page Web HTML est terminé
• Un champ de saisie HTML a été modifié
• Un bouton HTML a été cliqué
• …
• En réponse à un événement, JS permet de déclencher une action.
Evénement Description
Click Lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément
affichable.
Load Lorsque la page est chargée par le navigateur.
Unload Lorsque l'utilisateur quitte la page.
MouseOver Lorsque l'utilisateur place le pointeur de la souris sur un élément
MouseOut Lorsque le pointeur de la souris quitte un élément.
Focus Lorsqu’un élément de formulaire a le focus c-à-d devient la zone d'entrée
active
Blur Lorsqu’un élément de formulaire perd le focus c-à-d que l'utilisateur clique
hors du champs et que la zone d'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 gestionnaires d'événements
• Pour être efficaces, il faut qu'à ces événements soient associées les actions
prévues à cet effet: C'est le rôle des gestionnaires d'événements.
• Syntaxe: onévénement="fonction()"
• Exemple:
Événement Click  le gestionnaire s’appellera onClick
onClick="alert('Vous avez cliqué sur cet élément')";
Objets Gestionnaires d'événement disponibles
Fenêtre onLoad, onUnload
Lien hypertexte onClick, onmouseOver, on mouseOut
Elément de texte onBlur, onChange, onFocus, onSelect
Elément de zone de texte onBlur, onChange, onFocus, onSelect
Elément bouton onClick
Case à cocher onClick
Bouton Radio onClick
Liste de sélection onBlur, onChange, onFocus
Bouton Submit onClick
Bouton Reset onClick
Utilisations
• Les gestionnaires d'événements peuvent être utilisés pour gérer et vérifier
les entrées utilisateur, les actions utilisateur et les actions du navigateur:
• Ce qui devrait être fait chaque fois qu'une page est chargée
• Choses à faire lorsque la page est fermée
• Action à exécuter lorsqu'un utilisateur clique sur un bouton
• Contenu à vérifier lorsqu'un utilisateur entre des données
• …
Objets prédéfinis en JavaScript
Les types de base
• Tous les types de base (nombre, chaine de caractères,…) sont traités
comme des objets, et ont des méthodes et propriétés prédéfinis.
• L’utilisation de new est déconseillée pour ces types
• Dans ce qui suit, nous donnerons un aperçu des méthodes et propriétés
de base des éléments selon leur type
Manipuler les chaines de caractères (1)
Méthode /propriété utilité
length renvoie la longueur d'une chaîne
search (chaine) recherche dans une chaîne la valeur spécifiée et renvoie la position
de la correspondance
slice (départ, fin) extrait une partie d'une chaîne et renvoie la partie extraite dans
une nouvelle chaîne.
toUpperCase (), Modifier la casse (majuscules/minuscules)
toLowerCase ()
replace ( ancVal, remplace une valeur spécifiée par une autre valeur dans une
nouvVal) chaîne:
String.trim () supprime les espaces des deux côtés d'une chaîne.
Manipuler les chaines de caractères (2)
Méthode /propriété utilité
charAt (position) renvoie le caractère à un index spécifié (position) dans une chaîne

la propriété [] Permet d’accéder à un élément de la chaine, comme s’il s’agissait


d’un tableau
split (séparateur) Convertit une chaîne en tableau en utilisant le séparateur
Si le séparateur est " ", retourne un tableau de caractères simples
IndexOf(), renvoient l'index de la première (resp. dernière) occurrence d'un
lastIndexOf() texte spécifié dans une chaîne
Remarque:
JavaScript compte les positions à partir de zéro. 0 est la première position d'une chaîne, 1 la
seconde, 2 la troisième ...
Manipuler les nombres
Méthode /propriété Rôle
toString () renvoie un nombre sous forme de chaîne
toFixed (nbDecimales) renvoie une chaîne, avec le nombre écrit avec un nombre spécifié de
décimales
toPrecision (nbChiffres) retourne une chaîne, avec un nombre écrit avec une longueur
spécifiée (nombre de chiffres significatifs=precision)
Number () convertir des variables JavaScript en nombres (si ce n’est pas
possible, retourne NaN)
parseInt () , parseFloat () analyse une chaîne et renvoie un nombre entier (resp. à virgule
flottante)
NaN indique qu'un numéro n'est pas un nombre légal.
Manipuler les tableaux (1)
Méthode /propriété Rôle
Length Retourne le nombre d'éléments du tableau.
sort() Retourne les éléments par ordre alphabétique (ne fonctionne
pas avec les nombres)
reverse() Inverse l'ordre des éléments (ne les trie pas). Utilisée avec
sort() pour trier en ordre inverse un tableau
map (myFunction) crée un nouveau tableau en effectuant une fonction sur
chaque élément du tableau (ne modifie pas le tableau initial)
forEach(myFunction) parcourt le tableau et exécute la fonction à chaque itération
join (séparateur) regroupe tous les éléments du tableau en une chaîne en
utilisant le séparateur.
Manipuler les tableaux (2)
Méthode /propriété Rôle

splice(posInsertion, Permet d’ajouter des éléments à une position donnée, avec ou


NbElts à Supprimer, sans écrasement
elemets_à_ajouter)
Tab1. concat(tab2) Concaténation des deux tableaux dans un nouveau tableau

filter (myFunction) crée un nouveau tableau avec des éléments de tableau qui
passent un test (myFunction)

reduce (myFunction) Permet de réduire (par la fonction myFunction) tout le


tableau en une valeur : la somme par exemple
Différences entre Array et Object
• En JS, les tableaux sont un type particulier d’objets, avec des indices
numériques.
• La fonction typeof sur un tableau retourne le type objet.
• JS ne supporte pas les tableaux associatifs, si vous avez besoin d’étiquettes
pour les différents champs, il faut utiliser un objet et pas un tableau.
• Éviter new Array(), non seulement il est inutile, mais il encombre le code
et retarde l’exécution.
L’objet Date
• La méthode new Date () sans arguments renvoie la date et l'heure
courante de l'ordinateur de l'utilisateur:
• Ces informations sont enregistrées par JavaScript comme chaine de
caractères sous le format de dates anglais : "Mon Dec 1 09:23:30 2014"
• Pour introduire une date et une heure déterminées :
variable=new Date("Jan 1, 2000 00:00:00");
• D’autres méthodes permettent d’accéder à un point précis de cette
variable.
Méthodes de l’objet Date
• getFullYear(): Retourne l'année
• getYear(): Retourne les deux derniers chiffres de l'année
• getMonth(): Retourne le mois sous forme d'un entier compris entre 0 et 11 (0 pour
janvier, …).
• getDate(): Retourne le jour du mois sous forme d'un entier compris entre 1 et 31.
• getDay(): Retourne le jour de la semaine sous forme d'un entier compris entre 0 et 6
(0 pour dimanche, 1 pour lundi,…)
• getHours(), getMinutes(), getSeconds()
L’objet Math
• Propriétés : Math.PI et Math.E
• Méthodes : atan(), acos(), asin(),tan(), cos(), sin(), abs(), exp(), log(), pow(x,y),sqrt(x)
• max(), min():val max (resp. Min) d’une liste d’arguments
• round()arrondit à l’entier le plus proche; ceil() arrondit vers l’entier supérieur;
floor()arrondit vers l’entier inférieur
random() renvoie un nombre aléatoire compris entre 0 et 1 (1 n’étant pas inclus)
Objets prédéfinis liés à
l’environnement
L’objet window
• L'objet window représente la fenêtre de navigation, et englobe les autres objets.
• C'est un objet dit "implicite", c'est à dire n'ayant pas besoin d'être spécifié.
• Notez que, dans votre page, toute variable JavaScript n'ayant pas été
déclarée sera par conséquent ajoutée comme attribut de window, et aura
donc une portée globale.
Propriétés et méthodes de l'objet window
• boites de dialogue: alert(), confirm(), et prompt()
• L'ouverture et la fermeture d'une fenêtre: ce sont open() et close().
• Self: renvoie à la fenêtre en cours.
Ouverture d’une fenêtre
• Ouvrir une fenêtre et écrire dedans:
open(url, name, options)
• Les options:
height : hauteur; width : largeur; left : position gauche; top : position
haute; fullscreen: plein écran
Exemple
<button onclick="myFunction()">nouvelle fenêtre</button>
<script>
function myFunction() {
var myWindow = window.open("", "", "width=200,height=100");
}
</script>
Les boites de dialogue ou de message
Javascript met à votre disposition 3 boites de message, ce sont toutes trois
des méthodes de l'objet window:
• alert()
• prompt()
• confirm()
Alert()
• Affiche une boite de dialogue dans laquelle est reproduite la valeur
(variable et/ou chaîne de caractères) de l'argument qui lui a été fourni.
Cette boite bloque le programme en cours tant que l'utilisateur n'aura pas
cliqué sur "OK".
Prompt()
• Affiche une boite de dialogue appelée boite d'invite, qui est composée
d'un champ comportant une entrée à compléter par l'utilisateur.
Confirm()
• Cette méthode affiche 2 boutons "OK" et "Annuler". En cliquant sur
OK, confirm() renvoie la valeur true et bien entendu false si on a cliqué
sur Annuler. Ce qui peut permettre, par exemple, de choisir une option
dans un programme.
La gestion des timers
• Méthodes associées à l’objet Window.
• Méthodes de gestion du timer :
• SetTimeout () et clearTimeout()
• setInterval () et clearInterval()
La méthode setTimeout ()
Syntaxe:
window.setTimeout(function, milliseconds);
La fonction spécifiée sera exécutée après un délai égal à la durée donnée en
millisecondes.
On peut arrêter le timer avant la fin du délai avec clearTimeout() en lui
donnant comme paramètre la valeur retournée par setTimeout()
La méthode setInterval ()
• La méthode setInterval () répète une fonction donnée à chaque intervalle
de temps donné.
window.setInterval(function, milliseconds);
• Pour arrêter les exécutions de la fonction spécifiée dans la méthode
setInterval (), on utilise la méthode window.clearInterval() qui prend en
entrée la valeur retournée par setInterval()
L'objet Navigator
Propriétés:
• navigator.appCodeName: Retourne le nom de code du navigateur.
• navigator.appName: Retourne le nom du browser ("Netscape", "Microsoft
Internet Explorer")
• navigator.appVersion: Renvoie des informations concernant la version du
navigateur, le système d'exploitation de l'utilisateur,…
• navigator.userAgent: Renvoie le header envoyé par le navigateur au serveur
(contient des informations comme le nom, la version et la langue du
navigateur)
Objets dans le document HTML
Objets et hiérarchie dans le code HTML
• Javascript va diviser une page web en objets et
vous permettre d'accéder à ses objets, d'en retirer
des informations et de les manipuler.
• Si vous chargez la page web ci-contre, cette page
s'affiche dans une fenêtre: C'est l'objet window.
• Dans cette fenêtre, il y a un document Html:
C'est l'objet document. Autrement dit l'objet
window contient l'objet document.
Hiérarchie des objets de l’exemple
• Dans ce document, on trouve un formulaire au sens Html: C'est l'objet
form.
• Dans ce formulaire, on trouve trois objets: Des boutons radio, un bouton
classique et une zone de texte. Ce sont respectivement l'objet radio, l'objet
bouton, l'objet texte. On obtient donc:
Accéder à un objet en JavaScript
• Pour accéder à un objet il faudra donner le chemin complet de l'objet en
allant du contenant le plus extérieur à l'objet référencé.
• Soit par exemple pour le bouton radio "semaine" :
(window).document.form.radio[0].
• Window est facultatif car il occupe la première place dans la hiérarchie.
Les propriétés des objets
• Une propriété est un attribut, une caractéristique, une description de
l'objet.
• Les objets JavaScript ont des propriétés personnalisées selon leur type.
• En Javascript, pour accéder aux propriétés, on utilise la syntaxe :
nom_de_l'objet.nom_de_la_propriété
L'objet Document
• Il s'agit de l’objet représentant la page web (plus précisément, la balise
<html>), et qui aura donc tous les attributs et fonctions permettant de
manipuler chaque éléments de cette page.
• Si vous souhaitez accéder à un élément dans une page HTML, vous devez
toujours commencer par l’accès à l'objet document.
• Nous utiliserons l'objet document pour accéder et manipuler le document
HTML.
Afficher du texte
• C’est une méthode de l’objet Document.
• L'appel de la méthode se fait selon la notation :
nom_de_l'objet.nom_de_la_méthode
• Pour appeler la méthode write() du document, on notera document.write()
Ex: document.write ("<h1>" + "Le résultat est " + "</h1>" + resultat)
Les formulaires
• Avec JavaScript, on peut accéder à chaque élément d'un formulaire pour,
par exemple, y lire ou écrire une valeur, noter un choix auquel on pourra
associer un gestionnaire d'événement...
• Rappelons qu’un formulaire est un élément Html déclaré par les balises
<FORM></FORM>.
• Un formulaire contient un ou plusieurs éléments que nous appellerons
des contrôles
Objet window

Objet document

Objet
Formulaire
Manipuler la valeur d’une zone de texte
• Soit un document contenant l'objet formulaire ‘form1’, qui contient le
champ de saisie ‘input’ et qui a comme valeur ‘value’
• Pour accéder à la valeur du champ de texte, on doit donner le chemin
complet:
document.form1.input.value;
• Javascript nous permet de lire ou d’écrire dans une zone de saisie.
Les boutons radio
• Les boutons radio sont utilisés pour noter un choix, et seulement un seul,
parmi un ensemble de propositions.
Propriétés:
• Name: indique le nom du contrôle. Tous les boutons portent le même nom.
• Index: l'index ou le rang du bouton radio en commençant par 0.
• checked : indique l'état en cours de l'élément radio
• Defaultchecked: indique l'état du bouton sélectionné par défaut.
• Value: indique la valeur de l'élément radio.
Les boutons case à cocher (checkbox)
• Les boutons case à cocher sont utilisés pour noter un ou plusieurs choix parmi
un ensemble de propositions.
Propriétés:
• Name: indique le nom du contrôle. Toutes les cases à cocher portent un nom
différent.
• Checked: indique l'état en cours de l'élément case à cocher.
• Defaultchecked: indique l'état du bouton sélectionné par défaut.
• Value: indique la valeur de l'élément case à cocher.
Liste de sélection
• Le contrôle liste de sélection vous permet de proposer diverses options sous la forme
d'une liste déroulante dans laquelle l'utilisateur peut cliquer pour faire son choix.
Propriétés:
• Name: indique le nom de la liste déroulante.
• Length: indique le nombre d'éléments visibles de la liste.
• selectedIndex indique le rang (à partir de 0) de l'élément de la liste qui a été
sélectionné par l'utilisateur.
• defaultselected indique l'élément de la liste sélectionné par défaut.
Reset et Submit
• Le contrôle Reset:
• permet d'annuler les modifications apportées aux contrôles d'un formulaire et de
restaurer les valeurs par défaut.
• Le contrôle Submit:
• Il a la tâche de transmettre toutes les informations contenues dans le formulaire à
l'URL désignée dans l'attribut ACTION de <FORM>.
• Une seule méthode est associée au contrôles Reset et Submit, c'est la
méthode onClick().
L’API HTML DOM

Vous aimerez peut-être aussi