JavaScript 1

Développement Web
JavaScript
1
Introduction
2
Introduction: JS c’est quoi?
• Langage de script s’integrant au HTML pour rendre dynamique les pages web.
• Les scripts JavaScript sont interprétés et exécutés par le navigateur.
• Le langage JavaScript a commencé avec le navigateur Netscape
• JS a été progressivement intégré à l'ensemble des navigateurs afin d'exécuter

les scripts en JS
• L’evolution du web en Web 2.0, basés sur des pages riches et interactives, a
rendu JavaScript de plus en plus populaire. Les concepteurs de navigateurs
Web ont optimisé la rapidité d'exécution du code JavaScript, jusqu'à en faire
un langage très performant.
3
Introduction: JS c’est quoi?
• En 2009, le langage s’est beaucoup renforcé grâce à la plate-forme Node.js,
qui permet d'écrire en JavaScript des applications Web très rapides .
• Le langage pénètre le monde des bases de données grâce à MongoDB.
• La révolution des smartphones et tablettes dotés de systèmes différents et

incompatibles (iOS, Android ou Windows Phone) a engendré le besoin en
outils de developpement dits multi-plateformes. Ces outils sont presque
toujours basés sur... JavaScript
4
Introduction: JS pourquoi?
• Unique langage de programmation reconnu par tous les navigateurs Web,
• Maintenant implanté côté serveur grâce à Node.js et pour le développement

d’applications mobiles multi-plateformes (Cordova, Ionic ou React Native).
• Présent dans le monde du stockage de données (MongoDB) et le monde des

Objets connectés (IoT),
• Dispose d’un écosystème hyper intéressant de composants centré autour de

la plate-forme npm et d’une immense communauté de développeurs.
• Ceci serai illustré davantage dans le module Developpement des

applications Mobiles (Code Hybride) 5
Introduction: JS pourquoi?
• “JavaScript has the best dev tool ecosystem I’ve ever seen for any language.”
Eric Elliott : un des grands acteurs de la tech BlocChaine
• JS touche la programmation Web coté client (front-end), côté serveur (back-
end) ou côté mobile.
• Tous les services modernes qui offrent sur le Web une expérience
utilisateur proche de celle d’une application native (Google, Uber, AirBnb…)
font un usage intensif de JavaScript, souvent par le biais
de frameworks comme AngularJS ou de librairies comme React.
6
Introduction: où inclure le code?
• Le navigateur traite la page Html de haut en bas
• Par conséquent, toute instruction Javascript ne pourra être exécutée que si

elle est déclarée avant ou au plus tard lors de l’interpretation de l'instruction
par le navigateur.
• Il est recommandé de déclarer un maximum du code Javascript dans les

balises d'en-tête (entre <HEAD> et </HEAD>) qui est le cas pour les fonctions.
• Rien n’interdit de déclarer le code Javascript dans le corps de la page Html.
• Rien n'interdit de mettre plusieurs scripts dans une même page Html.
7
•.

• Le code JavaScript s’intègre de trois manière avec le code HTML
• Directement dans la balise ouvrante d’un élément HTML ;
• Dans un élément script, au sein d’une page HTML ;
•Dans un fichier séparé contenant exclusivement du JavaScript et portant
l’extension .js
8
•.

• Placer le code JavaScript dans la balise ouvrante d’un élément HTML
<!DOCTYPE html>
<html>
<head>
<title>Test JAVASCRIPT</title>
</head>
<body>
<button onclick="alert('coco c est le bouton bonjour')" > Bonjour</button>
<button onclick="alert('coco c est le bouton au revoir')" >au revoir</button>
</BODY>
</HTML>
9
•.
.

• Placer le code JavaScript dans une balise <SCRIPT>, au sein de la page HTML
• On peut placer la balise <SCRIPT> n’importe où dans la page HTML, aussi bien dans
<HEAD>…</HEAD> qu’au sein de l’élément <BODY> …. </BODY>.
• On peut egalement ajouter plusieurs balises <SCRIPT> dans la méme page HTML pour placer
plusieurs bouts de code JavaScript à différents endroits de la page
• .
10
•.

• Placer le code JavaScript dans une balise <SCRIPT>, au sein de la page HTML
<html>
<head> <title>Test JAVASCRIPT</title>
<script> function f1(){alert('coco c est le bouton bonjour');}</script>

</head>
<body>
<button onclick="f1()" > Bonjour</button>
<script> function f2(){alert('coco c est le bouton au revoir');}</script>

<button onclick="f2()" >au revoir</body>
</BODY> </HTML>
• . 11
•.

• Placer le code JavaScript dans un fichier séparé
• Il suffit de créer un fichier Javascript qui va contenir juste le code javascript (fichier.js):
function f1(){
alert('coco c est le bouton bonjour');
}
testJS.js
function f2(){
alert('coco c est le bouton au revoir');
}
12
•.

