web: client 2...introduction à jquery début du laboratoire #4 : conception bootstrap bootstrap...

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).