Rapport Personnel

Rapport personnel réalisé par
Joel Neuhaus

307 NNN

Module du 17.05.2021 au XX.XX.XXXX

Actualisé le 31.05.2021

Table des Matières

1	Introduction	4

2	Tests technologiques	4

2.1	Exercice 1	4

2.1.1	Théorie	4

2.1.2	Consigne	4

2.1.3	Résultat	5

2.2	Exercice 2	6

2.2.1	Theorie	6

2.2.2	Consigne	6

2.2.3	Questions théoriques	6

2.3	Exercice 3	9

2.3.1	Questions théoriques	9

2.3.2	Consigne	10

2.3.3	Résultat	10

2.4	Exercice 5	11

2.4.1	Consigne	11

2.5	Exercice 6	14

2.5.1	Consigne	14

2.5.2	Résultat	15

2.6	Exercice 7	16

2.6.1	Consigne	16

2.6.2	Résultat	17

2.7	Exercice 8	19

2.7.1	Consigne	19

2.7.2	Code important	19

2.8	Exercise 9	20

2.8.1	Beans “Personne”	20

2.8.2	Fonction Objet	20

2.8.3	Exemples	21

2.9	Exercice 10	21

2.9.1	Consigne	21

2.10	Exercice 12	22

2.10.1	Theorie	22

2.10.2	Maquette	23

2.10.3	Code	23

2.11	Exercice 13	23

3	Projet	23

3.1	Concept	23

4	Conclusion	24

Introduction

Tests technologiques

Exercice 1

Théorie

Connecter « .css » a « .html »

A l’intérieur du fichier .html il faut utiliser la balise « link » avec les attributs suivants.

<link rel="stylesheet" href="source/nom.css" />

Connecter « .js » a « .html »

A l’intérieur du fichier .html il faut utiliser la balise « script » avec les attributs suivants.

<script type="text/javascript" src="js/indexCtrl.js" async></script>

Async

Cette méthode fera en sorte pour que la page soit plus rapidement mise en place sans attendre sur le JavaScript qui peut être très conséquent.

<script type="text/javascript" src="js/indexCtrl.js" async></script>

Synchrone

Lance le JavaScript et l’Html en même temps donc cela prendra plus de temps pour se mettre en place.

Consigne

Pour ce premier exercice, veuillez créer ou copier, avec votre outil de développement, un projet « ex01-html5-base » dans le dossier principal « 307/exercices » en partant du modèle mis à disposition.

Adaptez le texte (votre nom et prénom) et la couleur en modifiant à bon escient les 3 fichiers à disposition. La ligne du bas s'affiche lors de l'appui du bouton.

Maquete

Code JavaScript

<body onload="initCtrl()">

Si vous avez besoin d'initialiser certaines choses dans le JavaScript, mais que cela n'est possible que si la page est chargée (DOM créé entièrement), il est possible de lancer une fonction en fin de chargement. On peut aussi déplacer le lancement du script en fin de body au lieu du head. Observez la méthode initCtrl() qui ajoute un écouteur par programmation.

HTML

Les lignes en commentaire sont identiques mais l’écouteur est en dur dans le code HTML, mais c’est à vous de l’ajouter ! Cette situation est très courante, mais il faut favoriser l’autre solution. Jouez avec les commentaires pour tester l’une ou l’autre solution.

Résultat

Liens entre

CSS

<div id="container">

JavaScript

<body onload="initCtrl()">

Résultat du code

Code modifiée

En jaune le code qui a été modifiée.

HTML

Deux possibilités.

<body onload="initCtrl()">

<div id="container">

<p>Cliquez sur le bouton qui contient votre prénom (js) !</p>

<button id="testez">Teste-moi, Joel</button>

<p id="info">&nbsp;</p>

</div>

</body>

<body>

<div id="container">

<p>Cliquez sur le bouton qui contient votre prénom (html) !</p>

<button id="testez">Teste-moi, Joel</button>

<p id="info">&nbsp;</p>

</div>

</body>

JavaScript

function testez() {

document.getElementById("info").innerHTML =

"C'est <b>Joel Neuhaus</b> qui a pressé le bouton !";

}

Exercice 2

Theorie

==

