02 Introduction to Javascript

Introduction to Javascript
Web Development 101
Lesson 02.01

Java·script
Noun

An interpreted computer programming language. As part of
web browsers, implementations allow client-side scripts to
interact with the user, control the browser, communicate
asynchronously, and alter the document content that is
displayed.

DISCUSS
WHY AND HOW DOES JAVASCRIPT ENABLE GMAIL TO WORK?

Example 02.01.01
http://jsﬁddle.net/crgwbr/Fqhy4/

Javascript clock
var writeTime = function () {
var parent = document.getElementById('clock'),
timeElem = document.createElement('p'),
time = new Date();
!

timeElem.innerHTML = time.toUTCString();
parent.appendChild(timeElem);
};
!

writeTime();

Javascript clock
time = new Date();
!

parent.innerHTML = “”;
};
!

setInterval(writeTime, 500);

The DOM API
time = new Date();
!

parent.innerHTML = “”;
};
!

setInterval(writeTime, 500);

Data Types
String:
var myString = “Hello World”;
!
Number
var myNum = 42;
!
Array
var myArr = [5, 6, “seven”, 8];
!
Object
var myObj = {
key1: “Value”,
key2: 42,
anotherKey: myArr
};

Statements & Expressions
An expression produces a value.

Can be written wherever a value is expected.

A value is in itself an expression.

A statement performs an action.

Statements manipulate interpreter ﬂow and perform actions.

Wherever a statement is expected, you may write an Expression. The
opposite is not true.

Expressions
var f = function(x) {
return (x * x) + 5;
};
!
var a = f(1);
var b = f(2 * 3);

f(x) → x2 + 5
!

f(1) ≍ 1
f(2 × 3) ≍ 36

Statements
var myStr = “Hello World”,
i;
!
for (i = 0; i < myStr.length; i++) {
console.log(myStr[i]);
}

var myStr = “Hello World”,
i = 0;
!
while (i < myStr.length) {
i++;
console.log(myStr[i]);
}

Statements
var comp = function(x, y) {
var comp = function(x, y) {
if (x > y) {
if (x > y) {
return 1;
return 1;
} else {
} else if (x < y) {
if (x < y) {
return -1;
return -1;
}
}
!
}
return 0;
!
};
return 0;
};

Getting Fancy
var random = (function() {
return 4; // Verified random by dice roll
}());

IIFE
Immediately Invoked Function Expression.
Why?

scope
The context within the program in which an identifier is valid and
can be resolved to find the entity associated with the identifier.

Javascript has lexical scoping nested at the
function level, with the global scope being the
outermost scope.

Global Scope is dangerous
myCoolApp.js
!
var myFunc = function() {
...
};

someFancyPlugin.js
!
...
};

Something more sane
myCoolApp.js
!
(function() {
...
};
}());

someFancyPlugin.js
!
(function() {
...
};
}());

Closure
A function together with a referencing environment—a table storing a reference to
each of the non-local variables of that function. A closure allows a function to
access non-local variables even when invoked outside its immediate lexical scope.

Closures
var increment = (function() {
var i = 0,
inc;

inc = function(step) {
i += step;
};
!
return inc;
}());

>>> increment(1);
1
>>> increment(1);
2
>>> increment(5);
7
>>> i
undefined

Closures
var counter = function(step) {
var i = 0,
inc;
!
inc = function() {
i += step;
};
!
return inc;
};

>>>
>>>
5
>>>
10
>>>
15

var n = counter(5);
n();
n();
n();

Brainstorm
I need to read the state of the counter without
incrementing it. How?

OOJS
var Counter = function(step) {
var i = 0;
!
this.inc = function() {
i += step;
};
!
this.get = function() {
return i;
}
};

>>>
>>>
0
>>>
5
>>>
5

var n = new Counter(5);
n.get();
n.inc();
n.get();

OOJS
var Counter = function(step) {
this.i = 0;
this.step = step;
};
!
Counter.prototype = {
inc: function() {
this.i += this.step;
},
!
get: function() {
return this.i;
}
};

>>>
>>>
0
>>>
5
>>>
5

var n = new Counter(5);
n.get();
n.inc();
n.get();

Requirements
We just wrote a counter object

Add a user interface

Current value should be displayed in the browser document

There should be a button to increment the count

There should be another button to reset the count

Example 02.01.02
http://jsﬁddle.net/crgwbr/ynraf/

http://jsﬁddle.net/crgwbr/ynraf/

Requirements Change
Page now needs to have support having n number of counters

Defaults to 3 counters

User can add another by clicking a button

Example 02.01.03
http://jsﬁddle.net/crgwbr/UjF5n/

http://jsﬁddle.net/crgwbr/UjF5n/

Requirements Change

User should be able to delete any counter on the page

User can name counters they add

Example 02.01.04
http://jsﬁddle.net/crgwbr/ejnN2/

http://jsﬁddle.net/crgwbr/ejnN2/

Review
Javascript is a general purpose,
interpreted language.

Access the outside world
through injected APIs

First-class functions

C-style syntax

DOM is an API for interacting
with the browser and it’s HTML
document

Prototypical Inheritance

Most UI code is event driven

Runs in a Virtual Machine

When used well, closures are
awesome

Homework
Read: Web Fundamental—Javascript

Watch: Javascript—The Good Parts

http://www.youtube.com/watch?v=hQVTIJBZook

02 Introduction to Javascript

More Related Content

What's hot

Similar to 02 Introduction to Javascript

More from crgwbr

Recently uploaded

02 Introduction to Javascript