Cours JavaScript CIFACOM - Julien Guézennec - (MAJ) 17/03/2013

alert('!');

...And we know some newbies doing beautiful things... ;)

Objectifs En premier lieu nous verrons les bases de développement JavaScript, la définition du langage, les type, les instructions, tout ce qui définie JavaScript comme un langage de développement à part entière. Ensuite nous aurons l'occasion de disséquer la librairie JQuery et de passer en revue son mode de fonctionnement.

JavaScript 1. Petit historique 2. Inter-agir en JavaScript 3. Instruction 4. Commentaires 5. Variables 6. Types d'objet 7. Opérateurs 8. Structure de contrôle 9. Types test et conversion 10. Les fonctions "f()" 11. Les méthodes et propriétés 12. Plus loin avec les fonctions 13. Notions D.O.M. 14. Notions Évènements 15. Performances 16.Remote debug your mobile

Pour me présenter... Je réalise des sites et applications Internet/multimédia depuis 15 ans (1998). J’ai commencé par la post-production vidéo et 3D, comme intermittent du spectacle. Ensuite, après avoir travaillé 4 ans dans une agence Web, comme développeur back/front office LAMP/JS/HTML/SQL, je suis

allé un an en Bolivie pour un projet de bibliobus, et encore 1 an comme freelance “concepteur/Developpeur web”. Depuis 2008 je travaille chez Bouygues Telecom, comme Ingénieur concepteur/développeur Web dans un laboratoire d'innovation R&D “convergence Internet” : Internet sur TV (Set Top Box / TV connectés), Internet mobile, tablettes tactile, etc... J'y réalise principalement des prototypes de WebApps Depuis 2007 je développe aussi des quelques plugins jQuery et j'entretiens une base de connaissance Depuis Janvier 2011, je fais activement parti d'une communauté de développeurs JavaScript : http://parisjs.org (C’est open !) Mes langages et mots clefs : jQuery HTML5 CSS3 PHP MySQL Flex/Flash/Air LAMP SDK Android JavaScript Animation Logo Design HTML5 jQuery User-Experience UX XHTML ActionScript Web2.0 User-Interface Design Web-Development Web-Design CSS3 Mobile Devices Wordpress Contacts : @molokoloco | [email protected] | http://b2bweb.fr

Petit historique Définition ●

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

●

http://fr.wikipedia.org/wiki/JavaScript

JavaScript est un langage de programmation “open-source” et multi-plateforme utilisé principalement par les navigateurs web. Il partage avec Java une syntaxe inspirée du langage C, mais leurs similitudes s'arrêtent là. Il fut créé par Netscape sous le nom LiveScript. Le noyau du JavaScript est aujourd'hui défini par le standard ECMA 262, connu aussi sous l'appellation ECMAScript. Ce langage est intégré directement au sein des pages Web et s'exécute sur le client Web (par opposition au serveur Web) : c'est le navigateur Web qui prend en charge l'exécution de ces bouts de programme, appelés scripts, qui manipulent leur environnement. Généralement, JavaScript sert à interagir avec le document HTML et ses feuilles de style CSS via l'interface DOM (Document Object Model ; on parle de HTML dynamique ou DHTML pour désigner cette intégration des trois langages). JavaScript est ainsi utilisé pour intéragir avec

l’utilisateur et réaliser des services dynamiques en communication avec le serveur Web, souvent avec AJAX. C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d'en créer des objets héritiers personnalisés. JavaScript is a cross-platform, object-oriented scripting language JavaScript can function as both a procedural and an object oriented language Le langage a été créé en 1995 par Brendan Eich (Brendan Eich étant membre du conseil d'administration de la fondation Mozilla) pour le compte de Netscape Communications Corporation. Le langage, actuellement à la version 1.8.2 est une implémentation de la 3e version de la norme ECMA-262 qui intègre également des éléments inspirés du langage Python. La version 1.8.5 du langage est prévue pour intégrer la 5e version du standard ECMA2. Birth at Netscape : JavaScript was originally developed in Netscape, by Brendan Eich. Battling with Microsoft over the Internet, Netscape considered their client-server solution as a distributed OS, running a portable version of Sun Microsystems' Java. Because Java was a competitor of C++ and aimed at professional programmers, Netscape also wanted a lightweight interpreted language that would complement Java by appealing to non professional programmers, like Microsoft's Visual Basic. Adoption by Microsoft : JavaScript very quickly gained widespread success as a client-side scripting language for web pages. Microsoft introduced JavaScript support in its own web browser,Internet Explorer, in version 3.0, released in August 1996 JavaScript est souvent source de difficultés dues aux nombreuses versions différentes de l'interpréteur et du DOM, dépendantes des éditeurs de navigateurs. Chacun ayant développé sa propre variante supportant (presque) le standard ECMAScript, un ou deux des deux standards DOM, et possédant de surcroît des fonctionnalités supplémentaires et incompatibles. Later developments : JavaScript has become the most popular programming languages on the web. Initially, however, many professional programmers denigrated the language because its target audience was web authors and other such "amateurs" JavaScript's use in applications outside web pages — for example in PDF documents, site-specific browsers, and desktop widgets — is also significant. Newer and faster JavaScript VMs and frameworks built upon them (notably Node.js) have also increased

