Javascript 2

lecture 2

31-06-2016

Michael Trouw

Israel Menis

Dolemite - Scott Henderson

Javascript 2

Who is here ?

Javascript 2

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

Javascript 2

total number of questions was....
( and was solved by @jonasbw himself ! )

total number of code examples posted was....

today

standup (15 mins)
show your work / exercises (15 mins)
- you show, explain what happens when
- questions from students
recap from lecture 1 (5 mins)
questions from lecture 1 (15 mins)
- jquery async (5 mins)
- git desktop app: how to contribute ? (10 mins)
language concept: closures while using the debugger (15 mins)
questions || live coding || ... (30 mins)

1h 30m

30m

assignments

work on basic / intermediate algo exercizes
work on frontend dev project (twitch.tv)
thursday mandatory update on progress

standup!

in 1 minute !
- reading material
- installed + used :
  - nodeJs & npm
  - standardjs
  - git & github app
- what did you do so far ?
what problems did you run into ?

show your work !

exercises
progress on twitch.tv app

recap

code styling conventions
- http://javascript.crockford.com/code.html

tools

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

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!

workflow & editor

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

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.

questions from lecture 1

jQuery $.ajax async option
GitHub contributing to other projects

jQuery async

What did I do ?

read:
http://api.jquery.com/jquery.ajax
needed to fake a REST service, read:
http://doc.jsfiddle.net/use/echo.html
recreated an example:
https://jsfiddle.net/michahell/ko9L9qLe/19/
found out feature is deprecated:
https://xhr.spec.whatwg.org/#synchronous-flag

jQuery async

jQuery's $.ajax builds on XmlHttpRequest.

git(hub) contributing

can be done using two ways (see this SO post):

collaborators (collaborators can do anything)
- https://help.github.com/articles/inviting-collaborators-to-a-personal-repository/
fork repository then make pull requests (more control)
- https://help.github.com/articles/using-pull-requests/

language concepts

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

study: javascript equality table

javascript equality

Javascript equality table

Moral of the story:

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

language concepts

closures
- variable scope
- 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)

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

closures

Closures are functions INSIDE functions.

Yes, this is possible!

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

basic algo scripting example

Palindromes

naive solution: https://jsfiddle.net/michahell/ch0xa51z/
can be easily solved with regular expressions (RegExp)
https://regex101.com/
regexp solution: https://jsfiddle.net/michahell/uq7e6xa1/

next week:

work on exercises
work on twitch.tv project
add 1 other student as github collaborator to your twitch.tv project
- ask him/her to work out a small part
- and add it to your project