Upload
dokhuong
View
218
Download
0
Embed Size (px)
Citation preview
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
…