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

More Related Content

What's hot

Similar to Getting Started with Javascript

More from Akshay Mathur

Recently uploaded

Getting Started with Javascript

Editor's Notes