Upload
jaroslav-kubicek
View
196
Download
6
Embed Size (px)
Citation preview
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