2016

JavaScriptChapitre 5 : encore plus loin…

MAS‐RAD –Master of Advanced Studies, Rapid Application DevelopmentStéphane GOBRONHE‐Arc – hes.so

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! 

Librairies et extensions…en quelques motsdonc seulement l'introduction des concepts de…

5.1 LibrairiesGénéraliste : jQuerySpécialisée : Buzz

5.2 En complémentAJAXPour 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…

Librairies

DOM ou JS

Manipulation du DOMAccDCDojo ToolkitGlowjQuerymidoriMooToolsPrototype JS FrameworkYUI Library

Pure JavaScript/AJAXFuncJSGoogle Closure LibraryJoosejsPHPMicrosoft's Ajax libraryMochiKitPDF.jsRicoSocket.ioSpry frameworkUnderscore.jsWakanda Framework

Librairies

Graphisme & WebWeb‐application related

AngularJSBackbone.jsBatman.jsCappuccinoEchoEmber.jsEnyoGoogle Web ToolkitJavaScriptMVCKnockoutrAppid.jsRialto ToolkitSproutCoreWeb Atoms

Graphical/Visualization(Canvas or SVG related)D3.js

CanvasJS HTML5 ChartsJavaScript InfoVis ToolkitFellowrockKinetic.jsProcessing.jsRaphaëlSWFObjectThree.jsFrame‐Engine

GUI‐related (Widgetlibraries)Ample SDKDHTMLXExt JSInkiX FrameworkjQuery UILively KernelqooxdooScript.aculo.usSmartClientKendo UICreateJS

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éralistesjQuery

But et principe

jQuery est une librairieJavaScript

jQuery simplifiegrandement la programmation JS

jQuery is considérécomme facile à apprendre

Plan visuel de jQuery

http://en.wikipedia.org/wiki/JQuery

Exemple

Librairie spécialiséeBuzz

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…

En complément de JSAJAX

But et principe

AJAX = Asynchronous JavaScript and XML

AJAX : c'est quoi, pour faire quoi et pour qui?

•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

http://www.w

3sch

ools.com

/ajax/ajax

_intro.asp

En complément de JS AJAX

Où se place Ajax?

http://fr.w

ikiped

ia.org/w

iki/A

jax_

%28

inform

atique

%29

En complément de JS WebGL

But et principe

Utilisation d'OpenGL version 4.0

Implique de connaître Les notions 

d'infographie  La notion de Shaders

Language I.e. programmation 

sous carte graphique ici GLSL

Exemples de rendu 3D temps‐réel multi‐passesdans un navigateur avec WebGL : JS + GLSL

http://webGL3D.info

En complément de JS WebGL

A visiter !!!

http://www.awwwards.com/22‐experimental‐webgl‐demo‐examples.html

Plus de détail pour ceux qui le souhaitent 

après ce cours

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

…