1-Introduction_js_bdd

Spécialité : Base de données
Matière : Javascript (Interface utilisateur interactive)
Introduction à JavaScript
L’objectif : A la fin de la leçon, les stagiaires doivent être capables de définir

correctement l’ usage JavaScript sans se référer aux cahiers.
Temps : 3 heures
Aide pédagogique :
Professeur stagiaire
Pc, Data-show
Le plan :
1. Introduction
2. Historique
3. Définition de JavaScript
4. Les caractéristiques de JavaScript
5. A quoi sert JavaScript ?
6. Logiciels nécessaires
7. Ou écrire le code JavaScript
8. Différence entre code et fonction
9. Possibilité d’affichage JavaScript ( générer les sorties en js )
1. Introduction :
Dans les leçons ou nous avons traité les langages HTML et CSS, nous avons vu que :
✓ HTML est un langage de description de page web qui se base sur les balises. Il
permet de présenter le contenu hypertexte destiné à être affiché sur le navigateur →
langage statique
✓ Le CSS quant à lui est un langage de style qui ressemble plutôt à des directives
formulées sous la forme de "propriété et valeur ". Il sert à soigner le design du
contenu intégré en HTML. Les capacités dynamiques de CSS sont très limitées ne
répondent pas à certains besoins : répondre aux interactions, traitement, boucles,..ect.
Donc avec ces deux langages, on peut déjà créer une bonne page web. Cependant, cette
page-là sera trop statique et manquera d’interactivité avec l’utilisateur. C’est pour cette
raison que JavaScript fait son entrée.
Dans cette partie du module nous allons nous servir du JavaScript en tant que langage
coté client (les bases).
2. Historique :
Le JavaScript, inventé par un certain Brendan Eich et développé par Netscape, fait son
apparition en 1995, sous le nom de LiveScript, dans le but de dynamiser les pages web.
Son utilisation s'est largement répandue, et il se fait rapidement accepter par d'autres
navigateurs. Il est aujourd'hui très présent sur les sites web : de plus en plus de webmasters
s'y intéressent, et il est de mieux en mieux accepté, à la fois par les navigateurs et par les
visiteurs ; ce qui lui réserve sans doute un bel avenir...
3. Définition de JavaScript :
➢ JavaScript est un langage de programmation qui donne vie aux sites Web (“rendre
les pages web vivantes”.). Contrairement au HTML (qui spécifie le contenu) et au
CSS (qui spécifie la mise en page).
➢ Les programmes dans ce langage sont appelés scripts. Ils peuvent être écrits
directement dans une page HTML et exécutés automatiquement au chargement des
pages.
➢ Les scripts sont fournis et exécutés en texte brut. Ils n’ont pas besoin d’une
préparation spéciale ou d’une compilation pour fonctionner.
➢ JavaScript est un langage de programmation principalement utilisé sur Internet, en
complément de HTML et CSS. Le JavaScript est le langage le plus populaire au
monde. Il est absolument partout.
➢ Il s’exécute sur les appareils des visiteurs au lieu du serveur.

➢ JavaScript est relativement facile à apprendre.
➢ JS peut être affecté à certains éléments de la page Web ou à des événements tels que
les clics.
➢ Il fonctionne sur différents navigateurs et périphériques.
➢ Il est plus rapide et plus léger que les autres langages de programmation.
➢ Peut être moins sécurisé que d’autres options en raison de sa popularité.
➢ Vous pouvez soit ajouter JavaScript directement à HTML, soit le stocker dans des
fichiers séparés et appeler la fonctionnalité si nécessaire.
➢ JavaScript est l’un des trois langages principaux pour les développeurs web :
JavaScript : Améliore le comportement des pages Web. Il permet de rendre celles-ci
interactives
Les trois couches se superposent naturellement.
Exemple : une simple étiquette texte
Contenu du fichier : page1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>etiquete texte</title>
</head>
<body>
<p>Player 1: karaoui</p>
</body>
</html>
Sur le navigateur :
Contenu du fichier : page1.css
p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px solid rgba(0,0,200,0.6);
background: rgba(0,0,200,0.3);
color: rgba(0,0,200,0.6);
box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor:pointer;
}
Contenu du fichier : page1.html → vous rajouter le lien vers le fichier CSS