Le double égale compare que le contenu de l’objet.

===

Le triple égale ne compare pas que la valeur mais aussi le type des différents objets.

Consigne

Depuis votre outil de développement, veuillez copier l’exercice précédent « ex01… » vers « ex02-html5-form-login ».

On vous demande de compléter le conteneur pour afficher un composant formulaire (form) HTML5 pour simuler une opération de login. Pour le moment, le test du login se fera localement en JavaScript (valides : « admin » quelle que soit la casse pour l’utilisateur et « emf123 » pour le mot de passe).

Le but sous-jacent de cet exercice est de bien séparer les différents fichiers de la vue d’une application entre son contenu en HTML (des composants dans une page web), la présentation en CSS (le design) et la logique métier en JavaScript.

Questions théoriques

À quoi sert l’attribut « placeholder » ?

C’est le texte qui se trouve sous un champ de texte, il a comme but d’aider l’utilisateur pour qu’il sache ce qu’il devra faire. Lorsqu’une valeur est introduite dans le champ de texte le contenu de l’attribut « placeholder » sera plus visible.

À quoi sert l’attribut « autofocus » ?

Le autofocus est utilisée par un champ qui sera sélectionnée automatiquement lorsque que vous ouvrez la page.

Y a-t-il déjà du JavaScript dans ce code ?

Oui et non, elle appelle simplement une méthode JavaScript.

Quelle est la différence entre le bouton de l'ex01 et celui-ci ?

Il y a différentes possibilités comme résultat.

Qu’est-ce que le DOM ?

Le Document Object Model (DOM) représente les documents HTML ou XML sous forme d'une structure arborescente.

Comment définit-on une « fonction » (méthode) comme « validerUtilisateur() » ?

Pour créer une fonction il faut suivre la convention suivante.

function «nom»() {

}

Comment définit-on une « variable » (par exemple pour « username » et « password ») ?

Pour définir une variable il faut suivre la convention suivante.

let “nom” = “valeur”;

Les variables sont-elles « typées » (String par exemple) ?

Non les variables ne sont pas typées.

Où se trouve la console de débogage de Chrome ?

Si on appuis sur la touche « F12 » l’inspecteur d’éléments s’ouvre et dans le bas de l’onglet « Source » on retrouve le débuggeur.

Résultat

Résultat attendu

Utilisateur et le mot de passe correctement

Si la validation n’est pas correcte

Code JavaScript

// Plus court

let username = document.getElementById("username").value;

let password = document.getElementById("password").value;

// affichage pour débogguer avec console.log

// message possible utilisateur: titi mot de passe: emf

// validation du user et password par l'affichage d'une popup

if (username.toLowerCase() === "admin" && password === "emf123") {

window.confirm("Validation OK!");

} else {

window.alert("Utilisateur ou mot de passe incorrect!!!");

}

CSS

.user-form .field label {

display: inline-block;

width: 250px;

}

.user-form .field input{

display: inline-block;

}

#valider{

background-color: greenyellow;

border-radius: 100px;

width: 100px;

}

Exercice 3

Questions théoriques

Comment centrer le bouton de validation et le styliser ?

.button {

text-align: center;

}

Comment envoyer le formulaire à un script PHP qui fera la validation ?

Dans une balise form il faut ajouter le code suivant.

action="nom.php" method="nom_de_methode"

En suite lorsque on utilise des balises « input » a l’interieur de la form il faut utiliser le code suivant.

name="nom"

Par quoi commence et doit se terminer un code PHP ?

<?php

« Contenu du code »

?>

Comment récupère-t-on une information dans le flux des informations GET ou POST ?

En utilisant l’attribut méthode.

method="get"

method="post"

Comment effectue-t-on une concaténation de chaines de caractères en PHP ?

Pour concatener deux objets il faut mettre un point entre les deux objets.

$concatenation = $a . $b

Avec quelle fonction intrinsèque (dans PHP) convertit-on une chaine en minuscules ?

Pour effectuer cette tache on utilise strtolower.

$username = strtolower($_POST['username']);

Quelle est la commande qui permet de renvoyer quelque chose vers le client ?

La méthode POST.

Quel(s) autre(s) langage(s) trouve-t-on encore dans ce code PHP ?

