JAVASCRIPT (1)
Nadhir TITAOUINE
[Link]@[Link]
– Novembre 2024
PRÉSENTATION
Chapitre 1
C’est quoi JavaScript?
HTML CSS JavaScript
Gérer le contenu de la page Gérer la présentation de Gérer le comportement
contenu de la page
C’est quoi JavaScript?
JavaScript est avant tout le langage de
programmation du Web. Il a été inventé en 1995 par
Brendan Eich, qui travaillait à l'époque pour la
société Netscape, créatrice du premier navigateur
Web populaire (l'ancêtre de Firefox).
Brendan Eich 1961
C’est quoi JavaScript?
■ Javascript permet de rendre dynamique un site internet développé en HTML.
■ le JavaScript est un langage utilisé avec le HTML.
■ Javascript permet de développer de véritables applications fonctionnant
exclusivement dans le cadre d'Internet(Navigateur).
■ C’est un language orienté objet dont la syntaxe est basée sur celle du Java et C.
■ Le JavaScript est écrit directement au sein du document HTML sous forme d'un
script encadré par des balises HTML spéciales ‘<script>.
■ Un langage interprété pas compilé .
On besoin de :
■ Savoir un peu de l’HTML et CSS
■ Un navigateur avec un débuggeur JavaScript(Web
Inspector).
■ Un Editeur de texte(notepad++,phpstorm).
Mon 1er programme dans Javascript
■ <html lang="fr">
<head>
<meta charset="UTF-8">
<title>1er Programme</title>
</head>
<body>
<h1>Page HTML sample</h1>
<script>
alert('Hello World');
</script>
</body>
</html>
1. Insertion dans le code Html
■ <script type="text/javascript"> … </script>
■ JavaScript peut être placé dans la balise <body> et <head> au moyen de l'élément
<script>
■ JavaScript peut être placé un fichier externe, portant l'extension « .js »
1. Insertion dans le code Html
■ Il existe 2 manières d'insérer du code JavaScript dans une
page HTML
– 1-Insertion pour exécution directe .
– 2- un fichier externe [Link].
1-Insertion pour exécution directe
1.1 Insertion pour exécution directe
■ Le code s'exécute automatiquement lors du chargement de la page
HTML dans le navigateur en même temps que le contenu de la
page HTML s'affiche à l'écran.
1.2 JavaScript à l'extérieur du HTML
(fichier externe [Link])
1.2 JavaScript à l'extérieur du HTML
[Link] ■ [Link]
LANGAGE
NOTATIONS JAVASCRIPT
La structure d’un programme en JavaScript
La structure d’un programme en JavaScript
■ Un langage similarités avec les langages(C,Java,php).
■ les instructions doivent être séparées par un point-virgule que l'on place à la fin de
chaque instruction
■ Un nombre à virgule est séparé par un point (.) et non par une virgule
■ Un langage sensible à la casse.
■ Les commentaires:
– 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 (*/)
Exemple d’un programme
VARIABLES
Les variables(1)
■ Pour déclarer une variable on utilise le mot clé « var »
■ Le mot-clé var permet de déclarer une ou plusieurs variables.
■ Variables non typées à la déclaration.
■ Types atomiques : entier, réel, chaîne de caractères, booléen.
– Nom de variable sensible à la casse.
■ Après la déclaration de la variable, il est possible de lui affecter une valeur par l'intermédiaire
du signe d'égalité (=).
Les variables(2)
■ 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 (par exemple : var ,function,if,else,….)
Déclaration et affichage d’une variable
([Link])
Types de données(variable)
■ Le type d’une variable dépend de la valeur stockée dans cette variable.
– Pas de déclaration de type.
■ trois principaux types de valeurs
■ Number (numérique).
– il représente tout nombre, que ce soit un entier, un nombre négatif, décimale ..
– String(Les chaînes de caractères).
– Boolean (Les booléens).
Tester l’existence
et savoir le type d’une variable
■ On utilisions instruction typeof.
Valeurs spéciales
■ JavaScript inclut aussi deux types de données spéciaux
:
■ Null : possède une seule valeur, null, qui signifie l’absence 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, pas même null
est dite non définie (undifined).
LES OPÉRATEURS
Les opérateurs arithmétiques(1)
■ Les opérateurs arithmétiques permettent de modifier mathématiquement la
valeur d'une variable.
Les opérateurs arithmétiques(2) x=7
Opérateur Dénomination Effet Exemple Résultat (avec x valant 7)
+ opérateur d'addition Ajoute deux valeurs x+3 10
- opérateur de soustraction Soustrait deux valeurs x-3 4
* opérateur de multiplication Multiplie deux valeurs x*3 21
/ plus: opérateur de division Divise deux valeurs x/3 2.3333333
Met la valeur 3 dans la variable
= opérateur d'affectation Affecte une valeur à une variable x=3
x
Retourne le reste de la division
% opérateur modulo entière de l'opérande de gauche x%2 1
par celle de droite
Les operateurs d'affectations(1)
■ Un opérateur d'affectation permet d'assigner(affecter) une valeur à son
opérande gauche(une variable) en se basant sur la valeur de son opérande
droit(valeur,variable,expression).
■ L'opérateur utilisé pour l'affectation est le symbole égal (=)
mon_variable = 1;
■ Exemple:
// Si on dispose des variables suivantes :
var x = 5;
var y = 10;
var z = 25;
x = y; // x vaudra désormais 10
x = y = z; // x, y et z valent désormais tous 25
Les operateurs d'affectations(2)
Opérateur Effet
ajoute l'opérande de gauche par l'opérande de droite et
+=
stocke le résultat dans l'opérande de gauche.
soustrait l'opérande de droite à l'opérande de gauche et
-=
stocke le résultat dans l'opérande de gauche.
multiplie l'opérande de gauche par l'opérande de droite
*=
et stocke le résultat dans l'opérande de gauche.
divise l'opérande de gauche par l'opérande de droite et
/=
stocke le résultat dans l'opérande de gauche.
calcule le reste de la division entière de l'opérande de
%= gauche par l'opérande de droite et stocke le résultat
dans l'opérande de gauche.
Les opérateurs d'incrémentation
■ permet facilement d’augmenter ou diminuer d'une unité une variable.
Résultat (avec x
Opérateur Dénomination Effet Syntaxe
valant 7)
Augmente d'une
++ Incrémentation x++ 8
unité la variable
Diminue d'une
-- Décrémentation x-- 6
unité la variable
Opérateurs de comparaison(1)
■ L'opérateur d'égalité == renvoie la valeur vrai si les deux termes à comparer sont
équivalents.
■ JavaScript possède deux type des opérateurs de comparaisons stricts et faible (no
stricts)
– Operateur d'égalité strict(===): qui compare la valeur et le type ,le resultat ne
sera vraie que si les deux opérandes sont du même type et valeur .
– La comparaison d'égalité faible (==) convertira les deux opérandes en un
même type avant d'effectuer la comparaison
Opérateurs de comparaison(2)
Opérateur Signification
== égal à
!= différent de
=== contenu et type égal à
!== contenu ou type différent de
> supérieur à
>= supérieur ou égal à
< inférieur à
<= inférieur ou égal à
Les opérateurs logiques (booléens)
Opérateur Dénomination Effet Syntaxe
|| OU logique Vérifie qu'une des conditions est réalisée ((expression1)||(expression2))
((expression1)&&(expression2)
&& ET logique Vérifie que toutes les conditions sont réalisées
)
Inverse l'état d'une variable booléenne
! NON logique (retourne la valeur 1 si la variable vaut 0, 0 si (!condition)
elle vaut 1)
[Link]("ABC".length); // Affiche 3
[Link]("Je suis une chaîne".length); // Affiche 18
var motInitial = "Bora-Bora";
var motEnMinuscules = [Link]();
[Link](motEnMinuscules); // Affiche "bora-bora"
var motEnMajuscules = [Link]();
[Link](motEnMajuscules); // Affiche "BORA-BORA«
var chaine = "azerty";
[Link](chaine === "azerty"); // Affiche true
[Link](chaine === "qwerty"); // Affiche false
[Link]("Azerty" === "azerty"); // Affiche false à cause du A majuscule
var valeurSaisie = "Quitter";
[Link](valeurSaisie === "quitter"); // Affiche false à cause du Q majuscule
[Link]([Link]() === "quitter"); // Affiche true
var sport = "Tennis-ballon"; // 13 caractères
[Link]([Link](0)); // Affiche "T"
[Link](sport[0]); // Affiche "T"
[Link]([Link](6)); // Affiche "-"
[Link](sport[6]); // Affiche "-«
var longueurSport = [Link];
[Link](sport[longueurSport - 1]); // Affiche "n"
[Link](sport[longueurSport]); // Affiche undefined : longueur dépassée !
var prenom = "Odile";
for (var i = 0; i < [Link]; i++) {
[Link](prenom[i]);
}
STRUCTURES
CONDITIONNELLES
Structures Conditionnelles
■ Exécuter une instruction ou block des instructions si la condition est vraie.
■ condition Une expression qui est évaluée à true ou false.
Instruction « if »
if(mon_variable==true){
alert('variable est vraie');
}
if(mon_variable==true){
alert('variable est vraie');
}else{
alert('variable n\'est pas vraie');
}
if (confirm('Voulez-vous exécuter le code JavaScript de cette page ?')) {
alert('Le code a bien été exécuté !');
}
Instruction « switch...case »
switch (Variable) {
case Valeur1:
Liste d'instructions;
break;
case Valeur2:
Liste d'instructions;
break;
case ValeurX:
Liste d'instructions;
break;
default:
Liste d'instructions;
break;
}
BOUCLES
Instruction « for »
for (initialisation; condition; incrémentation) {
instruction_1;
instruction_2;
instruction_3;
Exemple:
for (var i=1; i<6; i++) {
alert(i);
}
Instruction « while »
■ L'instruction while représente un autre moyen d'exécuter plusieurs fois la même
série d'instructions.
■ La syntaxe de cette expression est la suivante :
while (condition réalisée) {
liste d’instruction
}
■ Arrêt inconditionnel d’une boucle « break ».
– arrêter prématurément la boucle.
■ Saut inconditionnel « continue ».
– permet de mettre fin à une itération mais pas la boucle.
Instruction « do...while »
■ Syntaxe
do
instruction
while (condition);
LES FONCTIONS
Créer une fonction
■ Syntaxe:
function Nom_De_La_Fonction(argument1, argument2, ...) {
liste d’instructions
}
■ le nom de la fonction suit les mêmes règles que les noms de variables : le nom doit
commencer par une lettre
■ Exemple:
function myFunction(p1, p2) {
return p1 * p2; // La fonction retourne le produit de p1 et p2
}
■ P1 et p1 sont des arguments ou paramètres de la fonction.
■ Une fonction peu retourné une valeur .
Appel de fonction
■ Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son nom (une
fois de plus en respectant la casse) suivie d'une parenthèse ouverte
(éventuellement des arguments) puis d'une parenthèse fermé
myFunction(2,4);
Appel de fonction
■ Compteur de temps
compt=[Link]("compt");
function compteurTemps()
{ [Link]=Number([Link])+1;
}
[Link]=compteurTemps();
var t=setInterval('compteurTemps()',1000);
// clearInterval(t); // pour arreter
Appel de fonction
■ Compteur de temps
compt=[Link]("compt");
function compteurTemps()
{
[Link]=Number([Link])+1;
setTimeout('compteurTemps()',1000);
}
[Link]=compteurTemps();
LES TABLEAUX
Les tableaux
En JavaScript, un tableau est un objet disposant de propriétés particulières.
Créer un tableau
■ Voici comment créer notre liste de films sous la forme d'un tableau.
var films= [ ’Titanic’ , ‘Star wars’ , ‘Troy‘];
■ Avec JavaScript, on peut stocker dans un tableau des éléments de différents types,
comme dans l'exemple ci-dessous.
var tab= [ ’Jack’ , 72 , true];
■ Obtenir la taille d'un tableau
[Link]([Link]);// affiche 3
Les tableaux
Accéder à un élément d'un tableau
Chaque élément présent dans un tableau est identifié par un numéro, appelé
son indice (index en anglais).
var films= [ ’Titanic’ , ‘Star wars’ , ‘Troy’ ];
[Link]([Link]);// affiche 3
[Link](films[0]);// affiche Titanic
[Link](films[1]);// affiche Star wars
[Link](films[2]);// affiche Troy
Les tableaux
Accéder à un élément d'un tableau
Chaque élément présent dans un tableau est identifié par un numéro, appelé
son indice (index en anglais).
var films= [ ’Titanic’ , ‘Star wars’ , ‘Troy’ ];
[Link]([Link]);// affiche 3
[Link](films[0]);// affiche Titanic
[Link](films[1]);// affiche Star wars
[Link](films[2]);// affiche Troy
LES OBJETS
Les Objets
■ JavaScript est conçu autour d'un paradigme simple, basé sur les objets.
■ En JavaScript, presque «tout» est un objet.
– Les booléens peuvent être des objets
– Les nombres peuvent être des objets
– Strings peuvent être des objets
– Les dates sont toujours objets
– Maths sont toujours objets
– Les tableaux sont des objets
– Fonctions sont des objets
■ Les objets sont des variables aussi. Mais les objets peuvent contenir de nombreuses valeurs.
■ Le JavaScript met à notre disposition des objets natifs.
Les Objets
■ Exemple d’un objet:
var person = {nom:"John", prenom:"Doe", age:50};
var person = new Object();
[Link] = "John";
[Link] = "Doe";
[Link] = 50;
//utilisation objet Dates
var date= new Date();
[Link]([Link]() );
Propriétés de l'objet
Propriété
« nom »
var person = {nom:"John", prenom:"Doe", age:50};
Valeur de la propriété
« John »
Toute valeur va être placée dans une variable au sein de l'objet
Accès aux propriétés de l'objet
var person = {nom:"John", prenom:"Doe", age:50};
[Link]([Link]);
Ou:
var person = {nom:"John", prenom:"Doe", age:50};
[Link](person['nom']);