Scribd
Importer
9 vues84 pages

DevWeb2 Part1

Le document présente une introduction à JavaScript, un langage de programmation essentiel pour le développement web, en expliquant son insertion dans HTML, sa syntaxe, et ses fonctionnalités comme les boîtes de dialogue. Il aborde également la déclaration et l'affectation de variables, les types de données disponibles en JavaScript, et les différences entre les déclarations de variables avec 'var' et 'let'. Enfin, il traite de la conversion de types et des opérateurs associés.

Transféré par

Ghenimi Alaa
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
9 vues84 pages

DevWeb2 Part1

Le document présente une introduction à JavaScript, un langage de programmation essentiel pour le développement web, en expliquant son insertion dans HTML, sa syntaxe, et ses fonctionnalités comme les boîtes de dialogue. Il aborde également la déclaration et l'affectation de variables, les types de données disponibles en JavaScript, et les différences entre les déclarations de variables avec 'var' et 'let'. Enfin, il traite de la conversion de types et des opérateurs associés.

Transféré par

Ghenimi Alaa
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 84

Développement Web et MM-II

CHAPITRE 1

INTRODUCTION À JAVASCRIPT
 Introduction
 Insertion de JavaScript Dans HTML

PLAN  Syntaxe et commentaires


 Affichage dans un document HTML
 Les boîtes de dialogue
Introduction

 JavaScript est un langage de programmation créé en 1995 par Netscape.


 JavaScript est aujourd’hui l’un des langages de programmation les plus populaires et il fait
partie des langages web dits « standards » avec le HTML et le CSS.
 Les principaux navigateurs web (Google Chrome, Safari, Firefox, etc.) savent tous « lire » ou
«interpréter » ces langages et les interprètent généralement de la même façon
 Un même code va généralement produire le même résultat dans chaque navigateur.
 Son évolution est gérée par le groupe ECMA International qui se charge de publier les standards
de ce langage.

3
Introduction

 JavaScript est un langage dynamique, basé évènement :


 Ce langage nous permet de manipuler des contenus HTML ou des styles CSS et de les
modifier en fonction de divers évènements: par exemple un clic d’un utilisateur à un certain
endroit de la page.
 JavaScript est un langage (principalement) côté client ;
 Généralement exécuté dans le navigateur des utilisateurs qui demandent la page.
 Peut être utilisé côté serveur (en utilisant Node.js par exemple).
 JavaScript est un langage interprété ;
 Il peut être exécuté directement par le logiciel interpréteur (pas besoin d’une compilation
préalable de la totalité du code)
 JavaScript est un langage orienté objet.

4
“
INSERTION DE JAVASCRIPT DANS
HTML
”
Insertion de JavaScript Dans HTML

 Il existe 3 méthodes pour ajouter du code JavaScript à votre document HTML

1. Directement dans une balise Html : généralement associé à un évènement

2. JavaScript interne à une page Html

3. JavaScript dans un fichier externe

6
Directement dans une balise HTML

 Exemple:

<body>
<p onclick="alert('Paragraphe')"> Un paragraphe </p>
</body>
Code JavaScript

7
JavaScript interne à un fichier HTML

 Tout code JavaScript à intégrer dans une page HTML doit être placé entre les balises « script » :

 L'élément HTML <script> est utilisé pour intégrer ou faire référence à un script (en JavaScript ou
un autre langage de script)

<script >
//ajouter votre code javaScript
</script>

 Il est possible de spécifier les attributs type et/ou language de la balise <script>

<script language="javascript" type="text/javascript">


//ajouter votre code javaScript
</script> 8
JavaScript interne à un fichier HTML

<html>

<head> 1 <script >


//ajouter votre code javaScript
</script>
</head>
 On peut inclure un ou plusieurs codes JavaScript
<body>
entre les deux balises<BODY> et </BODY> ou même
2
entre le <HEAD> et </HEAD> Selon les besoins
</body>
</html>  Le code javascript placé dans le HEAD sera exécuté
avant la première ligne du BODY
Fichier HTML

