Skip to content

Instantly share code, notes, and snippets.

View DigitalDW's full-sized avatar

Loris Rimaz DigitalDW

View GitHub Profile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div.exercice1 {
display: inline-block;
@DigitalDW
DigitalDW / T5.md
Last active December 1, 2021 06:53

Série d'exercices TP5 - DOM et tableaux

Exercice 1 - DOM - matrice de divs (places de cinéma)

  1. À l'aide d'une boucle, générez 10 divs dont le contenu est "&nbsp;". Toujours en JS, donnez-leur une couleur de fond noir. En CSS, appliquez le style suivant :
div {
  display: inline-block;
 width: 25px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 20px;

Série TP4 – tableaux, boucles et DOM

Exercice 1 - boucles et DOM

Commencez par créer une page HTML basique (! et Enter dans une fichier .html)

  1. Créez une div vide avec createElement, ajoutez-lui un id ("résultat") et ajoutez la à la page (au body).
  2. Sélectionnez la div créée à l'exercice 1.1 avec son id (getElementById). À l'aide d'une boucle, qui tourne 10 fois, écrivez les chiffres de 1 à 10 dans le .innerHTML de la div. Résultat attendu (si on avait écrit en HTML la div devrait ressembler à ceci) :
// Executer le code 100 fois (équivalent à tirer 100 dés)
for (let i = 0; i < 101; i++) {
// Créer une div
let maDiv = document.createElement('div');
// Tirer un nombre aléatoirement entre 1 et 6
let nombreAléatoire = Math.ceil(Math.random() * 6);
// Ajouter le nombre aléatoire au contenu de la div
maDiv.innerHTML = nombreAléatoire;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="number" name="tentative" id="tentative" />

Série de révisions (tRév) - objets, variables, fonctions, boucles, conditions, DOM

Exercice 1 - objets et variables

  1. Créez une variable prénomTuteur qui contient la valeur "Loris".
  2. Créez une variable nomTuteur qui contient la valeur "Rimaz".
  3. Créez une variable ageTuteur qui contient la valeur 24.
  4. Créez un objet tuteur qui contient les valeurs suivantes :
    1. prénom qui vaut prénomTuteur.
    2. nom qui vaut nomTuteur.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exercice 3</title>
<style>
div {
padding: 10px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exercice 3</title>
<style>
div {
padding: 10px;
@DigitalDW
DigitalDW / T3.md
Last active October 28, 2021 08:02

TP3 - boucles, conditions, DOM et fonctions

Exercice 1 - boucles et fonctions

  1. Créez une boucle qui écrit dans la console les chiffres de 0 à 100.

  2. Créez une boucle qui écrit dans la console les chiffres pairs de 2 à 100.

  3. Créez une boucle qui fait un compte à rebours de 300 à 0 en faisant des sauts de 3.