the popularity of JavaScript for server-side web applications. JavaScript Virtual Machine (VM) : mozilla.org hosts two JavaScript implementations. The first ever JavaScript was created by Brendan Eich at Netscape, and has since been updated (in JavaScript 1.5) to conform to ECMA-262 Edition 5. This engine, code named SpiderMonkey, is implemented in C. The Rhino engine, created primarily by Norris Boyd (also at Netscape) is a JavaScript implementation in Java. Like SpiderMonkey, Rhino is ECMA-262 Edition 3 compliant. Several optimizations such as TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) and IonMonkey were added to the SpiderMonkey JavaScript engine from time to time. ●

Google's V8, which is used in the Google Chrome browser.

●

The JavaScriptCore (SquirrelFish/Nitro) used in some WebKit browsers such as Apple Safari.

●

Carakan in Opera.

●

The Chakra engine used in Internet Explorer is technically a JScript engine, rather than a JavaScript engine.

Exemple de script Below is a minimal example of a standards-conforming web page containing JavaScript (using HTML5 syntax) and the DOM :        Simple Page           This is HTML     <script type="text/javascript">     var h1 = document.getElementById("montitre"); // holds a reference to the 

    h1.innerHTML = "Hello from JavaScript"; // Changing 

 content        

2013, état de l’art : ●

http://www.chromeexperiments.com

●

https://developer.mozilla.org/en-US/demos/

Les outils de développement Offline : ●

http://www.adobe.com/products/dreamweaver/

●

http://www.aptana.com

●

http://www.jetbrains.com/webstorm/

●

http://wiki.netbeans.org/JavaScript

●

http://www.eclipse.org

●

http://www.sublimetext.com

●

http://emea.microsoftstore.com/fr/fr-FR/Microsoft/Creation-+-Developpement/Visual-Studio-201 2

●

...

Online : ●

http://cloud9ide.com (Offline possible)

●

http://jsfiddle.net

●

http://codepen.io/pen/

●

http://jsdo.it

●

http://jsbin.com

●

http://fiddlesalad.com/javascript/

●

http://www.akshell.com/ide/

●

...

Inter-agir en JavaScript Comment intégrer du code JavaScript dans une page HTML ? Il y a plusieurs endroits dans une page web où il est possible d'intégrer du code JavaScript : 1. Dans un fichier externe lié à un document 2. En entête de page () ou dans le corps de la page () 3. Dans un événement d'un objet de la page (Sur un attribut d’une balise HTML)

Fichier externe . JS <script src="./js/jquery­1.7.2.min.js">

Code inclu dans la page HTML <script type="text/javascript">       document.body.appendChild(document.createTextNode('Hello World!'));       var h1 = document.getElementById("header"); // holds a reference to the 

tag       h1.innerHTML = "I’am a message from JS";

“Inline” JavaScript Ajouter un client

Nb : L’attribut type="text/javascript"de la balise <script>n’est plus obligatoire en HTML5

Exemples... Utiliser une des fonctions natives à la librairie JavaScript (avec intéraction directe) <script type="text/javascript"> alert('C\'est un message'); // window, prompt, document.location.href, ..

Attraper un élement de la page HTML et modifier une de ses propriètés <script type="text/javascript"> document.getElementById("monElementId").style.display = "none"; // Ce qui est equivalent à : var monElementId = document.getElementById("monElementId"); // Stock l’élement monElementId.style.display = "none"; // intéragit avec l’élément

Ou encore... <script type="text/javascript"> // Changer le style de toutes les DIV d’une page HTML var all = document.querySelectorAll('div');

for (var i = 0, len = all.length; i  1) {         for (var i = 0, length = arguments.length; i 
Boolean expressions : if (...) The following are all false in boolean expressions null undefined '' // the empty string 0 // the number

But be careful, because these are all true '0' // the string [] // the empty array {} // the empty object

Structures logiques ? ●

AND ( && ): True when both elements are true. Example: (x==4 && y==1)

●

OR ( || ): True when at least one of the elements is true. Example: (x==4 || y==1)

●

NOT ( ! ): This toggles a statement from true to false or from false to true. Example: (x==4 || !(y==1)). This example is true if x is 4 OR y is NOT 1 // Test différents cases

var nom = "dmc", // Création de 2 variables     num = 2; if (nom == "dmc") { // Instruction conditionnelle     if (num  “False” (using event bubbling) is the tendance...

Exercice, dans un JSfiddle (ou sur http://codepen.io/pen/) : A l’aide de l’exemple avec un “listener” ci-dessus : ●

Trouver le code envoyé lorsque l’utilisateur appuie sur la touche entrée

●

Inspecter dans la console les informations disponibles dans l’event (argument)

●

Ouvrir une fenêtre de naviteur (window.open) vers Google.fr

Events and... jQuery events ! jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.

Those properties are all documented, and accompanied by examples, on the Event object page. The standard events in the Document Object Model are : blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, and keyup. Since the DOM event names have predefined meanings for some elements, using them for other purposes is not recommended. jQuery's event model can trigger an event by any name on an element, and it is propagated up the DOM tree to which that element belongs, if any. ●

https://developer.mozilla.org/en/docs/DOM/element.addEventListener

●

http://api.jquery.com/category/events/event-object/

Performances La manière d’écrire le code peut le rendre plus ou moins performant et/ou gourmand en mémoire // Not cached for (var i = 0; i