JavaScript. Chapitre 5 : encore plus loin. MAS RAD Master of Advanced Studies, Rapid Application Development Stéphane GOBRON HE Arc hes.

Transcription

1 JavaScript Chapitre 5 : encore plus loin MAS RAD Master of Advanced Studies, Rapid Application Development Stéphane GOBRON HE Arc hes.so 2016

2 JavaScript 6 chapitres Description du cours Fondamentaux Instructions de base Structure objet Instructions avancées Encore plus loin Après ce cours vous savez que c'est la réponse 'D' bien sur!

3 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!"

4 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

5 Librairies DOM ou JS Manipulation du DOM AccDC Dojo Toolkit Glow jquery midori MooTools Prototype JS Framework YUI Library Pure JavaScript/AJAX FuncJS Google Closure Library Joose jsphp Microsoft's Ajax library MochiKit PDF.js Rico Socket.io Spry framework Underscore.js Wakanda Framework

6 Librairies Graphisme & Web Graphical/Visualization (Canvas or SVG related) D3.js CanvasJS HTML5 Charts JavaScript InfoVis Toolkit Fellowrock Kinetic.js Processing.js Raphaël SWFObject Three.js Frame Engine GUI related (Widget libraries) Ample SDK DHTMLX Ext JS Ink ix Framework jquery UI Lively Kernel qooxdoo Script.aculo.us SmartClient Kendo UI CreateJS Web application related AngularJS Backbone.js Batman.js Cappuccino Echo Ember.js Enyo Google Web Toolkit JavaScriptMVC Knockout rappid.js Rialto Toolkit SproutCore Web Atoms

7 Librairies Plus généralement Pour rechercher une lib spécifique et/ou accéder à l ensemble de l étendu des lib JS :

8 Librairies généralistes jquery But et principe jquery est une librairie JavaScript wiki/jquery Plan visuel de jquery jquery simplifie grandement la programmation JS jquery is considéré comme facile à apprendre Exemple

9 Librairie spécialisée Buzz But et principe Une des très nombreuses librairies annexes Rien à voir avec Buzz l'éclair

10 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

11 En complément de JS AJAX But et principe AJAX = Asynchronous JavaScript and XML AJAX est une technique pour créer des pages web rapide et dynamique 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 AJAX : c'est quoi, pour faire quoi et pour qui?

12 En complément de JS AJAX Où se place Ajax?

13 En complément de JS WebGL But et principe Utilisation d'opengl version 4.0 Exemples de rendu 3D temps réel multi passes dans un navigateur avec WebGL : JS + GLSL Implique de connaître Les notions d'infographie La notion de Shaders Language I.e. programmation sous carte graphique ici GLSL

14 En complément de JS WebGL A visiter!!! s.com/22 experimental webgldemo examples.html Plus de détail pour ceux qui le souhaitent après ce cours

15 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

16 Merci pour votre attention! Questions? Une archive de tous les exemples comprenant.html,.css,.js, images, et sons et cachées à cette adresse : 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