On peut retrouver des balises HTML.

Consigne

Depuis votre outil de développement, veuillez copier l’exercice précédent « ex02… » en « ex03-html5-form-php ». Le but est ici :

D’améliorer un peu la vue en décolorant fortement la bordure du « fieldset » (lightgray) et en centrant et stylisant le bouton ;

De faire la validation des informations de login par un petit script en PHP (au lieu du JavaScript) sur un serveur Apache à installer sur votre hébergement EMF. Il est aussi présent sur http://mettrauxpa.emf-informatique.ch avec les noms ci-joint.

Résultat

Résultat attendu

HTML

Nouveautés en jaune.

<form class="user-form" action="login_POST.php" method="post">

<fieldset>

<legend>Identification:</legend>

<div class="field">

<label for="username">Nom d'utilisateur:</label>

<input name="username" type="text" size="30" id="username" placeholder="un nom svp" autofocus />

</div>

<div class="field">

<label for="password">Mot de passe:</label>

<input name="password" type="password" size="30" id="password" placeholder="un mot de passe svp" />

</div>

<div class="button">

<input type="submit" value="Valider">

</div>

</fieldset>

</form>

CSS

.button {

text-align: center;

}

Exercice 5

Consigne

Vous allez taper des commandes en JavaScript. Vous allez utiliser la console de votre navigateur ou bien le « jsfiddle » de l'exercice précédent.

Effacer le contenu de la console avec « console.clear() » ;

Créer une variable nommée « a » ;

Afficher le contenu de « a » avec console.log;

Stocker la valeur 15 dans cette variable ;

Afficher le contenu de cette variable dans la console sous la forme « Ma variable a = ? »

Créer une variable nommée « b » et lui assigner directement la valeur 9 ;

Afficher le contenu de cette variable dans la console sous la forme « Ma variable b = ? »

Faire l’addition de ces 2 variables en affichant directement le résultat dans la console sous cette forme : « 15 + 9 = ? » ; (essayer d’utiliser un littéral avec `…${…}…`)

Compléter en faisant de même pour une soustraction, une multiplication et une division des deux variables ;

Soustraction

Multiplication

Division

Stocker « Bonjour » dans la variable a ;

Stocker « les amis » dans la variable b ;

Afficher « bonjour les amis » dans la console en concaténant les variables ;

Stocker « true » dans la variable a ;

Stocker « false » dans la variable b ;

Effectuer une opération AND entre les 2 variables et afficher le résultat sous cette forme « true AND false = ? » ;

Effectuer une opération OR entre les 2 variables et afficher le résultat sous cette forme « true OR false = ? » ;

Stocker la date du jour dans la variable a avec new Date();

Calculer une nouvelle date dans la variable a qui est 61 jours avant la date courante (utilisation getDate, setDate)

Afficher les dates suivante en vous aidant de « toLocaleString() et toLocaleDateString() » :

Stocker la valeur de Math.PI dans a, « bonjour » dans b, créer et assigner true dans c, créer et assigner la date courante dans d, puis afficher le type pour les 4 variables :

Exercice 6

Consigne

Depuis votre outil de développement, copier l’exercice « ex01… » vers « ex06-js-switch-test ». Nous avions déjà testé le « IF », testons maintenant le « SWITCH », avec une petite application qui doit afficher le jour de la semaine directement en remplacement du contenu d’une balise HTML existante.

JavaScript

Il s’agit de créer une fonction « afficherJourSemaine() » dans le fichier annexé qui va indiquer à l'opérateur le jour de la semaine du jour courant. Une méthode de la classe Date retourne le jour de la semaine. Pour terminer : à mettre dans le RP, le code JS et une explication sur le concept sous-jacent de remplacement du contenu d’une balise HTML par de l’information gérée en JavaScript.

Maquette

Au démarrage

Apres le clic

Résultat

Résultat du code

Modifications du code

Modifications en jaune.

HTML

<body onload="initCtrl()">

<div id="container">

<p>Cliquez sur la pédal ci-dessous pour découvrir quel jour nous sommes.</p>

<button onclick="afficherJourSemaine();">Testez-moi</button>

<p id="info">&nbsp;</p>

</div>