Sur le navigateur :
Contenu du fichier : page1.js → fichier externe
let para = document.querySelector('p'); // ligne1
para.addEventListener('click', updateName); // ligne2
function updateName() { // ligne 3

let name = prompt('Enter a new name'); // ligne 4
para.textContent = 'Player 1: ' + name; // ligne 5
}
Contenu du fichier : page1.html → vous rajouter le lien vers le fichier JS en dernier

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="page1.css">
<title>etiquete texte</title>
</head>
<body>
<p>Player 1: karaoui</p>
<script src="page1.js"></script>
</body>
</html>
Sur le navigateur : vous cliquez sur le texte et vous tapez un autre name puis vous
validez vous obtenez ce résultat.
Interprétation du code : page1.js
Ligne 1 : nous sélectionnons ici un paragraphe de texte ,
Ligne 2 : puis lui attachons un « gestionnaire d'évènement » (event listener)
pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de

code updateName() (lignes 4-5) s'exécute.
Remarque :
Le bloc de code updateName() (ces blocs de code réutilisables sont appelés

« fonctions »)
Ligne 4 : la fonction updateName() demande à l'utilisateur un nouveau nom,
Ligne 5 : insérer le nouveau nom dans le paragraphe pour mettre à jour l'affichage.
➢ Il utilise des scripts pour créer du contenu dynamique.

➢ JavaScript est un langage de script multiplateforme orienté objet et utilisé pour rendre
les pages Web interactives, JavaScript permet de :
• Afficher des messages,
• Valider les formulaires,
• Faire des calculs,
• Faire des animations complexes,
• Rendre des boutons cliquables,
• Créer des menus contextuels, etc.
➢ Dans un environnement hôte (ex: un navigateur Web), JavaScript peut être connecté
aux objets de son environnement pour fournir un contrôle programmatique sur eux.
JavaScript contient une bibliothèque standard d’objets, tels que Array, Date et Math,
et un ensemble principal d’éléments de langage tels que des opérateurs, des
structures de contrôle et des instructions.
En fin de compte, il y a une raison pour laquelle JavaScript est aussi populaire qu’il est : il
est très efficace.
4. Les caractéristiques du JavaScript :
▪ JavaScript est un langage de scripts qui, incorporé aux balises HTML, permet
d’améliorer la présentation et l’interactivité des pages Web.
▪ Ces scripts sont gérés et exécutés par le navigateur lui-même sans faire appel aux
ressources du serveur. Ces instructions seront donc traitées en direct et surtout sans retard
par le navigateur.
▪ Le code n'est pas compilé : il est donc plus rapide à produire (pas besoin de
compilateur, un seul fichier, ...)
▪ Le langage Javascript est un langage interprété, c’est-à-dire que le code source s’intègre
directement dans la page web. Les scripts sont introduits dans le document HTML à
l’aide d’une balise <script>.
▪ JavaScript est un langage de script qui s’exécute sur les navigateurs.
Sans les navigateurs Web, l’écriture de JavaScript ne sera pas utilisée.
▪ Une page Web complète est composée de balises HTML et dynamisée à l’aide de
JavaScript.
▪ JavaScript est principalement un langage coté client, c’est-à-dire qu’il s’exécute sur le
navigateur au côté du HTML et du CSS. Mais on peut aussi le faire s’exécuté sur le
serveur à l’aide de la plateforme Node.js par exemple.
▪ C'est un langage orienté objet (nous y reviendrons).
▪ Le code n'est pas compilé : il est donc plus rapide à produire (pas besoin de
compilateur, un seul fichier, ...),
▪ Il est exécuté par le navigateur du visiteur (le client), et dépend donc de celui-ci.
▪ Il est déterminé par une norme, nommée ECMA-262 ou ECMAScript., le JS possède
une norme qui fixe également des lois et des limites pour celui-ci, rendant ainsi ce
langage plus "officiel". Ainsi, le code est plus facile à écrire, car il y a beaucoup moins de
problèmes de compatibilité. Il y a cependant pour le JS quelques différences d'un
navigateur à l'autre (des fonctions de l'un qui ne marchent pas sur l'autre, ...), mais cela
n'a pas beaucoup de conséquences.
5. A quoi sert JavaScript ? ( les usages du JavaScript )
a. Dynamisation de page Web :

