Najah.
Mon plan de révision⚡ Défi flash

Informatique · Écoles d'ingénieurs — ENSMR (Mines Rabat)

Développement Web (Front-end et Back-end)

Le cours expliqué simplement, les questions que tous les élèves se posent et des exercices type examen national. Programme marocain, gratuit.

📘 Fiche de cours

L'essentiel du cours

Le développement Web repose sur l'architecture client-serveur. Le Front-end (HTML5, CSS3, JavaScript) gère l'interface utilisateur, tandis que le Back-end (Node.js, PHP, ou Java Spring) gère la logique métier et l'accès aux données via SQL. Le protocole $HTTP$ assure l'échange de données.

Méthodes à maîtriser

  1. Structurer une page avec HTML5 (balises sémantiques).
  2. Appliquer des styles avec CSS (Flexbox/Grid).
  3. Manipuler le DOM avec JavaScript.
  4. Créer une API REST simple pour communiquer avec une base de données.

Exemples corrigés

  • HTML : <button id="btn">Cliquez ici</button>
  • JS : document.getElementById('btn').addEventListener('click', () => alert('Bravo !'));

Erreurs fréquentes

  • Confondre le langage côté client (JS) et côté serveur.
  • Oublier de fermer les balises HTML ou les accolades en JS.
  • Ne pas sécuriser les entrées utilisateur (risque d'injection SQL).

🌉 Jisr : les mots du chapitre FR ⇄ AR

Tu as appris les sciences en arabe ? Touche un mot pour voir sa traduction et une explication en darija.

La question que tu n'oses pas poser en classe ? Pose-la à UstadZéro jugement, même en darija, même à minuit. Il t'explique pas à pas et corrige ta démarche. Gratuit.

Défi flash : 4 questions

Sans compte

🎯 Développement Web (Front-end et Back-end)

1/4

Quelle balise est utilisée pour inclure du JavaScript dans une page HTML ?

❓ Questions fréquentes

Est-ce que le CSS est obligatoire ?

Techniquement non, mais pour l'expérience utilisateur (UX), il est indispensable pour rendre le site lisible et esthétique.

💡 À retenir : Sans CSS, ton site ressemble à un document Word des années 90.

C'est quoi le rôle d'un serveur web ?

Il stocke les fichiers du site et répond aux requêtes des clients en leur envoyant les pages demandées.

💡 À retenir : Le serveur est le gardien des données.

C'est quoi la différence entre Front-end et Back-end ?
  1. Le Front-end est tout ce que l'utilisateur voit et avec quoi il interagit dans son navigateur.
  2. Le Back-end est la partie invisible située sur le serveur, qui traite les données, gère la base de données et la sécurité.

💡 À retenir : Le Front-end est la vitrine, le Back-end est la cuisine du restaurant.

Kifach n-connecti l'site dyali m3a la base de données ?
  1. Tu dois utiliser un langage Back-end (comme PHP ou Java).
  2. Tu configures une chaîne de connexion (Host, User, Password).
  3. Tu utilises des requêtes SQL pour lire ou écrire des données.

💡 À retenir : Jamais de connexion directe base de données depuis le Front-end (sécurité).

Chno hiya l'utilité dyal l'API f l'développement web ?
  1. L'API permet à deux systèmes différents de communiquer.
  2. Le Front-end envoie une requête HTTP (GET, POST) à l'API.
  3. L'API traite la demande et renvoie une réponse (souvent en format JSON).

💡 À retenir : L'API est le pont entre le client et le serveur.

Est-ce que le HTML est un langage de programmation ?

Non, le HTML est un langage de balisage (HyperText Markup Language). Il sert à structurer le contenu, pas à faire des calculs ou de la logique.

💡 À retenir : HTML = Structure, CSS = Style, JS = Logique.

Kifach n-t3lem l'développement web b-sor3a ?
  1. Commence par les bases : HTML/CSS.
  2. Apprends la logique avec JavaScript.
  3. Pratique en créant des petits projets (ex: liste de tâches).

💡 À retenir : La pratique régulière vaut mieux que la théorie seule.

C'est quoi le DOM en JavaScript ?

Le DOM (Document Object Model) est une représentation en arbre de ta page HTML. JavaScript l'utilise pour modifier le contenu, le style ou la structure de la page dynamiquement.

💡 À retenir : Le DOM est l'interface entre JS et ton HTML.

Pourquoi on utilise le protocole HTTP ?

C'est le protocole standard pour transférer des données sur le Web. Il définit comment les messages sont formatés et transmis entre le client et le serveur.

💡 À retenir : HTTP est le langage universel du Web.

C'est quoi un Framework ?

Un Framework est un ensemble d'outils et de bibliothèques pré-écrits qui facilite le développement en imposant une structure de travail.

💡 À retenir : Le framework fait gagner du temps et assure la maintenabilité.

Comment sécuriser un formulaire web ?
  1. Valider les données côté client et côté serveur.
  2. Échapper les caractères spéciaux pour éviter les injections.
  3. Utiliser le HTTPS pour chiffrer les échanges.

💡 À retenir : Ne jamais faire confiance aux données envoyées par l'utilisateur.

C'est quoi le format JSON ?

C'est un format léger d'échange de données, très utilisé dans les API pour sa lisibilité et sa compatibilité avec JavaScript.

💡 À retenir : JSON est le format standard pour les API modernes.

✍️ Exercices type examen national

Exercice 1

Soit une page HTML contenant un paragraphe <p id="texte">Bonjour</p> et un bouton. Écrire le code JavaScript pour changer le texte en "Bienvenue" lors du clic.

Voir la correction détaillée : inscription gratuite

Exercice 2

Expliquer le cycle de vie d'une requête HTTP entre un client et un serveur.

Voir la correction détaillée : inscription gratuite

Exercice 3

Donner la structure de base d'un document HTML5.

Voir la correction détaillée : inscription gratuite

Un prof de Informatique pour aller plus loin

Les cours du soir avec des profs vérifiés arrivent : inscris-toi pour être prévenu(e) en premier.

Être prévenu(e) gratuitement

Autres chapitres de Informatique