Getting Started with Web

Getting Started with Web
Akshay Mathur

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

@akshaymathu

2

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

The Web
• Many computers world
wide connect to each
other
• Information stored in
one computer can be
viewed from other
computer

@akshaymathu

6

Involved Software
Web Browser
Core Engine

Web Server
Web Server
Application Server

DOM Renderer

Database Server

Message Queuing Server
Task Workers
JavaScript Runtime
Caching Engine

The Evolution

@akshaymathu

8

Web 1.0 - Static
• Static pages
– Were Read Only and B&W
– Colors and other simple formatting came in

• Input Forms
– Came in just for data collection to start with
– Server side response based on input came in

@akshaymathu

9

Web 1.0 - Dynamic
• Client Side Dynamism
– With DHTML, color changing web pages became
popular
– Changing other basic properties of the text also
became possible

• Server Side Dynamism
– Dynamically generated pages made the web
responsive to inputs
– Embedded scripting languages gave it a boost
@akshaymathu

10

Web 2.0: The Power
• Changing part of the webpage
– Programmatically reading and writing DOM
elements
– Rich event handling

• Communicating with server without refreshing
entire page
– AJAX

@akshaymathu

11

Understanding URL
https://sub.domain.com:8086/a/folder/file.html?key=val&ke
y=val2#some_place

•
•
•
•
•
•
•

Protocol
Sub-domain, Domain and TLD
Port
Path
File
Query string
Fragment
@akshaymathu

12

Overall Structure

@akshaymathu

14

Doctype and DTD
• Tell browser what standards this document is
following
– How to parse
• HTML or XHTML
• HTML version 1.0 or 1.1

– Show strict errors or not

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/x
html1-transitional.dtd">
@akshaymathu

15

Html
• Only the content within <html> and </html> is
parsed
• xmlns tells where the tags being used in the
document are described
• Multiple xmlns attributes can be used
<html xmlns:fb="http://ogp.me/ns
/fb#" xmlns="http://www.w3.org/1
999/xhtml">
@akshaymathu

16

Head
• Typically Contains invisible items
– Title
– Meta
– Link

– Script
– Style

@akshaymathu

17

Title
• Title of the page
• Shows up on title bar of browser

<title>ShopSocially
Amplify</title>

| Engage Convert

@akshaymathu

18

Meta
• Additional metadata of the page
• Multiple meta tags can be used
<meta

http-equiv="Content-Type"
content="text/html; charset=utf-8">

<meta

name="keywords"

content="social platform, conversion">

<meta

property="fb:app_id"

content="213036345945">
@akshaymathu

19

Content Type
• Tells browser how to parse and execute the
content
– Character set info is also incuded

<meta

http-equiv="Content-Type"

content="text/html; charset=utf-8">

• ‘text/html’ is used for HTML pages
– A few others are text/csv, application/pdf etc.
@akshaymathu

20

Link
• Link to external files
• Typically used for CSS

@akshaymathu

21

Script
• Tells browser that the content is an executable
script
– Javascript, vbscript etc.

@akshaymathu

22

Style
• Embeds CSS on the page

<style type="text/css">
.fb_reset div{overflow:hidden}
.fb_link img{border:none}
</style>
@akshaymathu

23

Body
• Contains all visible elements
• Different elements can be used for laying out
the page
– Look and feel can be controlled by style elements
– Some elements can not contain anything inside
them e.g. input, br etc.

@akshaymathu

24

Types
• Containers
– Have opening and closing tags of same name
– ‘/’ is used for closing e.g. <html>…</html>

• Non-containers
– Don’t have a closing tag
– ‘/’ is used at the end of same tag for closing e.g.
<br />, <input type=“text” />

@akshaymathu

26

Display
• Block
– Take up complete available width by default
– Consecutive elements stack vertically

• Inline
– Take up width only equal to the content
– Consecutive elements stack horizontally
– Typically word-wrap

@akshaymathu

27

Writing Text
• Text can be written directly in body
• It is a good to have it in blocks
– <p>…</p>
• Block display
• Some default style

– <div>…</div>
• Block display
• No default style

– <span>…</span>
• Inline display
• No default style

@akshaymathu

28

Headings
• Preformatted text size
– Seven sizes are available i.e. h1 … h7
– Defaults can be overridden by CSS

• Important for SEO
<h1>This is heading</h1>

@akshaymathu

29

Bulleted List
• Can be un-ordered (<ul>) or numbered (<ol>)
• List items (<li>) are shown indented
• Can be multilevel and mixed
<ol>
<li>item1</li>
<ul>
<li>sub item1</li>
</ul>
</ol>
@akshaymathu

30

Taking Input via Form Elements
•
•
•
•
•
•
•

Text box: <input type=“text” />
Radio button: <input type=“radio” />
Check box: <input type=“checkbox” />
Button: <input type=“button” />
Hidden: <input type=“hidden” />
Multiline Text box: <textarea></textarea>
Dropdown/List:
<select>
<option>…</option>
…
</select>
@akshaymathu

31