Chaque navigateur web intègre aujourd'hui un interpréteur JavaScript (ou plutôt
ECMAScript), afin de permettre la "dynamisation" du code HTML.
L'HTML est un langage descriptif. Il ne sert donc qu'à afficher des informations,
statiquement. Le JavaScript va, lui, permettre de modifier dynamiquement le
comportement de cette page HTML.
Exemple :
 Afficher/masquer du texte
 Faire défiler des images
 Créer un diaporama avec un aperçu « en grand » des images
 Créer des infobulles
 voir même créer des jeux et des "logiciels" complets (surtout avec
HTML5)
b. JavaScript sert à ajouter de l’interactivité entre la page et le navigateur/utilisateur : c’est ça

le rôle du JavaScript si on s’en sert au côté client, c’est créer de l’interactivité avec le
navigateur ou l’utilisateur.
Que signifie l’interactivité ?
est tout simplement la capacité de la page web à dialoguer avec l’utilisateur et inversement.
Du moment où la page Web peut identifier l’action de l’utilisateur afin d’exécuter le
traitement souhaité, alors on dit qu’elle est interactive.
c. A l’aide de JavaScript on peut gérer les formulaires d’une manière plus avancée que celle
proposée en HTML5.
d. On peut développer des animations plus complexes que celles que l’on peut faire en CSS3
comme c’est le cas pour les albums photos avec des effets évolués ou diaporama.
e. On peut même contrôler le contenu HTML intégré par en masquer ou afficher une partie
selon l’action de l’utilisateur.
Autres usages :
➢ Exécution coté serveur :

Avec node.js, JavaScript connait aujourd'hui une croissante popularité pour une exécution
coté
serveur. Cela n'est cependant pas l'objectif de ce cours.
➢ Langage d'extension :
JavaScript est également largement utilisé, comme le Python, comme langage privilégié
pour la
création d'extensions de nombreux logiciels. Vous pouvez par exemple utiliser JavaScript
pour
modifier le comportement de l'interface de Firefox
18
6. Logiciels nécessaires :
Pour apprendre et exploiter le Javascript, il vous faut :
1. un navigateur ou un browser qui reconnaît le Javascript.
2. une solide connaissance du Html.
3. un simple éditeur de code.
Remarque :
Pour vérifier la compatibilité de vos scripts, il peut être utile de les tester sur plusieurs des
navigateurs les plus courants.
Important :
Télécharger l’extension « one dark pro » parceque pour JavaScript, on va avoir besoin des
couleurs qui soient un peut plus variées que les couleurs de base qui sont offertes parVScode.
C’est pas assez criant, pas assez parlant pour faire du JS.
A. Téléchargement et installation du Navigateur Web :
1. Aller sur le site https://www.google.com/intl/fr/chrome/browser/
et cliquer sur le bouton bleu « Télécharger Google Chrome ».
2. Cliquer ensuite sur le bouton bleu « Accepter et installer » pour démarrer le

téléchargement.
3. Exécuter le téléchargement de ChromeSetup.exe.
4. Accepter par « Oui » le Contrôle de compte utilisateur.
5. L’installation dure quelques secondes et Google Chrome
démarre ensuite automatiquement. Une barre jaune

demande si vous souhaitez « Définir comme navigateur
par défaut » : les sites internet s’ouvriront donc toujours
avec Chrome. Valider ensuite par « Oui » .
B. Téléchargement et installation de l'éditeur de code :

➢
Le navigateur va être utile pour afficher le résultat de notre code HTML. Cependant, avant
d’exécuter du code, il va falloir l’écrire et pour cela, nous allons avoir besoin d’un outil
indispensable qui est l’éditeur de code.
Exemple : NotePad++, VsCode, Sublime Text, Brackets, etc.
Utiliser un éditeur de texte tout simple que vous avez déjà, comme Bloc-notes. ce logiciel
suffit normalement à écrire des pages web en HTML, mais le mieux reste d'utiliser
un logiciel spécialisé qui colore votre code (très pratique) et qui numérote vos lignes (très
pratique aussi).
Il existe des centaines et des centaines de logiciels gratuits faits pour écrire des pages web :
Exemple :
❖ Editeurs de texte gratuits :

