SlideShare a Scribd company logo
Javascript & NodeJS
An 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 EICH
MOZILLA, 2013
Javascript As we popularly know it
CSS JavaScript
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 EICH
An 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
2000
OUTLOOK WEB
XMLHttpRequest
AJAX
JESSE JAMES GARRETT
ASYNCHRONOUS JAVASCRIPT and XML
Javascript Evolution Web in 2005
Javascript As we popularly know it
CSS JavaScript
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 example
This 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 Worldn');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
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();
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);
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 point
Run it directly with node *.js
package.json
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": "*"
}
}
JS – Why I Like it?
1. Dynamically typed -> Freedom with responsibility
2. JSON is de-facto standard & JS knows it best
3. #1 + #2 = flexible/decoupled architecture
4. Saves from mess of multi-threaded world
5. One language for entire stack (wow!)
console.log(“Thank You ”);

More Related Content

PPTX
Node.js tutoria for beginner
PDF
Complete MVC on NodeJS
PDF
Node.js for beginner
PPTX
Node js training (1)
PPTX
Create Rest API in Nodejs
PDF
Introduction to Node.js
PPT
Introduction to node.js aka NodeJS
PPTX
Node js for beginners
Node.js tutoria for beginner
Complete MVC on NodeJS
Node.js for beginner
Node js training (1)
Create Rest API in Nodejs
Introduction to Node.js
Introduction to node.js aka NodeJS
Node js for beginners

What's hot (20)

PPTX
3 Things Everyone Knows About Node JS That You Don't
PPTX
NodeJS Concurrency
PDF
Node.js concurrency
PDF
Create a RESTful API with NodeJS, Express and MongoDB
PDF
Introduction to REST API with Node.js
PDF
Node azure
PPTX
Introduction to node.js
PPTX
Nashorn
PPT
Node js
PDF
Once upon a time, there were css, js and server-side rendering
PPTX
NodeJS - Server Side JS
PDF
Treinamento frontend
PPTX
Intro to go web assembly
PPTX
Going Offline with JS
PPTX
Node.js, for architects - OpenSlava 2013
PPTX
Introduction to node.js GDD
PPTX
NodeJS
PPTX
Introduction to node.js by jiban
PDF
Getting started with node JS
PDF
Welcome to ClojureScript
3 Things Everyone Knows About Node JS That You Don't
NodeJS Concurrency
Node.js concurrency
Create a RESTful API with NodeJS, Express and MongoDB
Introduction to REST API with Node.js
Node azure
Introduction to node.js
Nashorn
Node js
Once upon a time, there were css, js and server-side rendering
NodeJS - Server Side JS
Treinamento frontend
Intro to go web assembly
Going Offline with JS
Node.js, for architects - OpenSlava 2013
Introduction to node.js GDD
NodeJS
Introduction to node.js by jiban
Getting started with node JS
Welcome to ClojureScript
Ad

Viewers also liked (14)

PDF
Managing Cost in the Era of Healthcare Reform
PDF
Casa Costa Brochure
PPTX
How did you attract
PDF
Painting the Town Silver
PDF
Superyacht Article
PPTX
Documentary proposal
DOCX
Merchandise manager performance appraisal
PPTX
Zawiercie
PDF
MyCFO offers IPO Support, Small time entrepreneurs or grand scale businesses ...
PPTX
How did you attract
PPTX
Bab 8 pengalaman
PPTX
Bab i matematika
PDF
Talent Management Brochure
PPTX
slides polizze poliennali(1)
Managing Cost in the Era of Healthcare Reform
Casa Costa Brochure
How did you attract
Painting the Town Silver
Superyacht Article
Documentary proposal
Merchandise manager performance appraisal
Zawiercie
MyCFO offers IPO Support, Small time entrepreneurs or grand scale businesses ...
How did you attract
Bab 8 pengalaman
Bab i matematika
Talent Management Brochure
slides polizze poliennali(1)
Ad

Similar to JS & NodeJS - An Introduction (20)

PDF
JavaScript Modules Done Right
PDF
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
PPTX
Packing for the Web with Webpack
PPTX
Event-driven IO server-side JavaScript environment based on V8 Engine
PPTX
Intro To Node.js
PDF
Webpack Encore - Asset Management for the rest of us
PDF
Introduction to Node.js
PPT
Introduction to jQuery
PDF
Full Stack React Workshop [CSSC x GDSC]
PPTX
Going offline with JS (DDD Sydney)
PPTX
node.js.pptx
KEY
Practical Use of MongoDB for Node.js
PPTX
introduction to node.js
PDF
NodeJS for Beginner
PDF
Intro to node.js - Ran Mizrahi (27/8/2014)
PDF
Intro to node.js - Ran Mizrahi (28/8/14)
PPTX
Server Side Web Development Unit 1 of Nodejs.pptx
PDF
The MEAN stack
PPTX
JavaScript : A trending scripting language
PDF
Raffaele Rialdi
JavaScript Modules Done Right
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
Packing for the Web with Webpack
Event-driven IO server-side JavaScript environment based on V8 Engine
Intro To Node.js
Webpack Encore - Asset Management for the rest of us
Introduction to Node.js
Introduction to jQuery
Full Stack React Workshop [CSSC x GDSC]
Going offline with JS (DDD Sydney)
node.js.pptx
Practical Use of MongoDB for Node.js
introduction to node.js
NodeJS for Beginner
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (28/8/14)
Server Side Web Development Unit 1 of Nodejs.pptx
The MEAN stack
JavaScript : A trending scripting language
Raffaele Rialdi

