Javascript Partie1

Introduction à
JavaScript
2019-2020
Chedi Bechikh Ali

(chedi.bechikh@gmail.com)
Objectif
- Introduction au JavaScript amateur

- Qu'est-ce que JavaScript?
- Visite guidée des fonctionnalités du langage
- Gestion des événements de base
- DOM: Comment interagir avec votre page Web
Comment
fonctionnent les
pages Web?
Vous êtes sur votre
ordinateur portable
Votre ordinateur portable
démarre un navigateur
Web, par exemple Chrome
Vous tapez une URL dans la
barre d'adresse et appuyez
sur "Entrée"
http://coursera.com
Serveur
http://coursera.com
Le navigateur envoie une demande
HTTP disant "Veuillez m‘obtenir le
fichier index.html à "
(Routage,
http://coursera.com" etc…)
Serveur
http://www.coursera.com
En supposant que tout se passe bien,

le serveur répond en renvoyant le
fichier HTML via Internet au
navigateur pour l'afficher.
Serveur
http://coursera.com
Le HTML inclura des objets comme
<img src = "pup.png" /> et <link src =
"style.css" ... />
Serveur
http://coursera.com
Et le serveur répond avec ces

ressources pour que le
navigateur les affiche
Enfin, lorsque toutes les ressources
sont chargées, nous voyons la page
Web chargée
+ produit
Décrit le Décrit
contenu et la l'apparence et
structure de la
page
le style de la
page
Une page web…
Qui ne fait rien
Ce que nous avons appris
jusqu'à présent
Nous avons appris à créer des pages Web qui:
- Suivent l’apparence que nous désirons
- Peuvent avoir des liens vers d'autres pages Web
- S’affichent différemment sur différentes tailles d'écran
Mais nous ne savons pas comment créer des pages Web
qui font quoi que ce soit:
- Afficher et masquer des éléments lorsque l'utilisateur
interagit avec la page
- etc.
Ce que nous avons appris
jusqu'à présent
Nous avons appris à créer des pages Web qui:
- Suivent l’apparence que nous désirons
- Peuvent avoir des liens vers d'autres pages Web
- S’affichent différemment sur différentes tailles d'écran
Mais nous ne savons pas comment créer des pages Web
qui font quoi que ce soit:
- Afficher et masquer des éléments lorsque l'utilisateur
interagit avec la page
- etc.
Utiliser JavaScript!
JavaScript
JavaScript
JavaScript est un langage de

programmation.
C'est actuellement le seul langage de

programmation que votre navigateur
peut exécuter nativement.
Par conséquent, si vous souhaitez que vos

pages Web font des choses, vous devez
utiliser JavaScript: il n'y a pas d'autres
options.
JavaScript
- Créé en 1995 par Brendan Eich (co-fondateur de Mozilla; a

démissionné en 2014)
- JavaScript n'a rien à voir avec Java
- Littéralement nommé ainsi pour des raisons marketing
- La première version a été écrite en 10 jours
- Plusieurs décisions fondamentales du langage ont été
prises en raison de la politique de l'entreprise et non
pour des raisons techniques
Plan d’étude JavaScript
Cette semaine: "JavaScript amateur"

JavaScript simple
pas la meilleure pratique
Tout à portée globale
Pas de classes / modules
À utiliser pour de petits projets
(Mais facile pour démarrer)
Par la suite : JavaScript moderne

Plus discipliné et basé sur les meilleures pratiques
JavaScript dans le
navigateur
Code dans les pages Web
HTML peut intégrer des fichiers JavaScript dans la page

Web via la balise <script>.
<!DOCTYPE html>
<html>
<head>
<title>dev web</title>
<link rel="stylesheet" href="style.css" />
<script src="filename.js"></script>
</head>
<body>
... Contenu de la page...
</body>
</html>
console.log
Vous pouvez imprimer des messages de journal en

JavaScript en appelant console.log ():
script.js
console.log ('Bonjour, ISAMM!');
Cet équivalent JavaScript de Java

System.out.println, print, printf, etc.
Comment JavaScript est-il chargé?
<head>
<title>CS 193X</title>
<script src="script.js"></script>
</head>
Le navigateur analyse le fichier HTML et accède à une

balise de script, il sait donc qu'il doit également obtenir le
fichier de script.
<head>
</head>
Le navigateur fait une demande au serveur pour le fichier

script.js, tout comme pour un fichier CSS ou une image ...
<head>
</head>
Et le serveur répond avec le fichier JavaScript, comme il le

ferait avec un fichier CSS ou une image ...
<head>
</head>
console.log('Hello, world!');
À ce stade, le fichier JavaScript s'exécutera "côté client" ou

dans le navigateur de l'ordinateur de l'utilisateur.
Exécution de JavaScript
• Il n'y a pas de "méthode principale« (Main)

Le fichier de script est exécuté de haut en bas.
Il n'y a pas de compilation par le développeur

JavaScript est compilé et exécuté à la volée par le
navigateur
first-js.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Premier exemple JS</title>
</head>
<body>
</body>
</html>
script.js
console.log(‘Bonjour,Isamm!');
Rien ne se passe!
Faites un clic droit et choisissez "Inspecter"
Cliquer sur "Console"
L'onglet "Console" est un shell de langage interactif, vous
pouvez donc taper des expressions JavaScript, etc. Ceci
permet de tester le langage.
Fonctionnalités du
langage JavaScript
Identique aux langages de
style Java /C++ /C
for-loops:
for (let i = 0; i < 5; i++) { … }
while-loops:
while (pasFini) { … }
commentaire:
// commentaire or /* commentaire */
conditions :
if (...) {
...
} else {
...
}
Fonctions
Une façon de définir une fonction JavaScript est d'utiliser la

syntaxe suivante:
function nom() {
instruction;
instruction;
...
}
script.js
function hello() {
console.log('Hello!');
console.log('Welcome to JavaScript');
}
hello();
hello();
Console output
script.js
function hello() {
}
hello();
hello();
Le navigateur "exécute"
d'abord la définition de la
fonction, mais cela crée
simplement la fonction hello
(et n'exécute pas la fonction
hello), semblable à une Console
déclaration de variable.
script.js
hello();
hello();
function hello() {
}
Q: Est ce que ca fontionne?

script.js
hello();
hello();
function hello() {
}
R: Oui, pour cette syntaxe particulière.
Cela fonctionne parce que les
déclarations de fonctions sont
"hissées".
comme si la définition était déplacée
vers le haut de la portée dans laquelle
Sortie console
elle est définie
script.js
hello();
hello();
function hello() {
}
Mises en garde:
- Il existe d'autres façons de définir
des fonctions qui ne sont pas
hissées; nous verrons cela tard
Console output
Variables: var, let, const
Déclarez une variable dans JS avec l'un des trois mots clés:
// portée (scope) fonction
var x = 15;
// portée bloc
let fruit = 'banana';
// Constante de portée bloc; ne peut pas
être réaffecté
const isHungry = true;
Vous ne déclarez pas le type de données de la variable avant de

l'utiliser ("typé dynamiquement")
Paramètres de fonction
function printMessage(message, times) {

for (var i = 0; i < times; i++) {
console.log(message);
}
}
Les paramètres de fonction ne sont pas déclarés avec var, let

ou const.
Comprendre var

}
console.log('Value of i is ' + i);
}
printMessage('hello', 3);
Q: Que se passe-t-il si nous essayons

