SlideShare une entreprise Scribd logo
Slim Soussi   Vladimir Kostarev   David Catuhe   David Rousset
    Intel           Intel          Microsoft       Microsoft
David Catuhe / Microsoft                    David Rousset / Microsoft
http://blogs.msdn.com/eternalcoding   http://blogs.msdn.com/davrous
davca@microsoft.com                          davrous@microsoft.com
Agenda
•   Un peu d’histoire
•   Fondamentaux
•   Les outils
•   Quelques frameworks utiles…
Javascript & tools

Recommandé pour vous

Electron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARDElectron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARD

Electron, découverte du framework en tentant de répondre à la question est ce une approche à envisager dans un monde d’application web ?

electronflorent moignardframework
Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006

"Enfin", c'est le mot qu'on peut avoir à la découverte du framework web Ruby On Rails. Enfin un cadre de travail MVC qui facilité réellement le développement au lieu de le complexifier. ActiveRecord, une des briques magiques de cette application, pose une interface objet pour votre base de donnée en moins de cinq lignes. Le reste est à l'image de ruby : principe de surprise minimum, agilité et extensibilité. Cette présentation vous montrera, après des années de framework Web et d'expertises PHP, ce que quelques mois de Ruby On Rails suffisent à gagner.

railsrubyparis on rails
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js

Objectif général : Prendre en main Express js, le mini-framework de Node js le plus utilisé objectifs spécifiques : Installer Node js et Express js Créer une application Express js Router les requêtes Recevoir des données à partir de l’URL d’une requête Recevoir des données à partir du corps d’une requête Traiter des fichiers uploadés Utiliser un moteur de template Utiliser une base de données Utiliser des middlewares

express jsnode jsframework
Un peu d’histoire
• Développé par Brendan Eich de Netscape en 1995

• Nom de code Mocha puis renommé en LiveScript et
  finalement en JavaScript

• Première version avec Netscape 2.0 en Septembre 1995

• Peu de rapport avec Java (choix du nom surtout dicté par
  des raisons marketings de l’époque)

• Novembre 1996 : Soumission à l’ECMA et apparition de
  l’ECMAScript
Un peu d’histoire
• Juin 1997 : Première version de l’ECMAScript

• Juin 2011 : ECMAScript 5.1

• La marque « JavaScript » est sous copyright de Oracle

• JavaScript est sorti du pur web:
 • Développement coté serveur (nodeJS)
 • Développement applicatif (Windows 8)




                                                          6
Javascript & tools
Fondamentaux de JavaScript
JavaScript est :
• Construit autour de fonctions
• Un langage à base de prototype
• Un langage de script (mais pas que…)
• Dynamique
• Faiblement typé

Recommandé pour vous

2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js

Présentation Node.js de Luc Juggery (Gridpocket) à la TECH CONF #3 Telecom Valley du 11 décembre 2014.

Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007

Il est possible d'aller plus loin que les applications classiques. En profitant pleinement des capacités du navigateur cet atelier vous montrera comment améliorer les performances et modulariser l'existant. HTTP, REST et Ajax sont au menu pour une application orienté services légère, simple à modifier et avec une API partageable avec vos clients.

phpnavigateurafup
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)

Support de cours utilisé lors de la formation d'élèves en licence informatique. Cette formation porte sur les technologies JavaScript : de la découverte du langage aux notions avancées, en passant par la stack/architecture MEAN (MongoDB, Express, Angular, Node.js), jQuery et d'autres technologies du moment. Plus d'informations sur mon profil Linkedin : https://fr.linkedin.com/in/guillaumemorelbailly

jqueryformationweb development
Fondamentaux de JavaScript
En JavaScript tout est fonction. Elles servent à :
• Faire des fonctions (!!!)
• Mimiquer les concepts objets
 • Constructeurs
 • Méthodes
