Javascript 2

lecture 1

24-06-2016

Michael Trouw

Israel Menis

Javascript 2

• have fun while developing!
• keep asking questions!
  • Israel will help out remotely.
  • I'll be in the Slack channel too.

Javascript 2

Who is here ?

topics

• code style & conventions
• workflow (editor / git / debugger / console)
• more language concepts

let's see how far we get !

assignments

• FCC intermediate algorithmic scripting ( 21 assignments, 50 hours)
• working on frontend dev project (twitch.tv) ( 25 hours )
• 75 hours / 3 = 25 hours per week.

standup!

• what did you do so far ?
• what problems did you run into ?

code style and conventions

• what do you think code style means ?
• what are conventions ?

code style and conventions

function(){
console.log('one way of writing functions....');
}

function ()
{
    console.log('and another way of writing functions.')
}

code style and conventions

• Whole team using same standard & conventions
• prevents syntax errors
• prevents (some) logical errors
• become a better programmer

crockford

read: http://javascript.crockford.com/code.html

tools

• There are multiple tools that try to do the same:
  • jshint
  • jslint
  • jscs / eslint
  • standardJs
  • maybe others...

jsHint

JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team's coding conventions.

jsLint

JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool.

escs / eslint

JSCS is a code style linter and formatter for your style guide

standardjs

One Style to Rule Them All

• let's install it (you have node.js and NPM installed right?)

• (sudo) npm install -g standard

• install it for your editor if possible but:
• for now, don't install automatic formatting!

standardjs example

• let's see how this works.
• I will use a standard text editor for this.

workflow & editor

read: https://medium.com/just-javascript/which-editor-to-choose-69b6ee2ded66#.4w5ml3gvk

editors

• brackets

• sublime text

• visual studio code

• atom

• ...others ?

git and github

• Have you ever heard or done something with it ?

• Who uses Linux ?

• https://desktop.github.com/

• there are other git GUI apps for linux

git in 5 minutes

• Have you ever heard or done something with it ?

• watch https://www.youtube.com/watch?v=OqmSzXDrJBk

• watch https://www.youtube.com/watch?v=8oRjP8yj2Wo

• https://desktop.github.com/ (no linux client so far)

main assignment

• should be on (your) github

• should conform to standardJs styleguide:

  • if you knowingly deviate from standardJs,
    you have to be able to explain your reasoning.

language concepts

read: http://javascript.crockford.com/private.html

language concepts

• variable scope
• study: javascript equality table
• closures
• the 'this' keyword
• callbacks

variable scope

• You all know variables
• Have you heard of scope ?
• read top part: https://en.wikipedia.org/wiki/Scope_(computer_science)

variable scope

The scope of a name binding – an association of a name to an entity, such as a variable – is the part of a computer program where the binding is valid: where the name can be used to refer to the entity

variable scope

var width = 12;                                     // width variable
var height = 'test';                                // height variable

function calculateArea(width, height) {
  try {
    var area = width * height;                      // Try to calculate area
    if (!isNaN(area)) {                             // If it is a number
      return area;                                  // Return the area
    } else {                                        // Otherwise throw an error
      throw new Error('calculateArea() received invalid number');
    }
  } catch(e) {                                     // If there was an error
    console.log(e.name + ' ' + e.message);          // Show error in console
    return 'We were unable to calculate the area.'; // Show users a message
  }
}

// TRY TO SHOW THE AREA ON THE PAGE
document.getElementById('area').innerHTML = calculateArea(width, height);

javascript equality

Javascript equality table

Moral of the story:

use '===' instead of '=='

closures

Closures are functions INSIDE functions.

Yes, this is possible!

read: https://developer.mozilla.org/en/docs/Web/JavaScript/Closures