</body>

JavaScript

function afficherJourSemaine() {

let date = new Date().getUTCDay();

switch (date){

case 0:

date = "Dimanche";

break;

case 1:

date = "Lundi";

break;

case 2:

date = "Mardi";

break;

case 3:

date = "Mercredi";

break;

case 4:

date = "Jeudi";

break;

case 5:

date = "Vendredi";

break;

case 6:

date = "Samedi";

break;

}

document.getElementById("info").innerHTML =

"On est " + date;

}

Exercice 7

Consigne

Depuis votre outil de développement, veuillez copier « ex06… » vers « ex07-js-loops-test ». Nous allons tester toutes les sortes de boucles possibles en JavaScript avec une application qui ressemble à la précédente du point de vue de l’insertion d’informations dans du HTML par l’entremise de JavaScript.

Maquette

Lorsqu’on clique sur le bouton « for »

Lorsqu’on clique sur le bouton « While »

Lorsqu’on clique sur le bouton « Do while »

Résultat

Code

HTML

<body onload="initCtrl()">

<div id="container">

<p>Cliquez sur la pédal ci-dessous pour découvrir quel jour nous sommes.</p>

<button onclick="testerFor()">For</button>

<p id="for"></p>

<button onclick="testerWhile()">While</button>

<p id="while"></p>

<button onclick="testerDoWhile()">Do while</button>

<p id="do"></p>

<p id="info">&nbsp;</p>

</div>

</body>

JavaScript

For

function testerFor(){

let nombre = "";

for (let i = 0; i < 5; i++){

nombre += "I = " + i + "</br>";

}

document.getElementById("for").innerHTML = nombre;

}

While

function testerWhile(){

let i = 0;

let nombre = "";

while (i < 5) {

nombre += "I = " + i + "</br>";

i++

}

document.getElementById("while").innerHTML = nombre;

}

Do while

function testerDoWhile(){

let i = 0;

let nombre = "";

do{

nombre += "I = " + i + "</br>";

i++

}while (i < 5);

document.getElementById("do").innerHTML = nombre;

}

Exercice 8

Consigne

Nous allons tester une imbrication de 2 boucles sur les données d’un tableau de personnes défini par un objet de type JSON (JavaScript Object Notation). JSON est la structure de données par excellence traitée de manière prioritaire en JS.

Maquette

Lorsque on click dessus

Code important

JavaScript

function parcourirUnTableauJSON() {

// définition d'un objet avec un tableau de personnes (A) A utiliser dans l’exercice

let txt = "";

const json = {

personnes: [

{prenom: "John", nom: "Doe", age: 44},

{prenom: "Anna", nom: "Smith", age: 32},

{prenom: "Peter", nom: "Jones", age: 29}

]

};

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

let personne = json.personnes[i];

txt += i + ". ";

for (let personneKey in personne) {

txt += " " + personne[personneKey];

}

txt += "<br>";

}

document.getElementById("info").innerHTML =

txt;

}

HTML

<body>

<div id="container">

<p>Cliquez sur le bouton pour parcourir un tableau JSON</p>

<button onclick="parcourirUnTableauJSON();">

Parcourir un tableau JSON

</button>

<p id="info">&nbsp;</p>

</div>

</body>

Exercise 9

Beans “Personne”

En créant une instance à partir de la fonction « Object », on peut définir des classes pour créer des objets, on a même 3 manières de faire.

Fonction Objet

Comment fonctionne la fonction Objet ?

JS gère les attributs d’un objet comme des éléments d’une « hash map » (liste de données de type clé-valeur). On peut ainsi ajouter, modifier ou supprimer un élément à tout instant.

Autre particularité que nous avons déjà vue : puisque les variables ou propriétés sont non typées au départ, on peut y stocker n’importe quoi et même une fonction stockée alors comme un objet. Cette particularité nous permettra de « surcharger » des méthodes existantes dans un objet ou d’en rajouter.

Exemples

Créer des objets sans classes

JSON

const p1 = {

prenom: "Jules",

nom: "Tartampion",

age: 25

};

p1.ville = "Fribourg" ; // ajoute un attribut à p1

Objet avec la fonction objet