d'imprimer "i" à la fin de la boucle?
Comprendre var

}
}
La valeur de "i" est lisible en

dehors de la boucle for car les
variables déclarées avec var
ont une portée de fonction.
Portée de fonction avec var
var x = 10;
if (x > 0) {
var y = 10;
}
console.log('Value of y is ' + y);
- Les variables déclarées avec "var" ont une portée de

niveau fonction et ne sortent pas de la portée à la fin
des blocs; seulement à la fin des fonctions
- Par conséquent, vous pouvez vous référer à la même
variable après la fin du bloc (par exemple après la
boucle ou l'instruction if dans laquelle elles sont
déclarées)
Portée de fonction avec var
Mais vous ne pouvez pas faire référence à une variable en

dehors de la fonction dans laquelle elle est déclarée.
Comprendre let

for (let i = 0; i < times; i++) {
}
}
Q: Que se passe-t-il si nous essayons

d'imprimer "i" à la fin de la boucle?
Comprendre let

for (let i = 0; i < times; i++) {
}
}
printMessage('hello', 3); let a une
portée de
bloc donc
cela
entraîne
une erreur
Comprendre const
let x = 10;
if (x > 0) {
const y = 10;
}
console.log(y); // error!
Comme let, const a également une portée de bloc, donc

accéder à la variable en dehors du bloc entraîne une erreur
Comprendre const
const y = 10;
y = 0; // erreur!
y++; // erreur!
const list = [1, 2, 3];
list.push(4); // OK
les variables déclarées const ne peuvent

