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