SlideShare ist ein Scribd-Unternehmen logo
1 von 23
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 ”);

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

3 Things Everyone Knows About Node JS That You Don't
3 Things Everyone Knows About Node JS That You Don't3 Things Everyone Knows About Node JS That You Don't
3 Things Everyone Knows About Node JS That You Don't
 
NodeJS Concurrency
NodeJS ConcurrencyNodeJS Concurrency
NodeJS Concurrency
 
Node.js concurrency
Node.js concurrencyNode.js concurrency
Node.js concurrency
 
Create a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBCreate a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDB
 
Introduction to REST API with Node.js
Introduction to REST API with Node.jsIntroduction to REST API with Node.js
Introduction to REST API with Node.js
 
Node azure
Node azureNode azure
Node azure
 
Introduction to node.js
Introduction to node.jsIntroduction to node.js
Introduction to node.js
 
Nashorn
NashornNashorn
Nashorn
 
Node js
Node jsNode js
Node js
 
Once upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side renderingOnce upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side rendering
 
NodeJS - Server Side JS
NodeJS - Server Side JS NodeJS - Server Side JS
NodeJS - Server Side JS
 
Treinamento frontend
Treinamento frontendTreinamento frontend
Treinamento frontend
 
Intro to go web assembly
Intro to go web assemblyIntro to go web assembly
Intro to go web assembly
 
Going Offline with JS
Going Offline with JSGoing Offline with JS
Going Offline with JS
 
Node.js, for architects - OpenSlava 2013
Node.js, for architects - OpenSlava 2013Node.js, for architects - OpenSlava 2013
Node.js, for architects - OpenSlava 2013
 
Introduction to node.js GDD
Introduction to node.js GDDIntroduction to node.js GDD
Introduction to node.js GDD
 
NodeJS
NodeJSNodeJS
NodeJS
 
Introduction to node.js by jiban
Introduction to node.js by jibanIntroduction to node.js by jiban
Introduction to node.js by jiban
 
Getting started with node JS
Getting started with node JSGetting started with node JS
Getting started with node JS
 
Welcome to ClojureScript
Welcome to ClojureScriptWelcome to ClojureScript
Welcome to ClojureScript
 

Andere mochten auch

Bab 8 pengalaman
Bab 8 pengalamanBab 8 pengalaman
Bab 8 pengalaman
Firda_123
 
Bab i matematika
Bab i matematikaBab i matematika
Bab i matematika
Firda_123
 
Talent Management Brochure
Talent Management BrochureTalent Management Brochure
Talent Management Brochure
Henry Noteman
 

Andere mochten auch (14)

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

Ähnlich wie JS & NodeJS - An Introduction

Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
Ran Mizrahi
 

Ähnlich wie JS & NodeJS - An Introduction (20)

JavaScript Modules Done Right
JavaScript Modules Done RightJavaScript Modules Done Right
JavaScript Modules Done Right
 
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
I Just Want to Run My Code: Waypoint, Nomad, and Other ThingsI Just Want to Run My Code: Waypoint, Nomad, and Other Things
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
 
Packing for the Web with Webpack
Packing for the Web with WebpackPacking for the Web with Webpack
Packing for the Web with Webpack
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
 
Intro To Node.js
Intro To Node.jsIntro To Node.js
Intro To Node.js
 
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of usWebpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of us
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)
 
node.js.pptx
node.js.pptxnode.js.pptx
node.js.pptx
 
Practical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.jsPractical Use of MongoDB for Node.js
Practical Use of MongoDB for Node.js
 
introduction to node.js
introduction to node.jsintroduction to node.js
introduction to node.js
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
 
Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)Intro to node.js - Ran Mizrahi (27/8/2014)
Intro to node.js - Ran Mizrahi (27/8/2014)
 
Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)Intro to node.js - Ran Mizrahi (28/8/14)
Intro to node.js - Ran Mizrahi (28/8/14)
 
The MEAN stack
The MEAN stack The MEAN stack
The MEAN stack
 
JavaScript : A trending scripting language
JavaScript : A trending scripting languageJavaScript : A trending scripting language
JavaScript : A trending scripting language
 
Raffaele Rialdi
Raffaele RialdiRaffaele Rialdi
Raffaele Rialdi
 
The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015The curious Life of JavaScript - Talk at SI-SE 2015
The curious Life of JavaScript - Talk at SI-SE 2015
 

Kürzlich hochgeladen

%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
masabamasaba
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 

Kürzlich hochgeladen (20)

Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
%+27788225528 love spells in new york Psychic Readings, Attraction spells,Bri...
 
%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...
%+27788225528 love spells in Vancouver Psychic Readings, Attraction spells,Br...
 
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
 
SHRMPro HRMS Software Solutions Presentation
SHRMPro HRMS Software Solutions PresentationSHRMPro HRMS Software Solutions Presentation
SHRMPro HRMS Software Solutions Presentation
 
Generic or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisionsGeneric or specific? Making sensible software design decisions
Generic or specific? Making sensible software design decisions
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
 
VTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learnVTU technical seminar 8Th Sem on Scikit-learn
VTU technical seminar 8Th Sem on Scikit-learn
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
10 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 202410 Trends Likely to Shape Enterprise Technology in 2024
10 Trends Likely to Shape Enterprise Technology in 2024
 
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park %in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
Announcing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK SoftwareAnnouncing Codolex 2.0 from GDK Software
Announcing Codolex 2.0 from GDK Software
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
 
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) SolutionIntroducing Microsoft’s new Enterprise Work Management (EWM) Solution
Introducing Microsoft’s new Enterprise Work Management (EWM) Solution
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
Direct Style Effect Systems -The Print[A] Example- A Comprehension AidDirect Style Effect Systems -The Print[A] Example- A Comprehension Aid
Direct Style Effect Systems - The Print[A] Example - A Comprehension Aid
 

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!)

Hinweis der Redaktion

  1. 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