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