• Définir des namespaces
• Définir la portée


     PUZZLE.update = function () {
         for (var index = 0; index < PUZZLE.blocks.length; index++) {
             var block = PUZZLE.blocks[index];

              PUZZLE.updateBlock(block);
          }
     };



                                                                        9
10
Fondamentaux de JavaScript
Un langage à base de prototypes :
• Principe de clonage d’objets modèles (le prototype)
• Délégation des méthodes vers le prototype
• « Remplace » classes et héritage




     this.prototype.add = function (otherVector) {
         return new Vector2(this.x + otherVector.x, this.y +
     otherVector.y);
     };




                                                               11
12

Recommandé pour vous

Introduction TypeScript
Introduction TypeScriptIntroduction TypeScript
Introduction TypeScript

Introduction au langage transcompilé : TypeScript.

transpileurjavascripttypescript
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDB

A brief summary of the most important reasons about why choosing MongoDB might be a good solution in current common problems in IT. This talk is dedicated to software engineers, DBA, managers, CTO that could know MongoDB but don't see why they should deploy it in production.

mongodbdistributed computingnosql
Bonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPBonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHP

Du haut de ses 14 ans, PHP est devenu une technologie utilisée pour de gros projets ; ce qui signifie besoins importants en termes de qualité, de robustesse, et d'outils de développement fiables. Contrôle de sources, normes de codage, utilisation de Frameworks, documentation, tests unitaires / fonctionnels automatisés, intégration continue, déploiement, ... Cette présentation a pour but d'introduire quelques bonnes pratiques de développement, ainsi que des outils permettant de les mettre en place sur des projets PHP.

phpafupforumphp
Fondamentaux de JavaScript
Un langage de script :
• Compilé à la volée par les navigateurs modernes (JIT)
• Profite des dernières avancées des compilateurs
 • Multi cores
 • Optimisations




                                                          13
Fondamentaux de JavaScript
Un langage dynamique et faiblement typé :
• Les types sont associés aux valeurs et non aux variables
• Par exemple :
 • Une variable x peut être associée à un numérique à un instant et à une
   chaine de caractères plus tard
• Types de valeurs supportés :
 •   Number
 •   String
 •   Boolean
 •   Function
 •   Array
 •   Object




                                                                            14
15
Javascript & tools

Recommandé pour vous

Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)

Slides du meetup #OVH sur : Nuxt.js et les applications isomorphiques (Universelles/SSR). Réalisé le 30/01/2018

javascriptssrnuxtjs
Pas possible en drupal, c'est faux
Pas possible en drupal, c'est fauxPas possible en drupal, c'est faux
Pas possible en drupal, c'est faux

Présentation à Alchimie 0xb (novembre 20135) par Christophe Villeneuve (Hello / Sector One)

testfauximpossible
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS

httpcsshtml
Les outils
Les barres F12 des navigateurs
• Natif dans IE9/10 et Chrome
• Via Firebug dans Firefox
• Via DragonFly pour Opera
Les outils
• Microsoft Visual Studio 2010 + Web Standards Update
• Notepad++ 

•   http://jsfiddle.net/
•   http://prefixmycss.com/
•   http://ie.microsoft.com/testdrive/
•   http://jsonformatter.curiousconcept.com/
•   http://jslint.com/
•   http://erik.eae.net/playground/regexp/regexp.html
•   http://code.google.com/p/jsfuzzer/
•   http://fmarcia.info/jsmin/test.html
•   …


                                                        18
19
Javascript & tools

Recommandé pour vous

PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005

PHP jouit parfois d'une mauvaise réputation au niveau des performances. Nous verrons si cette réputation est méritée, si les performances sont réellement un problème pour utiliser PHP. PHP a une architecture qui lui permet de monter en charge sans mettre en place des solutions complexes. Entre l'installation, la configuration et les possibilités au niveau applicatif, cette session vous permettra de répondre efficacement à la problématique des performances.

phpafupperformance
Introduction à Zend Framework
Introduction à Zend FrameworkIntroduction à Zend Framework
Introduction à Zend Framework

