HumanBooster/tp-javascript-introduction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit with existing project files

Browse Source
This commit is contained in:
Vincent Guillet
2025-07-12 11:10:38 +02:00
commit 3f5b52661a
5 changed files with 462 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md Normal file
View File

@@ -0,0 +1 @@
# tp-javascript-introduction

74
index.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Ceci est la description du site" />
<script src="partie2-etudiants.js" defer></script>
<script src="partie2-seo.js" defer></script>
<title>Titre de la page</title>
</head>
<body>
<section>
<h2>Analyse et classification des étudiants</h2>
<div>
<h3>Liste des étudiants :</h3>
<div class="students"></div>
</div>
<form>
<label style="font-weight: bold">Ajouter un étudiant :
<input id="ajouterPrenom" type="text" placeholder="Prénom">
</label>
<label>
<input id="ajouterNote" type="text" placeholder="Note">
</label>
<button id="add-student" type="submit">Ajouter</button>
</form>
<div style="margin: 25px 0"></div>
<form>
<div>
<span style="font-weight: bold"><button id="moyenne-groupe-btn"
style="margin-right: 5px; margin-bottom: 5px">Calculer</button>Moyenne du groupe : </span>
<span id="moyenne-groupe"></span>
</div>
<div>
<span style="font-weight: bold"><button id="moyenne-admis-btn"
style="margin-right: 5px">Calculer</button>Moyenne des admis : </span>
<span id="moyenne-admis"></span>
</div>
</form>
</section>
<hr style="margin: 30px 0">
<section>
<h2>Analyse SEO d'une page Web</h2>
<form>
<label>
<div>
<textarea id="zone-html" rows="10" cols="50" placeholder="Saisir du code HTML ici..."></textarea>
</div>
</label>
<label>
<input id="keyword" type="text" placeholder="Saisir un mot clé...">
</label>
<button id="analyse" type="submit">Analyser</button>
</form>
<div>
<p style="font-weight: bold">Titre de la page : <span id="page-title"></span></p>
<p style="font-weight: bold">Meta Description : <span id="page-meta-description"></span></p>
</div>
<p id="keyword-number" style="font-weight: bold"></p>
</section>
</body>
</html>

189
partie1.js Normal file
View File

