Introduction to JavascriptWeb Development 101 Lesson 02.01

Java·script NounAn 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.

DISCUSSWHY AND HOW DOES JAVASCRIPT ENABLE GMAIL TO WORK?

Example 02.01.01 http://jsfiddle.net/crgwbr/Fqhy4/

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

var writeTime = function () { var parent = document.getElementById('clock'), timeElem = document.createElement('p'), time = new Date();! timeElem.innerHTML = time.toUTCString(); parent.innerHTML = “”; parent.appendChild(timeElem);};!setInterval(writeTime, 500);

Javascript clock

var writeTime = function () { var parent = document.getElementById('clock'), timeElem = document.createElement('p'), time = new Date();! timeElem.innerHTML = time.toUTCString(); parent.innerHTML = “”; parent.appendChild(timeElem);};!setInterval(writeTime, 500);

The DOM API

Javascript [proper]

Data TypesString: 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 & ExpressionsAn 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 flow 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]);}

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

var comp = function(x, y) { if (x > y) { return 1; } else { if (x < y) { return -1; } }! 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 dangerousmyCoolApp.js!var myFunc = function() { ...};

someFancyPlugin.js!var myFunc = function() { ...};

Something more sanemyCoolApp.js!(function() { var myFunc = function() { ... };}());

someFancyPlugin.js!(function() { var myFunc = 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.

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

>>> increment(1);1>>> increment(1);2>>> increment(5);7>>> iundefined

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

>>> var n = counter(5);>>> n();5>>> n();10>>> n();15

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

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

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

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

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

Javascript [DOM]

RequirementsWe 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://jsfiddle.net/crgwbr/ynraf/

http://jsfiddle.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://jsfiddle.net/crgwbr/UjF5n/

http://jsfiddle.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://jsfiddle.net/crgwbr/ejnN2/

http://jsfiddle.net/crgwbr/ejnN2/

That’s a Web Application.

ReviewJavascript is a general purpose, interpreted language.

First-class functions

C-style syntax

Prototypical Inheritance

Runs in a Virtual Machine

Access the outside world through injected APIs

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

Most UI code is event driven

When used well, closures are awesome

HomeworkRead: Web Fundamental—Javascript

Watch: Javascript—The Good Parts

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