Le Zend Framework s'est rapidement imposé comme un framework majeur de l'écosystème PHP. Sa prise en main peut sembler parfois intimidante, et pourtant démarrer un projet dans les règles de l'art ne prend que quelques minutes. Cette présentation vous permettra de vous familiariser avec les concepts clé de Zend Framework, et vous guidera pour vos tous premiers pas avec cet excellent framework !

zfframeworkphp
Quelques frameworks utiles…
•   jQuery : http://jquery.com/
•   jQuery UI : http://jqueryui.com/
•   Modernizr : http://www.modernizr.com/
•   Qunit : http://qunitjs.com/
•   YUI : http://developer.yahoo.com/yui/
•   SproutCore : http://www.sproutcore.com/
•   Midori : http://www.midorijs.com/
•   Fleegix : http://js.fleegix.org/
•   Prototype : http://www.prototypejs.org/
•   Dojo : http://dojotoolkit.org/
•   Mootools : http://mootools.net/
•   MochiKit : http://mochi.github.com/mochikit/
•   …
David Catuhe : davca@microsoft.com - http://blogs.msdn.com/eternalcoding
  David Rousset : davrous@microsoft.com – http://blogs.msdn.com/davrous

Contenu connexe

Tendances

Développement d'un composant win rt
Développement d'un composant win rtDéveloppement d'un composant win rt
Développement d'un composant win rt
Arnaud Auroux
 
Rails 3 au Djangocong
Rails 3 au DjangocongRails 3 au Djangocong
Rails 3 au Djangocong
Jérémy Lecour
 
Zend Framework 2.0 - Le gestionnaire de modules
Zend Framework 2.0 - Le gestionnaire de modulesZend Framework 2.0 - Le gestionnaire de modules
Zend Framework 2.0 - Le gestionnaire de modules
Vincent Blanchon
 
Electron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARDElectron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARD
La Cuisine du Web
 
Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006
Eric D.
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
Abdoulaye Dieng
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
TelecomValley
 
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Eric D.
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
guicara
 
Introduction TypeScript
Introduction TypeScriptIntroduction TypeScript
Introduction TypeScript
felixbillon
 
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDB
Content Square
 
Bonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPBonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHP
Pascal MARTIN
 
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Joffrey LEVEUGLE
 
Pas possible en drupal, c'est faux
Pas possible en drupal, c'est fauxPas possible en drupal, c'est faux
Pas possible en drupal, c'est faux
Christophe Villeneuve
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
Horacio Gonzalez
 
PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005
Eric D.
 
Introduction à Zend Framework
Introduction à Zend FrameworkIntroduction à Zend Framework
Introduction à Zend Framework
Gauthier Delamarre
 

Tendances (19)

Développement d'un composant win rt
Développement d'un composant win rtDéveloppement d'un composant win rt
Développement d'un composant win rt
 
Rails 3 au Djangocong
Rails 3 au DjangocongRails 3 au Djangocong
Rails 3 au Djangocong
 
Zend Framework 2.0 - Le gestionnaire de modules
Zend Framework 2.0 - Le gestionnaire de modulesZend Framework 2.0 - Le gestionnaire de modules
Zend Framework 2.0 - Le gestionnaire de modules
 
Electron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARDElectron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARD
 
Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006Introduction à Rails - Paris on Rails 2006
Introduction à Rails - Paris on Rails 2006
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
 
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007Utiliser pleinement le navigateur et les nouveaux clients web  - AFUP 2007
Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
 
Introduction TypeScript
Introduction TypeScriptIntroduction TypeScript
Introduction TypeScript
 
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDB
 
Bonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPBonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHP
 
Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)Nuxt.js et les applications isomorphiques (Universelles/SSR)
Nuxt.js et les applications isomorphiques (Universelles/SSR)
 
Pas possible en drupal, c'est faux
Pas possible en drupal, c'est fauxPas possible en drupal, c'est faux
Pas possible en drupal, c'est faux
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
 
PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005PHP et Performances - AFUP 2005
PHP et Performances - AFUP 2005
 
Introduction à Zend Framework
Introduction à Zend FrameworkIntroduction à Zend Framework
Introduction à Zend Framework
 
PHP5 et Zend Framework
PHP5 et Zend FrameworkPHP5 et Zend Framework
PHP5 et Zend Framework
 
Zenika MongoDB Tour - REX Amadeus
Zenika MongoDB Tour - REX AmadeusZenika MongoDB Tour - REX Amadeus
Zenika MongoDB Tour - REX Amadeus
 

Similaire à Javascript & tools

Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPF
Boubker ABERWAG
 
Gwt oxiane-novae-lr
Gwt oxiane-novae-lrGwt oxiane-novae-lr
Gwt oxiane-novae-lr
oxmed
 
Du JavaScript dans mon projet
Du JavaScript dans mon projetDu JavaScript dans mon projet
Du JavaScript dans mon projet
jollivetc
 
Java vs .Net
Java vs .NetJava vs .Net
Java vs .Net
Algeria JUG
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
jwajsberg
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
Soufiene Bouzid
 
0251-formation-java-programmation-objet.pdf
0251-formation-java-programmation-objet.pdf0251-formation-java-programmation-objet.pdf
0251-formation-java-programmation-objet.pdf
Ombotimbe Salifou
 
Afterworks @Nouméa - DevOps, approche par container et Docker
Afterworks @Nouméa - DevOps, approche par container et DockerAfterworks @Nouméa - DevOps, approche par container et Docker
Afterworks @Nouméa - DevOps, approche par container et Docker
Julien Chable
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
Guillaume Collic
 
Les plateformes de développement des web services
Les plateformes de développement des web servicesLes plateformes de développement des web services
Les plateformes de développement des web services
oussemos
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Frédéric Harper
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
Microsoft
 
Javaoop
JavaoopJavaoop
Javaoop
javaexpert
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
VISEO
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilitéNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Julien Dubois
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Ippon
 
Optimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJSOptimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJS
Microsoft
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
Microsoft
 

Similaire à Javascript & tools (20)

Formation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPFFormation d'architecte logiciel AFCEPF
Formation d'architecte logiciel AFCEPF
 
Gwt oxiane-novae-lr
Gwt oxiane-novae-lrGwt oxiane-novae-lr
Gwt oxiane-novae-lr
 
Du JavaScript dans mon projet
Du JavaScript dans mon projetDu JavaScript dans mon projet
Du JavaScript dans mon projet
 
Java vs .Net
Java vs .NetJava vs .Net
Java vs .Net
 
Java vs .Net
Java vs .NetJava vs .Net
Java vs .Net
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 
0251-formation-java-programmation-objet.pdf
0251-formation-java-programmation-objet.pdf0251-formation-java-programmation-objet.pdf
0251-formation-java-programmation-objet.pdf
 
Afterworks @Nouméa - DevOps, approche par container et Docker
Afterworks @Nouméa - DevOps, approche par container et DockerAfterworks @Nouméa - DevOps, approche par container et Docker
Afterworks @Nouméa - DevOps, approche par container et Docker
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
 
Les plateformes de développement des web services
Les plateformes de développement des web servicesLes plateformes de développement des web services
Les plateformes de développement des web services
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
 
Javaoop
JavaoopJavaoop
Javaoop
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilitéNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et mobilité
 
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et MobileNouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
Nouveau look pour une nouvelle vie : HTML5, Spring, NoSQL et Mobile
 
Optimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJSOptimisation des applications Windows 8/HTML5/WinJS
Optimisation des applications Windows 8/HTML5/WinJS
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 

