JavaScript code academy - introduction

JavaScript Code Academy
Introduction

Course content
Every 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

Today ...
Introduction
Git, Github, Discussion forum
Brief JavaScript history & glossary
Setup environment
JavaScript basics

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

Do It!
- Install git
- Create Github account
- Register at discourse.js-code-academy.eu

Brief intro to JavaScript history & glossary

JavaScript history & glossary
Developed 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

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 & scope
var 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();
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 abstraction
names.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.json
Gate 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

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

JavaScript code academy - introduction

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to JavaScript code academy - introduction (20)

Recently uploaded (20)

JavaScript code academy - introduction