9
JavaScript dans un fichier externe

 Il est possible d'utiliser des fichiers externes (avec l'extension .js) pour les scripts JavaScript et les
intégrer dans un fichier HTML. La balise script devient :
<script language="javascript" src="chemin/nom_fichier.js">
//ajouter votre code javaScript
</script>
exemple.html
myscript.js
<html>
let msg = "Hello world";
<head> …</head>
<body> document.write("mon message "+ msg);
<!--Appel du script externe-->
<script language="javascript" src="myscript.js">
</script>
</body>
</html> 10
“
SYNTAXE ET COMMENTAIRES

”
Syntaxe de base

 JavaScript emprunte la plupart des éléments de sa syntaxe à Java, C et C++ mais sa syntaxe est
également influencée par Perl et Python.
 En JavaScript, les instructions sont séparées par des points-virgules.
 Il n'est pas nécessaire d'inclure un point-virgule si l'on écrit une instruction sur une nouvelle ligne
 JavaScript est sensible à la casse
 Un commentaire sur une ligne s’écrit après un double slash :
 Un commentaire sur plusieurs lignes s’écrit entre deux balises /* et */

12
“
AFFICHAGE DANS UN FICHIER
HTML
”
Affichage dans un fichier HTML

 La fonction document.write(texte) Ecrit le paramètre texte dans le document, à la position de


l'appel du script.
 Le paramètre texte peut être une chaîne de caractères classiques, du code(HTML , CSS, …)
 Utiliser le symbole ‘+’ pour concaténer plusieurs chaîne dans document.write

<body>
<script language="javascript" >
bonjour = "Bonjour !";
question = "Comment allez vous ";
phrase = bonjour + "<BR>" + question;
document.write(phrase, "aujourd'hui ?");
</script>
<body> 14
Affichage dans un fichier HTML

15
“
LES BOITES DE DIALOGUE

”
Les boites de dialogue

 Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un événement, et
qui permet
 Soit d'avertir l'utilisateur
 Soit le confronter à un choix
 Soit lui demander de compléter un champ pour récupérer une information

 JavaScript propose 3 boîtes de dialogue par défaut (de l’objet window) qui permettent
d’interagir avec l’utilisateur
 alert() : permet d’afficher un message.
 confirm() : permet de récupérer une valeur booléenne
 prompt() : permet de récupérer une valeur textuelle.
17
alert()

 Alert(): Elle permet d’afficher un texte et/ou le contenue d’une variable et un bouton « OK ».

Code résultat
alert("Mon message");

let x = 20;
alert("Mon age est "+ x);

18
confirm()

 confirm(): Elle permet d’afficher un message et deux boutons : un bouton « OK » et un bouton


«Annuler ». Cette fonction retourne une valeur booléenne qui vaut « true » si c’est le bouton
« OK » qui est cliqué et retourne « false » si c’est le bouton « Annuler » qui est cliqué.
let choix = confirm( "Cliquer sur un bouton" ) ;
if(choix==true)
alert("vous avez cliqué sur oui");
else
alert("vous avez cliqué sur annuler");

Si vous cliquez sur OK Si vous cliquez sur Annuler

19
prompt()
 prompt(): Elle permet d’afficher un message, un champ à remplir (input de type texte) et un
bouton « OK ». Elle retourne la valeur qui a été entré dans le champ par l’utilisateur.
 La méthode prompt() requiert deux arguments :
 Le texte à afficher dans la boite de message
 la chaîne de caractères par défaut dans le champ de saisie
// La valeur à saisir dans l’input sera sauvegardé dans la variable “age”
var age = prompt("saisir votre age", 20);
let age = prompt("saisir votre age", 20);

Valeur par
défaut

20
Développement Web et MM-II
CHAPITRE 2

VARIABLES ET CONSTANTES
LA DECLARATION ET L’AFFECTATION
PLAN

 LES TYPES DE VARIABLE


 Les opérateurs
Les variables

 Les variables sont des conteneurs dans lesquels on peut stocker des valeurs.
 En Javascript, les noms de variables doivent répondre à certains critères :
 Il doit commencer par une lettre ou un "_"
 Il peut comporter des lettres, des chiffres et les caractères _ et &
 Javascript est faiblement typé : le langage déterminera automatiquement le type d'une
