Rappel Exercices Cours

26/11, 18:41
27 novembre 2023
Spécialité : développeur web et multimédia
Module : méthodologie de conception et de développement des applications Web
Durée : 4h
Titre : Rappel,
HTML
CSS
JAVASCRIPT
MODÈLE MVC
Questionnaire à choix multiple (QCM)
HTML
1. Qu'est-ce que HTML signifie?
a) Hyper Text Markup Language

b) Hyperlinks and Text Markup Language
c) Home Tool Markup Language
d) Hyperlink Text Management Language
2. Quel élément est utilisé pour spécifier l'en-tête d'une page HTML?
a) <header>
b) <head>
c) <title>
d) <h1>
3. Quelle balise est utilisée pour créer une liste non ordonnée?
a) <ul>
b) <ol>
c) <li>
d) <list>
CSS3
1. Qu'est-ce que CSS signifie?
a) Computer Style Sheets
b) Creative Style Sheets
c) Cascading Style Sheets
d) Colorful Style Sheets
2. Quelle propriété CSS est utilisée pour définir la couleur de texte?
a) text-color
b) color
c) font-color
d) textColor
3. Quelle balise est utilisée pour appliquer du CSS à une partie spécifique d'une page HTML?
a) <css>
b <style>
c) <link>
d) <div>
JavaScript
1. Quelle est la méthode utilisée pour afficher une boîte de dialogue avec un message en JavaScript?
a) alert()
b) prompt()
c) confirm()
d) input()
2. Quel mot clé est utilisé pour déclarer une variable en JavaScript?
a) declare
b) variable
c) int
d) var
3. Comment faites-vous référence à un élément HTML avec l'ID "example" en JavaScript?
a) getElementById("example")
b) selectElement("example")
c) getID("example")
d) querySelector("example")
Modèle MVC
1. Quel est le rôle du modèle dans l'architecture MVC?
a) Gérer l'interface utilisateur

b) Gérer les données et la logique de l'application
c) Contrôler les interactions utilisateur
d) Gérer le style et la présentation
2. Quel est le rôle de la vue dans l'architecture MVC?
a) Gérer les données

b) Gérer l'interface utilisateur
3. Quel est le rôle du contrôleur dans l'architecture MVC?
a) Gérer les données