@@ -0,0 +1,189 @@
/* 1. Nettoyer et passer en majuscule */
function nettoyerEtMajuscules(str) {
return str.trim().toUpperCase();
}
console.log("1. " + nettoyerEtMajuscules(" Bonjour le monde "));
console.log("");
/* 2. Analyse de voyelles */
function analyserVoyelles(str) {
const voyelles = ["a", "e", "i", "o", "u", "y"];
const strArr = str.split("");
let voyellesCount = 0;
let voyellesArr = [];
strArr.forEach((char) => {
if (voyelles.includes(char.toLowerCase())) {
voyellesCount++;
if (!voyellesArr.includes(char.toLowerCase())) {
voyellesArr.push(char.toLowerCase());
}
}
});
return `2. Il y a ${voyellesCount} voyelles : ${voyellesArr.join(", ")}`;
}
console.log(analyserVoyelles("J'apprends JavaScript"));
console.log("");
/* 3. Fonctions fléchées simples */
const doubler = (x) => x * 2;
console.log("3. Doubler 5 : " + doubler(5));
const inverser = (str) => str.split("").reverse().join("");
console.log("3. Inverser 'JavaScript' : " + inverser("JavaScript"));
const estPair = (n) => n % 2 === 0;
console.log("3. 4 est pair ? " + estPair(4));
console.log("");
/* 4. Fonctions fléchées et tableaux */
const carreTableau = (tab) => tab.map(x => x * x);
console.log("4. Carré des nombres 1, 2, 3 et 4 : " + carreTableau([1, 2, 3, 4]));
const nombresImpairs = (tab) => tab.filter(x => x % 2 !== 0);
console.log("4. Nombres impairs parmi 1, 2, 3, 4, 5 : " + nombresImpairs([1, 2, 3, 4, 5]));
console.log("");
/* 5. Moyenne pondérée */
function moyennePonderee(valeurs, poids) {
let total = 0;
let sommePoids = 0;
for (let v = 0; v < valeurs.length; v++) {
for (let p = 0; p < poids.length; p++) {
total += valeurs[v] * poids[p];
sommePoids += poids[p];
}
}
return total / sommePoids;
}
console.log("5. Moyenne pondérée de [10, 15, 20], [1, 2, 1] : " + moyennePonderee([10, 15, 20], [1, 2, 1]));
console.log("");
/* 6. Valeur extrême d'un tableau */
function valeurExtremes(tab) {
const smallest = Math.min(...tab);
const biggest = Math.max(...tab);
const ecartAbsolu = biggest - smallest;
console.log("6. Valeur minimale : " + smallest);
console.log("6. Valeur maximale : " + biggest);
console.log("6. Écart absolu : " + ecartAbsolu);
}
valeurExtremes([3, 7, 1, 12]);
console.log("");
/* 7. Vérification de palindrome */
function estPalindrome(str) {
return str.toLowerCase() === str.toLowerCase().split("").reverse().join("") ?
str + " est un palindrome" :
str + " n'est pas un palindrome";
}
console.log("7. " + estPalindrome("Kayak"));
console.log("7. " + estPalindrome("Voiture"));
console.log("");
/* 8. Fréquence des lettres */
function frequenceLettres(str) {
const frequencies = {};
str.split("").forEach(letter => {
frequencies[letter] = (frequencies[letter] || 0) + 1;
}
);
console.log("8. ", frequencies);
}
frequenceLettres("JavaScript est un langage puissant");
console.log("");
/* 9. Factorielle récursive */
function factorielle(n) {
if (n < 0) alert("n doit être supérieur à 0 !")
if (n === 0 || n === 1) return 1;
return n * factorielle(n - 1);
}
console.log("9. 5! = " + factorielle(5));
console.log("");
/* 10. Analyse d'une phrase */
function statistiquesPhrase(str) {
const nbWords = str.split(" ").length;
const words = str.split(" ")
.sort((a, b) => b.length - a.length);
const longestWord = words[0]
const shortestWord = words.reverse()[0];
console.log(` 10. Statistiques de la phrase "${str}" :
- Nombre de mots : ${nbWords}
- Mot le plus long : ${longestWord}
- Mot le plus court : ${shortestWord}
`);
}
statistiquesPhrase("JavaScript est un langage puissant");
console.log("");
/* 11. Tableaux combinés */
const fusionFiltrage = function (tab1, tab2) {
return [...new Set([...tab1, ...tab2])]
.filter((n) => n % 2 === 0 && n > 10)
.sort((a, b) => a - b);
}
const tab1 = [1, 4, 9, 2];
const tab2 = [4, 3, 13, 18];
console.log(fusionFiltrage(tab1, tab2));
console.log("");
/* 12. Age détaillé */
function calculerAgeDetaille(dateNaissance) {
const birthdate = new Date(dateNaissance);
const today = new Date();
let years = today.getFullYear() - birthdate.getFullYear();
let months = today.getMonth() - birthdate.getMonth();
let days = today.getDate() - birthdate.getDate();
if (days < 0) {
months--;
const lastMonth = new Date(today.getFullYear(), today.getMonth(), 0);
days += lastMonth.getDate();
}
if (months < 0) {
years--;
months += 12;
}
return `${years} ans, ${months} mois, ${days} jours`;
}
console.log(calculerAgeDetaille("2000-06-20"));

147
partie2-etudiants.js Normal file
View File