Recently uploaded (20)

PPTX
history of c programming in notes for students .pptx
PDF
T3DD25 TYPO3 Content Blocks - Deep Dive by André Kraus
PDF
Design an Analysis of Algorithms II-SECS-1021-03
PPT
Introduction Database Management System for Course Database
PDF
medical staffing services at VALiNTRY
PPTX
Online Work Permit System for Fast Permit Processing
PPTX
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
PPTX
Transform Your Business with a Software ERP System
PDF
Raksha Bandhan Grocery Pricing Trends in India 2025.pdf
PPTX
CHAPTER 2 - PM Management and IT Context
PDF
Digital Strategies for Manufacturing Companies
PDF
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
PPTX
ManageIQ - Sprint 268 Review - Slide Deck
PDF
Upgrade and Innovation Strategies for SAP ERP Customers
PDF
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
PDF
Nekopoi APK 2025 free lastest update
PDF
Flood Susceptibility Mapping Using Image-Based 2D-CNN Deep Learnin. Overview ...
PDF
Which alternative to Crystal Reports is best for small or large businesses.pdf
PDF
Understanding Forklifts - TECH EHS Solution
PDF
Wondershare Filmora 15 Crack With Activation Key [2025
history of c programming in notes for students .pptx
T3DD25 TYPO3 Content Blocks - Deep Dive by André Kraus
Design an Analysis of Algorithms II-SECS-1021-03
Introduction Database Management System for Course Database
medical staffing services at VALiNTRY
Online Work Permit System for Fast Permit Processing
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
Transform Your Business with a Software ERP System
Raksha Bandhan Grocery Pricing Trends in India 2025.pdf
CHAPTER 2 - PM Management and IT Context
Digital Strategies for Manufacturing Companies
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
ManageIQ - Sprint 268 Review - Slide Deck
Upgrade and Innovation Strategies for SAP ERP Customers
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
Nekopoi APK 2025 free lastest update
Flood Susceptibility Mapping Using Image-Based 2D-CNN Deep Learnin. Overview ...
Which alternative to Crystal Reports is best for small or large businesses.pdf
Understanding Forklifts - TECH EHS Solution
Wondershare Filmora 15 Crack With Activation Key [2025

JS & NodeJS - An Introduction

  • 1. Javascript & NodeJS An 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 EICH MOZILLA, 2013
  • 2. Javascript As we popularly know it CSS JavaScript 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…
  • 3. 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 EICH An ex Silicon Graphics (7 years) Joined Netscape in April 1995 prototyped language (Mocha > LiveScript > JS) and SpiderMonkey compiler in 10 days in May 1995.
  • 4. DHTML FORM VALIDATION DYNAMIC HTML Javascript Evolution Web 1995-2K TICKERS & POP UPSROLLOVERS
  • 5. Javascript Evolution Web in 2K XHR 2005 GOOGLE MAPS 2004 GOOGLE MAIL 2000 OUTLOOK WEB XMLHttpRequest
  • 6. AJAX JESSE JAMES GARRETT ASYNCHRONOUS JAVASCRIPT and XML Javascript Evolution Web in 2005
  • 7. Javascript As we popularly know it CSS JavaScript How does it work together?
  • 8. How do I see that web page?
  • 9. JS + HTML + CSS in Action
  • 10. Browser processing pipeline: HTML, CSS, and JavaScript Whats happening under the hood?
  • 11. JS Code – Getting used to Asynchronous Programming
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. Webserver example This 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 Worldn'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/');
  • 16. 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
  • 17. 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();
  • 18. 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);
  • 19. 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. 20 structure of a node.js application You need a *.js file that serves as application entry point Run it directly with node *.js package.json
  • 21. 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": "*" } }
  • 22. JS – Why I Like it? 1. Dynamically typed -> Freedom with responsibility 2. JSON is de-facto standard & JS knows it best 3. #1 + #2 = flexible/decoupled architecture 4. Saves from mess of multi-threaded world 5. One language for entire stack (wow!)

Editor's Notes

  • #2: http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/ http://www.slideshare.net/TelerikAcademy/13-javascriptintroduction?qid=ad73d215-6714-490e-9264-9a3bc827128b&v=qf1&b=&from_search=5 http://www.slideshare.net/Freundschaft/4-nodejs-basics?qid=9dc6e10c-ba37-4ba8-a2ec-ecc69d8aeece&v=default&b=&from_search=3