getting started with javascript
Post on 19-Oct-2014
1.150 views
DESCRIPTION
This was prepared for delivering a session about Javascript to newbies.TRANSCRIPT
![Page 1: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/1.jpg)
Getting Started with
Akshay Mathur@akshaymathu
![Page 2: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/2.jpg)
@akshaymathu 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
![Page 3: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/3.jpg)
@akshaymathu 3
Let’s Know Each Other
• Do you code?• OS?• Programing Language?• HTML?• Javascript?• JSON?• Why are you attending?
![Page 4: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/4.jpg)
@akshaymathu 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
![Page 5: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/5.jpg)
@akshaymathu 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
![Page 6: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/6.jpg)
@akshaymathu 6
Typical Usage
• Web programing– Client side
• Web pages• Browser plugins
– Server side• SSJS (not in use)• NodeJS
• PDF documents• Desktop Widgets• MongoDB
![Page 7: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/7.jpg)
Language Reference
![Page 8: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/8.jpg)
@akshaymathu 8
Comments
• Single line– Starts with //– Can also be used after a statement
• Multi line– Starts with /* and ends with */
![Page 9: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/9.jpg)
@akshaymathu 9
Statements
• Case sensitive• Ignore whitespace• Semicolon (;) is used as delimiter for
statements• Block of statements is delimited by curly
braces ({})
![Page 10: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/10.jpg)
@akshaymathu 10
Output
• Visible to all using DOM functionsdocument.write(‘Hello’);alert(‘How are you’);
• For developers in consoleconsole.log(“This is working”);
![Page 11: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/11.jpg)
@akshaymathu 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;
![Page 12: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/12.jpg)
@akshaymathu 12
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
![Page 13: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/13.jpg)
@akshaymathu 13
Operators
• Arithmetic+, -, *, /,%, ++, --
• Assignment=, +=, -=,*=, /=, %=
• Concatenation+
• Comparison==, ===, !=,!==, >, <,<=, >=
• Logical&&, ||, !
• Conditional() ? :
![Page 14: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/14.jpg)
@akshaymathu 14
Conditional Blocks
• If… else if … elseIf (age > 18){ can_vote = true;} else { can_vote = false;}Orcan_vote = (age>18) ? true : false;
![Page 15: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/15.jpg)
@akshaymathu 15
For Loop
• Forfor (i=0; i<array.length; i++){ console.log(array[i]);}• For/infor (item in array){ console.log(item);}
![Page 16: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/16.jpg)
@akshaymathu 16
While Loop
• Whilewhile (is_extra_water){ drain();}• Do/whiledo { drain();} while (is_extra_water);
![Page 17: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/17.jpg)
@akshaymathu 17
![Page 18: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/18.jpg)
JS Functions
![Page 19: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/19.jpg)
@akshaymathu 19
Function
• Code block that executes on ‘call’//define the functionfunction say_hello(name){ alert(‘Hello! ‘ + name);}
//call the functionsay_hello(‘Akshay’);
![Page 20: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/20.jpg)
@akshaymathu 20
Function Arguments
• Any number of arguments can be passed without declaring
• Named arguments are not supported
say_hello(1); // Hello! 1say_hello(); // Hello! undefinedsay_hello(‘Akshay’, ‘Mathur’);
//Hello! Akshay
![Page 21: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/21.jpg)
@akshaymathu 21
Naming a Function
function my_func(){}
• A function may not have a name
function(){};
my_func = function(){};
![Page 22: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/22.jpg)
@akshaymathu 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
linefunction(){
var my_var = ‘Hello’;console.log(msg);var2 = 6;
}
![Page 23: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/23.jpg)
@akshaymathu 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);
![Page 24: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/24.jpg)
@akshaymathu 24
Other Facts
• A function can be assigned to a variable• A function can be defined within another function• A function can return a functionfunction sqr(){ sq = function (x){
return x * x * x; }; return sq;}My_sqr = sqr(); // functionMy_sqr(3); // 27
![Page 25: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/25.jpg)
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
![Page 26: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/26.jpg)
@akshaymathu 26
![Page 27: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/27.jpg)
JS Objects
![Page 28: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/28.jpg)
@akshaymathu 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
![Page 29: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/29.jpg)
@akshaymathu 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;
![Page 30: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/30.jpg)
@akshaymathu 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);};
![Page 31: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/31.jpg)
@akshaymathu 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’});
![Page 32: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/32.jpg)
@akshaymathu 32
![Page 33: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/33.jpg)
Creating Single Page Web App
Series of 3 workshopsFull Day
Hands-on
presents
![Page 34: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/34.jpg)
@akshaymathu 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
![Page 35: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/35.jpg)
@akshaymathu 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)
![Page 36: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/36.jpg)
@akshaymathu 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
![Page 37: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/37.jpg)
@akshaymathu 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
![Page 38: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/38.jpg)
@akshaymathu 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 elementel.src = “my_photo.png”
![Page 39: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/39.jpg)
@akshaymathu 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
![Page 40: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/40.jpg)
@akshaymathu 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
![Page 41: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/41.jpg)
@akshaymathu 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
![Page 42: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/42.jpg)
@akshaymathu 42
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>
![Page 43: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/43.jpg)
@akshaymathu 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
![Page 44: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/44.jpg)
@akshaymathu 44
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’);}
});
![Page 45: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/45.jpg)
@akshaymathu 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
![Page 46: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/46.jpg)
46
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
![Page 47: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/47.jpg)
@akshaymathu 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
![Page 48: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/48.jpg)
@akshaymathu 48
BackboneJS code in Coffeescriptclass LoginModel extends Backbone.Modelclass 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.Routerinitialize: =>
@l_model = new LoginModel window.app_info@l_view = new LoginView model: model, el:
’#login_div’
![Page 49: Getting Started with Javascript](https://reader033.vdocuments.us/reader033/viewer/2022061106/5444a0efafaf9fb0098b4833/html5/thumbnails/49.jpg)
@akshaymathu 49
Thanks
@akshaymathu
http://www.quora.com/Akshay-Mathur