Scribd
Importer
2 vues3 pages

JavaScript : Calcul de Moyenne et Ajax

Ce document présente des exercices de programmation en JavaScript pour un cours à l'Université Polytechnique de Bingerville. Les exercices incluent la création de pages HTML pour saisir des notes et calculer des moyennes, ainsi que des tâches d'interactivité utilisant des bibliothèques comme Bootstrap, jQuery et Datatable. Enfin, il aborde la pratique de l'Ajax pour récupérer des données d'étudiants via des scripts PHP.

Transféré par

limiteetcontinuite
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
2 vues3 pages

JavaScript : Calcul de Moyenne et Ajax

Ce document présente des exercices de programmation en JavaScript pour un cours à l'Université Polytechnique de Bingerville. Les exercices incluent la création de pages HTML pour saisir des notes et calculer des moyennes, ainsi que des tâches d'interactivité utilisant des bibliothèques comme Bootstrap, jQuery et Datatable. Enfin, il aborde la pratique de l'Ajax pour récupérer des données d'étudiants via des scripts PHP.

Transféré par

limiteetcontinuite
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

Université Polytechnique de Bingerville (UPB)

Licence 2 MIAGE
Module : Technologies WEB 2
TP 1
Exercice 1 : JavaScript - Opérateurs et Méthodes de l’objet window
1. Ecrire le code d'un fichier HTML qui permet de saisir trois notes (DC1, DC2, DS) puis calcule et affiche la
moyenne (Utiliser les méthodes de l’objet window).
2. Ecrire le code d'un fichier HTML qui permet de saisir trois notes (DC1, DC2, DS) puis calcule et affiche la
moyenne. Utiliser des zones de saisies (< input >) et un paragraphe pour l’affichage (< p >).

Exercice 2 : JavaScript - Interactivité

Cahier des charges

• La page doit être en HTML.

• Le champ de saisie permet de saisir du texte libre (Exemple le nom des filières).

• Le bouton ajouté doit :

• Ajouter une ligne dans la table présente en dessous.

• La colonne titre est remplie avec la valeur saisie.

• La colonne date contient la date au moment de l'ajout. Date().

• L'action est un bouton permettant de supprimer la ligne en question.

• Votre Javascript doit être externalisé (fichier .js)

Technologies souhaitées

1) Proposer une 1ere version en utilisant Bootstrap (ou tailwind) et Javascript


2) 2e version en utilisant du jQuery
3) 3e version en utilisant le plugin Datatable ([Link] pour avoir une table
interactive. (Pas obligatoire)

Exercice 3 : Pratiquer l'Ajax – notion d’API


Dans cette partie, nous allons « juste » découper la logique de génération de notre page. Celle-ci va être
construite en deux temps, lors du chargement nous allons avoir la structure principale de notre page. Puis
dans un second temps notre page va télécharger le contenu manquant via un appel réseau.
Le contenu en question sera généré comme « avant » via du PHP (ou autre langage serveur), mais il se
limitera à la partie donnée.
Pour comprendre le principe nous allons considérer une page [Link] qui contient une zone (une balise
div avec l’id « ContenuAsynchrone »). On souhaite afficher dans cette zone la liste des étudiants qui sera
généré via le script PHP [Link].

<body>
<h1>Voilà ma page</h1>

<div id="contenuAsynchrone">
<!-- Vide au chargement -->
…Chargement en cours…
</div>

<script>

setTimeout(getListeEtudiant, 5000);

function getListeEtudiant() {

/* code à completer */
// ....

}
</script>
</body> Exemple : [Link]

Dans chacun des cas suivants proposer un code javascript (et jQuery) permettant de récupérer et afficher
la liste des étudiants fournie par le script [Link]
Cas 1 : Le serveur génère toujours la page (mais pas entière)
Exemple code PHP

<ul> Créer un script php ([Link]) permettant


<?php d’afficher une liste de 10 étudiants.
for ($i = 1; $i <= 10; $i++) { Exemple : utiliser la boucle for ; les noms des
echo "<li>Etudiant $i</li>"; étudiants sont de la forme : Etudiant 1, Etudiant 2,
} …, Etudiant 10.
?>
</ul>
Cas 2 : Le serveur génère juste la donnée (au format JSON)
Exemple code PHP

<?php Créer un script php qui va nous produire de la


header('Content-Type: application/json'); donnée « au format brut », c'est-à-dire un format
compréhensible par un ordinateur.
$data = [];
for ($i = 1; $i <= 10; $i++) { Remarquer dans l’exemple ci-contre :
$data[] = "Etudiant $i"; • À quoi correspond le header ?
} • json_encode ? À quoi sert cette fonction ?

echo json_encode($data);
?>

Vous aimerez peut-être aussi