@@ -0,0 +1,147 @@
const etudiantsTab = [
{nom: "Alice", note: 17.5},
{nom: "Bob", note: 9},
{nom: "Claire", note: 13.75}
]
function calculerMoyenneGroupe(etudiants) {
const notes = [];
etudiants.forEach(etudiant => {
notes.push(etudiant.note);
})
const somme = notes.reduce((acc, note) => acc + note, 0);
const moyenne = somme / notes.length;
return moyenne.toFixed(2);
}
function calculerMoyenneAdmis(etudiants) {
const admis = [];
etudiants.forEach(etudiant => {
if(etudiant.note >= 10) admis.push(etudiant);
})
return calculerMoyenneGroupe(admis);
}
function calculerMention(etudiant) {
if (etudiant.note >= 16 && etudiant.note <= 20) {
return "Très bien";
} else if (etudiant.note >= 14 && etudiant.note < 16) {
return "Bien";
} else if (etudiant.note >= 12 && etudiant.note < 14) {
return "Assez bien";
} else if (etudiant.note >= 10 && etudiant.note < 12) {
return "Passable";
} else {
return "Échec";
}
}
function calculerAdmis(etudiants) {
const admis = [];
etudiants.forEach(etudiant => {
if (etudiant.note >= 10) {
admis.push(etudiant);
}
});
return admis;
}
function analyserEtudiants(etudiants) {
const analyse = {};
const admis = [];
const mentions = [];
calculerAdmis(etudiants).forEach(etudiant => {
admis.push(etudiant.nom);
})
etudiants.forEach(etudiant => {
mentions.push({nom: etudiant.nom, mention: calculerMention(etudiant)});
})
analyse.moyenne = calculerMoyenneGroupe(etudiants);
analyse.admis = admis;
analyse.mentions = mentions;
return analyse;
}
function ajouterElementEtudiant(etudiant) {
const studentDiv = document.querySelector('.students');
const p = document.createElement("p");
studentDiv.appendChild(p);
p.innerText = ` - ${etudiant.nom} : ${etudiant.note}/20 (${calculerMention(etudiant)})`;
}
function ajouterEtudiant() {
const addStudentBtn = document.getElementById("add-student");
addStudentBtn.addEventListener("click", (e) => {
e.preventDefault();
const nom = document.getElementById("ajouterPrenom").value;
const note = parseFloat(document.getElementById("ajouterNote").value);
const etudiant = {
"nom": nom,
"note": note
}
if((etudiant.nom != null || etudiant.nom !== "") && etudiant.note != null) {
ajouterElementEtudiant(etudiant);
etudiantsTab.push(etudiant);
}
});
}
function afficherEtudiants() {
etudiantsTab.forEach(etudiant => {
ajouterElementEtudiant(etudiant);
});
}
function afficherMoyenneGroupe(etudiants) {
const moyenneGroupeBtn = document.getElementById("moyenne-groupe-btn");
const moyenneGroupe = document.getElementById("moyenne-groupe");
moyenneGroupeBtn.addEventListener("click", (e) => {
e.preventDefault();
moyenneGroupe.style.fontWeight = "normal";
moyenneGroupe.innerText = `${calculerMoyenneGroupe(etudiants)}/20`;
})
}
function afficherMoyenneAdmis(etudiants) {
const moyenneAdmisBtn = document.getElementById("moyenne-admis-btn");
const moyenneAdmis = document.getElementById("moyenne-admis");
moyenneAdmisBtn.addEventListener("click", (e) => {
e.preventDefault();
moyenneAdmis.style.fontWeight = "normal";
moyenneAdmis.innerText = `${calculerMoyenneAdmis(etudiants)}/20`;
})
}
console.log(JSON.stringify(analyserEtudiants(etudiantsTab)));
afficherMoyenneGroupe(etudiantsTab);
afficherMoyenneAdmis(etudiantsTab);
ajouterEtudiant();
afficherEtudiants(etudiantsTab);

51
partie2-seo.js Normal file
View File

@@ -0,0 +1,51 @@
let text = "";
let keyword = "";
const button = document.getElementById('analyse');
function wordFrequency(texte, keyword) {
const occurrencies = [];
const words = text.trim().split(/[^a-zA-Z]/);
words.forEach(word => {
if (word === keyword) {
occurrencies.push(word);
}
});
return occurrencies.length;
}
function infosHTML(htmlText) {
const infos = {};
const parser = new DOMParser();
const newDoc = parser.parseFromString(htmlText, "text/html");
infos.title = newDoc.getElementsByTagName("title")[0].textContent;
infos.description = newDoc.querySelector("meta[name='description']").content;
return infos;
}
button.addEventListener('click', (e) => {
e.preventDefault();
text = document.getElementById('zone-html').value;
keyword = document.getElementById('keyword').value;
const pageTitle = document.getElementById('page-title');
const pageDescription = document.getElementById('page-meta-description');
pageTitle.style.fontWeight = "normal";
pageTitle.innerText = infosHTML(text).title;
pageDescription.style.fontWeight = "normal";
pageDescription.innerText = infosHTML(text).description;
const keywordNumber = document.getElementById('keyword-number');
keywordNumber.innerText = `Nombre d'occurrences de "${keyword}" : ${wordFrequency(text, keyword)}`;
});