Notepad ++ → Windows
Atom → OS X, Windows, Linux
CoffeeCup HTML Editor → Windows
Brackets → Mac, Linux et Windows
Visual Studio Code →Mac, Linux et Windows
❖ Editeurs de texte payants :
PHPStorm.
Sublime Text
Coda
Remarque :
Que vous soyez sous Windows, Mac ou Linux, je vous recommande de commencer avec
l'éditeur Visual Studio Code qui est suffisamment léger et simple si vous débutez.
Je vous propose donc d'installer Visual Studio Code qui va nous permettre d'éditer nos fichiers
sources de manière efficace.
Visual Studio Code est un très bon éditeur, utilisé par de nombreux développeurs (y compris
des professionnels).
Installation de l’éditeur Visual Studio Code
Étape 1 : Allez à la page de Microsoft Visual Studio Code sur Academic Software et cliquez
sur le bouton 'Télécharger Visual Studio Code' pour télécharger le logiciel.
Étape 2 : Ouvrez le fichier d'installation .exe dans votre dossier Téléchargements.
Étape 3 : Lisez et acceptez le contrat de licence et cliquez sur Next.
Étape 4 : Vous pouvez modifier l'emplacement du dossier d'installation ou conserver les
paramètres par défaut. Cliquez sur Next pour continuer.

Étape 5 : Choisissez de renommer le dossier des raccourcis dans le menu Démarrer ou de ne
pas installer de raccourcis du tout. Cliquez sur Next.
Étape 6 : Sélectionnez les tâches supplémentaires, par exemple: 'Create a desktop icon' (créer
une icône sur le bureau) ou ajouter des options au menu du clic droit de
l'explorateur Windows. Cliquez sur Next.
Étape 7 : Cliquez sur Install pour commencer l’installation du logiciel.

Étape 8 : Le logiciel est installé et prêt à l'emploi. Cliquez sur Finish pour finaliser
l’installation et lancer le logiciel.
7. Ou écrire le code JavaScript ?
 La balise <SCRIPT>
De ce qui précède, vous savez déjà que votre script vient s'ajouter à votre page Web.
Le langage Html utilise des tags ou balises pour "dire" au navigateur d'afficher une
portion de texte en gras, en italique, etc. JavaScript s'intègre aussi dans le code HTML
(tout comme CSS). Donc, notre page web peut contenir trois syntaxes
différentes: HTML, CSS et JavaScript.
Dans la logique du langage Html, il faut donc signaler au navigateur par une balise, que
ce qui suit est un script et que c'est du Javascript. Mais pour que le navigateur sache où
commence notre script et où finit il, il faut le mettre à l'intérieur des délimiteurs du script
ou entre les balises <script> et </script>. de la manière suivante :
<script language="JavaScript"> // informer le navigateur du début du script js
//instructions javascript
</script> // informer le navigateur de la fin du script
La balise <script> → permet d'intégrer du
Javascript au sein d'un document HTML.
Exemple : l'intégration du script
On veut afficher le message "Bonjour" dans une boite de dialogue à l'aide de JavaScript. Le
code de notre page ressemblerait à ceci:
Code du fichier : page1.html
Sur le navigateur :
Vous devez valider l’alerte pour qu’il puisse afficher un

message ou faire quoi que ce soit d’autre
Indication :
La fonction (ou plutôt, la méthode) alert() permet d'afficher le message souhaité dans une petite
boite de dialogue. → à revoir tout ça en détail
Remarque :
Cependant, il n'y a pas que Javascript en tant que langage de script coté client. Il serait donc plus
approprié de spécifier le type du langage utilisé. Voici deux méthodes qui permettent de préciser
qu'il s'agit du Javascript et non pas d'un autre langage:
Méthode 1 : <script language="javascript"></script>
Exemple : précédent
Méthode 2 : <script type="text/javascript"></script>
Exemple : précédent
Remarque : Les deux déclarations sont explicites:
Méthode 1 → "Le langage utilisé dans les délimiteurs est Javascript".
Méthode 2 →La deuxième déclaration est par contre plus appréciée vu
qu'elle fournie deux informations, à savoir le type et le
MIME. Le type est text car Javascript c'est du texte, et le
MIME précise qu'il ne s'agit pas de n'importe quel texte mais du Javascript.
→ n'est plus nécessaire à partir de HTML5. JavaScript est devenu le langage de
script par défaut dans HTML5.
Comment intégrer du JS dans une page web ?