pas être réaffectées.
Cependant, c’est pas une véritable constante const, vous
pouvez donc toujours modifier l'objet sous-jacent.
Comparaison avec let
let y = 10;
y = 0; // OK
y++; // OK
let list = [1, 2, 3];
list.push(4); // OK
let peut être réaffecté, ce qui est la

différence entre const et let
Variables: meilleus pratiques
- Utilisez const autant que possible.

- Si vous avez besoin qu'une variable soit réaffectable,
utilisez let.
- N'utilisez pas var.
- Vous verrez une tonne d'exemples de code sur
Internet avec var depuis const et let sont
relativement nouveaux.
- Cependant, const et let sont bien pris en charge, il
n'y a donc aucune raison de ne pas les utiliser.
Variables: meilleus pratiques
- Utilisez const autant que possible.

- Si vous avez besoin qu'une variable soit réaffectable,
utilisez let.
- N'utilisez pas var.
- Vous verrez une tonne d'exemples de code sur
Internet avec var depuis const et let sont
relativement nouveaux.
Sur Internet il y a beaucoup de désinformation sur
- Cependant, const et let sont bien pris en charge, il
JavaScript!
Y compris
n'y a donc aucune plusieurs
raison de neréponses StackOverflow
pas les utiliser. «acceptées»,
des tutoriels, etc. Beaucoup de choses en ligne sont
obsolètes.
Types
Les variables JS n'ont pas de types, mais les valeurs en ont.
Il existe six types primitifs :