variable, on n'a donc pas besoin de spécifier le type d'une variable à sa création.
 Il est possible de modifier le type d'une variable au cours de l’exécution du programme.

23
Déclaration

 La déclaration consiste à donner un nom à la variable, alors que l’affectation consiste à donner
une valeur à la variable.
 Le type n’est pas précisé lors de la déclaration.

Symbole Rôle Exemple

var On déclare une variable dont la portée est globale var age = 20

let On déclare une variable dont la portée est celle du bloc let nom =‘Ahmed’;
courant. La plus utilisée.
const const PI=3.14;

 La syntaxe de déclaration des variables avec let correspond à la nouvelle syntaxe. La syntaxe
avec var est l’ancienne syntaxe qui est vouée à disparaitre.
24
let vs. var

 Remontée (Hoisting)
 Avec var, on n’est pas obligé de déclarer la variable avant de la manipuler dans le code.
 Cela est possible car le JavaScript va traiter les déclarations de variables effectuées avec var
avant le reste du code JavaScript.
 Ce comportement, appelé remontée ou hoisting, a été jugé comme inadapté dans les versions
récentes de JavaScript et a donc été corrigé dans la déclaration de variables avec let

//Ceci fonctionne
prenom = "Toto";
var prenom;

//Ceci ne fonctionne pas et renvoie une erreur


nom = "Toto";
let nom;
25
let vs. var

 La re-déclaration de variables
 Avec l’ancienne syntaxe var, on avait le droit de déclarer plusieurs fois une même variable en
utilisant à chaque fois var (ce qui avait pour effet de modifier la valeur stockée).
 La nouvelle syntaxe avec let n’autorise pas cela. Pour modifier la valeur stockée dans une
variable avec la nouvelle syntaxe, il suffit d’utiliser le nom de la variable et de lui affecter une
autre valeur.

//Ceci fonctionne
var prenom = "Toto";
var prenom="Tata";

//Ceci ne fonctionne pas et renvoie une erreur


let nom = "Toto";
let nom="Tata";
26
“
LES TYPES DE VARIABLES

”
Les types de variables

 En JavaScript, il existe 8 types de valeurs différents. Chaque valeur qu’on va pouvoir créer et
manipuler en JavaScript va obligatoirement appartenir à l’un de ces types:
 String
 Number
 Bigint
 Boolean
 Null
 Undefined
 Symbol
 Object
 Voir: https://www.w3schools.com/js/js_datatypes.asp
28
Les types de variables

 JavaScript a des types dynamiques. Cela signifie que la même variable peut être utilisée pour
contenir différents types de données :

let x; // Now x is undefined


x = 5; // Now x is a Number
x = "John"; // Now x is a String

29
Chaîne de caractères ou « String »

 Une chaine de caractères est une séquence de caractères, ou ce qu’on appelle


communément un texte.
 Toute valeur stockée dans une variable en utilisant des guillemets ou des apostrophes sera
considérée comme une chaine de caractères, et ceci même dans le cas où nos caractères
sont à priori des chiffres comme "29" par exemple.

// Using double quotes: // Single quote inside double quotes:


let carName1 = "Volvo XC60"; let answer1 = "It's alright";
// Using single quotes: // Double quotes inside single quotes:
let carName2 = 'Volvo XC60’; let answer3 = 'He is called "Johnny"';

30
Les nombres « Number»

 En JavaScript, et contrairement à la majorité des langages, il n’existe qu’un type prédéfini qui
va regrouper tous les nombres qu’ils soient positifs, négatifs, entiers ou décimaux (à virgule) et
qui est le type Number.

let x = 10; // x un entire positif


let y = -2; // y un entire négatif
let z = 3.14; // z un nombre decimal positif

 BigInt:
 JavaScript BigInt est un nouveau type de données (ajouté en 2020) qui peut être utilisé pour
stocker des valeurs entières trop grandes pour être représentées par un nombre JavaScript
normal ( 64-bit floating-point )