b) Gérer l'interface utilisateur
Exercices
HTML
Exercice 1: Créez une page HTML contenant un titre "Bienvenue" et un paragraphe contenant le texte
"Ceci est un exercice HTML".
CSS3
Exercice 2: Stylisez le paragraphe de l'exercice précédent en mettant la couleur du texte en bleu et en
appliquant une police de caractères "Arial".
JavaScript
Exercice 3: Ajoutez un bouton à la page HTML qui, lorsqu'il est cliqué, affiche une boîte de dialogue
avec le message "Bonjour!"
Modèle MVC
Exercice 4: Mettez en place une structure MVC simple en utilisant JavaScript. Le modèle devrait
contenir une liste de tâches, la vue devrait afficher ces tâches sous forme de liste, et le contrôleur
devrait permettre d'ajouter de nouvelles tâches à la liste.
__________________________________
Cours
______________________
React.js
React.js est une bibliothèque JavaScript open-source conçue pour construire des interfaces
utilisateur interactives pour les applications web. Voici une introduction progressive à React.js :
Comprendre les composants :
- En React, tout est un composant - des éléments de base aux éléments complexes d'une interface
utilisateur.
- Exemple :
```jsx
// Création d'un composant de bouton réutilisable en React
import React from 'react';
class Button extends React.Component {

render() {
return (
<button>{this.props.label}</button>
);
}
}
// Utilisation du composant Button

const App = () => {
return (
<div>
<Button label="Cliquez-moi" />
</div>
);
};
```
Gestion de l'état et des cycles de vie :
Les composants React ont un état interne qui peut être modifié et un cycle de vie qui définit
comment ils se comportent à différentes étapes.
- Exercice : Créez un composant de chronomètre qui s'incrémente chaque seconde. Solution :
```jsx
import React from 'react';
class Chronometre extends React.Component {

constructor(props) {
super(props);
this.state = { temps: 0 };
}
componentDidMount() {
this.interval = setInterval(() => {
this.setState({ temps: this.state.temps + 1 });
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
Temps écoulé : {this.state.temps} secondes
</div>
);
}
}
```
Intégration avec d'autres technologies :
- React peut être combiné avec d'autres outils et bibliothèques pour construire une application
complète, comme Redux pour la gestion de l'état ou React Router pour la navigation.
JSON
JSON (JavaScript Object Notation) est un format de données léger, facile à lire et à écrire pour
l'échange de données. Voici un aperçu de JSON :
1. Structure de base :
- Les données JSON sont représentées sous forme de paires clé/valeur, et peuvent être imbriquées
pour former des structures complexes.
- Exemple :
```json
{
"utilisateur": {
"nom": "Jean",
"age": 30,
"adresse": {
"rue": "123 Rue Principale",
"ville": "Paris"
}
}
}
```
2. Utilisation avec JavaScript :
- Les données JSON peuvent être analysées et générées en JavaScript à l'aide des méthodes
`JSON.parse()` et `JSON.stringify()`.
- Exercice : Analysez une chaîne JSON et extrayez une valeur spécifique. Solution :
```javascript
const data = '{"utilisateur": {"nom": "Jean", "age": 30}}';
const objet = JSON.parse(data);
console.log(objet.utilisateur.nom); // Affiche "Jean"
```
3. Intégration avec les API :
- De nombreuses API web renvoient des données au format JSON, ce qui les rend faciles à consommer
et à manipuler dans une application JavaScript.
Framework
Un framework est un ensemble d'outils, de bibliothèques et de conventions qui facilitent le
développement d'applications en fournissant une structure et des fonctionnalités prédéfinies. Voici un
exemple de framework populaire :
1. Vue d'ensemble de Bootstrap (un framework CSS) :
- Bootstrap est un framework front-end populaire qui facilite la création d'interfaces web responsives
et esthétiques.
- Exemple :
```html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Mon Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fonctionnalités</a>
</li>
</ul>
</div>
</nav>
```
2. Structure de grille et composants :
- Bootstrap fournit une grille responsive et une variété de composants prédéfinis tels que des boutons,
des formulaires, des alertes, etc.
- Exercice : Créez une page web utilisant la grille Bootstrap pour disposer des éléments sur différentes
colonnes. Solution :
```html
<div class="container">
<div class="row">
<div class="col-md-6">Colonne 1</div>
<div class="col-md-6">Colonne 2</div>
</div>
</div>
```
Bootstrap
Bootstrap est un framework de développement web populaire qui facilite la création de sites
web réactifs et esthétiques. Il utilise des technologies telles que HTML, CSS et JavaScript pour fournir
des outils utiles pour la conception de sites web. Voici un cours détaillé sur Bootstrap avec des
exemples d'exercices corrigés.
Introduction à Bootstrap
Bootstrap est une collection d'outils permettant de simplifier la création d'interfaces web. Il fournit des
éléments de design, des modèles de page et des composants interactifs qui peuvent être utilisés pour
construire des sites web modernes et adaptatifs.
Installation de Bootstrap
Pour commencer à utiliser Bootstrap, vous pouvez soit télécharger les fichiers Bootstrap directement
depuis leur site web officiel, soit utiliser des gestionnaires de paquets tels que npm ou yarn. Une fois les
fichiers téléchargés ou installés, vous pouvez les inclure dans vos projets web via des balises <link>
pour les fichiers CSS et <script> pour les fichiers JavaScript.
Grille Bootstrap
La grille Bootstrap est un système de grille responsive qui permet de créer des mises en page réactives
pour différents types d'appareils. Elle est basée sur un système de colonnes et de lignes, ce qui permet
de définir facilement la disposition des éléments sur une page web.
Exercice 1 : Création d'une grille Bootstrap

