Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript code academy - introduction

479 views

Published on

Introductory lesson for JavaScript Code Academy

Published in: Technology
  • Be the first to comment

JavaScript code academy - introduction

  1. 1. JavaScript Code Academy Introduction
  2. 2. Welcome! And you?
  3. 3. Course content
  4. 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. 5. Today ... Introduction Git, Github, Discussion forum Brief JavaScript history & glossary Setup environment JavaScript basics
  6. 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. 7. Do It! - Install git - Create Github account - Register at discourse.js-code-academy.eu
  8. 8. Brief intro to JavaScript history & glossary
  9. 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. 10. Do it! Setup your environment: https://github.com/msd-code- academy/lessons/blob/master/introduction/environment.md
  11. 11. JavaScript basics JavaScript right now...
  12. 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. 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. 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. 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. 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. 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. 18. Npm, package.json & you first project
  19. 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. 20. Do It! Install, start, develop: https://github.com/msd-code- academy/lessons/blob/master/introduction/environment.md#run-hello- world-application

×