Il est possible de créer une « Function Objects » fonction objet. On s’approche gentiment de la classe style Java. Le fonctionnement est identique au « new Object() » vue à la page précédente.

function Personne(prenom, nom, age) {
this.prenom = prenom;
this.nom = nom;
this.age = age;

this.toString = function(){

return this.nom + " " + this.prenom + " (" + this.age + ")";

}
}

Objet avec la classe et le prototype

Pour éviter la duplication des fonctions, if faut utiliser la programmation par prototypage grâce à l’attribut « prototype » qui se trouve dans tout objet JS.

function Personne(prenom, nom, age) {
this.prenom = prenom;
this.nom = nom;
this.age = age;

}
Personne.prototype.toString = function() {
return this.nom + " " + this.prenom + " (" + this.age + ")";
};

Créer un objet avec la classe

On utilisera cette façon de faire dans la suite de l'exercice.

class Personne {

constructor(prenom, nom, age) {
this.prenom = prenom;
this.nom = nom;
this.age = age;

}

toString() {

return this.nom + " " + this.prenom + " (" + this.age + ")";

}
}

Exercice 10

Consigne

Le but final est ici de construire une application qui permette de gérer simplement les informations d’une liste de personnes (prénom, nom, âge) avec des opérations « métier » comme « ajouter une personne » ou « supprimer une personne » que nous mettrons dans un fichier « worker.js ». Pour gérer des personnes, il faut également disposer d’un bean « Personne » (à la Java) que nous stockerons dans un fichier « personne.js ».

Maquette

Au démarrage, la vue affichera une liste initiale triée de 3 personnes :

Si des noms sont ajoutés, la liste sera réaffichée avec les noms triés (fonction « .sort ») :

La liste affichée utilise un lien pour chaque élément avec href= "#" et un onclick. Il est aussi possible de laisser les éléments de liste normaux avec aussi un écouteur, par contre, il est visuellement important de changer le curseur lorsqu’on passe au-dessus des éléments de la liste.

Exercice 12

Theorie

var maVar

var maVar = 10 ;

var maVar = 100 ;

Cette variable maVar est maintenant stockée dans l’objet window (console.log(window) pour le visualiser) qui est l’objet de base de votre page affichée dans le navigateur. Le fait de redéclarer maVar ne génère pas d’erreur et écrase la valeur précédente.

meineVar

Si vous oubliez le mot « var », le système stocke la variable dans l’objet window (contexte global).

meineVar = 10 ;

Boucle

La variable i est présente dans l’objet window, après la boucle la variable est toujours là.

for (var i=0 ; i<10 ; i++){

console.log(i) // 0 à 9

}

console.log(i) ; // => 10

Maquette

Code

HTML

<body>

<div id="container">

<p>Cliquez pour incrémenter les compteurs</p>

<button id="button1" onclick="actionCompteur(1);">Compteur No 1 </button>

<button id="button2" onclick="actionCompteur(2);">Compteur No 2</button>

<button id="button3" onclick="actionCompteur(3);">Compteur No 3</button>

</div>

</body>

CSS

function actionCompteur(idx) {

let val = tab[idx - 1].call(); // appelle explicite de la fonction du tableau

document.getElementById("button" + idx).innerHTML = "Compteur No" + " " + idx + ":" + val;

}

function compteur() {

let count = 0;

return function () {

return count++;

};

}

let tab = [];

for (let i = 0; i < 3; i++) {

tab.push(compteur())

}

Exercice 13

Théorie

Deux manières de déclarer une fonction

Déclaration d’une fonction

function a() {

let val = 1;

console.log(val) ;

}

a(); // => exécution de la méthode et affichage de 1 dans la console

// si on écrit a(); avant la déclaration de la fonction, cela fonctionne !

Déclaration d’une expression fonction anonyme

let b = function() {

let val = 2;

console.log(val) ;

} ;

b(); // => exécution de la méthode et affichage de 2 dans la console

Projet

Concept

Ce site Web vous permet de vous connecter à votre compte Spotify, puis affiche vos statistiques comme par exemple vos artiste ou titres les plus écoutées. Pour cela j’utilise l’API de Spotify.

Maquette

Page D’accueil

Connecter a Spotify

Contenu

Conclusion