Aide-mémoire 📌

<h1>My website</h1>

Le plus grand titre. Une seule fois par page – comme le titre d'un livre.

<h2>Chapter</h2>

Un titre plus petit. Ils vont jusqu'à <h6> (le plus petit).

<p>Hi, this is text.</p>

Un paragraphe de texte normal.

<strong>important</strong>

Met le texte en gras.

<em>interesting</em>

Texte en italique (penché).

<a href="https://example.com">Click</a>

Un lien. href contient l'adresse où il doit mener.

<img src="dog.jpg" alt="My dog">

Une image. src = le fichier image, alt = une description au cas où elle ne s'affiche pas.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

Une liste à puces. Chaque élément est un <li>.

<ol>
  <li>step 1</li>
  <li>step 2</li>
</ol>

Une liste numérotée – le navigateur ajoute les numéros tout seul.

<div class="card">...</div>

Une boîte pour regrouper des choses qui vont ensemble. Tu inventes toi-même le nom de la classe.

<!-- note to myself -->

Un commentaire. Le navigateur l'ignore – c'est juste pour toi.

h1 {
  color: red;
}

Tous les titres <h1> seront rouges.

.card {
  background: yellow;
}

Tout ce qui a class="card" aura un fond jaune. Le point signifie « cherche cette classe ».

p {
  font-size: 20px;
}

La taille de police des paragraphes. Plus le nombre est grand, plus le texte est grand.

body {
  font-family: Arial;
}

La police pour toute la page.

.card {
  padding: 16px;
}

Espace intérieur – marge entre le contenu et le bord de la boîte.

.card {
  margin: 16px;
}

Espace extérieur – distance par rapport à ce qui l'entoure.

.card {
  border: 2px solid black;
}

Une bordure : épaisseur, style de trait et couleur.

.card {
  border-radius: 12px;
}

Coins arrondis. Plus le nombre est grand, plus c'est rond.

.menu {
  display: flex;
  gap: 10px;
}

Les éléments à l'intérieur s'alignent côte à côte avec 10px d'écart. Le truc magique pour les menus !

img {
  width: 200px;
}

La largeur de l'image. La hauteur s'ajuste toute seule pour ne pas l'écraser.

const name = 'Kate';

Une variable – une boîte étiquetée où tu ranges quelque chose.

let points = 0;
points = points + 1;

let est une boîte que tu peux modifier. Ici on ajoute un point.

alert('Hi!');

Affiche une boîte de message. Parfait pour tes premiers essais.

console.log('it works');

Écrit un message dans la console (F12) – une fenêtre secrète pour les programmeurs.

document.querySelector('h1')

Trouve le premier <h1> de la page pour pouvoir travailler avec.

element.textContent = 'New text';

Remplace le texte à l'intérieur de l'élément que tu as trouvé.

element.addEventListener('click', () => {
  alert('Clicked!');
});

Quand quelqu'un clique sur l'élément, ce qu'il y a dedans s'exécute.

if (points > 10) {
  alert('You won!');
}

Une condition : le code à l'intérieur ne s'exécute que si ce qui est entre parenthèses est vrai.

element.classList.toggle("dark");

Ajoute une classe si elle manque – et l'enlève si elle est là. C'est exactement comme ça que le mode sombre fonctionne.

const r = await fetch(address);

Envoie une requête à une API et attends (await) la réponse.

const data = await r.json();

Transforme la réponse en objet avec lequel tu peux travailler.

data.current_weather.temperature

Récupère une valeur dans l'objet avec des points – comme pour n'importe quel autre objet.

await fetch('/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ question }),
});

POST = envoyer des données AU serveur. body contient l'objet transformé en texte.

{ "city": "Prague", "temperature": 21 }

JSON – le langage commun des APIs. Texte entre guillemets, nombres sans.

JSON.stringify(obj)

Transforme un objet en texte JSON (avant de l'envoyer).

JSON.parse(text)

Transforme du texte JSON en objet (après l'avoir reçu).

process.env.AI_KEY

Sur le serveur : lit une clé secrète dans le fichier .env. Les clés n'ont jamais leur place dans le navigateur !

cd my-website

Entre dans le dossier my-website (cd = change directory, changer de dossier).

ls

Liste ce qu'il y a dans le dossier actuel (sur Windows : dir).

node server.js

Lance le fichier server.js avec Node.js.

npm install

Télécharge tous les paquets dont le projet a besoin.

git status

Montre ce qui a changé dans le projet depuis la dernière sauvegarde.

git add .

Prépare tous les changements à sauvegarder (le point signifie « tout »).

git commit -m "Added a menu"

Sauvegarde les changements dans l'historique avec une note sur ce que tu as fait.

git push

Envoie les changements sauvegardés sur GitHub.