Techniques du web
PHP Hypertext Preprocessor
JAVA SCRIPT
LST Informatique
FST 2016-2022
Mohamed OUZARF
LST INFO
1
javascript
javaScript est interprété par le navigateur
JAVA est un langage qui doit être compilé : il faut passer par la JVM
(Java Virtual Machine) afin qu’il soit interprété par la “machine” ensuite.
Just Another Vague Acronym
Comment fonctionne JavaScript ?
À l'intérieur du langage HTML, il existe des mécanismes (on parle de méthodes
et de propriétés) qui permettent de lire, modifier, mettre à jour et supprimer des
éléments du document examiné.
Cet ensemble de mécanismes est appelé DOM (pour Document Object Model).
Pour JavaScript, il existe un nombre important de frameworks et de librairies.
Depuis l’arrivée de NodeJS, JavaScript permet le développement d’applications côté serveur,
2
Introduction
⚪
Javascript est un langage de scripts coté client; qui incorporé aux
balises Html, permet:
⚪
d'améliorer la présentation et l'interactivité des pages Web.
⚪
d’étendre les capacités du langage et rendre dynamique un site
internet développé en HTML.
⚪
de développer de véritables applications fonctionnant exclusivement
dans le cadre d'Internet.
Le Javascript est un langage de script simplifié orienté objet dont la
syntaxe est basée sur celle du Java.
⚪
En JS tout est objet. Tous les types héritent du type Object.
3
HTML et JavaScript
⚪
la page HTML devra TOUJOURS contenir les deux balises spécifiques et
indispensables
<script language="JavaScript">
............
</script>
⚪
Le code JavaScript s’intègre de deux manière avec le code HTML
● 1. Insertion directe dans le code HTML
⚪ Le code JavaScript s'insère le plus souvent dans la page HTML elle même.
●
2. Insertion comme un module externe
LST info
4
HTML et JavaScript
Insertion directe dans le code HTML
<!DOCTYPE html>
<html>
<head>
<title>Premier script JavaScript !</title>
<meta charset='utf-8'>
</head>
<body>
<script>
alert('Ceci est affiché en JavaScript !');
</script>
</body>
</html>
Rq le <script> juste avant fermeture de </body>
5
HTML et JavaScript
Code Javascript dans un fichier
Le code Javascript est écrit dans un fichier externe dont l'extension est .js
Dans le fichier HTML, on utilise la balise <script> et son attribut
src=…
pour spécifier le fichier externe
LST info
6
La structure d’un script en JavaScript
⚪
⚪
La syntaxe du langage Javascript s'appuie sur le modèle de Java et C
Règles générales
• Chaque commande doit être terminée par un point virgule (;).
• Un nombre à virgule est séparé par un point (.) et non par une
virgule
• Le langage Javascript est sensible à la casse
• Il existe deux méthodes permettant d'intégrer des commentaires à
vos scripts.
● Placer un double slash (//) devant le texte
● Encadrer le texte par un slash suivi d'une étoile (/*) et la même
séquence inversée (*/)
LST info
7
Entrée et sortie de données avec JavaScript
⚪
⚪
3 types de boites de messages peuvent être affichés en utilisant
Javascript : Alerte, Confirmation et Invite
● Méthode alert()
⚪ sert à afficher à l’utilisateur des informations simples de type
texte. Une fois que ce dernier a lu le message, il doit cliquer sur
OK pour faire disparaître la boîte
● Méthode confirm()
⚪ permet à l’utilisateur de choisir entre les boutons OK et Annuler.
● Méthode prompt()
⚪ La méthode prompt() permet à l’utilisateur de taper son propre
message en réponse à la question posée.
La méthode document.write permet d’écrire du code HTML dans la
page WEB
Console.log() du browser
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> une page simple </title>
</head>
<body>
<script>
Alert("Bonjour");
</script>
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script language="javascript">
console.log("bonjour console");
</script>
<script>
alert("Welcome to my page!");
</script>
console.log("bonjour console");
</body>
</html>
<script>
var user_name;
user_name = prompt("Quel est votre nom ? ");
document.write ("votre nom est : " + user_name );
</script>
<script>
if(confirm("Quel bouton allez-vous choisir ?"))
document.location.href="http://localhost";
</script>
</body>
dossiers :
js/console.html
9
js/methods/alert
Les variables
⚪
Déclaration et affectation
●
●
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 par l'intermédiaire du signe d'égalité (=).
//Déclaration de i, de j et de k.
var i, j, k;
//Affectation de i.
i = 1;
//Déclaration et affectation de prix.
var prix = 0;
//Déclaration et affectation de caractere
var caractere = ["a", "b", "c"];
10
Les variables
Il existe trois types de déclarations de variable en JavaScript.
var On déclare une variable, éventuellement en initialisant sa valeur.
let On déclare une variable dont la portée est celle du bloc courant,
éventuellement en initialisant sa valeur.
const On déclare une constante nommée, dont la portée est celle du
bloc courant, accessible en lecture seule.
LST INFO
11
Les variables
⚪
La portée
●
les variables peuvent être globales ou locales.
●
Une variable globale est déclarée en début de script et est
accessible à n'importe quel endroit du programme.
●
Une variable locale est déclarée à l'intérieur d'une fonction et n'est
utilisable que dans la fonction elle-même.
12
Les variables
⚪
Contraintes concernant les noms de variables
● Les noms de variables ne peuvent contenir que des lettres, chiffres,
ou le caractère "_" (underscore)
● Mon_Prenom est un nom valide
● Les caractères spéciaux et accentués sont interdits (é, à, ç, ï, etc..)
● Mon_Prénom n'est pas un nom valide. Il y a un caractère
accentué.
● Les majuscules et les minuscules ont leur importance.
● MonPrenom est différent de Monprenom.
● Un nom de variable ne peut contenir d'espaces.
● Mon Prenom n'est pas un nom de variable correct. Il y a
un espace.
● Les mots réservés JavaScript ne peuvent être utilisés comme noms
de variable.
LST info
13
Les variables
⚪
⚪
Le type d’une variable dépend de la valeur stockée dans cette variable.
Pas de déclaration de type.
⚪ Exemple:
var maVariable = ‘ Philippe ’; maVariable =10;
trois principaux types de valeurs
⚪ String
⚪ Number : 10^-308 <nombre < 10^308
⚪ Les nombres entiers
⚪ les nombres décimaux en virgule flottant
● 3 valeurs spéciales :
⚪ Positive Infinity ou +Infinity (valeur infini positive)
⚪ Négative Infinity ou –Infinity (valeur infinie négative)
⚪ Nan (Not a Number) habituellement générée comme
résultat d’une opération mathématique incohérente
⚪ Boolean
● deux valeurs littérales : true (vrai) et false (faux).
LST info
14
Valeurs spéciales
⚪
JavaScript inclut aussi deux types de données spéciaux :
⚪
Null : possède une seule valeur, null, qui signifie
l’absence de données dans une variable
⚪
Undefined : possède une seule valeur, undifined. Une
variable dont le contenu n’est pas clair car elle n’a jamais
stocké de valeur.
LST info
15
Vérification de type de variables
par usage de
TYPEOF
Conversion de type de variable
Parseint()
Parsefloat()
String()
LST INFO
16
Les événements et les fonctions
●
Javascript est dépendant des événements
⚪
se produisent lors d'actions diverses sur les objets d'un
document HTML.
● onLoad;
● onClick
● onMouseover
● onMouseout
● ...
●
Il est possible de baser l’exécution de fonctions sur des
événements
LST info
17
Les événements
⚪
Evénement onLoad
⚪
Se produit lorsque une page web est chargée dans la
fenêtre du navigateur
⚪ Toute 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.
⚪ Cet événement peut être associé à une image seulement ;
auquel cas, il se produit une fois son chargement terminé
<HTML><BODY onLoad="alert('page chargée');">
Exemple de l'événement onLoad
</BODY></HTML>
LST info
18
Les événements
⚪
Événement onClick
⚪
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.
⚪ Ces éléments sont capables de répondre séparément à cet
événement
⚪ 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
<HTML><BODY>
<INPUT TYPE="Button" Value="cliquer ici”
onClick="alert('Clic')">
</BODY></HTML>
19
Les événements
⚪
Événement onMouseover
⚪
⚪
Analogue à onClick sauf qu’il suffit que l’utilisateur place
le pointeur de sa souris sur l’un des éléments (lien
hypertexte, image, bouton, texte, etc.) pour qu’il ait lieu
Événement onMouseout
⚪
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.
LST info
20
Changement d'images
Avec le gestionnaire d'événement onmouseOver, on peut prévoir
qu'après le survol d'un image par l'utilisateur,
une autre image apparaisse
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript1.1">
function lightUp() {
document.images["homeButton"].src="button_hot.gif"
}
function dimDown() {
document.images["homeButton"].src="button_dim.gif"
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseOver="lightUp();" onmouseOut="dimDown();">
<IMG SRC="button_dim.gif" name="homeButton" width=100 height=50 border=0>
</A>
</BODY>
</HTML>
Les fonctions
Une fonction correspond à
un bloc de code pour
effectuer une tâche précise.
La fonction alert() a été
créée afin d’afficher des
messages dans des boîtes
de dialogue.
<!DOCTYPE html>
<html>
<head>
<title>Les fonctions en JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<h1>Les fonctions</h1>
<script>
function multiplication(x, y) {
return x * y ;
}
var resultat = multiplication(5, 10);
resultat += 2
alert(resultat);
</script>
</body>
</html>
Les fonctions prédéfinies
⚪
isFinite
● Détermine si le paramètre 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
⚪
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
LST info
23
Les fonctions prédéfinies
⚪
parseFloat
⚪ analyse une chaîne de caractères et retourne un nombre décimal.
⚪ Si l'argument évalué n'est pas un nombre, renvoie NaN (Not a
Number).
var numero="125";
var nombre=parseFloat(numero); //retourne le nombre 125
⚪
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).
var prix=30.75;
var arrondi = parseInt(prix, 10); //retourne 30
LST info
24
Le DOM HTML
Document Object Model
Le DOM est une interface de programmation qui nous permet de
manipuler le code HTML d’une page de façon dynamique en
utilisant le langage JavaScript.
Le DOM HTML est un standard de programmation reconnu par
tous et considère les éléments HTML comme des objets. Ainsi,
nos éléments HTML vont posséder des propriétés et des
méthodes.
LST INFO
25
Le DOM HTML
L’objet document et ses méthodes
Il existe différentes méthodes de l’objet Document qui constituent
autant de façons différentes d’accéder à un ou plusieurs éléments
HTML :
La méthode getElementById() ;
La méthode getElementsByTagName() ;
La méthode getElementsByClassName() ;
La méthode querySelector() ;
La méthode querySelectorAll().
26
Le DOM HTML
La méthode getElementById() de l’objet document
La première méthode, getElementById(), va nous permettre de cibler un
élément HTML possédant un attribut id en particulier.
<body>
<h1 id="gros_titre">Le DOM</h1>
<p>Du texte et <a href="http://localhost">un lien</a></p>
<script>
/*On utilise la méthode getElementById de
l'objet document.
*On enferme le résultat renvoyé dans
une variable "titre" */
var titre = document.getElementById('gros_titre');
alert(titre);
</script>
</body>
var titre = document.getElementById('gros_titre').style.color = "red";
Le DOM HTML
Ref: https://www.youtube.com/watch?v=0-bBV_S-fgY
28
innerHTML
Le DOM HTML
textContent
Accéder au contenu des éléments HTML et au texte
On utilise la propriété innerHTML sur le résultat renvoyé par les méthodes
<body>
<h1 id="gros_titre">Découverte du DOM HTML</h1>
<p class="para">Du texte et <a href="http://localhost">un lien</a></p>
<p class="para">Un deuxième paragraphe</p>
<script>
var h = document.getElementById('gros_titre').innerHTML;
alert(h);
</script>
</body>
</html>
var h = document.getElementById('gros_titre').innerHTML= "Hello World";
var h = document.getElementById('gros_titre').innerHTML= "<p> Hello World </p>";
var h = document.getElementById('gros_titre'). textContent = "<p> Hello World </p>";
HTML DOM getElementsByName() Method
document.getElementsByTagName
⚪
Renvoie une HTMLCollection des
éléments avec le nom de balise donné.
Pourquoi faire
?
LST INFO
30
Accéder directement à des types d’éléments
innerHTML
textContent
<body>
<h1 id="gros_titre">Le DOM</h1>
<p class="para">Du texte et <a href= »localhost">un lien</a></p>
<p class="para">Un deuxième paragraphe</p>
<script>
/*La différence entre innerHTML et textContent*/
var p = document.querySelector('.para').innerHTML;
var t = document.querySelector('.para').textContent;
alert('Contenu récupéré avec innerHTML : \n' + p +
'\n\nContenu récupéré avec textContent : \n' + t);
</script>
https://www.youtube.com/watch?v=54sGFfQ_s7c&list=PLKV6WevXj-lWK9
qi0nL9UotqzAF119f_K&index=12
Le DOM HTML
Accéder directement à des types d’éléments
innerHTML
textContent
<body>
<h1 id="gros_titre">Le DOM</h1>
<p class="para">Du texte et <a href="http://localhost">un lien</a></p>
<p class="para">Un deuxième paragraphe</p>
<script>
var titre_page = document.title;
var page = document.body;
var lien = document.links;
alert('Contenu de titre_page : ' + titre_page +
'\nContenu de page : ' + page +
'\nContenu de lien : ' +lien);
</script>
Le DOM HTML
Modifier du contenu HTML
//On modifie le contenu textuel de notre élément h1 avec innerHTML
document.getElementById('gros_titre').innerHTML = 'Titre modifié !';
// modifier le CSS
document.getElementById('gros_titre').style.color = ’red';
Créer, ajouter et insérer des éléments HTML
Modifier ou supprimer des éléments HTML
Naviguer dans le DOM
Manipulation du DOM
Possible de créer des éléments avec : document.createElement()
Pour modifier l’arbre DOM :
Ajout : appendChild(), insertBefore()
Suppression : removeChild()
Remplacement : replaceChild()
https://www.tutorialstonight.com/javascript-create-element
https://www.w3schools.com/jsref/dom_obj_text.asp
https://www.javascripttutorial.net/javascript-dom/javascript-appendchild/
34
LST INFO
36
Les objets en JavaScript
Il existe 2 façons de créer des objets
1
2
LST INFO
Les objets en JavaScript
Il existe 2 façons d’accéder aux objets
‘
‘
<script>
var voiture =
{
couleur:
'bleu',
demarrage: function()
{ return 'tourner la clé'; }
}
alert(voiture.demarrage() + ' pour demarrer la voiture ' + voiture.couleur + ' ' );
</script>
Les objets en JavaScript
<!DOCTYPE html>
<html>
<body>
<p id="demo">Display the result here.</p>
<script>
var person = {name:"John", age:50};
document.getElementById("demo").innerHTML = person.name + " is " + person.age + "
years old.";
</script>
</body>
</html>
LST INFO
39
Les objets en JavaScript
L’objet Date
⚪
L’objet Date( )
Objet très important, nous permet d’accéder à la date système de
l’utilisateur final.
⚪
Déclaration
var date= new Date( );
⚪
Méthodes:
getDate( ): permet de récupérer le numéro du jour du mois(de 1 à 31).
getDay( ): permet de récupérer le numéro du jour de la semaine (de 0 à 6).
getMonth(): permet de récupérer le numéro du mois (de 0 à 11).
getYear(): permet de récupérer l’année (sur 4 chiffres).
getHours(): permet de récupérer l’heure (de 0 à 23).
getMinutes():permet de récupérer les minutes (de 0 à 59).
getSeconds():permet de récupérer les secondes (de 0 à 59).
⚪
Les méthodes de l’objet Date( ) citées plus haut et qui commencent avec
“get” sont utilisées pour lire à partir d’une date donnée. Pour “ecrire” dans
cette date on utilise d’autres méthodes qui commencent par “set”.
setDate(), setDay(), setMonth(), setYear(), setMonth(), setMinutes(),
setseconds()…
L’objet Date
<!DOCTYPE html>
<html> <head>
<title>Le DOM HTML</title>
<meta charset="utf-8">
</head>
<body>
<script>
function horloge()
{
document.getElementById('gros_titre').innerHTML=Date();
}
</script>
<h3 id ="tete" onmouseover ="horloge()">click ici un lien DATE</h3>
<h1 id="gros_titre">Le DOM</h1>
</body>
</html>
41
L’objet Date
<!DOCTYPE html>
<html>
<head>
<title>Le DOM HTML</title>
<meta charset="utf-8">
</head>
<body>
<button id ="tete" >click ici un lien DATE</button>
<h1 id="gros_titre">Le DOM</h1>
<script>
var boutton=document.getElementById("tete");
boutton.addEventListener("click", horloge);
function horloge()
{
document.getElementById('gros_titre').innerHTML=Date();
}
</script>
</body>
</html>
42
L’objet Array
⚪
Objet permet de créer des tableaux.
Déclaration:
pour déclarer une variable de type tableau on peut choisir entre ces trois
méthodes:
var monTableau1 = new Array(7);
var monTableau2 = new Array;
var monTableau1 = new Array(“A”, “B”,“C”,“D”, “F” );
La première méthodes est utilisée pour déclarer le tableau monTableau1.
C’est un tableau à 7 éléments (la taille est fixée dés le début).
La deuxième méthode crée un tableau à taille variable.
La troisième méthode permet d’initialiser le tableau dés sa création.
⚪
Propriétés:
length: cette propriété donne la taille du tableau
<body>
<h1>Les tableaux</h1>
<script>
var prenoms=['Ali', 'Saad', 'mona', 'sara'], p = '';
//On ajoute les valeurs Karim et Rajae en fin de tableau
var ajout= prenoms.push('Karim', 'Rajae');
//On affiche les valeurs de notre tableau
for(var i = 0; i < prenoms.length; i++)
{
p += 'Prénom n°' + (i+1) + ' : ' + prenoms[i] + '\n’; }
//On affiche la taille du tableau et les prénoms
alert('Le tableau contient ' +ajout+ ' éléments : \n\n' +p);
</script> </body>
//On supprime la dernière valeur du tableau
var suppr = prenoms.pop();
//On affiche les prénoms du tableau et le prénom supprimé
alert(p + '\n\nNous avons supprimé ' +suppr+ ' du tableau');
var Les4saisons = new Array("printemps", "été", "automne", "hiver");
document.write("Voici les 4 saisons : <UL>")
for (i=0 ; i<4 ; i++) {
•Voici les 4 saisons :printemps
document.write("<LI>", Les4saisons[i] )
•été
}
•automne
document.write("</UL>");
•Hiver
tab=new Array(3);
tab[0]= new Array(1,2,3);
tab[1]= new Array(4,5,6);
tab[2]= new Array(7,8,9);
for (i=0;i<3;i++) {
for (j=0;j<3;j++)
document.write(tab[i][j]," " );
document.write("<br> " );
}
123
456
789
Il y a 12 mois dans l'année
partagés en 4 trimestres
Voici les 4 saisons :
printemps été automne hiver
var mois= new Array(12);
document.write("Il y a ", mois.length, " mois dans l'année");
var NbMois = mois.length ;
document.write(" partagés en ", NbMois / 3, " trimestres ");
var Les4saisonsbis = ["printemps", "été", "automne","hiver"];
document.write("<br><br>Voici les 4 saisons : <br>")
for (i=0 ; i<Les4saisonsbis.length ; i++)
document.write(Les4saisonsbis[i], " " )
L’objet String
⚪
⚪
⚪
⚪
⚪
Javascript offre deux façons pour traiter les chaînes de
caractères.
La première en les considérant comme un type simple (le
type string)
La deuxième utilise le modèle objet, on dispose pour cela
d’un objet nommé String() offrant des méthodes et des
propriété assez nombreuses.
Déclaration:
var maChaine = new String()
Propriétés:
length: renvoie la longueur de la chaîne.
LST info
46
L’objet String
⚪
⚪
⚪
⚪
⚪
⚪
⚪
Méthodes:
charAt(): on utilise cette méthode pour renvoyer le caractère de la
chaîne, sur laquelle la méthode est appelée, situé à la position spécifiée
en paramètre.
indexOf(string): cette méthode renvoie la position, dans la chaîne de
caractères sur laquelle la méthode est appelée, de la première
occurrence de la chaîne passée en paramètre.
lastIndexOf(string): fonctionne de même façon que précédente, à la
différence que c’est l’indice de la dernière occurrence qui est renvoyée.
substring(value1,value2): retourne la sous chaîne, commençant à la
position value1 et finissant à la position value2.
toLowerCase(): met la chaîne considérée en minuscule.
toUpperCase(): met la chaîne considérée en majuscule.
LST info
47
L’objet String
<html>
<head>
</head>
<body>
<script language="javascript">
var S=new String();
S="JAVAscript est UN langage de scripts";
document.write("considerons la chaine suivante:"+S);
document.write("<br/> le caractere a la position 5 est:"+S.charAt(5));
document.write("<br/> le premier caractere de mot (script) est:"+S.indexOf("script"));
document.write("<br/> la deuxieme position de mot (script):"+S.lastIndexOf("script"));
document.write("<br/> la chaine entre les position 2 et 5 est:"+S.substring(2,5));
document.write("<br/> la chaine en majuscules:"+S.toUpperCase());
document.write("<br/> la chaine en minuscules:"+S.toLowerCase());
</script>
</body>
</html>
48
L’objet String
LST info
49
L’objet Math
⚪
L’objet Math()
Objet permet de faire les opérations mathématiques.
Methodes:
Math.abs (value), Math.sin (value), Math.cos (value),
Math.tan (value), Math.acos (value), Math.asin (value),
Math.atan (value), Math.PI, Math.e, Math.log(value),
Math.max(value1,value2), Math.min(value1,value2),
Math.pow(value,exponent), Math.Random(), Math.sqrt(value)
LST info
50
L’objet Math
<html>
<head>
<title> test tableau </title>
</head>
<body>
<SCRIPT language=javascript>
document.write("La racine de 15 est "+Math.sqrt(15));
document.write("<br> La valeur de PI"+Math.PI);
document.write("<br> Le cosinus de PI/$ est
+Math.cos((Math.PI)/4));
</SCRIPT>
</body>
</html>
LST info
51
Les Objets prédéfinis
●
Les objets de JavaScript, sont soit des entités prédéfinies du langage, soit
créés par le programmeur.
⚪ Par exemple, le navigateur est un objet qui s'appelle "navigator".
⚪ La fenêtre du navigateur se nomme "window"
⚪ La page HTML est un autre objet, que l'on appelle "document".
⚪ Un formulaire à l'intérieur d'un "document", est aussi un objet.
⚪ Un lien hypertexte dans une page HTML, est encore un autre objet. Il
s'appelle "link". etc...
●
Accès aux propriétés d’un objet
⚪ voiture.couleur.value
⚪ voiture.couleur.value = verte
52
Les objets du navigateur
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 :
●
⚪
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);
⚪ soit des collections d'objets qui regroupent sous forme de
tableaux Javascript tous les éléments de type déterminé.
LST info
53
Les objets prédéfinis
⚪
Lors de chargement du navigateur, un certain nombre
d’objets, appelées objets du navigateur sont
automatiquement créés et sont prêts à employer
L’objets window
⚪
L'objet window est l'objet par excellence dans Javascript, car il est le
parent de chaque objet qui compose la page web. il représente la
fenêtre de navigation.
Propriétés:
status : il définit le message qui s’affiche sur la barre d’état de la fenêtre.
Méthodes :
● open(String url [, String nom] [, String options] ):
cette méthode permet de créer dynamiquement une nouvelle
fenêtre. Elle retourne une valeur qui est un objet sous forme de
fenêtre.
LST info
55
https://www.aliasdmc.fr/coursjavas/cour
s_javascript78.html
1.Introduction
2.window.status
3.window.location
4.window.moveTo()
5.window.moveBy()
6.window.resizeBy()
7.window.resizeTo().
8.window.blur().
9.window.focus().
10.window.open().
11.window.close().
LST INFO
56
L’objet window
<html>
<head>
<title> test tableau </title>
</head>
<body>
<SCRIPT language="javascript">
function ouvre_popup(page)
{
window.open(page,"nom_popup","menubar=no, status=no, scrollbars=no,
width=200, height=100");
}
</SCRIPT>
<A href="javascript:ouvre_popup('chaine.htm')">Ouverture d'un popup</A>
</body>
</html>
57
L’objet window
58
L'objet document
⚪
⚪
Cet objet représente le document de la page web. A partir de cet
objet on peut accéder aux différents éléments de la page. Par
exemple, à partir de l’objet document on peut accéder aux objets
images[], links[], forms[] que nous étudierons dans la suite.
Méthodes :
● close( ) : ferme le document après la fin de l’écriture;
● open( )
: ouvre le document pour l’écriture;
● write( ) : écrit dans le document;
● writeln( ) : écrit dans le document et effectue un retour à la
ligne
59
L’objet form
⚪
⚪
⚪
Il correspondent à l’élément HTML <form>.
Les propriétés :
● name
: correspond à l’attribut name de la balise <form>.
● action
: contient l’adresse du scripte à exécuter lors de l’envoi
du formulaire.
● methode
: méthode d’envoi du formulaire (=get ou =post)
Méthodes:
●
●
submit: déclanche l’envoi du formulaire.(simule le click sur le
bouton d’envoi)
reset : réinitialise le formulaire. (simule le click sur le bouton
réinitialisation)
60
L’objet form
⚪
Événements:
●
OnSubmit: cet événement survient lors de l’envoi du formulaire. Il permet
de programmer des actions de contrôle du formulaire avant de
l’envoyer au serveur.
●
onReset : cet événement survient lors du click sur le bouton de
réinitialisation du formulaire.
61
Manipulation des éléments du formulaire
Exemple :
⚪ 1 - pour accéder au formulaire, il existe trois façons:
● a- document.form[0];
● b- document.form[“myform”];
● c- document.myform;
⚪ 2 – une fois accédé au formulaire, il nous reste d’accéder à l’élément
du formulaire. Tous les éléments du formulaire sont regroupés dans le
tableau élément[] associé à ce formulaire.
● a- document.myform.element[i];
● b- document.myform.element[“nom”];
● c- document.myform.nom;
⚪ 3- une fois accédé à l’élément voulu, on lit ou on modifie la propriété
concernée.
●
document.myform.nom.value;
LST info
62
Manipulation des éléments du formulaire
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function controle(form1) {
var test = document.form1.input.value;
alert("Vous avez tapé : " + test);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Verifier le
formulaire" onClick="controle(form1)">
</FORM>
</BODY>
</HTML>
Manipulation des
éléments du formulaire
<body>
<h2>JavaScript Can Validate Input</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb”>
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo">demo test</p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
Manipulation des éléments du formulaire
65
Manipulation des éléments du formulaire
<html>
<head>
<title> manipulation du forulaire </title>
</head>
<body>
<script language="javascript">
function afficher()
{
maFenetre=window.open();
maFenetre.document.open();
maFenetre.document.write(document.myform.nom.value+"</br>");
maFenetre.document.write(document.myform.prenom.value+"</br>");
maFenetre.document.write(document.myform.pass.value+"</br>");
L=document.myform.sexe.length;
for(i=0; i<L; i++)
{ if (document.myform.sexe[i].checked==true)
{ maFenetre.document.write(document.myform.sexe[i].value+"</br>"); }
}
66
Manipulation des éléments du formulaire
if (document.myform.choix1.checked==true)
{
maFenetre.document.write(document.myform.choix1.value+"</br
>");}
if (document.myform.choix2.checked==true)
{
maFenetre.document.write(document.myform.choix2.value+"</br
>");}
if (document.myform.choix3.checked==true)
{maFenetre.document.write(document.myform.choix3.value+"</br>
");}
maFenetre.document.write(document.myform.commentaire.value+"
</br>");
}
67
</script>
Manipulation des éléments du formulaire
<fieldset>
<form name="myform" onsubmit="afficher()">
<pre>
Entrez votre nom
: <input type="text" name="nom"/>
Entrez votre prénom
: <input type="text" name="prenom"/>
Entrez votre mot de passe : <input type="password" name="pass"/>
votre sexe:
<input type="radio" name="sexe" value="H"/> Homme
<input type="radio" name="sexe" value="F"/> Femme
vos loisirs:
<input type="checkbox" name="choix1" value="s"/> Sport
<input type="checkbox" name="choix2" value="l"/> Lecture
<input type="checkbox" name="choix2" value="m"/> Musique
Saisissez ici un commentaire:
<textarea name="commentaire" cols="20" rows="5"></textarea>
<input type="submit" value="Envoyer"/>
<input type="reset” value="Recommencer"/>
</pre> </form> </fieldset>
</body>
</html>
68
Calculs et opérations dans les formulaires
LST INFO
69
Calculs et opérations dans les formulaires
Résultats affichés des calculs HT
Ecrire le script qui permet d’afficher dans le formulaire les TVA et TTC
l'API Fetch de JavaScript
Pour créer des requêtes API on utilisait XMLHttpRequest
propre à ajax.
JavaScript intègre un moyen qui lui est propre de créer des
requêtes API. Il s’agit de l’API Fetch, une nouvelle norme
qui permet de réaliser des requêtes sur un serveur en
utilisant des promesses.
Étape 1 — Premiers pas avec la syntaxe de l’API Fetch
Appelez la méthode fetch , qui accepte l’URL de l’API comme paramètre :
fetch(url)
Après la méthode fetch() , ajoutez la méthode de promesse then() :
.then(function() {
})
72
l'API Fetch de JavaScript
La méthode fetch() retourne une promesse. Si la promesse renvoyée est resolve, cela
signifie que la fonction dans la méthode then() est bien exécutée.
Cette fonction contient le code qui permet de traiter les données reçues à partir de l’API.
Étape 2 — Utilisation de Fetch pour obtenir des données à partir d’une API
L’idée est de récupérer les données d’une application web et de les afficher dans les éléments de HTML
<body>
<main>
<article class = “searchBar”>
<input class="text" type="text" placeholder="pays">
<button onclick="search()">search</button>
</article>
<section class="info">
</section>
</main>
<script src="api.js"></script>
</body>
73
l'API Fetch de JavaScript
Créez une variable nommée url qui contiendra l’URL de l’API qui renverra des
données :
let url = "https://restcountries.com/v3.1/name/" + textCountry
Appelez l’API en utilisant fetch() avec l’argument url :
fetch(url)
Ensuite, vous recevrez une réponse. Cependant, la réponse que vous obtenez n’est pas JSON, mais plutôt un objet
Pour convertir l’objet renvoyé en JSON, utilisez la méthode json().
Il vous reste encore à traiter les données JSON. Ajoutez une autre instruction then() avec une fonction dont
l’argument s’appelle data :
.then(res => res.json()
.then(data => {
console.log(data)
}))
Fetch utilise par défaut les requêtes GET, mais vous pouvez utiliser tous les
autres types de requêtes HTTP:
ex: GET, POST, PUT, DELETE, HEAD. Defaults to GET.
74
l'API Fetch de JavaScript
75
Bibliothèques et Framework
Nodejs, Express
D3js
vuejs
Reactjs
Angularjs
jQuery,
LST INFO
76
Bibliothèques et Framework
Nodejs, Express et React
Node.js est le composant côté serveur de JavaScript.
L'utilisation de Node.js peut améliorer les performances des applications.
express.js est un framework qui vous aide à créer des applications Node.js
LST INFO
77
Apprendre Javascript (11/16) - Objet
https://www.youtube.com/watch?v=TXjzNXFxHp0
RegExp
https://www.fil.univ-lille.fr/~thibaud/tw1/index.html
LST INFO
78
Les événements en JavaScript
79
La liste des principaux événements
Le nom de l'événement est le nom JavaScript de l'événement. C'est celui que vous devez utiliser dans
les gestionnaires d'événements. Ne confondez pas avec les noms des attributs HTML. Des noms comme
onload, onclick qui sont des noms d'attribut HTML et qui ont leur "équivalent" en termes de nom de
propriété JavaScript.
La liste des événements est très longue. Je vous mets un lien, vers une liste complète, visible sur une
page de la documentation ici
Nom de
l'événement
Description
load
fin de chargement de la page web
click
clic sur un élément
dblclick
double clic sur un élément
keydown
une touche est appuyée
keypress
une touche est maintenue enfoncée
keyup
une touche est relâchée
mouseenter
le curseur entre au dessus d'un élément
mouseleave
le curseur quitte l'élément
select
sélection d'une option dans un select
change
changement de valeur sur un select, un checkbox..
submit
soumission d'un formulaire
focus
l'élément reçoit le focus
blur
l'élément perd le focus
80
81