• Placer le code JavaScript dans un fichier séparé
• Au sein de la page Html, on fait appel au code du fichier. Pour cela:
<html>
<head>
<title>Test JAVASCRIPT</title>
<script src="testJS.js"> </script>
</head>
<body>
<button onclick="f1()" > Bonjour</button>
<button onclick="f2()" >au revoir</button>
</body>
</html>
13
Introduction: Notions de lecture et d’écriture
Affichage dans JavaScript
JavaScript permet d’afficher les données de différentes manières :
document.write() : Écriture dans le document de sortie HTML

• Utilisée pour des fins de test. Après le chargement du document HTML,
elle supprime le contenu existant.
<!DOCTYPE html>
<html>
<body>
<h1>Page Web de test</h1>
<p>C’est un paragraphe</p>
PARTIE 2
<script>
document.write(5 + 6);
</script>
</body>
14
</html>
window.alert() : Écriture dans une boîte d'alerte

• Utilisée pour afficher des messages à l’utilisateur et aussi pour afficher des données
<!DOCTYPE html>
<html>
<body>
<h1> Page Web de test </h1>
<p> C’est un paragraphe </p>
<script>
PARTIE 2
window.alert(5 + 6);
</script>
</body> 15
</html>
console.log() : Écriture dans la console du navigateur. Cette méthode est pratique

