hors-browser – Node.js, Spidermonkey, Rhino – script d’app (Qt, Notepad++, …) 1 • Langage cible de compilateurs : emscripten1, WebAssembly2 • Embarqué : Espruino3, robotique : Node Bots4, CylonJS5 Electron6, sciter7 *Script • ECMAScript : Norme depuis 1997 – Juin 2023 : ECMA-262 14th edition8 – Support9 des différentes implémentations – Conversions avec BabelJS10 • JavaScript : implémentation Firefox Fermetures19 – Promesses20 (MDN21, Google22) Fonctions • Pas de type de retour • Possibilité de retourner ou non une valeur • Sans retour, valeur spéciale : undefined • Pas de surcharge (la dernière définie prime)

YBL Programme • Frameworks MVC : Laravel, Django, … • HTML5 : vue d’ensemble • Javascript : VueJS, Node.js, jQuery, AJAX, JSON, … • Déploiement et configuration Serveur • Webservices : REST vs SOAP • Sécurité propositions ? • Support : ghpages5 (source6), partage fichiers : teams7 Projets • Faire pour apprendre • Les rôles dans une équipe de développement web, workflow • Ne pas réinventer la roue ou tout faire (wiki), Investissement, volume de travail – Bonus (ceux qui vont plus loin) : 0-20% ∗ WebSockets ou autre API HTML5, webservices, … ∗ Contribution, présentation, documentation, … • Tous les membres

app web HE-Arc (DGR) 2022 Risque • Faille ou bug permettant d’altérer le fonctionnement • Un attaquant pourra : – Modifier le fonctionnement – Accéder ou modifier les données • Présence possible à journalisation 10. Falsification de requêtes côté serveur • Non exhaustif : ex. : risques liés à Node JS9 Injection de code • Données mal validées : possibilité d’exécuter du code • Passées par requêtes à son insu, avec ses propres infos d’authentifi- cation (credentials) • Envoi par mail ou post forum de liens ou images • Les URL correspondent à actions (vote, suppression, …) Exemple12 (SOP, CORS)

r ol l e r . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 2. 4. 1 R ou t e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 2. 4. 2 C on t r ol l e w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 2. 6. 1 Lay ou t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 2. 6. 2 W i d ge t . . age Loggi n g . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 7. 4. 2 M e s s age R ou t i n g . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 7. 4. 3 P e r f or m an c e

r ol l e r . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 2. 4. 1 R ou t e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 2. 4. 2 C on t r ol l e w . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 2. 6. 1 Lay ou t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 2. 6. 2 W i d ge t . . age Loggi n g . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 8. 4. 2 M e s s age R ou t i n g . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 v i i i C o n t e n t s 8.

de sélecteurs CSS, id ou classes $(document); // retourne le DOM $("h3").hide(); // cache tous les éléments h3 $(".post"); // sélectionne les éléments de classe "post" var node = $('

New

'); // Pour être sûr que le document est chargé : $(document).ready(function(){ console.log("prêt!") }); ou $(function() { console.log("prêt!") }); Sélection dans le DOM • Sélection $("h1"); // noeud élément

io/code-samples/responsive-web-design/ex/ex-site-FINAL.html 1 Techniques • Media queries : Taille de l’écran (ou sortie) • UNITES RELATIVES • Fonts : Dimensions en em • Fluid Grids : Disposition et taille des éléments des zones cliquables (utilisation au doigt) – faire passer le contenu sur une seule colonne – masquer ou afficher des éléments spécifiques – ajuster les dimensions et marges • Attention à l’ordre de chargement mobile • Et Après ? MOBILE FIRST14, OFFLINE FIRST15, PWA16 • framework ou from scratch ? Références • Exemples – Site17 support du livre18 d’Ethan Marcotte – mediaqueri.es19 – thenextweb20 – designshack21

obligatoire • HTTP 2.01 (2015) – Binaire, multiplexage connexions, compression entêtes, push, … – Supporté par presque tous2 les navigateurs, une majorité de serveurs • HTTP 3.03 (2019) – UDP, correction com/Content/Development/JavaScript/Articl es/GIFAsPipe/Index.cfm 10https://www.w3.org/TR/XMLHttpRequest/ 4 • Supporté par la majorité des navigateurs • Alternative souhaitable si JS désactivé XHR en JS var xhr; function onreadystatechange • responseText, responseXML • open (Verbe, URI, async) : – Verbe HTTP : “GET”, “POST” ou “PUT” – URI : destinataire de la requête – async (bool) : true = asynchrone, false = bloquant • send

Extensible • Principe d’inversion de contrôle Différences entre framework et library sur Stack Overflow2 ou artima developper3. 1http://en.wikipedia.org/wiki/Software_framework 2http://stackoverflow.com/qu tld/controller/action[/key/val] • Arborescence : – Imposée ou libre selon frameworks – Pas de code (minimum) sous la racine web • Conventions obligatoires ou non, mais RECOMMANDEES dans tous les cas 4http://martinfowler des identifiants uniques • HTML, un langage de publication • HTTP, un protocole d’échange de texte (ou HyperText) 16https://www.youtube.com/watch?v=iDbyYGrswtg 10 Préparatifs https://github.com/HE-

Autorité de Certification • Tiers de confiance – enregistrée et certifiée par des autorités publiques ou de gouvernance de l’Internet • Rôle : – Vérifier et garantir les informations sur l’entité – Emettre la requête en chiffrant avec la CS 7. Le navigateur décode la réponse avec la CS • En images2, ou ici3 ou en slides4 • 2-5 en TCP 1https://en.wikipedia.org/wiki/Public_key_infrastructure 2https://tiptopsecurity conf, (ports.conf) • Création de l’arborescence sécurisée • Démarrage serveur • OU BIEN utiliser Let’s encrypt5 • OU BIEN utiliser un serveur pré-configuré comme Caddy6 HTTPS Aujourd’hui • Il n’y a