31
Booléen ou « Boolean »

 Le type booléen ne contient que deux valeurs : les valeurs true (vrai) et false (faux).

let x = 5;
let y = 5;
let z = 6;
(x == y) // Returns true
(x == z) // Returns false

32
Les types de valeurs Null et Undefined

 La valeur undefined correspond à une variable « non définie », c’est-à-dire une variable à
laquelle on n’a pas affecté de valeur.
 En JavaScript, une variable sans valeur a la valeur undefined. Le type est également undefined.

let car; // Value is undefined, type is undefined

 La définition de Undefined ressemble à celle de null et pourtant ces deux valeurs sont
différentes. Si on déclare une variable et qu’on lui passe null, alors son type sera Object.

let car = null; // The value is null, the typeof is object

 Attention à ne pas confondre avec les valeurs vides

let car = ""; // The value is "", the typeof is string

33
L'opérateur typeof

 L'opérateur typeof renvoie le type d'une variable ou d'une expression :


typeof "" // Returns "string"
typeof "John" // Returns "string"
typeof "John Doe" // Returns "string“

typeof 314 // Returns "number"


typeof 3.14 // Returns "number"
typeof (3) // Returns "number"
typeof (3 + 4) // Returns "number"

34
Conversion de types

 Les types de données sont convertis automatiquement durant l'exécution du script.

 Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi
que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères :
x = "La réponse est " + 42; // "La réponse est 42"
y = 42 + " est la réponse"; // "42 est la réponse"

 Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas


nécessairement les valeurs numériques en chaînes de caractères.
"37" - 7; // 30
"37" + 7; // "377"

35
Conversion de type

 Plusieurs fonctions permettent la conversion de type en Javascript:


 Convertir une chaine en un nombre:
 Number() : Renvoie un nombre, converti à partir de son argument
 parseFloat() : Analyse une chaîne et renvoie un nombre à virgule flottante
 parseInt() : Analyse une chaîne et renvoie un entier

Number("3.14") ; // returns 3.14


Number(Math.PI); // returns 3.141592653589793
Number(" "); // returns 0
Number(""); // returns 0

Number("99 88");// returns NaN


Number("John"); // returns NaN
36
Conversion de type

parseInt("-10"); // returns -10 parseFloat("10"); // returns -10


parseInt("10.33"); // returns 10 parseFloat ("10.33"); // returns 10.33
parseInt("10 20 30"); // returns 10 parseFloat("10 6"); // returns 10
parseInt("10 years"); // returns 10 parseIntFloat ("10 years"); // returns 10
parseInt("years 10"); // returns NaN parseInt("years 10"); // returns NaN

37
Conversion de type

 Une chaîne non numérique est convertie en NaN (Not a Number)


 La fonction isNaN() renvoie true si une valeur est NaN.

