Post on 12-Jul-2020
WEB: CLIENT 2COURS 12
PLAN▸ Introduction à Bootstrap
▸ Introduction à JQuery
▸ Début du laboratoire #4 : Conception
Bootstrap
BOOTSTRAP▸ Librairie CSS facilitant la mise en place d’interfaces web adaptatives via l’utilisation de
classes pré-existantes.
▸ Propose également des composants JavaScript(carrousel, collapse, alertes, …)
▸ https://getbootstrap.comhttps://www.w3schools.com/bootstrap4/
INCLURE BOOTSTRAP▸ https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-
template
MISE EN PAGE▸ Basé sur une grille
de 12 colonnes
▸ On décompose la page en une hiérarchie de- conteneur (taille fixe ou 100%) - ligne- colonne
MISE EN PAGE: STRUCTURE▸ On doit respecter une structure précise pour construire l’interface
▸ On utilise des div qui possède la classe appropriée pour organiser le contenu:container↳ row ↳ col ↳ col ↳ row ↳ col ↳ col
COLONNES ADAPTATIVES▸ https://getbootstrap.com/docs/4.3/layout/grid/
▸ https://www.sitepoint.com/understanding-bootstrap-grid-system/
MISE EN PAGE - EXEMPLE
▸ https://mdbootstrap.com/docs/jquery/layout/grid-examples/
MISE EN PAGE - EXEMPLE: CODE
MISE EN PAGE - EXEMPLE 2
MISE EN FORME DU CONTENU▸ Un ensemble de classes permettent d’appliquer un style à votre contenu
▸ Standardisation de l’apparence https://getbootstrap.com/docs/4.3/content/reboot/ https://getbootstrap.com/docs/4.3/utilities
▸ Formulaires https://getbootstrap.com/docs/4.3/components/forms/
▸ Exploitez la barre de recherche pour trouver un style précishttps://getbootstrap.com/docs/4.3/getting-started/introduction/ou les catégories sur w3schoolshttps://www.w3schools.com/bootstrap4/bootstrap_colors.asp
JQuery
JQUERY▸ Librairie JavaScript facilitant les manipulations du DOM, la gestion des
évènements et plusieurs autres fonctionnalités des navigateurs.
▸ https://jquery.com/ https://www.w3schools.com/jquery/jquery_get_started.asp
JQUERY - SÉLECTION▸ À la base de JQuery se trouve la syntaxe
$(selector).action()
▸ https://www.w3schools.com/jquery/jquery_selectors.asp Liste: https://www.w3schools.com/jquery/jquery_ref_selectors.asp
JQUERY - MANIPULATION DU DOM▸ .innerHTML devient .html() | .html(“Nouveau contenu”)
.value devient .val() | .val(“Nouvelle valeur”)
▸ Récupérer un attribut arbitraire, par exemple .name devient .attr(“name”) | .attr(“name”, “Nouvelle valeur”)
▸ Récupérer une propriété arbitraire, par exemple .index devient .prop(“index”) | .prop(“index”, “Nouvelle valeur”)
▸ createElement(“div”) devient $(“<div></div>”), appendChild devient append(item, …)removeChild devient .remove(“selecteur”), remove reste .remove() s’ajoute .empty()
▸ https://www.w3schools.com/jquery/jquery_dom_get.asp Liste: https://www.w3schools.com/jquery/jquery_ref_html.asp
JQUERY - ÉVÈNEMENTS
▸ N’oubliez pas d’accéder à l’item ayant déclenché l’évènement(this) en utilisant le sélecteur JQuery: $(this)
▸ https://www.w3schools.com/jquery/jquery_events.aspListe: https://www.w3schools.com/jquery/jquery_ref_events.asp
Laboratoire #4
LABORATOIRE #4▸ À quoi sert tout ce JavaScript?
▸ https://jsfiddle.net/Tertia/vbyon64p/6/
▸ https://jsfiddle.net/yyx990803/4dr2fLb7/
▸ http://react-compare-app.surge.sh/
▸ L’objectif du laboratoire #4 est de mettre en commun vos connaissances actuelles des technologies web pour construire une application JavaScript de gestion d’items(CRUD).