pour le débogage du code
• Utilisée pour afficher des données dans la console du navigateur. Cette méthode
est pratique pour le débogage du code.
<!DOCTYPE html>
<html>
<body>
<h1> Page Web de test </h1>
<p> C’est un paragraphe </p>
PARTIE 2
<script>
console.log(5 + 6);
</script> 16
</body>
</html>
Impression dans JavaScript
La méthode window.print() permet d’imprimer le contenu de la fenêtre en
cours en appelant le dispositif propre du navigateur.
L’exemple suivant permet d’appeler la méthode « window.print() » suite au
clic sur un bouton.
Exemple :
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Imprimer cette
PARTIE 2
page</button>
</body>
17
</html>
Les entrées dans JavaScript
En JavaScript, on peut récupérer les données de deux manières
différentes :
Prompt : affiche une boîte de dialogue avec une zone de saisie
• La méthode prompt (boite d'invite) propose un champ comportant une
entrée à compléter par l'utilisateur avec une valeur par défaut.
• En cliquant sur OK, la méthode renvoie la valeur tapée par l'utilisateur
ou la réponse proposée par défaut. Si l'utilisateur clique sur Annuler
(Cancel), la valeur null est alors renvoyée.
PARTIE 2
var prenom = prompt("Quel est votre prénom?");

document.write(prenom);
18
Les entrées dans JavaScript
En JavaScript, on peut récupérer les données de deux manières
différentes :
Les formulaires : les contrôles des formulaires comme la zone <input>
• Javascript peut récupérer les données de n'importe quel élément html par
la méthode : document.getElementById(id) qui prend en paramètre
l’identifiant de l’objet.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="prenom">
PARTIE 2
<button onclick="alert(document.getElementById('prenom').value)">
Afficher</button>
</body>
</html> 19
Syntaxe de base
•.
Syntaxe de base : Règles générales

• Règles générales d’ecriture d’un script JS
• L'insertion des espaces peut s'effectué n'importe où dans le script

• 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 est sensible à la casse

• Pour insérer un commentaire, on peut:
• 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 (*/)
15
•.
Syntaxe de base : Variables et types

• 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 //Déclaration de i, de jet de k.
l'intermédiaire du signe d'égalité (=). var i, j, k;
//Affectation de i.
• Si une valeur est affectée à une variable sans i = 1;
que cette dernière ne soit déclarée, elle serai //Déclaration et affectation
déclarée automatiquement. var prix = 0;
var caractere = "a";
• La lecture d'une variable non déclarée
provoque une erreur
16
•.
Syntaxe de base : Variables et types

• Déclaration et affectation
• Une variable correctement déclarée mais dont
aucune valeur n'est affectée, est indéfinie
(undefined).
• Les variables peuvent être globales ou locales. //Déclaration de i, de jet de k.

var i, j, k;
• Une variable globale est déclarée en début de //Affectation de i.

script et est accessible à n'importe quel i = 1;
endroit du programme. //Déclaration et affectation
var prix = 0;
• Une variable locale est déclarée à l'intérieur var caractere = "a";
d'une fonction et n'est utilisable que dans la
fonction elle-même.
17
•.
Syntaxe de base : Opérateurs

• Operateurs
• Opérateurs numériques : var x=11;
Signe Signification Exemple Résultat
+ addition x+3 14
- soustraction x-3 8
* multiplication x*2 22
/ par division x /2 5.5
% reste de la division par x%5 1
= affectation x=5 5
18
•.

• Operateurs
• Opérateurs numériques : var x=11;
== égal x==11 true
< inférieur x<11 false
<= inférieur ou égal x<=11 true
> supérieur x>11 false
=< supérieur ou égal x>=11 True
!= Différent x!=11 False
19
•.

• Operateurs
• Opérateurs associatifs : var x=11;
+= plus égal x += y 16
-= moins égal x -= y 6
*= multiplié égal x *= y 55
/= divisé égal x /= y 2.2
20
•.

• Operateurs
• Opérateurs associatifs : var x=11;
x++ incrémentation y = x++ 3 puis plus
(x++ est le même que x=x+1) 1
x-- décrémentation y= x-- 3 puis
(x-- est le même que x=x-1) moins 1
21
•.
Syntaxe de base : Structures de contrôle

Structures conditionnelles
if (condition)
{
bloc1 d’instructions
}
else
{
bloc2 d’instructions
}
22
.
•.

Structures itératives : Boucle For
for (valeur initiale; condition; pas d’incrementation)
{
bloc d’instructions
}
.
23
•.

Structures itératives : Boucle For
Exemple
document.write("Calcul des carrés :<BR>");
for (var i = 0; i <15; i++)
{
document.write("i = "+i+" i*i = "+ i*i+"<BR>");
}
24
•.

Structures itératives : Boucle While
While(condition)
{
}
.
25
•.

Exemple
var i=0;
while(i <15)
{
i++;
}
26
•.

do
{
}
while(condition);
.
27
•.

Structures itératives : Boucle DO
Exemple
var i=0;
do{ {
i++;
} while(i <15) ;
28

JavaScript 1

Transféré par

Informations du document

Titre original

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

JavaScript 1

Transféré par

Droits d'auteur :

Formats disponibles

Développement Web

• Les scripts JavaScript sont interprétés et exécutés par le navigateur.

• Le langage JavaScript a commencé avec le navigateur Netscape

• JS a été progressivement intégré à l'ensemble des navigateurs afin d'exécuter

• Le langage pénètre le monde des bases de données grâce à MongoDB.

• La révolution des smartphones et tablettes dotés de systèmes différents et

• Maintenant implanté côté serveur grâce à Node.js et pour le développement

• Présent dans le monde du stockage de données (MongoDB) et le monde des

• Dispose d’un écosystème hyper intéressant de composants centré autour de

• Ceci serai illustré davantage dans le module Developpement des

• Par conséquent, toute instruction Javascript ne pourra être exécutée que si

• Il est recommandé de déclarer un maximum du code Javascript dans les

• Rien n’interdit de déclarer le code Javascript dans le corps de la page Html.

Introduction: où inclure le code?

• Directement dans la balise ouvrante d’un élément HTML ;

• Dans un élément script, au sein d’une page HTML ;

•Dans un fichier séparé contenant exclusivement du JavaScript et portant

Introduction: où inclure le code?

<button onclick="alert('coco c est le bouton bonjour')" > Bonjour</button>

<button onclick="alert('coco c est le bouton au revoir')" >au revoir</button>

Introduction: où inclure le code?

Introduction: où inclure le code?

<head> <title>Test JAVASCRIPT</title>

<script> function f1(){alert('coco c est le bouton bonjour');}</script>

<button onclick="f1()" > Bonjour</button>

<script> function f2(){alert('coco c est le bouton au revoir');}</script>

Introduction: où inclure le code?

Introduction: où inclure le code?

document.write() : Écriture dans le document de sortie HTML

window.alert() : Écriture dans une boîte d'alerte

console.log() : Écriture dans la console du navigateur. Cette méthode est pratique

var prenom = prompt("Quel est votre prénom?");

Syntaxe de base : Règles générales

• L'insertion des espaces peut s'effectué n'importe où dans le script

• Le langage est sensible à la casse

Syntaxe de base : Variables et types

• Après la déclaration de la variable, il est

Syntaxe de base : Variables et types

• Les variables peuvent être globales ou locales. //Déclaration de i, de jet de k.

• Une variable globale est déclarée en début de //Affectation de i.

Syntaxe de base : Opérateurs

Syntaxe de base : Opérateurs

Syntaxe de base : Opérateurs

Syntaxe de base : Opérateurs

Syntaxe de base : Structures de contrôle

Syntaxe de base : Structures de contrôle

Syntaxe de base : Structures de contrôle

Syntaxe de base : Structures de contrôle

Syntaxe de base : Structures de contrôle

Syntaxe de base : Structures de contrôle

Syntaxe de base : Structures de contrôle

Vous aimerez peut-être aussi