12/17/2019 JavaScript Chapitre 5 : encore plus loin… MAS‐RAD – Master of Advanced Studies, Rapid Application Development Stéphane GOBRON HE‐Arc –hes.so 2019 JavaScript 6 chapitres . Description du cours . Ch1 : fondamentaux . Ch2 : instructions de base . Ch3 : structure objet . Ch4 : instructions avancées . Ch5 : encore plus loin Après ce cours vous savez que c'est la réponse 'D' bien sur! 1 12/17/2019 Librairies et extensions …en quelques mots donc seulement l'introduction des concepts de… . 5.1 Librairies Généraliste : jQuery Spécialisée : Buzz . 5.2 En complément AJAX Pour la 3D : WebGL "More, more, and more!" 5. Encore plus loin… 5.1 Librairies . JS lib ‐ Dom, JS ‐ Graphisme, Web ‐ Recherche spécifique . E.g. généraliste : jQuery . E.g. spécialisée : Buzz Il y aurait beaucoup à dire… 2 12/17/2019 Librairies DOM ou JS Manipulation du DOM Pure JavaScript/AJAX AccDC FuncJS Dojo Toolkit Google Closure Library Glow Joose jQuery jsPHP midori Microsoft's Ajax library MooTools MochiKit Prototype JS Framework PDF.js YUI Library Rico Socket.io Spry framework Underscore.js Wakanda Framework Librairies Web‐application related Graphisme & Web GUI‐related (Widget AngularJS Graphical/Visualization libraries) Backbone.js (Canvas or SVG related) Ample SDK Batman.js D3.js DHTMLX Cappuccino Ext JS Echo CanvasJS HTML5 Charts Ink Ember.js JavaScript InfoVis Toolkit iX Framework Enyo Fellowrock jQuery UI Google Web Toolkit Kinetic.js Lively Kernel JavaScriptMVC Processing.js qooxdoo Knockout Raphaël Script.aculo.us rAppid.js SWFObject SmartClient Rialto Toolkit Three.js Kendo UI SproutCore Frame‐Engine CreateJS Web Atoms 3 12/17/2019 Librairies Plus généralement . Pour rechercher une lib spécifique et/ou accéder à l’ensemble de l’étendu des lib JS : https://www.javascripting .com/ Librairies généralistes jQuery http://en.wikipedia.org/ But et principe wiki/JQuery Plan visuel de jQuery . jQuery est une librairie JavaScript . jQuery simplifie grandement la programmation JS . jQuery is considéré comme facile à apprendre Exemple 4 12/17/2019 Librairie spécialisée Buzz But et principe . Une des très nombreuses librairies annexes… Rien à voir avec Buzz l'éclair 5. Encore plus loin… 5.2 En complément de JS . AJAX . WebGL Des milliers et des milliers de polygônes en temps réel… 5 12/17/2019 En complément de JS AJAX But et principe • AJAX est une technique pour créer des pages Web rapide et . AJAX = Asynchronous dynamique JavaScript and XML • AJAX permet aux pages Web d'être mis à jour de manière asynchrone par échange de petites quantités de données avec le serveur dans les coulisses. Cela signifie qu'il est possible de mettre à jour des parties d'une page Web sans recharger toute la page • Les sites qui n'utilisent pas AJAX doivent recharger la page complète au moindre changement • Qui utilise AJAX? Google Maps, Gmail, Youtube, and Facebook tabs http://www.w3schools.com/ajax/ajax_intro.asp AJAX : c'est quoi, pour faire quoi et pour qui? En complément de JS AJAX Où se place Ajax? http://fr.wikipedia.org/wiki/Ajax_%28informatique%29 6 12/17/2019 En complément de JS WebGL But et principe Exemples de rendu 3D temps‐réel multi‐passes . Utilisation d'OpenGL dans un navigateur avec version 4.0 WebGL : JS + GLSL . Implique de connaître Les notions d'infographie La notion de Shaders Language I.e. programmation sous carte graphique ici GLSL http://webGL3D.info En complément de JS WebGL A visiter !!! http://www.awwward s.com/22‐ experimental‐webgl‐ demo‐examples.html Plus de détail pour ceux qui le souhaitent après ce cours 7 12/17/2019 Buzz . eg05‐01.html : librairie Buzz pour le son jQuery . eg05‐02.html : translation et 'zoom in' de texte . eg05‐03.html : zoom in/out d'images Exemple avancé sans librairie! . eg05‐04.html : tracés de courbes et mémorisation d'information sur navigateur WebGL . eg05‐05.html : vérifier le contexte pour WebGL . eg05‐06.html : un premier triangle . eg05‐07.html : WebGL Earth AJAX . eg05‐08.html : changer un texte . eg05‐09.html : calculer coté serveur avec l'aide de php Merci pour votre attention! Questions? Une archive de tous les exemples comprenant .html, .css, .js, images, et sons et cachées à cette adresse : http:\\www.stephane‐gobron.net\Core\Courses\3_HE‐Arc\JavaScript\Eg\Eg.rar Attention! Cette archive à de fortes chances de changer car il reste encore du travail pour rendre tous les exemples pleinement fonctionnels … 8.