Making it Look Different
• Look can be defined in style attribute of an
element
<h3 style=“color: #aaa;
background-color: #eee;
font-size: 16px; width: 100%;
padding: 5px;>This is Heading3
as I want</h3>
@akshaymathu

33

Font
• Font-face
– Name of font to be used

• Font-family
– Multiple font names in order

• Font-size
– Text size in any unit i.e. px, percentage, em

• Font-weight
– Bold or regular
@akshaymathu

34

Changing Colors
• Color value can be specified in many ways
– Hex RGB is mostly used i.e. #rrggbb

• Background-color
– Specifies color of background fill

• Color
– Specifies color of text

• Border-color
– Specifies color of border line
@akshaymathu

35

Box Model
•
•
•
•
•
•
•
•

Width
Padding
Border
Margin
Position
Z-index
Top/Bottom
Left/Right
@akshaymathu

36

Where to write style?
• Inline
– As ‘style’ attribute of an element

• Style block
– On page in <style>…</style> block

• CSS file
– In an external file

• This is also the preference order for applying
style
@akshaymathu

37

Defining CSS
• Multiple styling properties can be grouped
together
• Element(s) where to apply style is determined
by CSS selector
– Multiple CSS selectors may refer to an element

• All properties are applied to the element

@akshaymathu

38

CSS Selectors
• Tag name
a {color: blue;}
• ID
#my_unique_a {color: red;}
• Class

.common_class {color:#ccc;
margin:5px;}
• Compound
.common_class a {color: green;}
• Psudo
a:hover, a:visited {color: #ccc;}
@akshaymathu

39

CSS Frameworks
• Provide ready-to-use collection of classes for
common requirements
– Grid
– Navigation bars
– Form elements
– Buttons
–…

• Bootstrap is the great one
@akshaymathu

40

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

43

Javascript
• Object Oriented
– But different from other OO languages

• Single threaded
• Runs in its sandbox
– Has full access to the objects on the page
– Has restricted access to other pages or client
machine file-system

@akshaymathu

44

Typical Usage
• Web programing
– Client side
• Web pages
• Browser plugins

– Server side
• SSJS (not in use)
• NodeJS

• PDF documents
• Desktop Widgets
• MongoDB
@akshaymathu

45

Comments
• Single line
– Starts with //
– Can also be used after a statement

• Multi line
– Starts with /* and ends with */

@akshaymathu

47

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

@akshaymathu

48

Output
• Visible to all using DOM functions
document.write(„Hello‟);
alert(„How are you‟);

• For developers in console
console.log(“This is working”);

@akshaymathu

49

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

50

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

51

Operators
• Arithmetic
+, -, *, /,
%, ++, --

• Assignment
=, +=, -=,
*=, /=, %=

• Concatenation
+

• Comparison
==, ===, !=,
!==, >, <,
<=, >=
• Logical
&&, ||, !
• Conditional
() ? :
@akshaymathu

52

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

53

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

54

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

55

Function
• Code block that executes on ‘call’
//define the function
function say_hello(name){
alert(„Hello! „ + name);
}
//call the function
say_hello(„Akshay‟);
@akshaymathu

57

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

58

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

my_func = function(){};
@akshaymathu

59

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

60

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

61

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

62

Global Functions
• encodeURI(),
encodeURIComponent()
Encodes a URI
•

•

•

decodeURI(),
decodeURIComponent()

Decodes a URI
•
•

•

escape() Encodes a string
unescape() Decodes an

•

String() Converts an object's
value to a string
Number() Converts an object's
value to a number

•

•

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

encoded string
•

isFinite() Determines whether

eval() Evaluates a string and

executes it as if it was script code

@akshaymathu

63

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

66

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

67

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

68

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

69

Server Side Dynamism
• At web server
• Ability to execute a program in context of a web
request
– The program takes input from the request
– The program creates a HTML page as output
• Web browser understands only HTML

• Embedded scripting technologies make it simpler
– Allow the program to be inserted within an HTML
page
• PHP, ASP, JSP etc.
@akshaymathu

72

Client Side Dynamism
• At web browser
– Javascript

• Ability to change properties of elements on
the web page on user’s action
– Text color, image source etc.
– On click, on hover etc.

• Ability to validate Form input without the
round trip
@akshaymathu

73

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

74

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

75

Changing Style
• Access to inline style properties is via style
object
text_color = el.style.color

• Change desired style attribute
el.style.fontSize = “16px”

@akshaymathu

76

Responding to User Actions
• Browser raises an event on user action
– A few of them are onclick, onkeypress

• A JavaScript function can be called when the
event happens
el.onclick = function(){
alert(„User clicked!‟);
}

@akshaymathu

77

presents

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

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

80

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

81

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

82

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

83

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

84

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

85

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

86

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

87

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

88

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

89

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

90

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

91

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

92

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

93

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

94

Thanks

http://www.quora.com/Akshay-Mathur

@akshaymathu
@akshaymathu

95

Getting Started with Web

More Related Content

What's hot (20)

Similar to Getting Started with Web (20)

More from Akshay Mathur (16)

Recently uploaded (20)

Getting Started with Web

Editor's Notes