advanced javascript
DESCRIPTION
TRANSCRIPT
![Page 1: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/1.jpg)
Advanced JavaScript
Techniques, Design patterns, Best practices
Google+: Mahmoud TolbaBlog: Mahmoodfcis.wordpress.comTwitter: @mahmoodfcis
![Page 2: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/2.jpg)
JS brief overview
Developed at Netscpae with the name “LiveScript” at 1996
The key design principles within JavaScript are taken from the Self and Scheme programming languages
Copies many of the names and naming conventions from Java.
Is an interpreted and dynamic language
![Page 3: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/3.jpg)
JavaScript vs. C# vs. other languages
JavaScript C#
Dynamic Static
Interpreted Compiled
Client side Server side
No plugins required to run it Need plugins to run in client like silverlight
![Page 4: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/4.jpg)
Why JavaScript is important
![Page 5: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/5.jpg)
JavaScript is a dynamic language
You can easily change a variable type dynamically in code so we use the typeof operator to check the data type of a variable
You can add or remove properties from an object dynamically so we can check for them using hasOwnProperty () function
![Page 6: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/6.jpg)
JavaScript is an OOP language
We can create objects in JavaScript either using Constructors or Object literals
We can extend the properties of an object using prototype object
Using String object ( bold(),color(),concat(),replace())
Using Date object (setMoth(),setDate(),setYear(),….)
Using Math object (sqrt(),pi,abs(),floor(),round())
![Page 7: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/7.jpg)
window object
Sits at the top of the JS object hierarchy and represents the browser window.
Used for creating and closing browser windows, displaying alerts, confirmation, setting timeouts
whenever an object method or property is referenced in a script without the object name and dot prefix it is assumed by JavaScript to be a member of the window object
Contains many properties “closed,name,parent,opener,screen,self,top”
Moveto()
![Page 8: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/8.jpg)
Document object
Contains all the HTML elements of the head and body sections of the HTML
Contains may functions and properties “open(),write(),bgcolor,fgcolor”
![Page 9: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/9.jpg)
location object
Is a child object of the window object
Is used to store information about the current window url
Window.location.href=“some url”;
location.protocol - the protocol section of the URL (for example http: or https:)
location.hostname - the hostname (for example www.techotopia.com)
location.port - the HTTP Port number of the URL (for example 80)
location.search - the search portion of the URL (batch=1 in the example above)
location.hash - the anchor name in the URL (#intro in our example)
Has Reload(),replace() methods
![Page 10: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/10.jpg)
history object
Is a child object of the window object
holds information about the URLs visited before and after the current URL
history.length - a property containing the numner of URLs held in the history.
history.go() - takes a postive or negative number as an argument to specify how many changes back or forward in the history to go. For example history.go(-4) is equivalent to pressing the Back buttonm in the browser 4 times.
history.back() - equivalent to pressing the browser Back button (loads the previous page from the history list).
history.forward() - equivalent to pressing the browser Forward button (loads the next page from the history if it exists).
![Page 11: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/11.jpg)
Array object
Used to create a list, sequence
var arr=new Array(“1”,”2”,3)
Push(),sort(),reverse()
![Page 12: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/12.jpg)
JS cookies
Create cookies using document.cookie=“name=”+value;
Read cookie using document.cookie.split(‘=’)[1]
![Page 13: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/13.jpg)
Closures
A closure is nothing more than a function object with a related scope in which the function’s variables are resolved.
"Think of closures as a kind of regional scope: broader than local but not as broad as global.“
To create a closure, you nest a function inside of a function. That inner function has access to all variables in its parent function’s scope
http://ejohn.org/apps/learn/#49
http://ejohn.org/apps/learn/#50
http://ejohn.org/apps/learn/#51
![Page 14: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/14.jpg)
Using object literals to pass optional parameters to function
functions that can accept a large number of optional arguments. Instead of passing the large number of arguments in the conventional fashion, which could unnecessarily complicate the function, you can pass just one argument which ends up being a collection of arguments declared in an object literal
![Page 15: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/15.jpg)
Inheritance
Inheritance is a way to create a class as a specialized version of one or more classes (JavaScript only supports single class inheritance). The specialized class is commonly called the child, and the other class is commonly called the parent. In JavaScript you do this by assigning an instance of the parent class to the child class, and then specializing it. In modern browsers you can also use Object.create to implement inheritance
![Page 16: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/16.jpg)
Callbacks
Passing a function as an argument is easy
![Page 17: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/17.jpg)
JavaScript libraries
There are many JavaScript libraries and resources.
Jquery,Node.js, Bootstrap, Backbone, knockout are popular JavaScript libraries
![Page 18: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/18.jpg)
Knockout.js
Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably
Headline features:
Elegant dependency tracking - automatically updates the right parts of your UI whenever your data model changes.
Declarative bindings - a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts.
Trivially extensible - implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code.
Additional benefits:
Pure JavaScript library - works with any server or client-side technology
Can be added on top of your existing web application without requiring major architectural changes
Compact - around 13kb after gzipping
Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, others)
Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms
http://knockoutjs.com/examples/helloWorld.html
http://knockoutjs.com/index.html
![Page 19: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/19.jpg)
JavaScriptMvc
Is an open-source rich Internet application framework based on jQuery and OpenAjax. It extends those libraries with a model–view–controller architecture and tools for testing and deployment. As it does not depend on server components, it can be combined with any web service interface and server-side language like ASP.NET, Java, Perl, PHP, Python, or Ruby
For more info http://javascriptmvc.com/
![Page 20: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/20.jpg)
Backbone.js
Backbone.js is basically an uber-light framework that allows you to structure your Javascript code in anMVC(Model, View, Controller) fashion where...
Model is part of your code that retrieves and populates the data,
View is the HTML representation of this model(views change as models change, etc)
and Controller that in this case allows you to save the state of your javascript application via a hashbang url, for example: http://twitter.com/#search?q=backbone.js
http://backbonejs.org/
http://backbonetutorials.com/
http://www.asp.net/single-page-application/overview/templates/backbonejs-template
![Page 21: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/21.jpg)
Angularjs
A toolset based on extending the HTML vocabulary for your application
http://angularjs.org/
http://docs.angularjs.org/tutorial
![Page 22: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/22.jpg)
is an MVC library for Javascript that lets you write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries. The goal is to enable developers to write web apps at least as quickly as with jQuery, while simplifying long-term maintainability through MVC objects.
http://agilityjs.com/
![Page 23: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/23.jpg)
Sencha Ext JS is the industry's most powerful desktop application development platform with unparalleled cross-browser compatibility, advanced MVC architecture, plugin-free charting, and modern UI widgets
http://www.sencha.com/products/extjs
![Page 24: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/24.jpg)
http://modernizr.com/
is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the HTML element for you to key your CSS on
http://webdesignernotebook.com/css/how-to-use-modernizr/
![Page 25: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/25.jpg)
is an asynchronous conditional resource loader that's super-fast, and allows you to load only the scripts that your users need
http://yepnopejs.com/
![Page 26: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/26.jpg)
Winjs
Is a JavaScript library for building windows 8 store apps
http://winjstoolkit.codeplex.com
http://dev.bennage.com/blog/2012/08/01/a-brief-introduction-to-winjs/
![Page 27: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/27.jpg)
LimeJS
Is a HTML5 game framework for building fast, native-experience games for all modern touchscreens and desktop browsers
http://www.limejs.com/
![Page 28: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/28.jpg)
Lungo Framework
A framework based on HTML5 fordevelopers who want to design, buildand share cross device applications
http://www.lungo.tapquo.com/
![Page 29: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/29.jpg)
Breeze is a JavaScript library that helps you manage data in rich client applications. If you store data in a database, query and save those data as complex object graphs, and share these graphs across multiple screens of your JavaScript client, Breeze is for you
http://www.breezejs.com/home
http://www.johnpapa.net/spajs04/
![Page 30: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/30.jpg)
is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript
http://jquery.com/
![Page 31: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/31.jpg)
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
http://jqueryui.com/
![Page 32: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/32.jpg)
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
http://jquerymobile.com/
![Page 33: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/33.jpg)
Is A JavaScript Unit Testing framework.
is a powerful, easy-to-use JavaScript unit testing framework. It's used by the jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic JavaScript code
http://qunitjs.com/
![Page 34: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/34.jpg)
Jo Framework for HTML5
he simple app framework for HTML5
For iOS, Android, webOS, BlackBerry, Chrome OS & anything else with HTML5
Widgets, lists and scrolling goodness using JavaScript & CSS3
Make native mobile apps or web apps with the same code
Works great with PhoneGap
http://joapp.com/
See a demo at http://joapp.com/live/samples/test.html
![Page 35: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/35.jpg)
DHTMLX Touch
DHTMLX Touch is a free open source JavaScript library for building HTML5-based mobile web apps. It's not just a set of UI widgets, but a complete framework that allows you to create eye-catching, robust web applications that run on iOS, Android, and other mobile platforms
http://dhtmlx.com/touch/
![Page 36: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/36.jpg)
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API
http://mootools.net/
![Page 37: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/37.jpg)
Prototype takes the complexity out of client-side web programming. Built to solve real-world problems, it adds useful extensions to the browser scripting environment and provides elegant APIs around the clumsy interfaces of Ajax and the Document Object Model
http://prototypejs.org/
![Page 39: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/39.jpg)
Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices
http://nodejs.org/
![Page 40: Advanced JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022061223/54c6bdf44a7959c4648b45a2/html5/thumbnails/40.jpg)
Finally, Thanks to JavaScript