Learning Javascript
beyond the basics
Course CONTENT
- Node.js
- Tools
- ES6
Node.js
-
Manage Packages with NPM
-
Start a Node.js Server
-
Continue working with Node.js Servers
-
Express routing
-
Build Web Apps with Express.js
Nodejs
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.
Managing Packages
> npm init
> npm install --save loadash
> npm install --save-dev eslint
> npm install -g nodemon
start Nodejs Server
$ mkdir myapp
$ cd myapp
$ npm init
entry point: (index.js)
$ npm install express --save
Continue Nodejs Server
var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
Express routing
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.post('/', function (req, res) {
res.send('Got a POST request');
});
app.put('/user', function (req, res) {
res.send('Got a PUT request at /user');
});
Building web apps with Express
$ npm install express-generator -g
$ express myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/javascripts
create : myapp/public/images
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/views
create : myapp/views/index.jade
create : myapp/views/layout.jade
create : myapp/views/error.jade
create : myapp/bin
create : myapp/bin/www
$ express -h
Usage: express [options] [dir]
Options:
-h, --help output usage information
-V, --version output the version number
-e, --ejs add ejs engine support (defaults to jade)
--hbs add handlebars engine support
-H, --hogan add hogan.js engine support
-c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
--git add .gitignore
-f, --force force on non-empty directory
Exercise
Create a new express application using the express generator and change the app to display welcome to CreditKarma
Tools
- npm run
- Debugging
- Linting
npm run
Using the scripts section of package.json is the idiomatic way to document and run common commands
{
"name": "myapp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www",
"debug": "DEBUG=myapp:* npm start"
},
> npm run debug
npm run
You can see a list of run commands with
> npm run
Debugging
> node-inspector
> node --debug-brk todo.js
Linting
> npm install --save-dev eslint
> touch .esintrc
> open .eslintrc
> eslint todo.js
{
"env": {
"es6": true,
"node": true,
"browser": true
},
"extends": "eslint:recommended",
"globals": {
"define": true
}
}
ES2015
-
Block scoping with let & const
-
Classes
-
Arrow functions
-
template strings
-
modules
-
promises
Block scoping with let & const
ES2015 allows you to scope at the block-level using let & const.
let foo = 'JS';
console.log(foo); // Prints 'JS'
if(true){
let foo = 'BAR';
console.log(foo); // Prints 'BAR'
}
console.log(foo); // Prints 'JS'
classes
ES2015 introduces syntactical sugar to make it easier for developers. The new keywords introduced are class, constructor, static, extends, and super.
class Dog {
constructor(name) {}
bark() {
console.log("bark");
}
}
class Poodle extends Dog {
constructor(color, name) {
super(name);
}
bark() {
super.bark();
console.log("wooooof");
}
}
Arrows and Lexical This
Arrows are a function shorthand using the => syntax. Unlike functions, arrows share the same lexical this as their surrounding code.
// Lexical this
var bob = {
name: "Bob",
friends: [],
printFriends() {
this._friends.forEach(f => console.log(this.name + " knows " + f));
}
};
Modules
Language-level support for modules for component definition.
// lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
// app.js
import * as math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));
// otherApp.js
import {sum, pi} from "lib/math";
console.log("2π = " + sum(pi, pi));
Promises
Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future.
function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
})
}
var p = timeout(1000).then(() => {
return timeout(2000);
}).then(() => {
throw new Error("hmm");
}).catch(err => {
return Promise.all([timeout(100), timeout(200)]);
})
Homework
-
Exercise
-
TypeScript
-
Babel
Exercise
Create a node application that has:
- An api class that is exposed as a module. The api class should make a request to an address that is passed to it and return the body.
- The node application should import the api module, and use the api class to call the node server created in the previous exercise, and log out the body that is returned.
Use must use es2015 with at least:
modules, classes, promises and arrows
Hint:
Use nodejs.org to find a fetch module that you can use in your api class.
TypeScript
Provides type definitions and Es6 Compiler
Babel
Babel is a JavaScript compiler
to use next generation JavaScript, today.
JavaScript Intermediate
By Nick Nance
JavaScript Intermediate
an introduction
- 1,081