JavaScript Code Academy

Introduction

Welcome!And you?

Course content

Course contentEvery week on Wednesday, eight sessions

Starting at 6 pm, 20 mins for asking, 6:30 pm presentation & coding

Syllabus (might be adjusted to your needs)

React.js basics

Unit testing

Managing application state

Dealing with async

Performance & debugging

Backend in node.js with express

“Rome wasn’t build in a day”

Today ...Introduction

Git, Github, Discussion forum

Brief JavaScript history & glossary

Setup environment

JavaScript basics

React.js “Hello world”

Git, Github, coding ...All materials & code on Github: https://github.com/msd-code-academy

Discussion: http://discourse.js-code-academy.eu/

Common flow:

a. Fork the original repository

b. Clone it on your machine

c. Create feature branch

d. Push changes & create pull request

https://github.com/msd-code-academy/lessons/blob/master/introduction/git_basics.md

Do It!- Install git- Create Github account- Register at

discourse.js-code-academy.eu

Brief intro to JavaScript history & glossary

JavaScript history & glossaryDeveloped in 10 days at Netscape by Brendan Eich

Called Mocha -> LiveScript -> JavaScript

JavaScript - marketing name (because Java was cool back then)

EcmaScript - standard

Versioning: 1, 2, 3, 4, 5, 5.1, 6 => 2015, 7 => 2016

Node.js - JavaScript interpreter for server

Npm - package manager for maintaining dependencies & stuff…

https://www.npmjs.com/ is your friend*

Do it!Setup your environment: https://github.com/msd-code-academy/lessons/blob/master/introduction/environment.md

JavaScript basics

JavaScript right now...

JavaScript basics - functions

function returnSomething(param) { Return 'I am hoisted';}

var anonymous = function() { return 'I am anonymous'; };

const fatArrow = () => 'I am lambda & ES6 only!';

new Function('a', 'b', 'return a + b'); // don't do it

JavaScript basics - functions & scopevar getA = function() {

var a = 'AAA'; var hello = 'Hello!'; var getB = function() {

var b = 'BBB'; var getC =

function() { var c =

'CCC'; var hello

= 'Hi!';

console.log(a, b, c);

console.log(hello); }; getC();

}; getB();

};

each function defines new scope

code in inner (child) scope can access variables defined in outer (parent) scope

variables defined in current scope take precedence over variables in parent scope

JavaScript basics - higher order functions

Functions are just regular values:

They can be passed as an argument to other functions

Function can return another function

=> might help you with abstractionnames.map(

(name) => name.substr(0, 1).toUpperCase() + name.substr(1))

const newNames = [];for (var i = 0; i < names.length; i++){ const name = names[i] const newName = name

.substr(0,1)

.toUpperCase() + name.substr(1); newNames.push(newName);}

JavaScript basics - this identifier

Refers to the “context” in which the function is called

It’s not the reference to scope

Any sufficiently advanced technology is indistinguishable from magic. -- Arthur C. Clarke

const hasClass = function (className) { return this.classList.contains(className);};const e = document.querySelector('#elem');

hasClass.call(e);hasClass.call({}); // Cannot read property 'contains' of undefined

const imprisoned = hasClass.bind(e);imprisoned();

JavaScript basics - this identifier & fat arrow function

Fat arrow function binds the context at the creation, that’s it:class Anderson { constructor() { this.name = 'Neo'; this.getName = () => this.name; this.getName2 = function () { return this.name; }; }}

const a = new Anderson();const getName = a.getName;const getName2 = a.getName2;console.log(getName());console.log(getName2()); // Error: Cannot read property 'name' of undefined, Matrix down

Do It!Fork, clone, fix, push:https://github.com/msd-code-academy/lessons/blob/master/introduction/intro_to_js.md#javascript-crash-course

Npm, package.json & you first project

Npm.js + package.jsonGate to the world: https://www.npmjs.com/

Check the usage stats, issues & code if in doubts

Define your own scripts:

=> see & run “npm run hello” from previous exercise

Defining dependencies:

Dependencies

devDependencies

Use “npm init” if you needto generate new “package”

Do It!Install, start, develop:https://github.com/msd-code-academy/lessons/blob/master/introduction/environment.md#run-hello-world-application