On va pouvoir placer du code JavaScript à quatre endroits différents :
a. Codes javascript dans le <head> :
Exemple :
Sélectionner le code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
function message()
{
alert("Cette boite de dialogue est appelée avec l'événement onload càd quand la page
est chargée");
}
</script>
</head>
<body onload="message()">
</body>
</html>
Sur le navigateur :
Interprétation :
Dans l’exemple ci-dessus c’est l’événement (onload c'est-à-dire quant la page est chargée) qui
fait appel à la fonction message() qui affiche une boite de dialogue avec le message "Cette boite
de dialogue est appelée avec l'événement onload càd quand la page est chargée".
b. Codes javascript dans le <body> :
Si vous ne voulez pas que votre code javascript soit placé à l'intérieur d'une fonction, ou si
votre code écrit le contenu de page, vous pouvez le placé dans la section du corps.
Ou le code JavaScript est placé dans la section "body" d'une page HTML et la fonction est
invoquée lorsqu'un évènement est déclenché par exemple en cliquant sur un bouton.
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
document.write("Ce texte est écrit par JavaScript ");
</script>
</body>
</html>
Sur le navigateur :
c. Codes javascript dans le <head> et le <body> :

Vous pouvez placer un nombre illimité de codes dans votre document, ainsi vous pouvez
avoir des codes dans le <head> et le <body> et dans toute section de votre page web.
Exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function message()
{
alert("Cette boite de dialogue est appelée avec l'événement onload càd quand la page est
chargée");
}
</script>
</head>
<body onload="message()">
<script type="text/javascript">
document.write("Formation JavaScript ");
</script>
</body>
</html>
Sur le navigateur :
Cliquez sur OK :
d. Utilisation du Javascript dans un fichier externe :
✓ Nous pouvons créer un fichier JavaScript externe et l'intégrer dans de nombreuses pages
HTML.
✓ Il offre une réutilisabilité du code car un seul fichier JavaScript peut être utilisé dans
plusieurs pages html.
✓ Il sépare HTML et code.
✓ Il rend HTML et JavaScript plus faciles à lire et à maintenir.
✓ Un fichier JavaScript externe doit être enregistré avec l'extension .js
✓ Il est recommandé d'intégrer tous les fichiers JavaScript dans un seul fichier. Il augmente
la vitesse de la page Web.
NB :
Le code javascript dans un fichier Javascript externe ne doit pas contenir de balises <script> ….
</script> .
Pour employer le code javascript du fichier externe, on le déclare dans le
<head> avec l’attribut « src » dans la balise <script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="fichier.js"></script>
</head>
<body></body>
</html>
Exemple : fichier JavaScript externe
Créons un fichier JavaScript externe nommé "myScript.js" dans le dossier : formation_js qui
affiche "Hello Javascript" dans une boîte de dialogue d'alerte.
Code du fichier : myScript.js

function msg(){
alert("Hello JavaScript");
}
Remarque :
L’alerte ne se déclenche pas, c’est comme pour CSS. Quand vous faites un fichier CSS vous
devez le reporter dans la page principale ( exemple : index.html ), là c’est pareil il faut le
reporter.
Maintenant le code du fichier html qui va avec, vous pouvez appeler ce fichier JavaScript
externe dans une page Web à l'aide de la balise <script>, comme ceci :
Code : fichier HTML
<!DOCTYPE html>
<html lang="en">
<head>
// le fichier doit être lu en dernier car le fichier js peut être long à exécuter
<script type="text/javascript" src="message.js"></script>
</head>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Sur le navigateur :
Note :
Dans notre cas les deux fichiers sont placées dans le même répertoire.
Si non il faut indiquer l'url exacte du fichier "myScript.js" comme ça par exemple :
<script src="../dossier/ myScript.js "></script>
le (../) indique le dossier racine de votre site.
Exemple :
Remarque :
Pour ajouter plusieurs fichiers de script à une page, utilisez plusieurs balises de script :
Exemple :
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
8. Quand les instructions de script sont exécutées ?
❖ Exécution directe :
Un code qui est destiné à s’exécuter automatiquement lors du chargement de la page,

on le met dans la balise body.
❖ Exécution différée :
Le code qui s’exécute lors d’un événement généré par intervention de l’utilisateur est
placé dans la balise head. Dans ce cas, le code est lu par le navigateur, stocké en mémoire,
pour ne s’exécuter que sur demande expresse.
<!DOCTYPE html>
<html lang="en">
<head>
<script langage="javascript">
function auRevoir(){
alert("Au revoir");
}
</script>
</head>
<body onload=auRevoir() ;>
</body>
</html>
Sur le navigateur :
9. Différence entre code et fonction :

JavaScript est un langage interprète, ce qui signifie que lorsque le navigateur lit la page web et
rencontre une section <script>, il n'essaye plus d'afficher les informations dans la page mais
laisse le moteur JavaScript le faire à sa place. Lorsque le moteur JavaScript ne rencontre plus
d'instructions et arrive à la balise de fin de script </script> il redonne la main au langage HTML.
Il est donc possible d'exécuter du code au moment voulu dans une page web : lancer un calcul,
demander une action à l'utilisateur, etc.
1
➢ Code :
Un code est une suite d'instructions simples qui s'exécutent les unes après les autres : l'ordre
des lignes détermine l'ordre d'exécution.
Exemple :
Dans le code suivant, on place le nombre 5 dans une variable a (un espace de stockage une
zone de mémoire), puis le nombre 6 dans la variable b et enfin, on demande a JavaScript
d'afficher le résultat de l'addition des deux variables. La fin d'une instruction lance
l'instruction suivante.
➢ Fonction :
Une fonction est une suite d'instructions simples dans un bloc nommé. Les instructions ne
peuvent se lancer que si le bloc est demande par quelqu'un. De plus, une fonction peut
recevoir des paramètres, qu'elle peut placer dans des variables choisies par le développeur de
la fonction.
2
10. Possibilités d'affichage JavaScript : (Générer une sortie en JavaScript)

✓ Dans certaines situations, il est nécessaire de générer une sortie à partir de votre code
JavaScript. Par exemple, vous souhaitez voir la valeur d'une variable, ou écrire un
message dans la console du navigateur pour vous permettre de déboguer un problème
dans votre code JavaScript en cours d'exécution, etc.
✓ Le JavaScript offre plusieurs façons de générer des résultats, par exemple en écrivant les
résultats dans la fenêtre du navigateur ou dans la console du navigateur, en affichant les
résultats dans des boîtes de dialogue, en écrivant les résultats dans un élément HTML.
✓ JavaScript peut "afficher" les données de différentes manières :
• Écrire dans un élément HTML, en utilisant innerHTML.

• Écrire dans la sortie HTML à l'aide de document.write().
• Écrire dans une boîte d'alerte, en utilisant window.alert().
• Écrire dans la console du navigateur, en utilisant console.log().
a. Utiliser innerHTML :
Pour accéder à un élément HTML, JavaScript peut utiliser

la document.getElementById(id)méthode.
✓ L' id attribut : définit l'élément HTML.
✓ La innerHTML propriété : définit le contenu HTML :
Exemple :
<!DOCTYPE html>
3
<html lang="en">
<head>
<title>Écrire dans un élément HTML</title>
</head>
<body>
<body>
<h1>My First Web Page</h1>

<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 2 + 5;
</script>
</body>
</html>
Sur le navigateur :
b. Utilisation de document.write() :
A des fins de test, il est pratique d'utiliser document.write():
Exemple :
Sur le navigateur :
4
Remarque :
L'utilisation de document.write() après le chargement d'un document HTML supprimera tout le

code HTML existant :
Exemple :
Sur le navigateur :
Important : La méthode document.write() ne doit être utilisée qu'à des fins de test.
5
c. Utilisation de window.alert() :
Vous pouvez utiliser une boîte d'alerte pour afficher les données :
Exemple :
Sur le navigateur :
Cliquez sur OK
6
Remarque :
Vous pouvez ignorer le window mot-clé.
En JavaScript, l'objet window est l'objet global scope. Cela signifie que les variables, les propriétés
et les méthodes appartiennent par défaut à l'objet window. Cela signifie également que la
spécification du window mot clé est facultative :
Exemple :
d. Utilisation de console.log() : (sortie vers la console du navigateur )
Pour avoir accès à la console de votre navigateur web, appuyer sur la touche F12 du clavier
pour ouvrir les outils de développement puis cliquer sur l'onglet console.
vous pouvez facilement produire un message ou écrire des données dans la console du
navigateur en utilisant la méthode console.log(). Il s'agit d'une méthode simple, mais très
puissante pour générer une sortie détaillée.
Exemple :
7
Sur le navigateur :
Cliquez avec le bouton droit dans une page web, puis sélectionnez Inspecter) pour ouvrir
directement la console ou appuyer sur la touche F12.
cliquer sur l'onglet console.
Remarque :
On peut écrire du code js dans la console :
Exemple :
8
e. JavaScript Imprimer :
JavaScript n'a pas d'objet d'impression ni de méthode d'impression.
Vous ne pouvez pas accéder aux périphériques de sortie à partir de JavaScript.
La seule exception est que vous pouvez appeler la window.print()méthode dans le navigateur
pour imprimer le contenu de la fenêtre en cours.
Exemple :
Sur le navigateur :
9
Cliquez sur : Print this page
10

1-Introduction_js_bdd

Transféré par

Droits d'auteur :

Formats disponibles

1-Introduction_js_bdd

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

1-Introduction_js_bdd

Transféré par

Droits d'auteur :

Formats disponibles

Spécialité : Base de données

Matière : Javascript (Interface utilisateur interactive)

L’objectif : A la fin de la leçon, les stagiaires doivent être capables de définir

➢ Il s’exécute sur les appareils des visiteurs au lieu du serveur.

JavaScript : Améliore le comportement des pages Web. Il permet de rendre celles-ci

Exemple : une simple étiquette texte

Contenu du fichier : page1.html

Contenu du fichier : page1.css

Contenu du fichier : page1.html → vous rajouter le lien vers le fichier CSS

Contenu du fichier : page1.js → fichier externe

let para = document.querySelector('p'); // ligne1

para.addEventListener('click', updateName); // ligne2

function updateName() { // ligne 3

Contenu du fichier : page1.html → vous rajouter le lien vers le fichier JS en dernier

Interprétation du code : page1.js

Ligne 1 : nous sélectionnons ici un paragraphe de texte ,

Ligne 2 : puis lui attachons un « gestionnaire d'évènement » (event listener)

pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de

Le bloc de code updateName() (ces blocs de code réutilisables sont appelés

Ligne 4 : la fonction updateName() demande à l'utilisateur un nouveau nom,

➢ Il utilise des scripts pour créer du contenu dynamique.

4. Les caractéristiques du JavaScript :

5. A quoi sert JavaScript ? ( les usages du JavaScript )

a. Dynamisation de page Web :

b. JavaScript sert à ajouter de l’interactivité entre la page et le navigateur/utilisateur : c’est ça

➢ Exécution coté serveur :

Pour apprendre et exploiter le Javascript, il vous faut :

1. un navigateur ou un browser qui reconnaît le Javascript.

2. une solide connaissance du Html.

3. un simple éditeur de code.

1. Aller sur le site https://www.google.com/intl/fr/chrome/browser/

et cliquer sur le bouton bleu « Télécharger Google Chrome ».

2. Cliquer ensuite sur le bouton bleu « Accepter et installer » pour démarrer le

3. Exécuter le téléchargement de ChromeSetup.exe.

4. Accepter par « Oui » le Contrôle de compte utilisateur.

5. L’installation dure quelques secondes et Google Chrome

démarre ensuite automatiquement. Une barre jaune

par défaut » : les sites internet s’ouvriront donc toujours

avec Chrome. Valider ensuite par « Oui » .

B. Téléchargement et installation de l'éditeur de code :

Exemple : NotePad++, VsCode, Sublime Text, Brackets, etc.

❖ Editeurs de texte gratuits :

Atom → OS X, Windows, Linux

CoffeeCup HTML Editor → Windows

Brackets → Mac, Linux et Windows

Visual Studio Code →Mac, Linux et Windows

❖ Editeurs de texte payants :

Installation de l’éditeur Visual Studio Code

Étape 2 : Ouvrez le fichier d'installation .exe dans votre dossier Téléchargements.

Étape 3 : Lisez et acceptez le contrat de licence et cliquez sur Next.

Étape 4 : Vous pouvez modifier l'emplacement du dossier d'installation ou conserver les

paramètres par défaut. Cliquez sur Next pour continuer.

pas installer de raccourcis du tout. Cliquez sur Next.

l'explorateur Windows. Cliquez sur Next.

Étape 7 : Cliquez sur Install pour commencer l’installation du logiciel.

l’installation et lancer le logiciel.

7. Ou écrire le code JavaScript ?

La balise <script> → permet d'intégrer du

Javascript au sein d'un document HTML.

Exemple : l'intégration du script