Booléen: vrai et faux
Nombre: tout est un double (pas d'entiers)
Chaîne: entre 'simples' ou "guillemets doubles"
Symbole: (sauter ceci aujourd'hui)
Null: une valeur signifiant "cela n'a pas de valeur"
Indéfini: la valeur d'une variable sans valeur assignée
Il existe également des types d'objets, notamment Array, Date,

String, etc.
Nombre
const homework = 0.45;

const midterm = 0.2;
const final = 0.35;
const score =
homework * 87 + midterm * 90 + final * 95;
console.log(score); // 90.4
Nombre
const homework = 0.45;

const midterm = 0.2;
const final = 0.35;
const score =
homework * 87 + midterm * 90 + final * 95;
console.log(score); // 90.4
- Tous les nombres sont des nombres réels à virgule flottante. Aucun type
entier.
- Les opérateurs sont comme Java ou C ++.
- Priorité comme Java ou C ++.
- Quelques valeurs spéciales: NaN (pas un nombre), + Infinity, -Infinity
- Il y a une classe de mathématiques: Math.floor, Math.ceil, etc.
Chaine de caractères
let snack = 'coo';

snack += 'kies';
snack = snack.toUpperCase();
console.log("I want " + snack);
Chaine de caractères
let snack = 'coo';

snack += 'kies';
snack = snack.toUpperCase();
console.log("I want " + snack);
- Peut être défini avec des guillemets simples ou doubles

- Immuable
- Pas de type caractère: les lettres sont des chaînes de
longueur un
- Peut utiliser plus pour la concaténation
- Peut vérifier la taille via la propriété length (pas la fonction)
Booléen
- Il existe deux valeurs littérales pour les booléens: true et false

- On peut utiliser les opérateurs booléens habituels: && || !
let isHungry = true;

let isTeenager = age > 12 && age < 20;
if (isHungry && isTeenager) {

pizza++;
}
Booléen
- Les valeurs non booléennes peuvent être utilisées dans les

instructions de contrôle, qui sont converties en leur valeur
"véridique" ou "fausse":
- null, indéfini, 0, NaN, '', "" évalué à faux
- Tout le reste est vrai
if (username) {
// username est défini
}
Egalité
JavaScript == et != font une conversion de type implicite

avant la comparaison.
'' == '0' // false

'' == 0 // true
0 == '0' // true
NaN == NaN // false
[''] == '' // true
false == undefined // false
false == null // false
null == undefined // true
Egalité
Au lieu de corriger == et! =, La norme ECMAScript a

conservé le comportement existant mais a ajouté === et !
==
'' === '0' // false
'' === 0 // false
0 === '0' // false
NaN == NaN // Reste à false
[''] === '' // false
false === undefined // false
false === null // false
null === undefined // false
Toujours utiliser === et !== et ne pas utiliser == ou !=

Null et Undefined
Quelle est la différence?

- null est une valeur représentant l'absence d'une valeur,
similaire à null en Java et nullptr en C ++.
- undefined est la valeur donnée à une variable qui n'a
pas été une valeur.
Null et Undefined
Quelle est la différence?

- null est une valeur représentant l'absence d'une valeur,
similaire à null en Java et nullptr en C ++.
- undefined est la valeur donnée à une variable qui n'a
pas été une valeur.
- … Cependant, vous pouvez également définir la
valeur d'une variable sur undefined
Arrays
Les tableaux sont des types d'objets utilisés pour créer des
listes de données.
// Crée une liste vide

let list = [];
let epiceries= [‘lait', 'cacao'];
epiceries[1] = ‘café';
- Index basé 0
- Mutable
- Peut vérifier la taille via la propriété length (pas la
fonction)

Javascript Partie1

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 Partie1

Transféré par

Droits d'auteur :

Formats disponibles

Introduction à

Chedi Bechikh Ali

- Introduction au JavaScript amateur

En supposant que tout se passe bien,

Et le serveur répond avec ces

JavaScript est un langage de

C'est actuellement le seul langage de

Par conséquent, si vous souhaitez que vos

- Créé en 1995 par Brendan Eich (co-fondateur de Mozilla; a

Cette semaine: "JavaScript amateur"

Par la suite : JavaScript moderne

HTML peut intégrer des fichiers JavaScript dans la page

Vous pouvez imprimer des messages de journal en

console.log ('Bonjour, ISAMM!');

Cet équivalent JavaScript de Java

Le navigateur analyse le fichier HTML et accède à une

Le navigateur fait une demande au serveur pour le fichier

Et le serveur répond avec le fichier JavaScript, comme il le

À ce stade, le fichier JavaScript s'exécutera "côté client" ou

• Il n'y a pas de "méthode principale« (Main)

Il n'y a pas de compilation par le développeur

Une façon de définir une fonction JavaScript est d'utiliser la

Q: Est ce que ca fontionne?

Vous ne déclarez pas le type de données de la variable avant de

function printMessage(message, times) {

Les paramètres de fonction ne sont pas déclarés avec var, let

function printMessage(message, times) {

Q: Que se passe-t-il si nous essayons

function printMessage(message, times) {

La valeur de "i" est lisible en

- Les variables déclarées avec "var" ont une portée de

Mais vous ne pouvez pas faire référence à une variable en

function printMessage(message, times) {

Q: Que se passe-t-il si nous essayons

function printMessage(message, times) {

Comme let, const a également une portée de bloc, donc

les variables déclarées const ne peuvent

let peut être réaffecté, ce qui est la

- Utilisez const autant que possible.

- Utilisez const autant que possible.

Les variables JS n'ont pas de types, mais les valeurs en ont.

Il existe six types primitifs :

Il existe également des types d'objets, notamment Array, Date,

const homework = 0.45;

const homework = 0.45;

let snack = 'coo';

let snack = 'coo';

- Peut être défini avec des guillemets simples ou doubles

- Il existe deux valeurs littérales pour les booléens: true et false

let isHungry = true;

if (isHungry && isTeenager) {

- Les valeurs non booléennes peuvent être utilisées dans les

JavaScript == et != font une conversion de type implicite

'' == '0' // false

Au lieu de corriger == et! =, La norme ECMAScript a

Toujours utiliser === et !== et ne pas utiliser == ou !=

Quelle est la différence?

Quelle est la différence?

// Crée une liste vide

Vous aimerez peut-être aussi