javascript chap5 v2-00 - stephane-gobron.net · e.g. généraliste : jquery e.g. spécialisée :...
TRANSCRIPT
![Page 1: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/1.jpg)
2016
JavaScriptChapitre 5 : encore plus loin…
MAS‐RAD –Master of Advanced Studies, Rapid Application DevelopmentStéphane GOBRONHE‐Arc – hes.so
![Page 2: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/2.jpg)
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!
![Page 3: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/3.jpg)
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!"
![Page 4: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/4.jpg)
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…
![Page 5: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/5.jpg)
Librairies
DOM ou JS
Manipulation du DOMAccDCDojo ToolkitGlowjQuerymidoriMooToolsPrototype JS FrameworkYUI Library
Pure JavaScript/AJAXFuncJSGoogle Closure LibraryJoosejsPHPMicrosoft's Ajax libraryMochiKitPDF.jsRicoSocket.ioSpry frameworkUnderscore.jsWakanda Framework
![Page 6: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/6.jpg)
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
![Page 7: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/7.jpg)
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/
![Page 8: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/8.jpg)
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
![Page 9: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/9.jpg)
Librairie spécialiséeBuzz
But et principe
Une des très nombreuses librairies annexes…
Rien à voir avec Buzz l'éclair
![Page 10: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/10.jpg)
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…
![Page 11: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/11.jpg)
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
![Page 12: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/12.jpg)
En complément de JS AJAX
Où se place Ajax?
http://fr.w
ikiped
ia.org/w
iki/A
jax_
%28
inform
atique
%29
![Page 13: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/13.jpg)
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
![Page 14: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/14.jpg)
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
![Page 15: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript Chap5 v2-00 - stephane-gobron.net · E.g. généraliste : jQuery E.g. spécialisée : Buzz Il y aurait beaucoup à dire ... Microsoft PowerPoint - JavaScript_Chap5_v2-00.pptx](https://reader031.vdocuments.mx/reader031/viewer/2022022701/5bbedff609d3f2c0788d3c6f/html5/thumbnails/16.jpg)
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
…