Getting Started with Javascript

Getting Started with
Akshay Mathur
@akshaymathu

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

Let’s Know Each Other
• Do you code?
• OS?
• Programing Language?
• HTML?
• Javascript?
• JSON?
• Why are you attending?
@akshaymathu 3

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

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

Typical Usage
• Web programing
– Client side
• Web pages
• Browser plugins
– Server side
• SSJS (not in use)
• NodeJS
• PDF documents
• Desktop Widgets
• MongoDB
@akshaymathu 6

Comments
• Single line
– Starts with //
– Can also be used after a statement
• Multi line
– Starts with /* and ends with */
@akshaymathu 8

Statements
• Case sensitive
• Ignore whitespace
• Semicolon (;) is used as delimiter for
statements
• Block of statements is delimited by curly
braces ({})
@akshaymathu 9

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

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

Data Types
• String: “1”, “Hello! How are you”
• Number: 1, 2, 121.22
• Boolean: true, false
• Array: [1, “1”, false, {a: 10}]
• Object: {lang: “JS”, val: my_var}
• Null: null
• Undefined: undefined
• Functions: function(){}
• Date: Mon, 23 Sep 2013 12:18:54 GMT
typeof “1” // String
@akshaymathu 12

Operators
• Arithmetic
+, -, *, /,
%, ++, --
• Assignment
=, +=, -=,
*=, /=, %=
• Concatenation
+
• Comparison
==, ===, !=,
!==, >, <,
<=, >=
• Logical
&&, ||, !
• Conditional
() ? :
@akshaymathu 13

Conditional Blocks
• If… else if … else
If (age > 18){
can_vote = true;
} else {
can_vote = false;
}
Or
can_vote = (age>18) ? true : false;
@akshaymathu 14

For Loop
• For
for (i=0; i<array.length; i++){
console.log(array[i]);
}
• For/in
for (item in array){
console.log(item);
}
@akshaymathu 15

While Loop
• While
while (is_extra_water){
drain();
}
• Do/while
do {
drain();
} while (is_extra_water);
@akshaymathu 16

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

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

Naming a Function
function my_func(){}
• A function may not have a name
function(){};
my_func = function(){};
@akshaymathu 21

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

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

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

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

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

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

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

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

Creating Single Page Web App
Series of 3 workshops
Full Day
Hands-on
presents

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

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

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

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

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

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

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

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

Using Template
<script type="text/x-jquery-tmpl”
id=”photo">
<img src=“${photo_url}”
title="${name}" />
</script>
<script type="text/javascript”>
template = $(‟#photo').template();
t_html = $.tmpl(template, data);
$(“#container”).html(t_html);
</script>
@akshaymathu 42

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

AJAX Call
$.ajax({
url: „/my_ajax_target‟,
type: „POST‟,
DataType: „json‟,
data: {id: 2},
success: function(response){
alert(„Hello! „ + response.name);
},
error: function(){
alert(„Please try later‟);
}
});
@akshaymathu 44

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

Cofeescript to Javascript
greet_me = (name) ->
greeting_word = 'Hello!'
alert "#{greeting_word} #{name}”
Compiles to
greet_me = function(name) {
var greeting_word;
greeting_word = 'Hello!';
return alert("" + greeting_word
+ " " + name);
};
@akshaymathu 46

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

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

Thanks
@akshaymathu 49@akshaymathu
http://www.quora.com/Akshay-Mathur

Getting Started with Javascript

Recommended

More Related Content

What's hot (20)

Similar to Getting Started with Javascript (20)

More from Akshay Mathur (16)

Recently uploaded (20)

Getting Started with Javascript

Editor's Notes