Javascript & tools

  • 1. Slim Soussi Vladimir Kostarev David Catuhe David Rousset Intel Intel Microsoft Microsoft
  • 2. David Catuhe / Microsoft David Rousset / Microsoft http://blogs.msdn.com/eternalcoding http://blogs.msdn.com/davrous davca@microsoft.com davrous@microsoft.com
  • 3. Agenda • Un peu d’histoire • Fondamentaux • Les outils • Quelques frameworks utiles…
  • 5. Un peu d’histoire • Développé par Brendan Eich de Netscape en 1995 • Nom de code Mocha puis renommé en LiveScript et finalement en JavaScript • Première version avec Netscape 2.0 en Septembre 1995 • Peu de rapport avec Java (choix du nom surtout dicté par des raisons marketings de l’époque) • Novembre 1996 : Soumission à l’ECMA et apparition de l’ECMAScript
  • 6. Un peu d’histoire • Juin 1997 : Première version de l’ECMAScript • Juin 2011 : ECMAScript 5.1 • La marque « JavaScript » est sous copyright de Oracle • JavaScript est sorti du pur web: • Développement coté serveur (nodeJS) • Développement applicatif (Windows 8) 6
  • 8. Fondamentaux de JavaScript JavaScript est : • Construit autour de fonctions • Un langage à base de prototype • Un langage de script (mais pas que…) • Dynamique • Faiblement typé
  • 9. Fondamentaux de JavaScript En JavaScript tout est fonction. Elles servent à : • Faire des fonctions (!!!) • Mimiquer les concepts objets • Constructeurs • Méthodes • Définir des namespaces • Définir la portée PUZZLE.update = function () { for (var index = 0; index < PUZZLE.blocks.length; index++) { var block = PUZZLE.blocks[index]; PUZZLE.updateBlock(block); } }; 9
  • 10. 10
  • 11. Fondamentaux de JavaScript Un langage à base de prototypes : • Principe de clonage d’objets modèles (le prototype) • Délégation des méthodes vers le prototype • « Remplace » classes et héritage this.prototype.add = function (otherVector) { return new Vector2(this.x + otherVector.x, this.y + otherVector.y); }; 11
  • 12. 12
  • 13. Fondamentaux de JavaScript Un langage de script : • Compilé à la volée par les navigateurs modernes (JIT) • Profite des dernières avancées des compilateurs • Multi cores • Optimisations 13
  • 14. Fondamentaux de JavaScript Un langage dynamique et faiblement typé : • Les types sont associés aux valeurs et non aux variables • Par exemple : • Une variable x peut être associée à un numérique à un instant et à une chaine de caractères plus tard • Types de valeurs supportés : • Number • String • Boolean • Function • Array • Object 14
  • 15. 15
  • 17. Les outils Les barres F12 des navigateurs • Natif dans IE9/10 et Chrome • Via Firebug dans Firefox • Via DragonFly pour Opera
  • 18. Les outils • Microsoft Visual Studio 2010 + Web Standards Update • Notepad++  • http://jsfiddle.net/ • http://prefixmycss.com/ • http://ie.microsoft.com/testdrive/ • http://jsonformatter.curiousconcept.com/ • http://jslint.com/ • http://erik.eae.net/playground/regexp/regexp.html • http://code.google.com/p/jsfuzzer/ • http://fmarcia.info/jsmin/test.html • … 18
  • 19. 19
  • 21. Quelques frameworks utiles… • jQuery : http://jquery.com/ • jQuery UI : http://jqueryui.com/ • Modernizr : http://www.modernizr.com/ • Qunit : http://qunitjs.com/ • YUI : http://developer.yahoo.com/yui/ • SproutCore : http://www.sproutcore.com/ • Midori : http://www.midorijs.com/ • Fleegix : http://js.fleegix.org/ • Prototype : http://www.prototypejs.org/ • Dojo : http://dojotoolkit.org/ • Mootools : http://mootools.net/ • MochiKit : http://mochi.github.com/mochikit/ • …
  • 22. David Catuhe : davca@microsoft.com - http://blogs.msdn.com/eternalcoding David Rousset : davrous@microsoft.com – http://blogs.msdn.com/davrous