seance5 JAVASCRIPT.pptx

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.
3
En JS tout est objet. Tous les types héritent du type Object.
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>
5
Rq le <script> juste avant fermeture de </body>
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> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Untitled Document</title>
<meta charset="UTF-8">
</head>
<title> une page simple </title>
<body>
</head> <script language="javascript">
<body> console.log("bonjour console");
<script> </script>
Alert("Bonjour"); <script>
</script> alert("Welcome to my page!");
</script>
console.log("bonjour console");
</body>
<script>
</html>
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";
dossiers :
</script> js/console.html
</body> 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
<!DOCTYPE html>
<html>
<head>
<title>Les fonctions en JavaScript</title>
<meta charset="utf-8">
Une fonction correspond à </head>
un bloc de code pour <body>
effectuer une tâche précise. <h1>Les fonctions</h1>
<script>
function multiplication(x, y) {
La fonction alert() a été return x * y ;
créée afin d’afficher des }
messages dans des boîtes
de dialogue. 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
Le DOM HTML
innerHTML 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
<body>
<p class="para">Du texte et <a href= »localhost">un lien</a></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
<body>
<p class="para">Du texte et <a href="http://localhost">un lien</a></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
34
https://www.javascripttutorial.net/javascript-dom/javascript-appendchild/
LST INFO 36
Les objets en JavaScript
Il existe 2 façons de créer des objets

1
LST INFO
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>
<!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
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>
</head>
<body>
<script>
function horloge() {
document.getElementById('gros_titre').innerHTML=Date();
}
</script>
<h3 id ="tete" onmouseover ="horloge()">click ici un lien DATE</h3>

</body>
</html>
41
L’objet Date
<!DOCTYPE html>
<html>
<head>
<title>Le DOM HTML</title>
</head>
<body>
<button id ="tete" >click ici un lien DATE</button>
<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++) {
document.write("<LI>", Les4saisons[i] )
•Voici les 4 saisons :printemps
} •été
document.write("</UL>"); •automne
•Hiver
tab=new Array(3); 123

tab[0]= new Array(1,2,3); 456
tab[1]= new Array(4,5,6);
789
tab[2]= new Array(7,8,9);
for (i=0;i<3;i++) {
for (j=0;j<3;j++) Il y a 12 mois dans l'année
document.write(tab[i][j]," " ); partagés en 4 trimestres
document.write("<br> " );
} 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
<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>
65
<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
if (document.myform.choix1.checked==true)
{
maFenetre.document.write(document.myform.choix1.value+"</br
>");}
{
maFenetre.document.write(document.myform.choix2.value+"</br
>");}
{maFenetre.document.write(document.myform.choix3.value+"</br>
");}
maFenetre.document.write(document.myform.commentaire.value+"
</br>");
}
67
</script>
<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
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>
73
</body>
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:
74
ex: GET, POST, PUT, DELETE, HEAD. Defaults to GET.
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 Description
l'événement
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

80
blur l'élément perd le focus
81

seance5 JAVASCRIPT.pptx

Transféré par

Droits d'auteur :

Formats disponibles

seance5 JAVASCRIPT.pptx

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

seance5 JAVASCRIPT.pptx

Transféré par

Droits d'auteur :

Formats disponibles

Techniques du web

PHP Hypertext Preprocessor

javaScript est interprété par le navigateur

À l'intérieur du langage HTML, il existe des mécanismes (on parle de méthodes

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,

⚪ d'améliorer la présentation et l'interactivité des pages Web.

⚪ d’étendre les capacités du langage et rendre dynamique un site

⚪ de développer de véritables applications fonctionnant exclusivement

⚪ Le code JavaScript s’intègre de deux manière avec le code HTML

● 2. Insertion comme un module externe

⚪ La syntaxe du langage Javascript s'appuie sur le modèle de Java et C

• Il existe deux méthodes permettant d'intégrer des commentaires à

● Encadrer le texte par un slash suivi d'une étoile (/*) et la même

⚪ 3 types de boites de messages peuvent être affichés en utilisant

//Déclaration et affectation de caractere

Il existe trois types de déclarations de variable en JavaScript.

var On déclare une variable, éventuellement en initialisant sa valeur.

const On déclare une constante nommée, dont la portée est celle du

● les variables peuvent être globales ou locales.

● Une variable globale est déclarée en début de script et est

● Une variable locale est déclarée à l'intérieur d'une fonction et n'est

⚪ Contraintes concernant les noms de variables

⚪ Le type d’une variable dépend de la valeur stockée dans cette variable.

⚪ JavaScript inclut aussi deux types de données spéciaux :

⚪ Null : possède une seule valeur, null, qui signifie

⚪ Undefined : possède une seule valeur, undifined. Une

Conversion de type de variable

● Javascript est dépendant des événements

● Il est possible de baser l’exécution de fonctions sur des

<HTML><BODY onLoad="alert('page chargée');">

⚪ Se produit lorsque l’utilisateur clique sur un élément spécifique

isNaN("un nombre") //retourne true

⚪ Si l'argument évalué n'est pas un nombre, renvoie NaN (Not a

Document Object Model

Le DOM est une interface de programmation qui nous permet de

Le DOM HTML est un standard de programmation reconnu par

L’objet document et ses méthodes

Il existe différentes méthodes de l’objet Document qui constituent

La première méthode, getElementById(), va nous permettre de cibler un

var h = document.getElementById('gros_titre').innerHTML= "Hello World";

⚪ Renvoie une HTMLCollection des

alert('Contenu récupéré avec innerHTML : \n' + p +

alert('Contenu de titre_page : ' + titre_page +

Modifier du contenu HTML

//On modifie le contenu textuel de notre élément h1 avec innerHTML

Créer, ajouter et insérer des éléments HTML

Modifier ou supprimer des éléments HTML

Naviguer dans le DOM

Possible de créer des éléments avec : document.createElement()

Pour modifier l’arbre DOM :

Ajout : appendChild(), insertBefore()

Il existe 2 façons de créer des objets

Il existe 2 façons d’accéder aux objets

<p id="demo">Display the result here.</p>

var person = {name:"John", age:50};

<h3 id ="tete" onmouseover ="horloge()">click ici un lien DATE</h3>

<h1 id="gros_titre">Le DOM</h1>

⚪ Objet permet de créer des tableaux.

//On ajoute les valeurs Karim et Rajae en fin de tableau