Modern JavaScript Presentation outline - Introduction - JavaScript vs Java - Modern JavaScript - jQuery : the most popular library - Discovering Google Closure - Conclusion - Questions JavaScript : hello world JavaScript : introduction JavaScript: -The most popular client-side scripting language -Designed to introduce the web interactivity: -Read and create HTML elements -React to events -Validate data -…and more……. -Development considerations: -Compatibility -Accessibility -Security …but also the most misunderstood programming language JavaScript : misunderstandings Misunderstandings come from: -Version -Design issues: -Semicolon automatic insertion -Global variables -Reserved words -Designers or programmers ? -It has C-like syntax, is it a procedural language ? -Is JavaScript Object-Oriented ? -Name : JavaScript is Java ? JavaScript vs Java http://coding.smashingmagazine.com JavaScript vs Java JavaScript Java Interpreted (Text-based) Compiled (bytecode) Loose typing Strong typing Mostly browser dependent General-purpose language Function-based scoping Block-based scoping Prototype-based Object-oriented JavaScript : function-based scope JavaScript Function Scope: -Scope = where variables and functions are accessible = in what context they are executed JavaScript : prototype JavaScript prototype: Possibility to share implementation across similar objects -Is an object from which other objects inherit properties -Every object has a prototype (except some system objects) -Used for the storage of methods, default state and shared properties of objects -Use less memory -Enable some design patterns … myObject.prototype.myMethod(){ … JavaScript : prototype JavaScript prototype sample: Without prototype With prototype why „Java” in JavaScript name ? MARKETING deal ? Mocha = originally code name (Netscape) LiveScript = official name (shipped in beta Netscape Navigator 2.0) JavaScript = official name in the final version of Netscape web browser : -To give the impression that is related to the Java -Is it a result of a Netscape-Sun deal to bundle Netscape browser with Sun's Java runtime ? JScript = Microsoft’s name to avoid trademark issues ECMAScript = scripting language standardization including JavaScript, JScript and ActionScript JavaScript : today Modern JavaScript : -Keep JavaScript in external files -Use good script tag -Keep your code unobtrusive -Use framework(s) -Unit test / „Compile” / Compress -Document your code JavaScript frameworks and libraries JavaScript : jQuery jQuery: -Cross-browser JavaScript library -Released in 2006 -Free and open source -Used by ½ of the 10000 most visited websites -Extendable by jQuery UI and jQuery Mobile -jQuery strengths: -Easy to use -Fast -Light (~30Kb compressed) -Big community and good documentation -DOM selectors -Extra plugins JavaScript : jQuery Used by: JavaScript : jQuery Powerful selector: Get an element and do something to it $() http://codylindley.com/jqueryselectors/ JavaScript : jQuery Powerful selector: $(’’div’’) <div id=”content”> <h1>Title</h1> <div class=”article”> <p>please click<a href="#">here</a></p> </div> </div> JavaScript : jQuery Powerful selector: $(’’#content’’) <div id=”content”> <h1>Title</h1> <div class=”article”> <p>please click<a href="#">here</a></p> </div> </div> JavaScript : jQuery Powerful selector: $(’’.article’’) $(’’div[class=article]’’) <div id=”content”> <h1>Title</h1> <div class=”article”> <p>please click<a href="#">here</a></p> </div> </div> JavaScript : jQuery http://vikaskhera.wordpress.com/ JavaScript : jQuery Powerful action: $(’’#content’’).hide(‘slow’,[callback]); <div id=”content”> <h1>Title</h1> <div class=”article”> <p>please click<a href="#">here</a></p> </div> </div> JavaScript : jQuery Powerful action: $(’’div’’).each(function(i){ alert( $(this).text() ); }); <h1>Title</h1> <div class=”article1”> content 1 </div> <div class=”article2”> content 2 </div> JavaScript : jQuery http://vikaskhera.wordpress.com/ JavaScript : jQuery UI jQuery UI: -Built on top of jQuery to provide: -Interaction -Animation -Advanced effects and widgets JavaScript : jQuery plugins jQuery plugins : -Easy configuration and integration -Hundreds available for free JavaScript : Google Closure Closure Closure Compiler Linter Closure Closure Library Templates http://code.google.com/closure/ JavaScript : Closure Tools Used in: JavaScript : Closure Library Closure Library: -Cross-browser JavaScript library -It contains -UI widgets (e.g. rich-text editor) -Controls -DOM manipulators -Server communication functionalities -Data structures -Unit testing -Intended to be used with the Closure Compiler -OO support (for classes and inheritance) -Emphasis on performance and readability -Free and open source -Big library = 400 files JavaScript : Closure Library Closure Library sample: JavaScript : Closure Compiler Closure Compiler: -Build rich web applications in JavaScript -Make JavaScript download and run faster -Compile from JavaScript to JavaScript -Parse, analyze, remove dead code -Rewrite and Minimize -Check for : syntax, types and documentation -Warn about common JavaScript pitfalls -Come with a Firebug extension (Closure Inspector) How to use it: -as Java application -as Google web application -as RESTful API http://code.google.com/closure/compiler/ JavaScript : JsDoc annotations JsDoc: -JavaScript source code documentation (JavaDoc-like syntax) -Work with Closure Compiler, Closure Linter, Eclipse, Mozille, .. -Can turn JavaScript into strongly typed OO language -Produce a documentation output (e.g. in HTML) JsDoc sample: JavaScript : Closure Compiler Compiler sample #1: Input code JavaScript : Closure Compiler Compiler sample #2: Input code Output code -Removed comments, whitespaces and semi-colons -Removed dead code -Smaller file (saved 91.42% off the original size) JavaScript : Closure Linter Closure Linter: -Code quality check -Style issues -Missing JsDoc annotations -Ensure that code follows Google’s guideline -Automatically fixes some issues Closure Linter output: http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml jQuery or Google Closure ? jQuery Closure Library Library + Tools Quick integration Complexe integration Small community Big community/documentation /documentation Big size (up to 30MB Small size (230kb uncompressed) uncompressed) For small-medium projects For medium-big projects Conclusion -Learn and write modern JavaScript! -Use frameworks/libraries -Be ready for HTML5 APIs -Use tools for development (e.g. Eclipse) -Ensure code quality -Stick to some guidelines -Test / „Compile” / Compress -Document your code Thank you .