Où trouver les slides?
Ne pas confondre avec le cours d'architecture web pour les ingénieurs en informatique
Des questions?
N'hésitez pas à me contacter par email: NGY@ecam.be
Le déroulement du cours et des labos sera planifié pour aborder et détailler les points suivants:
Captures d'écran de la page d'Instagram de Kim Kardashian au fil des années.
Wayback Machine permet de voir un snapshot d'une page web au fil du temps.
Que s'est-il passé en 2016 et en 2019?
Pourquoi développe-t-on des applications web?
Graphe montrant l'utilisation des langages de programmation les plus populaires au fil des ans.
Quelles sont les tendances principales au niveau du développement? Le développement web est-il en hausse ou en baisse?
Pour créer une page web, il suffit de créer un fichier texte .html
Vocabulaire: balise, attribut, valeur, sélecteur
Le DOM est la représentation en mémoire d'une page HTML.
Vous pouvez voir le DOM d'une page avec les outils de développement (F12)
Vocabulaire: noeud, enfant, parent
Il est possible de modifier le DOM manuellement. Je ne devrais probablement vous montrer cette astuce-là mais il est possible de lire les mots de passe sur les ordinateurs de vos amis...
Généralement, les modifications du DOM se font en JavaScript. Dans l'exemple ci-dessous, cliquer sur le bouton "Play" introduit des changements du DOM.
Lorsque l'on clique sur un lien, le DOM est détruit et la nouvelle page est reconstruite de zéro.
Le JavaScript permet de partiellement changer la page (plus précisément le DOM), ce qui permet une meilleure expérience pour l'utilisateur.
aussi: getElementById, getElementsByClassNames, querySelectorAll, etc.
Il y a énormément de type de noeuds (e.g. un pour chaque balise) qui ont énormément de propriétés. Pour plus d'infos, consulter la documentation.
Une partie importante du Javascript est de réagir aux actions et interactions de l'utilisateur avec la page (scroll, clic sur un bouton, etc.)
Dans le navigateur, le JavaScript se comporte comme un·e caissier·e du McDonalds lorsque les machines de commande sont en panne: les clients ne sont pas servis dans l'ordre.
Le modèle est plus complexe et requiert un peu de travail, mais au moins l'interface fonctionne quand on charge toujours les données.
Le comportement par défaut est la file de supermarché
Le modèle est plus simple mais on est bloqué si quelqu'un a oublié son portefeuille ou nourrit une famille de 15.
À la fin du code, que vaut b
?