isNaN(0/0); //true
isNaN(‘’); //false
isNaN('A’); // true
isNaN(true); //false
isNaN(false); //false

38
Conversion de type

 On utilise les même fonctions pour convertir les booléens


Number(false) // returns 0
Number(true) // returns 1

String(false) // returns "false"


String(true) // returns "true"

39
Conversion de type

 Plusieurs fonctions permettent la conversion de type en Javascript:


 Convertir un nombre en une chaine:
 String() : Renvoie une chaine, converti à partir de son argument

let x = 123;
String(x); //123 returns a string from a number variable x
String(123) ; //123 returns a string from a number literal 123
String(100 + 23); //123 returns a string from a number from an expression

40
“
LES OPÉRATEURS

”
Les opérateurs arithmétiques

42
Les opérateurs de comparaison

43
Les opérateurs logiques

44
Les opérateurs d'incrémentation

45
Développement Web et MM-II
CHAPITRE 3

LES STRUCTURES DE CONTRÔLE


PLAN 


Les structures conditionnelles
LES structures itératives
“
LES STRUCTURES CONDITIONNELLES

”
Structure conditionnelle simple (if…)
 Syntaxe:

if (condition)
{ Bloc d’instructions }

 Exemple:

if (x==2)
document.write("X vaut 2");

49
Structure conditionnelle composée
(if…else)
 Syntaxe:

if (condition)
{ Bloc d’instructions 1 }
else
{ Bloc d’instructions 2 }

 Exemple:

if (x==2)
document.write("X vaut 2");
else
document.write("Autre valeur");

50
Structure conditionnelle à choix multiple
(switch… case )
 Syntaxe:  Exemple:

switch (Variable) let x=prompt("Entrez un chiffre entre 1 et 3") ;


{
case Valeur1 : Liste d’instructions 1; switch (x) {
break ; case "1" : alert("La valeur 1") ; break ;
case Valeur2 : Liste d’instructions 2 ; case "2" : alert("La valeur 2") ; break ;
break ; case "3" : alert("La valeur 3") ; break ;
case ValeurN : Liste d’instructions N ; default : alert("Vous n’avez pas entré une
break ; valeur autorisée !") ;
default : Liste d’instructions par défaut ; }
break ;
}

51
“
LES STRUCTURES ITÉRATIVES

”
Boucle for
 Syntaxe:

for (initialisation ; condition ; itération)


{ Bloc d’instructions }

 Exemple:

for (let i = 0; i < 10; i++)


{
document.write(i + " ");
}

53
Boucle while
 Syntaxe:

while (condition)
{
Bloc d’instructions
}

 Exemple:

let compt=1;
while (compt<5) {
document.write ("ligne : " + compt + "<BR>");
compt++;
}

54
Boucle do … while
 Syntaxe:

do
{
Bloc d’instructions
}
while(condition);
 Exemple:

let compt=1;
do{
document.write ("ligne : " + compt +
"<BR>");
compt++;
}while(compt<5)
55
Développement Web et MM-II
CHAPITRE 4

TABLEAUX ET FONCTIONS
 Les tableaux

PLAN
 Les fonctions
 Les objets prédéfinis: Array, String, Math
 Les objets personnalisés
“
LES TABLEAUX

”
Les tableaux

 Tableau: Ensemble ordonné de valeurs accessibles par un indice numérique


 En JavaScript
 comme en C, C++, Java … cet indice démarre à 0
 Les tableaux sont des objets:
 Array est le type objet prédéfini (fonction constructeur) utilisé pour créer un tableau
 length est un attribut qui donne la taille du tableau
 Les éléments peuvent être de n’importe quel type (pas forcément le même type pour tous
les éléments du tableau)

let tab = [ "un" , "deux", "trois" ];


// tab = new Array("un" , "deux", "trois");
let tab1 = [ 1, "deux", 3];
console.log(typeof tab); //object
console.log(tab.length); //3 59
Création d’un tableau

 En utilisant le constructeur Array :


let colors = new Array();
let colors2 = new Array(5);
let colors3 = new Array("red","blue","green");

 En utilisant les […]


 Les tableaux peuvent utiliser les propriétés et méthodes du constructeur Array() .

let colors4 = ["red","blue","green",];


console.log(colors4.length)

60
Accéder à une valeur dans un tableau

 Pour accéder à une valeur en particulier dans un tableau, il suffit de préciser le nom du tableau
puis l’indice associé à la valeur à laquelle on souhaite accéder entre crochets [].

let colors= new Array("red","blue","green");


colors[1]="yellow"
alert(colors[1]); // "yellow""

 Parcourir toutes les valeurs d’un tableau

let tab = [] ;
for ( let i = 0 ; i < 5 ; i++) {
tab [i] = i;
document.write (tab[i]+" ");
}
61
Parcours d’un tableau: boucle for … of

 boucle sur les éléments :

let tab = [ "un" , "deux" , "trois" ];


for (let nb of tab) {
console.log(nb);
}

 C’est l’équivalent de la boucle for suivante:

for (let i = 0; i < tab.length; i++) {


console.log(tab[i]);
}

62
Les tableaux multidimensionnels

let langages = new Array(3);


for (let i=0; i < 3; i++){
langages[i] = new Array(3);
}
langages[0][0] = "JavaScript";
langages[0][1] = "HTML";
langages[0][2] = "CSS";

langages[1]=["Java", "PHP", "Python"];


console.log(langages);

63
“
LES FONCTIONS

”
Les fonctions

 On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instructions par


simple appel de la fonction.
 En Javascript, il existe deux types de fonctions :
 Les fonctions prédéfinies qui peuvent s'appliquer pour un objet spécifique, qu’on appelle
des méthodes.
 Les fonctions que vous définissez vous-même pour les besoins de votre script.
 Une fonction doit être définie avant d’être utilisée

65
Déclaration et appel

 Déclaration: via le mot clé function


function nomDeLaFonction(liste des arguments){
Liste des instructions;
return valDeRetour; //si la fonction retourne une valeur
}

 Appel: via le nom de la fonction et (éventuellement) sa liste d’arguments

nomDeLaFonction(arg1, arg2, ...)

66
Déclaration et appel

 Exemple:
function positif(x) {
if(x>=0)
console.log("Nombre positif");
else
console.log("Nombre négatif")
}

function somme(a, b){


return a+b;
}
positif(-6)
let s=somme(3,5);

67
La forme fléchée

 C’est une autre syntaxe de déclaration de fonctions qui est équivalente, côté fonctionnement,
à celle proposée auparavant.
let nomDeLaFonction = (liste des arguments)=>
{ Liste des instructions; }

 Exemples:
//Déclaration
let myFunction = (a, b) => a * b;
//appel
myFunction(4, 5)

hello = () => {
return "Hello World!"; }

 Voir: https://www.w3schools.com/js/js_arrow_function.asp
68
Portée des variables

 La « portée » d’une variable désigne l’espace du script dans laquelle elle va être accessible.
 En JavaScript, il n’existe que deux espaces de portée différents :
 L’espace global: le script entier, à l’exception de l’intérieur des fonctions
 L’espace local: l’espace dans une fonction.
 une variable définie dans l’espace global d’un script va être accessible à travers tout le script,
même depuis une fonction.
 une variable définie dans une fonction n’est accessible que dans cette même fonction et ne
peut pas être manipulée depuis l’espace global du script.

69
Portée des variables
//On déclare deux variables globales
let x = 5;
var y = 10;
//On définit une première fonction qui utilise les variables globales
function portee1(){
document.write("Depuis portee1() : <br>x = " + x + "<br>y = " + y+ "<br>");
}
//On définit une deuxième fonction qui définit des variables locales
function portee2(){
let a = 1;
var b = 2;
document.write("Depuis portee2() : <br> a = " + a + "<br>b = " + b+ "<br>");
}
//On définit une troisième fonction qui défnit également des variables locales
function portee3(){
let x = 20;
var y = 40;
document.write("Depuis portee3() : <br>x = " + x + "<br>y = " + y+ "<br>");
} 70
Portée des variables

//Exécuter les fonctions


portee1();
portee2();
portee3();
//Afficher les variables globales puis locales depuis l'espace global
document.write("Depuis l'espace global : <br>x = " + x +" <br>y = " + y+ "<br>");
document.write("Depuis l'espace global : <br>a = " + a + "<br>b =" + b);

71
“
LES OBJETS

”
Types primitif / type objet

 Type primitif: Une variable de type primitif ne stocke qu’une simple valeur (chaîne de
caractères, nombre, booléen…)
 Type objet: Un objet permet de définir des entités plus complexes en regroupant un ensemble
de valeurs pouvant être soit des valeurs primitives soit d’autres objets.
 Les objets ne sont pas qu'un regroupement de valeurs, il possèdent des fonctions, qu’on
appelle méthodes (les objets peuvent aussi avoir un comportement).
 Deux types d’objets
 Objets natifs
 types prédéfinis : Array, String, Date …
 objets liés à l'environnement d'exécution: window , document …
 Objets personnalisés
 types définis par l'application
73
L’objet String

 Un objet string est une chaîne de caractères.


 Il possède une seule propriété length et plusieurs méthodes

let s = "hello world";


alert(s.length); // 11

 L’objet String offre des méthodes de formatage du texte:


 toUpperCase(), toLowerCase()
 Ainsi que d’autre méthodes pour manipuler les chaines de caractères
 slice(), substring(), String trim()
 Voir: https://www.w3schools.com/js/js_string_methods.asp

74
L’objet String
let s = "hello world";
CharAt () : Cette méthode renvoie le caractère situé à la position x fournie en
paramètre. Le numéro de la position est compris entre 0 et la longueur de la chaîne –1.
alert(s.charAt(1)); // "e"
Substring (start, end).: Cette méthode renvoie la sous-chaîne comprise entre les
positions x et y indiquées en paramètres, dans la chaîne principale
alert(s.substring(3,7)); // "lo w"
Slice () : Equivalent à substring()
alert(s.slice(3)); // "lo world"
alert(s.slice(-3)); // "rld "

75
L’objet String

Substr(start, n) : Cette méthode renvoie le texte une sous-chaîne de la String, à


partir du début et sur n caractères.
alert(s.substr(6,2));//wo
IndexOf () : Cette méthode renvoie la première position d’une chaîne partielle dans une
autre chaîne en partant de gauche, à partir de la position x indiquée en paramètre. Si
elle n’est pas présente, la méthode renvoie –1.
alert(s.indexOf("o"));// 4
Concat () : Cette méthode renvoie la concaténation de la chaîne passée en paramètre
avec celle de la méthode.
x = "exemple " ;
alert(x.concat(s)) ;// exemple hello world
76
L’objet Math

 L'objet Math vous permet d'effectuer des opérations mathématiques.


 Math n'est pas un constructeur. Toutes les propriétés/méthodes de Math peuvent être appelées
en utilisant Math comme objet, sans le créer :

let x = Math.PI;
let y = Math.sqrt(16);

 Pour la liste des méthodes par l’objet Math,


 Voir: https://www.w3schools.com/jsref/jsref_obj_math.asp

77
L’objet Array

 Un objet Array représente un tableau.


 Il possède une seule propriété length et plusieurs méthodes

var colors = new Array("red","blue","green");


alert(colors); // red,blue,green
join (séparateur) : regroupe tous les éléments du tableau en une seule chaîne. Chaque
élément est séparé par un séparateur
alert(colors.join(";")); // red;blue;green
colors.push("black"); //Ajouter un élément à la fin du tableau
alert(colors); // red,blue,green,black
let item = colors.pop(); // Enlever le dernier élément du tableau
alert(item + " " + colors); // black red,blue,green 78
L’objet Array

let item = colors.pop(); // Enlever le dernier élément du tableau


alert(item + " " + colors); // black red,blue,green
let values = [0, 1, 2, 3, 4];
alert(values.reverse()); // 4,3,2,1,0
alert(colors.sort()); // blue,green,red

 Voir: https://www.w3schools.com/js/js_array_methods.asp

79
L’objet Date

 L’objet Date permet de manipuler les dates et les heures


 Les objets Date sont créés avec new Date().
 Il a les plusieurs propriétés: year, month, day, hours, minutes, seconds, milliseconds

let d= new Date();//la date courante


let d1= new Date(year, month, day[, hours, minutes, seconds, millis
econds]);//Les valeurs entre [] sont optionnelles

 L’objet Date offre plusieurs méthodes pour manipuler les dates:


 getDate(), getDay(), getMonth(), getSeconds(), getTime(), parse(), UTC(), etc.

 Voir: https://www.w3schools.com/jsref/jsref_obj_date.asp
80
“
LES OBJETS PERSONNALISÉS

”
Objets et propriétés

 Créer un objet personnalisé


let personne = new Object();
personne.nom = "Wissam";
personne.age = 23;
//ou bien
let personne = { nom : "Wissam", age : 23 }

 L’accès aux propriétés et méthodes de l’objet se fait par le .

 Le mot clé this fait référence à l’objet en cours: this.propriete

82
Objets et propriétés

 Les objets peuvent avoir des fonctions, qu'on appelle méthodes

personne.prez = function(){
alert('Bonjour, je suis ' + this.nom+
', j\'ai ' + this.age + ' ans ‘ );
}
personne.prez();

83
Questions?

Vous aimerez peut-être aussi