Créez une page web avec une grille Bootstrap contenant deux colonnes. Une colonne devrait occuper
2/3 de la largeur et l'autre 1/3. Remplissez les colonnes avec du contenu de votre choix.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="path/to/bootstrap.css">
<title>Bootstrap Grid Exercise</title>
</head>
<body>
<div class="row">
<div class="col-md-8">
<p>Contenu de la colonne 1</p>
</div>
<div class="col-md-4">
<p>Contenu de la colonne 2</p>
</div>
</div>
</div>
</body>
</html>
```
Composants Bootstrap
Bootstrap propose une multitude de composants prédéfinis tels que des boutons, des formulaires, des
modales, des barres de navigation, etc. Ces composants peuvent être facilement intégrés dans un site
web pour ajouter des fonctionnalités interactives et esthétiques.
Exercice 2 : Utilisation des composants Bootstrap

Créez une page web contenant un formulaire d'inscription avec des champs pour le nom, l'email et le
mot de passe. Utilisez les composants Bootstrap pour styliser le formulaire et les champs.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Components Exercise</title>
</head>
<body>
<form>
<div class="mb-3">
<label for="name" class="form-label">Nom</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">E-mail</label>
<input type="email" class="form-control" id="email">
</div>
<div class="mb-3">
<label for="password" class="form-label">Mot de passe</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary">S'inscrire</button>
</form>
</div>
</body>
</html>
```
Personnalisation et thèmes Bootstrap
Bootstrap offre la possibilité de personnaliser et de créer des thèmes afin de s'adapter à l'identité
visuelle d'un projet ou d'une marque. Vous pouvez personnaliser les couleurs, les polices et d'autres
éléments pour créer une expérience visuelle unique.
Exercice 3 : Personnalisation d'un thème Bootstrap

Utilisez l'outil de personnalisation de Bootstrap pour créer un thème personnalisé. Modifiez les
couleurs primaires, secondaires et le style des boutons pour créer un nouveau thème visuel.
```html

<link rel="stylesheet" href="path/to/custom-bootstrap-theme.css">
```
Utilisation de JavaScript avec Bootstrap
Bootstrap utilise également du JavaScript pour offrir des fonctionnalités avancées telles que des
modales, des onglets, des carrousels, etc. Ces fonctionnalités améliorent l'interactivité et l'expérience
utilisateur des sites web.
Exercice 4 : Utilisation d'un composant JavaScript Bootstrap**

Créez une page web contenant un carrousel Bootstrap avec des images de votre choix. Utilisez le
JavaScript de Bootstrap pour activer le carrousel et faire défiler les images automatiquement.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap JavaScript Exercise</title>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="Image 1">
</div>
<div class="carousel-item">
</div>
<div class="carousel-item">
</div>
</div>
<button class="carousel-control-prev" type="button"
data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="path/to/bootstrap.js"></script>
</body>
</html>
```
Conclusion
Bootstrap est un framework de développement web puissant et polyvalent qui offre de nombreux outils
pour la création de sites web modernes et esthétiques. En suivant ce cours et en réalisant les exercices
proposés, vous aurez acquis une solide compréhension des fonctionnalités de base de Bootstrap et de
la manière de les mettre en pratique dans vos projets. N'oubliez pas que la pratique régulière est la clé
pour maîtriser complètement Bootstrap et que l'exploration de la documentation officielle de
Bootstrap vous permettra d'approfondir davantage vos connaissances.

Rappel Exercices Cours

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rappel Exercices Cours

Transféré par

Droits d'auteur :

Formats disponibles

26/11, 18:41

Questionnaire à choix multiple (QCM)

a) Hyper Text Markup Language

3. Comment faites-vous référence à un élément HTML avec l'ID "example" en JavaScript?

a) Gérer l'interface utilisateur

2. Quel est le rôle de la vue dans l'architecture MVC?

a) Gérer les données

3. Quel est le rôle du contrôleur dans l'architecture MVC?

a) Gérer les données

Comprendre les composants :

class Button extends React.Component {

// Utilisation du composant Button

class Chronometre extends React.Component {

2. Utilisation avec JavaScript :

3. Intégration avec les API :

1. Vue d'ensemble de Bootstrap (un framework CSS) :

Exercice 1 : Création d'une grille Bootstrap

Exercice 2 : Utilisation des composants Bootstrap

Exercice 3 : Personnalisation d'un thème Bootstrap

Exercice 4 : Utilisation d'un composant JavaScript Bootstrap**

Vous aimerez peut-être aussi