Découvrir l'écosystème de développement

Découvrir l'écosystème de développement | Med Learning

Leçon 1

Les environnements de développement

Outil	Type	Usage
Visual Studio Code	éditeur gratuit avec extensions	le choix de ce module (déjà vu en M104)
IntelliJ IDEA / WebStorm	IDE complet (payant)	gros projets professionnels
Sublime Text	éditeur léger	édition rapide
Bluefish	éditeur web libre	sites simples
CodePen, JSFiddle	éditeurs en ligne	tester un bout de code, partager un exemple

Vidéo · À regarder

Apprendre le HTML - Tutoriel Pour Débutant (2h)

MaxCode · YouTube

Regarde de 2:46 à 8:045 min 18 s

Ouvrir sur YouTube à 2:46

Leçon 2

Intégrer JavaScript dans une page HTML

Méthode	Écriture	Usage
1. script interne	`<script> ... </script>` dans la page	petits essais
2. script externe	`<script src="script.js"></script>`	la bonne pratique : code séparé et réutilisable
3. pseudo-URL	`<a href="javascript:alert('Bonjour')">`	à éviter (ancienne pratique)

Leçon 3

La console du navigateur

Vidéo · À regarder

Tutoriel JavaScript en 1 HEURE | Comprendre l'ESSENTIEL pour Débutant

Melvynx · YouTube

Regarde de 5:41 à 13:327 min 51 s

Ouvrir sur YouTube à 5:41

Leçon 4

Front-end et back-end

	Front-end	Back-end
ce que c'est	l'interface que l'utilisateur voit et utilise	le serveur, l'application et la base de données
technologies	HTML, CSS, JavaScript	PHP, Java, Python, Ruby, ASP.NET, Node.js
exécution	dans le navigateur	sur le serveur
métier

Leçon 5

Les bibliothèques et frameworks front-end

Outil	Type	Créé par	Points clés
jQuery (2006)	bibliothèque	John Resig	simplifie le DOM, les événements et AJAX ; encore présent sur des millions de sites (Partie 5)
React (2013)	bibliothèque d'interfaces	Meta (Facebook)	composants, très demandé en entreprise

Travaux pratiques

Ton environnement

Exercices

Exercice 3.1

Choisis la bonne réponse

1Un IDE regroupe…
2La meilleure façon d'intégrer JavaScript est…
3L'attribut defer sert à…
4Pour afficher un message dans la console :
5Lequel est une technologie back-end ?
6React a été créé par…

0/6 répondues

Exercice 3.2

Bibliothèque ou framework ?

L'essentiel du chapitre

À retenir

IDE : édition, coloration, auto-complétion, débogage. Ce module utilise VS Code + Live Server.
Intégration : <script> interne, <script src="script.js" defer> (bonne pratique), pseudo-URL (à éviter).
La console (F12) affiche console.log() et les erreurs avec leur ligne.
Front-end (HTML, CSS, JS) ; back-end (PHP, Java, Python, Node.js…) ; les deux : full-stack.
Bibliothèques et frameworks front-end : jQuery, React, Vue.js, Angular ; tous reposent sur JavaScript.

Les méthodes 1 et 2

html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Intégrer JavaScript</title>
  <script src="script.js" defer></script>     <!-- méthode 2 : fichier externe -->
</head>
<body>
  <h1>Bienvenue</h1>
  <script>
    console.log("Script interne exécuté");    // méthode 1 : script interne
  </script>
</body>
</html>

Les méthodes de console les plus utiles

console.log("Un message");              // message normal
console.log("Total :", 10 + 5);         // plusieurs valeurs séparées par des virgules
console.warn("Attention");              // message jaune
console.error("Erreur !");              // message rouge
console.table([{ nom: "Ali", age: 20 }, { nom: "Sara", age: 22 }]);   // tableau