Introductory lesson for JavaScript Code Academy

1. JavaScript Code Academy
Introduction

2. Welcome!
And you?

3. Course content

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

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

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

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

8. Brief intro to JavaScript history & glossary

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

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

11. JavaScript basics
JavaScript right now...

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

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

14. 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);
}

15. 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();

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

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

18. Npm, package.json & you first project

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

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