javaScript by notion (2)
Transféré par
cynefin.vim2javaScript by notion (2)
Transféré par
cynefin.vim2Java Script
I. I ntroduction :
le fichier app.js dans un dossier js frère de dossier css dans public , tout d’abord il doit liée le
fichier javascript (.js) par la commande suivante(dernier ligne de Body) :
<body>
<script src="./public/js/app.js"></script>
</body>
II. data type :
il y a plusieurs types de “data” ou bien plusieurs type de variable : string, number, array,
object, boolean, null, undefined . On peut vérifier le type de variable par la commande :
typeof + nom de variable
// soit string, number, array, object, boolean ...
Java Script 1
II. 1-Numbers :
let x=10 ; let y=`10` ;
let z = x==y ; // si x et y egaux afficher true
console.log(z); // true
let r = x===y ; // si x et y egaux et de même types afficher true
console.log(r); // false
let t = x+y ;
console.log(t); // 1010 parce que y (type string)
//* ## - Déclaration et changement de variable "number":
let nbr1=18 ;
let nbr2=20 ;
let nbr ;
nbr = nbr1 ;
nbr1 = nbr2 ;
nbr2 = nbr ;
console.log( `number one : ${nbr1}`);
console.log( `number two : ${nbr2}`);
//* ## - Déclaration d'un prompt :
let age = prompt('Vous avez quel age ?');
ageUser = parseInt(`${age}`) ; // "parseInt" ou "parseFloat" ou "number" pour
console.log(ageUser); // le type de variavle vers un nombre (number)
// ## les outils mathématiques :
let x = 8.56 ;
console.log(Math.round(x)); // le plus proche : 9 (si x = 8.1 donc le résultat c'es
Java Script 2
console.log(Math.ceil(x)); // augmenter x : 9 (si x = 8.1 donc le résultat c'est 9
console.log(Math.floor(x)); // diminue x : 8 (si x = -8.1 donc le résultat c'est -9
console.log(Math.trunc(x)); // enlever "," : 8 (si x = 8.1 donc le résultat c'est 8)
// console.log(parseInt(x)); autre méthode de trunc
console.log(Math.random()); // choisi un nombre aléatoire entre 0 et 1
console.log(Math.random()*100); // choisi un nombre aléatoire entre 0 et 100
console.log(Math.floor(Math.random( )*100));
console.log(Math.pow(8, 2)); // puissance : huit a puissance deux c'est 64
console.log(Math.sqrt(9)); // la rascine carré de 9 c'est 3
console.log(Math.abs(-1)); // la valeur absolu de moins un c'est un
console.log(Math.max(-2, 1000, 8, 57)); // le maximum c'est 1000
console.log(Math.min(-2, 1000, 8, 57)); //le minimum c'est -2
//* - # Variables temporaires (changement de variable ) :
//! - # Exo 1
let a = 1;
let b = 2;
let c = 3;
let temp1 ;
temp1 = a ;
a=b;
b=c;
c = temp1 ;
console.log(`a : ${a} b: ${b} c : ${c}` ); //resultat : 2 3 1
//* - ## Afficher le changement des variables
//! - # Exo 2
let a2 = 1;
let b2 = 2;
let c2 = 3;
let d2 = 4 ;
let temp2 ;
temp2 = d2 ;
d2 = a2 ;
a2 = temp2 ;
temp2 = c2 ;
c2 = b2 ;
Java Script 3
b2 = temp2 ;
//resultat : 4 3 2 1
//## Number Methods Script :
let num = 123.456789;
// 1. Expected output 123.46
console.log(num.toFixed(2)); // deux chiffre après la virgule
// 2. Expected Outputs: "123.5"
console.log(num.toPrecision(4)); // afficher le nombre spécifique (dans ce cas
// 3. Expected Outputs: "1111011.011110000101000111101011100001010001111010
console.log(num.toString(2)); // traduire le nombre au binaire base 2 (base 2,
let str = "42";
// 4. Expected Outputs: 42
console.log(parseInt(str)); // changer le type de variable vers un nombre entie
let floatStr = "3.14";
// 5.Expexted Outputs: 3.14
console.log(parseFloat(floatStr)); // vers un nombre flottant(Float)
// 6. Check if the variable is not a number
let notNumber = "Hello"
console.log(isNaN(notNumber)); // true parce que "is Not A Number (NAN)
// 7. Bonus : check if the variable is finite
console.log(isFinite(num)); // true parce que num est un nombre fini
II. 2-String :
// String Manipulation Exercise
// Given the following string:
let codingSchool = "coding schooL 2";
// 1. Log the first character of the string in uppercase.
console.log(codingSchool.charAt(0).toUpperCase() + codingSchool.slice(1));
// 2. Log the last character of the string in lowercase.
console.log(codingSchool.charAt(codingSchool.length - 1).toLowerCase());
// 3. Log the length of the string.
console.log(codingSchool.length);
// 4. Log the string with leading and trailing whitespaces removed.
console.log(codingSchool.trim()); // supprimer les espaces avant -c- et après
// 5. Log the index of the letter 's' in the string.
Java Script 4
console.log(codingSchool.indexOf("s")); // juste le première !!!
// 6. Log word that starts at index 3 and includes the next 7 characters.
console.log(codingSchool.substring(3,10));
// 7. Log the string with the word "school" replaced by "bootcamp".
console.log(codingSchool.replace("schooL", "bootcamp"));
// 8. Log the array obtained by splitting the string into words.
console.log(codingSchool.split(` `));
// 9. Log the second word in the string.
console.log(codingSchool.split(" ")[1]); // transfere les mots en array et affich
// 10. Log the string in reverse.
console.log(codingSchool.split("").reverse().join("")); // inversé un string !!!
// splite("") : transperé le string en array par chaque caractere
// reverce() : pour reversé l' array
// join("") : pour transferé l'array en string (le contraire de splite("")
// Note: The codingSchool variable remains unchanged after each operation.
//## replace :
let paragraph = "I think Ruth's dog is cuter than your dog!";
console.log(paragraph.replace("Ruth's", 'my'));
// Expected output: "I think my dog is cuter than your dog!"
//## repeat :
let mood = 'Happy! ';
console.log(`I feel ${mood.repeat(3)}`);
// Expected output: "I feel Happy! Happy! Happy! "
//## Create a variable that uses a Windows
// path without escaping the backslashes:
let filePath = String.raw`C:\Development\profile\aboutme.html`;
console.log(`The file was uploaded from: ${filePath}`);
// Expected output: "The file was uploaded from: C:\Development\profile\abou
//## padStart :
let fullNumber = '2034399002125581';
let last4Digits = fullNumber.slice(-4);
Java Script 5
let maskedNumber = last4Digits.padStart(fullNumber.length, '*');
console.log(maskedNumber);
// Expected output: "************5581"
//## padEnd :
let str1 = 'Breaded Mushrooms';
console.log(str1.padEnd(25, '.')); // ecrire "str1" et des points (jusqu'a length =
// Expected output: "Breaded Mushrooms........"
let str2 = '200';
console.log(str2.padEnd(5)); // Nous n'avons pas précisé par quoi cela se term
// Expected output: "200 " // ecrire "str2" + 2 espace (espace par défaut !)
la différence entre slice et splice :
1-
slice(indice1 : départ , indice2 : fin+1) : comme la dernière exemple
couper une partie par deux indice le premier indice "indice1" pour le
premier index de caractère et la deuxième pour la dernière index+1
(indice2 ) . // parce que indice2, Il n'est pas pris en considération . on
peut utiliser un seul indice (indice1) si on coupe un seul caractère
comme le cas de première caractère on majuscule .
⇒ !!! pour le String et Array la même chose !!!
2-
splice(indice1 , indice2 , ‘nouveau mot’) : on va voir dans ( II. 4-array : )
⇒ !!! pour le String !!!
II. 3-Boolean :
// Tout simplement le “Boolean” c’est ‘True’ ou ‘False’ soit comme ça :
let x = true ;
let y = false ;
// ou sous forme une question :
Java Script 6
let z = x==y ; // false
let w = 4==5 ; // false
let a = 6>3 ; // true
II. 4-Array :
la différence entre slice et splice :
2-
splice(indice1 , indice2 , ‘nouveau mot’) : indice1 représente le début
(index star) et la deuxième (indice2) combien des indice à supprimer et
la dernier le mot qui vous voulez ajouter dans cette espace (entre
indice1 et indice2).
⇒ !!! juste pour le String !!!
let months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb'); // Inserts at index 1
console.log(months); // Expected output: Array ["Jan", "Feb", "March", "April",
months.splice(4, 1, 'May'); // Replaces 1 element at index 4
console.log(months); // Expected output: Array ["Jan", "Feb", "March", "April",
// ## join('l'élément de séparation entre deux éléments') :
console.log(months.join(' $ ') ); // Jan $ Feb $ March $ April $ May
//* Variables temporaires (changement de variable ) :
let tableau = [1, 2, 3, 4];
// //^ Temp index 0 - 3 value 1 - 4
let temp = tableau[0];
tableau[0] = tableau[3];
tableau[3] = temp ;
// //^ Temp index 1 - 2 value 2 - 3
temp = tableau[1];
Java Script 7
tableau[1] = tableau[2];
tableau[2] = temp ;
console.log(tableau[0], tableau[1], tableau[2], tableau[3]);
// resultat : 4 3 2 1
//## length :
let fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length; // le nombre des élément d'un array dans ce cas éga
console.log (fruits[0] ) ; // Banana !!! length = index + 1 !!!
fruits.push("Lemon"); // ajouter nouveau élément "Lemon" au fruits
fruits[fruits.length] = "Lemon"; // autre méthode
let namesArray = ["l3arbi", "Bob", "bouch3ayb", "David", "Eva"];
// 1. Array length Expected Outputs: 5
console.log(namesArray.length);
console.log (namesArray[0]) ; // l3arbi !!! length = index + 1 !!!
// 2. Array Expected Outputs: "l3arbi,Bob,bouch3ayb,David,Eva"
console.log(namesArray.join(","));
// 3. Array Expected Outputs: ["l3arbi", "Bob", "bouch3ayb", "David"] Remove
namesArray.pop(); //supprimer la dernier élément
console.log(namesArray);
// 4. Array Expected Outputs: ["l3arbi", "Bob", "bouch3ayb", "David", "Frank"
namesArray.push("Frank", "Grace") //ajouter les éléments au namesArray (ar
console.log(namesArray);
// 5. Array Expected Outputs: ["Bob", "bouch3ayb", "David", "Frank", "Grace"]
namesArray.shift() ; // supprimer le premier élément
console.log(namesArray);
// 6. Array Expected Outputs: ["l3arbi", "Zoe", "Bob", "bouch3ayb", "David", "F
Java Script 8
namesArray.unshift ( "l3arbi", "Zoe", ); //ajouter élément ou plus ou départ d'a
console.log(namesArray);
// 7. Array Expected Outputs: "l3arbi-Zoe-Bob-bouch3ayb-David-Frank-Grac
console.log(namesArray.join('-'));
let additionalNames = ["Hank", "Ivy"];
// 9. Array Expected Outputs: ["l3arbi", "Zoe", <1 empty item>, "bouch3ayb",
namesArray = namesArray.concat(additionalNames) ; // ajouter les élément de
namesArray.push.apply(namesArray , additionalNames) // même chose
delete namesArray[2] ;
console.log(namesArray);
let myArr = [[1,2],[3,4],[5,6]];
let newArr = myArr.flat(); // [1, 2, 3, 4, 5, 6]
// les méthodes de array :
//1.Filter :
let words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
let result = words.filter( element => element.length > 6);
console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"] : résultat sou
//2.Find
let words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
let result = words.find( element => element.length > 6);
console.log(result);
// Expected output: exuberant : resultat sous forme d'un élément (sauf le prem
//3.FindIndex :
let array1 = [5, 12, 8, 130, 44];
console.log(array1.findIndex((element) => element > 13));
// Expected output: 3 : resultat sous forme d'un élément (sauf le premier qui v
//4.Reduse :
let array1 = [1, 2, 3, 4];
// 0 + 1 + 2 + 3 + 4
let initialValue = 0;
let sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator
initialValue,
);
console.log(sumWithInitial);
Java Script 9
// Expected output: 10 (la somme de tout les éléments de l'array plus la valeur
//5.Includes :
let array1 = [1, 2, 3];
console.log(array1.includes(2));
// Expected output: true
let pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// Expected output: true
console.log(pets.includes('at'));
// Expected output: false
// resultat sous forme fe confermation si l'élément exist ou non (boolean) .
//6.Sort :
classement des éléments d'un array :
let months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"] résultat avec l'order a
let array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4] résultat avec comme l'order a
let array2 = [1, 30, 4, 21, 100000];
array2.sort((a, b) => b - a); // classé les éléments de manière décroissante
// array2.sort((a, b) => a - b); // classé les éléments de manière croissante
console.log(array2);
// Expected output: Array [ 100000, 30 , 21 , 4 ,1] résultat avec comme l'order
II. 5-Object :
// déclaration d'un Objet ( méthode direct) :
// Déclaration de variable de type objet (Object) :
let object = { key1 : value1 ,
key2 : value2 ,
key3 : value3 } ;
// Exemple :
let Achraf = { firstname : "achraf" ,
lastname : 'gasbi' ,
age : 23 ,
Java Script 10
job : "student" ,
}
// On peut ajouter d'autre propriétés par les méthodes suivantes :
//méthode 1 :
Achraf.friend = ["ismail" , "hamza" , "hamza" , "zakaria" , "larbi" , "zouhair"]
//méthode 2 :
Achraf["friend"] = ["ismail" , "hamza" , "hamza" , "zakaria" , "larbi" , "zouhai
//méthode 3 :
Object.assign(Achraf , {friend :["ismail" , "hamza" , "hamza" , "zakaria" , "lar
//Exemple d'une méthode (fontion à l'interieur d'un objet) :
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
} // this c'est "person" exemple : this.firstName équivalant de person.firstNam
};
// déclaration d'un Objet ( méthode "class") :
// création d'un class avec méthode :
class Person {
constructor(name, age, city) {
this.name = name
this.age = age
this.city = city
}
hello() {
console.log(`Hello ${this.name} and my age is ${this.age}`);
}
// création d'un objet à partir de la class :
let person1 = new Person("boujem3a", 25, "mn hna")
Java Script 11
// création d'un nouveau class à partir d'un encient class :
//! contient les même propiétés plus d'autres .
class Student extends Person {
constructor(name , age , city , note){
super(name , age , city)
this.note = note
}
let student1 = new Student("chiwa7d" , 15 , "casa" , 25)
// Target an element in the Object :
Object.keys(person)[0] // => firstName
Object.values(person)[0] // => John
Object.assign(target, source);
object.hasOwnProperty('property1')
// exemples :
// exemple1 : Object.keys and Object.values
let achraf = {
firstName: "achraf",
lastName : "gasbi",
id : 5566,
coures : [{s1 : 13.46 ,
s2 : 15 ,
master : [ 14.21 , {name : 'mécanique énergétique' ,
faculty : 'faculty of sciences benmsik' }]}]
}
console.log(Object.keys(achraf.coures[0].master[1])[0]); // name
console.log(Object.values(achraf.coures[0].master[1])[0]); // mécanique énerg
console.log(Object.keys(achraf.coures[0].master[1])[1]); //faculty
console.log(Object.values(achraf.coures[0].master[1])[1]); //faculty of science
// exemple 2 : Object.assign
let target = { a: 1, b: 2 };
Java Script 12
let source = { b: 4, c: 5 };
let returnedTarget = Object.assign(target, source);
console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }
// exemple 3 : object.hasOwnProperty
let object1 = {};
object1.property1 = 42;
console.log(object1.hasOwnProperty('property1'));
// Expected output: true (boolean)
III. Conditions :
III. 1-introduction :
III. 2-Exemples :
III.2-1 Exemple 1 :
Affiche une multiplication à l'utilisateur et demande lui de la résoudre,
si il répond juste félicitez le "la réponse était bien xx" sinon dite lui, à
combien d'unité il était de la réponse exemple si la réponse était 35 et
qu'il répond 40 renvoyez lui une alerte avec "C'est dommage, tu n'étais
qu'a 5 unité de la bonne réponse”
let x = Math.floor(Math.random()*10) ;
let y = Math.floor(Math.random()*10) ;
let x_fois_y = x*y ;
multi =prompt(`ecrivez la bonne reponse : ${x} * ${y} = `)
multi = Number(multi) ;
Java Script 13
console.log(multi);
let reponse = Math.abs (multi - x_fois_y) ;
if (multi == x_fois_y) {
console.log(`félicitations, la réponse était bien`);
}else {
alert (`C'est dommage, tu n'étais qu'a ${reponse} unité de la bonne réponse
}
III.2-2 Exemple 2 : le discriminant delta
alert(`l'équation de second degré s'écrit sous la forme suivant : ax^2+bx+c= 0
let a= parseInt(prompt(`entrer la valeur de a :`)) ;
let b= parseInt(prompt(`entrer la valeur de b :`)) ;
let c= parseInt(prompt(`entrer la valeur de c :`)) ;
let delta = Math.pow(b , 2) - 4*a*c ;
console.log(`le discriminant delta égale a ${delta}`);
if (delta > 0) {
let x1 = (-b + Math.sqrt(delta))/(2*a) ;
let x2 = (-b - Math.sqrt(delta))/(2*a) ;
alert(`il y a deux solutions réels : x1= ${x1} et x2= ${x2} .`)
console.log(`il y a deux solutions réels : x1= ${x1} et x2= ${x2} .`);
}else if (delta == 0) {
let x = (-b)/(2*a) ;
alert(`il y a un solution double : x= ${x} .`)
console.log(`il y a un solution double : x= ${x} .`) ;
}else{
alert(`il n'y a pas de solution (réel) .`)
console.log(`il n'y a pas de solution (réel) .`);
}
IV. Boucles :
Java Script 14
III. 1-Boucle for :
III.1-1 For :
Java Script 15
// boucle for par défaut :
for (let index = 0; index < array.length; index++) {
let element = array[index];
}
// En générale :
for (`condition pour refaire la boucle si la condition true `) {
// code ...
}
⇒ Exemple :
// séparer les éléments ça dépond de leur type :
let donnees = [14, 7, 97, {}, "247", 67, 101, true, 34, 78, [], 'coding school', 0, 11,
let typeString = [];
let typeNumber = [];
let typeObject = [];
let typeAutre = [];
for (let index = 0; index < donnees.length; index++) {
let element = donnees[index];
let type = typeof element;
if (type == "string") {
typeString.push(element);
} else if (type == 'number') {
typeNumber.push(element);
} else if (type == 'object') {
typeObject.push(element);
} else {
typeAutre.push(element);
}
}
console.log(typeString);
console.log(typeNumber);
console.log(typeObject);
console.log(typeAutre);
Java Script 16
III.1-2 Foreach (cas particulier):
// boucle foreach par défaut (pour tous les élément d'un array ):
array.forEach(element => {
// code ....
});
⇒ Exemple :
// mettre le premier et la dernier character en majuscule :
let table = ["acHRaf" , "hamza" , "zakaria" , "wissal" , "youness" , "ibrahim" , "
table.forEach(element => {
let index = table.indexOf(element)
element = element.toLowerCase() ;
let x = parseInt(element.length) -1 ;
let firstlettre = element[0].toUpperCase() ;
let lastlettre = element[x].toUpperCase() ;
let meddle = element.slice(1,-1) ;
element = firstlettre+meddle+lastlettre ;
table[index] = element ;
III. 2-Boucle while :
III.2-1 While :
while (condition) {
⇒ Exemple :
8. Exo 08
- Demandez a l'utlisateur de remplir un panier de fruit jusqu'a en
obtenir 8
- Quand son panier est rempli montrez lui, puis demandez lui si il
désire retirer un fruit
- Si il met le nom d'un fruit alors le fruit est retiré, on lui montre son
Java Script 17
nouveau panier puis on lui repose la question, si il met autre chose que
le nom d'un fruit alors on lui dit "Merci bon appétit" .
- Chaque fruit entré par l'utilisateur doit finir par être orthographié
avec une première lettre majuscule et le reste en minuscule
- Lui montrer son panier avec la première lettre en majuscule .
let i = 0;
let fruits = [];
while (i < 4) {
let ask_fruit = prompt(`entrer le nom de fruit`);
fruits.push(ask_fruit);
i++;
}
alert(fruits.join(' , '))
console.log(fruits.join(' , '));
ask_ok = prompt(`est ce que vous voulez de supprimer un élément ?`);
while (true) {
if (ask_ok == 'oui' || ask_ok == 'yes') {
let name_vgb = prompt(`entrer le nom de fruit que vous voulez supprimer
let index = fruits.indexOf(`${name_vgb}`);
console.log(index);
fruits.splice(index, 1);
console.log(fruits);
let secondAsk = prompt(`est que vous voulez supprimer autre fruit ?`)
while (true) {
if (secondAsk == 'oui') {
let name_vgb2 = prompt(`entrer le nom de fruit que vous voulez supp
let index2 = fruits.indexOf(`${name_vgb2}`);
console.log(index2);
fruits.splice(index2, 1);
console.log(fruits);
break
} else {
console.log(`merci bon appetit`);
break
}
}
Java Script 18
} else if (ask_ok == 'non' || ask_ok == 'no') {
console.log(`d'accord merci`);
} else {
console.log(`le non que vous avez choisi n'est pas existe`);
}
break
💡 il y a d’autre types de boucle while ((do …while) … )
V. Fonction (Function) :
function name(params) {
⇒ Exemple :
// Outil mathématique (factorielle(x!) : 5! = 5 x 4 x 3 x 2 x 1 = 120 :
function factoriel(params) { // déclaration de fonction avec son nom (factoriel)
params = parseInt(prompt(`enter number`)) ;
let i= params ;
let table = [] ;
while (i > 0) {
table.push(i) ;
i--
}
let result = 1
for (let index = 0; index < table.length; index++) {
let element = table[index];
result *= element ;
console.log(result);
}
Java Script 19
}
factoriel() //appel de fonction
💡⇒ Note : il y a plusieurs types de déclaration d’un fonction
la fonction écrit dans un autre s’appelle méthode .
VI. Execice d'application :
VI.1- exercice1 (complex problem 1 : University )
⇒ énonce :
Complex Problem Statement: Data Processing and Analysis
Imagine you have a dataset containing information about students, their
grades, and the courses they have taken. Your task is to perform various
data processing and analysis tasks using JavaScript. Here are the
detailed steps:
Data Representation:
(done)Create an object called university that represents a university
database.
The university object should have properties for the university name,
location, and an array of student records.
Student Records:
(done)Each student record should be represented as an object with
properties such as student ID, name, age, and an array of courses.
Populate the university object with at least 5 student records.
Grade Calculation:
(done)For each student, calculate the average grade across all their
Java Script 20
courses.
Add a new property to each student object to store their calculated
average grade.
Course Analysis:
(done)Create a function called getCourseStatistics that takes a course
name as a parameter and returns an object with the following statistics:
Number of students enrolled in the course.
Average grade of students in the course.
Top Performing Students:
(done)Create a function called getTopPerformers that takes a number
(N) as a parameter and returns an array of the top N performing students
based on their average grades.
Student Age Analysis:
- Create a function called getAgeDistribution that returns an object
representing the distribution of students across different age groups
(e.g., 18-20, 21-25, etc.).
Output:
Print the university object and the results of each analysis function to
the console.
⇒ Correction :
// * Complex Problem Statement: Data Processing and Analysis
//* creation de la base de donner
let university = {
nameUniv: 'universite hassan 2',
Java Script 21
location: 'N°51, HAY IFRIQUIA RUE ECHAHID ELOUALID ESSAGHIR, Casabla
students: [{
studentId: 1,
studentName: 'achraf GASBI',
age: 23,
courses: [{
mat: 15,
svt: 15,
pc: 10,
python: 12,
catia: 16,
js: 13
}]
},
{
studentId: 2,
studentName: 'ismail OUTMAGHOST',
age: 22,
courses: [{
mat: 10,
pc: 10,
svt: 15,
lanC: 12
}]
},
{
studentId: 3,
studentName: 'hamza OUFKIR',
age: 20,
courses: [{
mat: 12,
pc: 10,
svt: 15,
eco: 13
}]
},
{
studentId: 4,
Java Script 22
studentName: 'zakaria DAHAR',
age: 18,
courses: [{
mat: 8,
pc: 10,
svt: 15,
bio: 8
}]
},
{
studentId: 5,
studentName: 'redouane FOUZI',
age: 26,
courses: [{
mat: 16,
pc: 10,
svt: 15,
flambage: 19,
catia: 15
}]
}
]
};
console.log(`*************************** parte 0 : déclaration de data *******
//* Solution :
// ^Part 1 calculate the average :
console.log(`*************************** Part 1 : calculate the average ******
let averageGeneral = [];
for (let index = 0; index < university.students.length ; index++) {
let somme = 0
for (let i = 0; i < Object.keys(university.students[index].courses[0]).length; i
let element = Object.values(university.students[index].courses[0])[i] ;
somme += element ;
Java Script 23
// console.log(somme/Object.keys(university.students[index].courses[0]).le
university.students[index].average = somme/Object.keys(university.student
averageGeneral.push(university.students[index].average) ;
averageGeneral.sort((a, b) => b - a);
// console.log(`dddddddddddddddddddddd`);
// console.log(averageGeneral);
console.log(university);
console.log(`***************************fin Part 1 : calculate the average ****
// ^Part 2 Create a function called getCourseStatistics :
console.log(`***************** part 2 : function called getCourseStatistics **
function getCourseStatistics(params) {
let sommeMatiere = 0 ;
let nombreEtu = 0 ;
let averageMatiere
for (let index = 0; index < university.students.length ; index++) {
for (let i = 0; i < Object.keys(university.students[index].courses[0]).length
if (params == Object.keys(university.students[index].courses[0])[i] ) {
sommeMatiere += Object.values(university.students[index].courses[
nombreEtu ++ ;
averageMatiere = sommeMatiere /nombreEtu ;
}
}
}
console.log(`la somme des notes de la matière ${params} est : ${sommeMa
}
getCourseStatistics ('mat')
getCourseStatistics ('pc')
getCourseStatistics ('svt')
getCourseStatistics ('catia')
getCourseStatistics ('js')
Java Script 24
console.log(`***************** fin part 2 : function called getCourseStatistics
// ^Part 3 Create a function called getTopPerformers :
console.log(`***************** fin part 3 : function called getTopPerformers *
function getTopPerformers(N) {
let resultat = [] ;
let pas = 0 ;
while (pas< N ) {
if (N <= university.students.length) {
resultat.push(averageGeneral[pas]) ;
pas++
}else{
console.log(`il n'exicte pas ce nombre d'étudiant`);
break
}
}
console.log(resultat);
}
getTopPerformers(3)
console.log(`***************** fin part 3 : function called getTopPerformers *
// ^Part 4 Create a function called getAgeDistribution :
console.log(`***************** fin part 4 : function called getAgeDistribution *
function getAgeDistribution (params) {
let age1820 = [] ;
let age2125 = [] ;
let age2630 = [] ;
for (let index = 0; index < university.students.length ; index++) {
let agevariable =parseInt(Object.values(university.students[index])[2]) ;
let namevariable = Object.values(university.students[index])[1];
let Idvariable = Object.values(university.students[index])[0];
if (agevariable >= 18 && agevariable <=20) {
age1820.push(`L'id ${Idvariable} c'est ${namevariable} a ${agevariable
}else if (agevariable >= 21 && agevariable<=25) {
age2125.push(`L'id ${Idvariable} c'est ${namevariable} a ${agevariable
Java Script 25
}else if (agevariable >= 26 && agevariable<=30) {
age2630.push(`L'id ${Idvariable} c'est ${namevariable} a ${agevariabl
}
}
console.log(`les candidats entre 18 et 20 ans sont : ${age1820}`);
console.log(`les candidats entre 21 et 25 ans sont : ${age2125}`);
console.log(`les candidats entre 26 et 30 ans sont : ${age2630}`);
}
getAgeDistribution ()
console.log(`***************** fin part 4 : function called getAgeDistribution *
console.log(` fin codage to be continued ... `);
VI.2- les autres exercice dans le dossier de js :
VII. DOM (Document Object Model) :
VII.1- C ibler un élément :
Quill
<!-- Quill Editor -->
<div class="mb-4">
<label for="editor" class="block text-gray-700 font-bold mb-2">Content</l
<div id="editor" class="border border-gray-300 p-4"></div>
<input type="hidden" id="quill-content" name="content" />
Java Script 26
</div>
<!-- Include Quill Library -->
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
// Initialize Quill editor
var quill = new Quill('#editor', {
theme: 'snow'
});
// Update hidden input on editor change
quill.on('text-change', function() {
document.querySelector("#quill-content").value = quill.root.innerHTML;
});
</script>
Java Script 27
Vous aimerez peut-être aussi
- Apprentissage Facile JavaScript Étape par étape pour mener à apprendre Javascript mieux et plus rapidement (French Edition) (hu, yang) (Z-Library)Pas encore d'évaluationApprentissage Facile JavaScript Étape par étape pour mener à apprendre Javascript mieux et plus rapidement (French Edition) (hu, yang) (Z-Library)190 pages
- Cours JavaScript seance 1.2.3.4 3 STIPas encore d'évaluationCours JavaScript seance 1.2.3.4 3 STI68 pages
- Support de Cours Javasrcipt ESMIA L2 IRDPas encore d'évaluationSupport de Cours Javasrcipt ESMIA L2 IRD63 pages
- Cours JavaScript Tous Les Seances-2 None Have ThisPas encore d'évaluationCours JavaScript Tous Les Seances-2 None Have This60 pages
- 0209-formation-programmation-javascriptPas encore d'évaluation0209-formation-programmation-javascript53 pages
- 1-Déclarez une variable - Apprenez à programmer avec JavaScript - OpenClassroomsPas encore d'évaluation1-Déclarez une variable - Apprenez à programmer avec JavaScript - OpenClassrooms8 pages
- Codingame-Développeur Angular Front-End - Junior EL ABOUYI Naoufel[8384]Pas encore d'évaluationCodingame-Développeur Angular Front-End - Junior EL ABOUYI Naoufel[8384]35 pages
- Screenshot 2024-05-16 at 10.05.02 PMPas encore d'évaluationScreenshot 2024-05-16 at 10.05.02 PM35 pages
- Les Variablesles Types Oprerateurs Et Structures de ControlePas encore d'évaluationLes Variablesles Types Oprerateurs Et Structures de Controle6 pages
- Cours - Technologies WEB2.0 - Ch2 - JAVASCRIPT - Partie1Pas encore d'évaluationCours - Technologies WEB2.0 - Ch2 - JAVASCRIPT - Partie132 pages
- Exercices JavaScript avec solutionsPas encore d'évaluationExercices JavaScript avec solutions12 pages
- 4SI-STI-Javascript-Cours-v02.docx Version 1Pas encore d'évaluation4SI-STI-Javascript-Cours-v02.docx Version 111 pages
- Cours 2 - Introduction À TypeScriptPas encore d'évaluationCours 2 - Introduction À TypeScript38 pages
- L'Élément Select, Très Important en JavaScriptPas encore d'évaluationL'Élément Select, Très Important en JavaScript93 pages
- Les Tableaux Et Les Chaînes de CaractèresPas encore d'évaluationLes Tableaux Et Les Chaînes de Caractères5 pages
- 9- Aides STI 2024 annexe + programme-16Pas encore d'évaluation9- Aides STI 2024 annexe + programme-161 page
- Shell Bash, De Débutant à Expert : Le guide pratique d'un SRE pour la maîtrise du terminal, le scripting et l'automatisationD'EverandShell Bash, De Débutant à Expert : Le guide pratique d'un SRE pour la maîtrise du terminal, le scripting et l'automatisationPas encore d'évaluation
