Le Web dynamique JavaScript - Le script côté client M2105 - Ivan Madjarov
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Le Web dynamique
M2105
JavaScript
Le script côté client
Ivan Madjarov , IUT-R&T, 2002-2018
JavaScript - Le script côté client o Le modèle Client-Serveur, les scripts et les langages interprétés 1. Côté Client : HTML/CSS/JavaScript 2. Côté Serveur : PHP/ASP/JSP Développement Web IvMad, 2002-2018 2
JavaScript - Le langage o Le JavaScript est un langage de programmation de scripts introduit dans le code HTML5. o Le navigateur Web du côté client interprète le code HTML et le script de manière native. o La qualité d'interprétation dépend du type de navigateur (IE, Firefox, Chrome, Opera, Safari ou autre). o JavaScript est un langage objet et événementiel. o Le développeur peut créer des objets interactifs avec des propriétés et des méthodes et peut leur associer des actions en fonction d'événements déclenchés par le client (passage de souris, clic, saisie clavier) Développement Web IvMad, 2002-2018 3
JavaScript - Intégration
o Intégrer du code JavaScript dans une page HTML5
n dans le corps de la page
n dans la partie entête
…
n dans un événement d'objet.
onClick="alert('Vous avez cliqué')";
n appel d'un script au clique d'un lien :
Cliquez ici
n depuis un fichier externe :
Développement Web IvMad, 2002-2018 4
JavaScript - Intégrer
Javascript
alert("Bonjour tout le monde!");
TEST
Développement Web IvMad, 2002-2018 5
JavaScript - Appeler
JavaScript
function Charger() {
alert('Bienvenue sur le site');
}
Texte HTML dans le corps de la page Web...
(Test)
Développement Web IvMad, 2002-2018 6
JavaScript - Les Variables
o Une variable est déclarée par le mot clé var.
o Si la variable est initialisée, cela défini son type:
var prenom = "Marcel"; // type string
var age = 29; // type numérique
o Une concaténation transforme les types en chaîne de
caractères :
var accueil = "Bonjour " + prenom + " " + nom;
o De manière générale, les instructions JavaScript doivent
être séparées par un point-virgule (;).
Développement Web IvMad, 2002-2018 7JavaScript - Les Variables
o L'accessibilité d'une variable dépend de l’endroit où la
variable est affectée. On parle donc de la portée des
variables.
n GLOBALE : Une variable déclarée en dehors de toute fonction
peut être utilisée n’importe où dans le script.
n LOCALE : Une variable déclarée dans une fonction aura une
portée limitée à cette seule fonction, c’est-à-dire quelle est
inutilisable ailleurs.
o Pour déclarer une variable à l’intérieur d’une fonction et
la rendre GLOBALE celle-ci doit être déclarée sans le
mot clé var.
Développement Web IvMad, 2002-2018 8JavaScript - Les Variables
o En JavaScript il existe plusieurs types de données.
n La fonction typeof() permet d’obtenir le type de la donnée
n Les nombres :
var a = 36; alert(typeof(a)); // "number"
var a = "Salut"; alert(typeof(a)); // "string"
o String - chaines de caractères ou textes.
o Les booléens : var a = true; var b = false;
n Une donnée a toujours une valeur, elle est soit VRAIE soit
FAUSSE (true or false).
n Si var = 0, sa valeur est considérée comme FALSE, Si var = 1, ou
n’importe quelle autre valeur est considérée comme TRUE.
Développement Web IvMad, 2002-2018 9JavaScript - Les Instructions
o Le test conditionnel:
if (condition) { … } else { … }
o Les boucles:
For (initialisation; condition; opération) {
// Vos instructions
}
while (condition) {
// Les instructions de la boucle
}
o Un commentaire:
// commentaire sur une ligne
/* des commentaires sur plusieurs lignes */
Développement Web IvMad, 2002-2018 10JavaScript - Les Instructions
var saCouleur = prompt("Quelle est ta couleur?");
switch(saCouleur) {
case 'bleu' : alert("tu aimes le bleu");
break; // on a fini les instructions pour ce cas.
case 'blanc' : alert("tu aimes le blanc"); break;
case 'rouge' : alert("tu aimes le rouge"); break;
default : // Pour indiquer tous les autres cas
alert("ta couleur n\'est pas dans la liste");
// écrire une apostrophe à l’intérieur de deux quottes,
// nous devons mettre un "\" (un caractère d’échappement).
break;
}
Développement Web IvMad, 2002-2018 11JavaScript - Les Tableaux o En JavaScript, les tableaux sont des objets: var T = new Array(10); // Initialise un tableau de 10 el o Le premier élément est indexé à 0. o Il est possible de déclarer un tableau sans dimension fixe. La taille du tableau s'adapte en fonction du contenu (taille variable). o Pour accéder aux éléments du tableau: T[0] = 10; T[9] = 5; T[2] = "Toto"; o Des propriétés associées à l'objet : T.length Retourne le nombre d'éléments de l'objet Array. Développement Web IvMad, 2002-2018 12
JavaScript - Les Tableaux
o Un tableau, en JavaScript, est une variable pouvant
contenir plusieurs données indépendantes, indexées
par un numéro, appelé indice, qui assure l'accès aux
données.
Indice 0 1 2 3
Données donnée 1 donnée 2 donnée 3 donnée 4
o Tableaux associatifs
o indices personnalisés pour indexer les valeurs du
tableau.
Indice "Paul" "André" "Marie" "Jean"
Données 1000 500 1200 4500
Développement Web IvMad, 2002-2018 13JavaScript – La notion d’Objets
o Imaginez un arbre dans un jardin comportant une
branche sur laquelle se trouve un nid.
La hiérarchie d'objets est définie comme ceci :
o jardin
n arbre
o branche
n feuille
n nid
§ largeur: 20
§ couleur: jaune
§ hauteur: 4
Développement Web IvMad, 2002-2018 14JavaScript – La notion d’Objets Notation o Le nid sur l'arbre est donc désigné comme suit : jardin.arbre.branche.nid o Pour changer la couleur du nid : jardin.arbre.branche.nid.couleur = vert; Les objets du navigateur o L'objet de la racine est l'objet fenêtre (window) o Dans la fenêtre s'affiche une page (document ) o Cette page peut contenir plusieurs objets, comme des formulaires, des images, etc. window.document.title = "titre de la page web"; Développement Web IvMad, 2002-2018 15
JavaScript - Les Objets
o La déclaration se fait avec le mot-clé var.
o Pour créer un objet, il faut utiliser l'instruction new
suivi du type d'objet prédéfini.
o Le respect des majuscules/minuscule est obligatoire.
var datejour = new Date();
var unedate = new Date(a, m, j, h, m, s);
n Cela correspond à la création d'un type objet et
donne accès aux méthodes et propriétés prédéfinies
var a = datejour.getDay();
la variable alors contient le numéro du jour dans la semaine
(0 pour dimanche, ..., 6 pour samedi)
Développement Web IvMad, 2002-2018 16JavaScript - Les Objets
Javascript
var t = new Array("dimanche","lundi", "mardi",
"mercredi","jeudi", "vendredi", "samedi");
var datejour = new Date();
var a = datejour.getDay();
document.write("Le numéro du jour est "+a+"le jour de la semaine est "+t[a]+"");
[Test]
Développement Web IvMad, 2002-2018 17JavaScript - Les méthodes
o Une méthode est une fonction associée à un objet
o Appel d'une méthode:
o window.objet1.objet2.methode();
window étant l'objet de base du navigateur
o Exemple:
o une page HTML est composée d'un objet appelé
document.
o A l'objet document est associée une méthode
write(liste de paramètres).
n La méthode permet de modifier de façon dynamique
le contenu de la page.
o window.document.write("bonjour"); (Test, Txt)
o La méthode writeln() ajoute un retour chariot à la fin.
Développement Web IvMad, 2002-2018 18JavaScript - L'Objet
o Le mot-clé this
n Lorsqu'on fait appel à une fonction à partir d'un
objet (formulaire), le mot clé this fait référence à
l'objet en cours et se substitue à l'appel complet:
window.objet1.objet2...
n Ainsi, lorsque on passe l'objet en cours en paramètre
à une fonction, il suffit de faire nom_fonction(this)
pour obtenir l'objet dans la fonction.
n Pour manipuler les propriétés de l'objet il suffira de
taper this.propriete (où propriete représente le nom
de la propriété).
Développement Web IvMad, 2002-2018 19JavaScript - Les chaînes de caractères
o La longueur d'une chaîne
• Une chaîne de caractères en JavaScript est un objet
String sur lequel s'appliquent des propriétés et des
méthodes
• La propriété length indique le nombre de caractères
dans la chaîne
• var chaine="azerty"; 6JavaScript - Les chaînes de caractères
o MAJUSCULES / minuscules
var chaine = "Ceci est un texte";
var maj = chaine.toUpperCase();
var min = chaine.toLowerCase();
o Une sous-chaîne dans une chaîne
var domaine = "www.javascript.com";
var extension = domaine.substring( domaine.lastIndexOf(".") );
n substring extrait une sous-chaîne à partir de l'indice
retournée par lastIndexOf qui retrouve la dernière
occurrence de sous-chaine
Développement Web IvMad, 2005-2013
2002-2018 21JavaScript – L'objet String
Développement Web IvMad, 2005-2013
2002-2018 22JavaScript – L'objet String
Développement Web IvMad, 2005-2013
2002-2018 23JavaScript - Conversions
o Les fonctions de conversion
• transformer une chaîne en un entier ou un réel:
var chaîne = "3.14";
var entier = parseInt(chaîne);
var reel = parseFloat(chaîne);
o Est-ce un nombre
• Pour détecter qu'une chaîne a le format d'un nombre,
on applique la fonction isNaN(valeur) qui renvoie :
- true si valeur n'est pas un nombre
- false si valeur est un nombre
Développement Web IvMad, 2005-2013
2002-2018 24JavaScript – L'objet Math
o Utilisation:
x = Math.propriété; x = Math.méthode(paramètre);
Méthode/Param Valeur Méthode/param
E constante d'Euler sqrt() Racine carrée
LN2 logarithme naturel de exp() valeur exponentielle
2
LN10 logarithme naturel de max() le plus grand de deux
10 chiffres
PI constante PI min() le plus petit de deux
chiffres
abs() valeur positive pow() puissance exposant
cos() cosinus random() 0 ou 1 aléatoire
sin() sinus round() arrondi d'un nombre
Développement Web IvMad, 2005-2013
2002-2018 25JavaScript : L'objet Date
o L'objet Date est inclus de façon native dans JavaScript et
permet de manipuler les variables date et la gestion du
temps.
o Les dates en JavaScript sont exprimées en nombre de
millisecondes depuis le 1er janvier 1970.
o La syntaxe pour créer un objet date peut être:
var Nom_objet = new Date();
Elle permet de stocker la date et l'heure actuelle.
o La date stockée dans la variable contient le jour, le mois,
l'année, l'heure, les minutes, et les secondes sous la
forme d'une chaîne de caractères.
o Il est donc difficile d'accéder à un seul élément de l'objet.
Développement Web IvMad, 2002-2018 26JavaScript: Méthodes de l'objet Date
o Les méthodes de l'objet Date fournissent l'accès aux
éléments par la syntaxe suivante:
Objet_Date.Methode()
n getDate() : Récupère la valeur du jour du mois. Le retour est
un entier (entre 1 et 31) qui correspond au jour du mois;
n getDay() : Récupère la valeur du jour de la semaine pour la
date spécifiée. Le retour est un entier qui correspond au jour de
la semaine : 0 pour dimanche, 1 pour lundi, ...
n getTime() : Récupère le nombre de millisecondes depuis le 1er
janvier 1970. L'objet retourné est un entier.
o La méthode est utile pour convertir des dates, soustraire ou ajouter
deux dates, etc.
n toLocaleString() : Convertit une date en "string" au format
local, par exemple : 10/05/82 05:15:20
Développement Web IvMad, 2002-2018 27JavaScript: Méthodes de l'objet Date
Javascript - Date
var d1 = new Date(2015, 09-1, 10);
var d2 = new Date(2005, 09-1, 16);
var milD1 = d1.getTime();
var milD2 = d2.getTime();
document.write("Date-1: "+d1+" convertir en "+milD1+"
millisecondesDate-2: "+d2+" convertir en "+milD2+"
millisecondes");
Développement Web IvMad, 2002-2018 28JavaScript: Méthodes de l'objet Date
Dates
function intDates(frm) {
var sd1 = new Date(document.frm.ladate.value).getTime();
alert("1. "+new Date(document.getElementById("ladate").value)+"
2. millisecondes: "+sd1);
}
Entrez une date
Développement Web IvMad, 2002-2018 29JavaScript - les boîtes de dialogue o La méthode alert() permet d'afficher dans une boîte composée d'une fenêtre et d'un bouton OK un texte fournit en paramètre. Exemple. o La méthode confirm() est similaire à la méthode alert(), si ce n'est qu'elle permet un choix entre "OK" et "Annuler". Lorsque l'utilisateur appuie sur "OK" la méthode renvoie la valeur true. Elle renvoie false dans le cas contraire... Exemple. Développement Web IvMad, 2002-2018 30
JavaScript - les boîtes de dialogue o La méthode prompt() o La méthode prompt fournit un moyen simple de récupérer une information provenant de l'utilisateur. o La méthode prompt() requiert deux arguments : n le texte d'invite n Le texte par défaut dans le champ de saisie Développement Web IvMad, 2002-2018 31
JavaScript - Détecter mobile
function detectmob() {
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/i) ||
navigator.userAgent.match(/Windows Phone/i) )
{
return true;
} else { La propriété
return false; navigator.userAgent
} donne des informations
} sur le nom, la version et
la plateforme du
navigateur Web.
Développement Web IvMad, 2002-2018 32JavaScript - Les événements
o Les évènements sont des actions de l'utilisateur, qui
donnent lieu à une interactivité.
o Ainsi, il est possible d'associer des fonctions, des
méthodes à des événements:
n le passage de la souris au-dessus d'une zone, le
changement d'une valeur, …
o Le gestionnaire d'événement permet d'associer une
action à un événement.
n onEvenement="Action_Javascript_ou_Fonction()";
o Les gestionnaires d'événements sont associés à des
objets …
Développement Web IvMad, 2002-2018 33JavaScript - Liste des événements Développement Web IvMad, 2002-2018 34
JavaScript - Liste des événements o Un événement ne peut pas être associé à n'importe quel objet... il est évident qu'un événement OnChange ne peut pas s'appliquer à un lien hypertexte par exemple, ... o Objets auxquels on peut associer des événements: Développement Web IvMad, 2002-2018 35
JavaScript - Formulaires
o Utilisation du JavaScript pour valider les données
n Le JavaScript est un bon moyen d’effectuer une validation puissante
des données utilisateurs côté client avant l’envoi des données sur
serveur.
o A Noter : cela ne dispense en aucun cas la vérification de
l’intégrité des données côté serveur (en PhP par exemple).
n En effet, rien n'empêche un utilisateur de désactiver le JavaScript sur
son navigateur et cela pourrait alors poser des problèmes si les
données ne sont pas validées côté serveur.
o L'utilité de JavaScript est intéressante au sens où l'on peut
effectuer des tests poussés et vérifier et informer un
utilisateur en direct de la validité d'un champ ou non.
o Le calcul à partir des données de plusieurs champs devient
désormais possible.
Développement Web IvMad, 2002-2018 36JavaScript - Formulaires
o Les éléments de formulaire sont des objets JavaScript.
Soit le formulaire:
o Accéder au formulaire:
n Un formulaire est un élément de l'objet document
document.forms["general"]
document.forms[0]
document.general
n forms est le nom du tableau des formulaires de
document
Développement Web IvMad, 2002-2018 37JavaScript - Formulaires
o Accéder à un élément:
document.forms["general"].elements["champ1"]
document.forms["general"].elements[0]
document.forms["general"].champ1
n "elements" est le nom du tableau de tous les
éléments du formulaire.
o On peut atteindre un élément par :
− son nom,
− son indice,
n Utilisez le nom des éléments, plutôt que les indices.
Les noms sont indépendants du formulaire.
Développement Web IvMad, 2002-2018 38JavaScript – Manipuler des formulaires
o Manipuler les propriétés d'un élément
n Pour placer dans la zone de texte les mots "ça
marche", il faut juste écrire :
n document.forms["general"].elements["champ1"].
value="ça marche"
o Appeler une méthode sur un élément
n Pour donner le focus à un champ texte il faut appeler
la méthode focus() sur cet élément.
n document.forms["general"].elements["champ1"].
focus();
o Récupérer une valeur d'un champs:
var a = this.form.name.value;
Développement Web IvMad, 2002-2018 39Formulaires - this Le mot clé this représente l'objet JavaScript en cours. Développement Web IvMad, 2002-2018 40
Formulaires - input
o Les zones de texte
n La principale action sur une zone de texte est de
manipuler son contenu.
n Un formulaire "maform" possède un champ texte
"monchamp".
n On accède au contenu du champ par :
n document.forms["maform"].elements["monchamp"].value
n Il faut ajouter la propriété .value pour accéder au
contenu du champ!
n Alors, il faut penser aux opérations sur les chaînes de
caractères.
Développement Web IvMad, 2002-2018 41JavaScript - méthodes d'accès
o Méthode : window.document.getElementById(id)
n Retourne un objet HTML à partir de son id
o On peut ainsi modifier les input dans un formulaire:
function f() {
var obj = document.getElementById("champ_input");
alert('le champ a pour valeur: "'+obj.value+"'")
obj.value="autre valeur";
alert('maintenant il contient: "'+obj.value+'"');
}
[Tester]
Développement Web IvMad, 2002-2018 42JavaScript - modification
o Méthode getElementById avec attribut style pour
modifier la couleur de fond d'un div
#div1 { background-color : #2f9be7;
width : 12.500em; height : 12.500em; }
o [Tester]
Développement Web IvMad, 2002-2018 43JavaScript - méthodes d'accès
o Méthode : window.document.getElementsByName()
n Retourne un objet HTML à partir de son nom:
Fraise
Banane
Pomme
document.getElementsByName("fruit")[0].checked = true;
document.getElementsByName("fruit")[1].checked = true;
document.getElementsByName("fruit")[2].checked = true;
n Les cases sont repérées
et cochées par programmation: [Tester]
Développement Web IvMad, 2002-2018 44Formulaires - Les cases à cocher Détecter une case cochée. On utilise la propriété checked qui est de type booléen (true / false) pour vrai ou faux. Enseignant Etudiant Développement Web IvMad, 2002-2018 45
Formulaires - Les radio-boutons
La gestion des radio-boutons est assez complexe.
Windows 95
Windows 98
Windows NT
Linux
Autre
function testerRadio(radio) {
for (var i=0; iFormulaires - Les radio-boutons Développement Web IvMad, 2002-2018 47
Formulaires - SELECT
La structure d'un élément de type Nom Nom de la liste
SELECT (voir Tableau)
selectedIndex Indice de la ligne
Pour récupérer l'indice la ligne sélectionnée
(ligne 1 : indice=0)
sélectionnée :
this.form.elements['liste'].selectedIndex options Tableau des lignes
Pour récupérer le nombre de lignes :
this.form.elements['liste'].options.length length Nombre de lignes
Pour récupérer la valeur de la ligne
sélectionnée: value Valeur d'une ligne
this.form.elements['liste'].options[this.for
m.elements['liste'].selectedIndex].value text Libellé d'une ligne
Développement Web IvMad, 2002-2018 48JavaScript - Changer un contenu
Changer un contenu
function uneFonction() {
x = document.getElementById("demo"); // Trouver l'élément
x.innerHTML = "Bonjour de JavaScript!"; // Changer le contenu
} // innerHTML accède au contenu
JavaScript
JavaScript peux changer le contenu d'un paragraphe HTML.
Clic
[Test]
Développement Web IvMad, 2002-2018 49JavaScript - Charger dynamiquement
o Pour charger dynamiquement une page HTML à partir
d'une fonction JavaScript on utilise la propriété
document.location.href
o Le code suivant redirige vers une page HTML au
lancement de la première:
function charger() {
document.location.href="page.html";
}
Développement Web IvMad, 2002-2018 50Formulaires - Calcule
Exercice
function controle(form1) {
var inpt = document.form1.input.value;
var tsts = parseFloat(inpt);
alert(inpt+" usd = "+(tsts*0.835)+" eur");
}
Donnez une somme en USD :
Développement Web IvMad, 2002-2018 51Formulaires - Contrôler la saisie
o Un nombre:
o Il peut être utile de vérifier que la saisie dans un
champ de formulaire est bien un nombre : saisie de
quantités, de prix...
o Soit nb le champ à tester. Si !(isNaN(nb)) retourne
true, alors nb est un nombre.
function CheckNombre(nb) {
// retourne true si c'est un nombre
// et false sinon
return !(isNaN(nb));
}
Développement Web IvMad, 2002-2018 52Formulaires - Contrôler la saisie
o Valider un formulaire par JavaScript :
n Il est souvent utile de vérifier la saisie d'un formulaire
avant de le valider.
n L'idéal est de créer un bouton (de type "button" et
pas "submit") qui appelle une fonction JavaScript qui
contrôle la saisie et soumet ou non le formulaire.
Adresse mail
Développement Web IvMad, 2002-2018 53Formulaires - Contrôler la saisie
o Pour vérifier qu'un mail est valide, il suffit de tester la
présence de @ et du point.
function ValiderMail(formulaire) {
if (formulaire.mail.value.indexOf("@")Formulaires - Contrôler la saisie
o Pour vérifier la validité de deux champs qui contiennent deux
adresses mail apriori identique on peut utiliser la méthode
Str1.LocalCompare(Str2);
function ComparerMail() {
var M1 = "iv@iut.fr";
var M2 = "iv@iut.net";
if (!(M1.localeCompare(M2))) {
alert("Equivalence des adresses mail")
} else {
alert("Différence dans les adresses mail");
}
} /* 0 identique; -1 Str1 Str2 */
Développement Web IvMad, 2002-2018 55Les pop-ups
o Le mot popup peut être traduit par fenêtre
surgissante. (souvent bloqué par les navigateurs)
o L'événement est déclenchée par l'utilisateur (clic,
ouverture de site, minuterie, ...) via un code
JavaScript.
o L'objet window possède la méthode open qui prend
3 paramètres chaînes de caractères :
window.open( page [,nom] [,options] );
− page contient l'adresse de la page à afficher.
− nom du popup qui va être ouvert.
− options paramétrage du popup.
Développement Web IvMad, 2002-2018 56Les pop-ups – 'page' et 'nom'
o Pour ouvrir un popup sur un lien, voici la syntaxe
HTML :
Ouverture popup basique
o Déclaration la fonction popup() :
function popup(page) {
window.open(page);
}
Développement Web IvMad, 2002-2018 57Les pop-ups – 'options' La chaîne d'options d'affichage: Développement Web IvMad, 2002-2018 58
Les pop-ups – 'options'
Ouverture d'une fenêtre popup en fonction
function ShowWindow(cURL) {
var ControlWindow;
ControlWindow = window.open(cURL, "RFC", "status,
height=480, width=640, status=no, scrollbars=yes,
resizable=yes, toolbar=0");
if (parseInt(navigator.appVersion) >= 3) {
ControlWindow.focus();
}
}
[Test]
Développement Web IvMad, 2002-2018 59JavaScript - Définir un objet
var person = new Object();
person.firstname = "John";
person.lastname = "Despere";
person.age = 45;
person.eyecolor = "blue";
document.write(person.firstname + " is "
+ person.age + " years old.");
Développement Web IvMad, 2002-2018 60Vous pouvez aussi lire
