Javascript & NodeJSAn Introduction

“JavaScript is 18...now it’s not my responsibility;

it can go out, vote, join the Navy,get drunk and gamble in most states.”

BRENDAN EICHMOZILLA, 2013

Javascript As we popularly know it

CSSJavaScrip

t

Lay man/Enthusiast ->- Web comes first to mind- The (new age) web that is >>

Developers ->- Develop web page- Use that calendar widget of Jquery- Asynchronous updates

Think of JS…

Javascript History

Web in 1995“We aimed to provide a

“glue language” for the Web designers and part time programmers who

were building Web content from components such as images, plugins,

and Java applets.”

“We saw Java as the “component language”

used by higher-priced programmers.”

- Netscape

BRENDAN EICHAn ex Silicon Graphics (7 years) Joined Netscape in April 1995

prototyped language (Mocha > LiveScript > JS) and

SpiderMonkey compiler in 10 days in May 1995.

DHTML

FORM VALIDATION

DYNAMIC HTML

Javascript Evolution Web 1995-2K

TICKERS & POP UPSROLLOVERS

Javascript Evolution Web in 2K

XHR

2005 GOOGLE MAPS

2004 GOOGLE MAIL

2000OUTLOOK WEB

XMLHttpRequest

AJAX

JESSE JAMES GARRETT

ASYNCHRONOUS JAVASCRIPT and XML

Javascript Evolution Web in 2005

Javascript As we popularly know it

CSSJavaScrip

t

How does it work together?

How do I see that web page?

JS + HTML + CSS in Action

Browser processing pipeline: HTML, CSS, and JavaScript

Whats happening under the hood?

JS Code – Getting used to Asynchronous Programming

var url = "http://www.google.com";var someVar = 10;$.get(url, function(data){ alert("Data Loaded: " + data); });

JS Code – Some ‘Cool’ Features

- Dynamic types- Everything is an Object- Anonymous functions- Callbacks- Closures- No multi-threading

var add = (function () {    var counter = 0;    return function () {return counter += 1;}})();

add();add();add();

// the counter is now 3

NodeJS – JS on Server Side

- JS as a language breaks shackles; no longer associated only with Web

- Runs on v8 engine – wait! Isnt that what Chrome browser has?

- Event loop architecture…no multi-threading mess

- Everything is asynchronous

Running node.js

• Download from nodejs.org• Install with Windows Installer• apt-get install nodejs on Ubuntu

• Try some commands on the interactive shell

node> console.log('Hello World');Hello World

Webserver exampleThis is the node sample application shown on nodejs.org

and hosts a fully fledged HTTP server, already shows a lot of basic concepts of nodeJS

var http = require('http');

http.createServer(function (req, res) { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n');}).listen(1337, '127.0.0.1');console.log('Server running at http://127.0.0.1:1337/');

Use require keyword to load a module

Call method to create a new HTTP server

write to response stream

define anonymous callback that handles

request event

start accepting connections on port

and hostnameapplication doesn’t exit after last line of codenode.js keeps running until no further events are

possible

node.js modules• developers know libraries, in node.js modules serve a similar function• put different functionalities in different *.js files and allow usage from

other *.js files• Helps structuring application

• use exports keyword to expose functions to other modules• use require keyword to import modules

node.js modules• create a new file called test.js• Expose function with exports keyword

• import from main app.js file

exports.helloworld = function () { console.log('Hello World');}

var test = require('./test.js');test.helloworld();

assign helloworld property to exports

object

and assign function to helloworld property, thereby exposing the

function to other modules

require keyword retrieves exports

object defined above

call function stored in helloworld

node.js modules• It is also possible to directly overwrite the exports object with module.exports• Usually this is done to export the constructor of a JavaScript ‘Class’ and split

class definitions to separate files

module.exports = function () { this.name = "test object"; this.color = "red"; this.size = "large";}

var test = require('./test.js');var testObject = new test();console.log('name:' + testObject.name);console.log('color:' + testObject.color);console.log('size:' + testObject.size);

assign function to exports object

define JavaScript object constructor

require keyword retrieves exports

object defined above

function test() points to constructor defined

in module.exportscreate new object from constructor

node.js modules• apart from self written modules, it is also possible to install

modules from a repository with a package manager• This package manager is npm• Similar command syntax to apt• npm install <module name>• npm update

• huge amount of public packages (74,753 as of 24th May 2014)• everyone can contribute

20

structure of a node.js application

You need a *.js file that serves as application entry pointRun it directly with node *.js

package.jsondescription of a node.js project in JSON formatSpecifies name, version, description, keywords for your projectdefines dependencies that your project is relying on

package.json{ "name": "TestNodejsApp", "version": "0.0.0", "description": "TestNodejsApp", "private": true, "main": "app.js", "author": { "name": "Qiong Wu", "email": "" }, "dependencies": { "express": "3.4.4", "jade": "*", "stylus": "*" }}

define application entry point

flag project as private, npm refuses to publish

it

define all dependencies that are to be loaded from npm

* means use newest version

JS – Why I Like it?1. Dynamically typed -> Freedom with

responsibility2. JSON is de-facto standard & JS knows it best3. #1 + #2 = flexible/decoupled architecture4. Saves from mess of multi-threaded world5. One language for entire stack (wow!)

console.log(“Thank You ”);