2. Ground Rules
• Post on FB and Tweet now
• Disturb Everyone during the
session
– Not by phone rings
– Not by local talks
– By more information and
questions
2@akshaymathu
3. Let’s Know Each Other
• Do you code?
• OS?
• Programing Language?
• HTML?
• Javascript?
• JSON?
• Why are you attending?
@akshaymathu 3
4. Akshay Mathur
• Founding Team Member of
– ShopSocially (Enabling “social” for retailers)
– AirTight Neworks (Global leader of WIPS)
• 15+ years in IT industry
– Currently Principal Architect at ShopSocially
– Mostly worked with Startups
• From Conceptualization to Stabilization
• At different functions i.e. development, testing, release
• With multiple technologies
@akshaymathu 4
5. JavaScript
• Born in 1995 at Netscape
• Not at all related to Java
• Syntax influenced by C
• Interpreted ECMA scripting lanuage
• Dynamically typed
• Object Oriented as well as Functional
• Prototype based
@akshaymathu 5
6. Typical Usage
• Web programing
– Client side
• Web pages
• Browser plugins
– Server side
• SSJS (not in use)
• NodeJS
• PDF documents
• Desktop Widgets
• MongoDB
@akshaymathu 6
8. Comments
• Single line
– Starts with //
– Can also be used after a statement
• Multi line
– Starts with /* and ends with */
@akshaymathu 8
9. Statements
• Case sensitive
• Ignore whitespace
• Semicolon (;) is used as delimiter for
statements
• Block of statements is delimited by curly
braces ({})
@akshaymathu 9
10. Output
• Visible to all using DOM functions
document.write(„Hello‟);
alert(„How are you‟);
• For developers in console
console.log(“This is working”);
@akshaymathu 10
11. Variable
• Explicitly defining is optional
– JS runtime automatically defines as needed
– Defining all variables with ‘var’ keyword is good
• Loosely typed
– No need to define the type (int, str etc.)
• Dynamically typed
– Type changes at runtime as the value changes
var my_var = „Hello‟;
my_var = 6;
@akshaymathu 11
19. Function
• Code block that executes on ‘call’
//define the function
function say_hello(name){
alert(„Hello! „ + name);
}
//call the function
say_hello(„Akshay‟);
@akshaymathu 19
20. Function Arguments
• Any number of arguments can be passed without
declaring
• Named arguments are not supported
say_hello(1); // Hello! 1
say_hello(); // Hello! undefined
say_hello(„Akshay‟, „Mathur‟);
//Hello! Akshay
@akshaymathu 20
21. Naming a Function
function my_func(){}
• A function may not have a name
function(){};
my_func = function(){};
@akshaymathu 21
22. Variable Scope
• By default all variables are global
• Variables defined with ‘var’ keyword are local to
the function
• It is assumed that all variables are defined in the
first line
function(){
var my_var = „Hello‟;
console.log(msg);
var2 = 6;
}
@akshaymathu 22
23. Return Values
• Anything can be returned from a function
using return statement
function sqr(x){
var sq = x * x;
return sq;
}
var four_sq = sqr(4);
@akshaymathu 23
24. Other Facts
• A function can be assigned to a variable
• A function can be defined within another function
• A function can return a function
function sqr(){
sq = function (x){
return x * x * x;
};
return sq;
}
My_sqr = sqr(); // function
My_sqr(3); // 27
@akshaymathu 24
25. Global Functions
• encodeURI(),
encodeURIComponent()
Encodes a URI
• decodeURI(),
decodeURIComponent()
Decodes a URI
• escape() Encodes a string
• unescape() Decodes an
encoded string
• String() Converts an object's
value to a string
• Number() Converts an object's
value to a number
• isFinite() Determines whether
a value is a finite, legal number
• isNaN() Determines whether a
value is an illegal number
• parseInt() Parses a string and
returns an integer
• parseFloat() Parses a string
and returns a floating point
number
• eval() Evaluates a string and
executes it as if it was script code
@akshaymathu 25
28. Objects
• Everything in JS is an object (instance)
“string”.length // 6
“str”.length.toFixed(2) // “3.00”
[„hell‟, „o!‟].join(„‟) // „hello!‟
• Custom objects can also be defined
@akshaymathu 28
29. JSON
• Javascript Object has a key and a value
• Key is always string
• Value can be of any type
– Including another JSON object
A = {key1: value1, key2: value2};
or
A = new Object();
A[„key1‟] = value1;
A.key2 = value2;
@akshaymathu 29
30. Object as Namespace
• It is a good practice to group variables and
functions together in an object rather than
keeping them global
var user = {};
user.name = “Akshay”;
user.greet = function(){
alert(„Hello!„.concat(user.name);
};
@akshaymathu 30
31. Object as Named Argument
• Objects can be passed to a function as an argument
• They proxy for named arguments
Say_hello = function (options){
if (typeof options === „Object‟){
options.msg = (options.msg)?
options.msg : ‟Hello!‟;
}
alert(options.msg + „ „ + options.name);
}
Say_hello({name: „Akshay‟});
@akshaymathu 31
34. 1. Simple Web Pages
• Introduction to Web and its evolution
• Web page basics and HTML tags
• Styling elements
• JavaScript basics
• Introduction to DOM
• Changing style using JavaScript
• Simple DOM manipulation
• Responding to user actions
@akshaymathu 34
35. 2. Dynamic Web Pages
• Jquery JavaScript Framework
• Handling DOM events
• Getting data asynchronously via AJAX
• Client side dynamism using JavaScript
templates
• Simplify JS coding via CoffeeScript
• Writing JS classes (prototypes)
@akshaymathu 35
36. 3. Single Page App
• Understanding MVC concepts
• Introduction BackboneJS and UnderscoreJS
• Using Backbone models, views and router
• Dealing with collections
• Custom events and their handlers
• Adjusting URLs for making browser buttons
work
@akshaymathu 36
37. Document Object Model
• Window Object
– Represents the browser window
– All Javascript functions and variable are attached
here by default
• Document Object
– Represents the page rendered inside the window
– All HTML elements are available here
• In the hierarchy they are attached
@akshaymathu 37
38. Manipulating the Web Page
• Get programmatic handle of an HTML element
via Document Object Model (DOM)
var el =
document.getElementByID(
„a_unique_id‟);
• Change desired property of the element
el.src = “my_photo.png”
@akshaymathu 38
39. JS Framework
• Library for simplifying JS coding
– Jquery is most popular
• Provides simple interface and syntactic sugar
for common JS work
– Selecting DOM element
– DOM traversal and manipulation
– Event handling
• Takes care of cross browser and cross version
issues
@akshaymathu 39
40. Jquery
• Takes care of cross browser and cross version
issues
• Library for simplifying JS coding
– Everything is via functions
– Same function for get and set
• Provides simple interface and syntactic sugar for
common JS work
– Selecting DOM element
– DOM traversal and manipulation
– Event handling
@akshaymathu 40
41. Javascript Templates
• Dynamically creates HTML code in JS
– Data driven HTML
– Allows variable substitution, looping and
conditional statements
• Generated HTML is inserted into the DOM for
changing part of the page on-the-fly
@akshaymathu 41
43. AJAX
• A way in web browser to communicate with
server without reloading the page
• XmlHttpRequest (XHR) object can also create
HTTP request and receive response
– The request happens asynchronously
• Other operations on page are allowed during the
request
– Received data does not render automatically
• Data needs to be received in a callback function and
used programmatically
@akshaymathu 43
45. CoffeeScript
• A language with simple syntax
– No semicolons and braces
– Resembles to English
– Indentation decides the code blocks
• Compiles into Javascript
– Provides syntactic sugar for boilerplate code
• Manage variable scope
• Class instead of prototype
– Generates good quality, error free code
@akshaymathu 45
47. BackboneJS
• Provides MVC structure for Javascript
– The model object holds data
– The view object handles visual elements and
interactions
– The controller object glues everything together and
provides communication amongst objects
• Custom Events help writing good code and
eliminates use of global variables
– The event object allows raising and handling custom
events
@akshaymathu 47
48. BackboneJS code in Coffeescript
class LoginModel extends Backbone.Model
class LoginView extends Backbone.View
initialize: =>
@template = $(‟#login_template').template()
@render()
render: =>
$(@el).html $.tmpl(@template, @model.toJSON())
events:
'click #login_btn' : ‟login_handler‟
login_handler: (ev) =>
window.mpq_track ‟Login Click‟
class LoginController extends Backbone.Router
initialize: =>
@l_model = new LoginModel window.app_info
@l_view = new LoginView model: model, el: ‟#login_div‟
@akshaymathu 48