Javascript


John Alexis Guerra Gómez


Slides:http://johnguerra.co/lectures/webDevelopment_spring2017/05_Javascript/

Class page:http://johnguerra.co/classes/webDevelopment_spring_2017/

Wat?

https://www.destroyallsoftware.com/talks/wat

What did we learn last time?

Readings discussion

  • questions?

How to ask a question to the staff

  1. Try yourself
  2. Google it
  3. StackOverflow it
  4. Create a reproducible bug (e.g. jsfiddle)
  5. Ask on slack (#general)

Random Questions

  • What is var and why we need it?
  • What is a linter
  • It's Javascript Object Oriented?

Functions

  • How do you create a function?
  • How do you also create a function?
  • And how do you also also create a function?

Variable scope

  • Closures
  • The module pattern

Variable hoisting

  • A variable can be referenced before it was defined
Say what? gif

Variable hoisting

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types#Variable_hoisting

undefined vs null

  • undefined a variable hasn't been created or assigned
  • null a variable was created and assigned to null

About closures

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

Classes vs Prototypes

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model

Objects

  • It's an object the same thing than a java HashTable?
  • How do you create a new object?
  • Can you add new attributes after object creation?

Arrays

  • Create a function that sorts an array
  • Create a function that filters an array of objects
  • Create a function sums all the items on an array

More arrays

  • filter
  • map
  • forEach

Modify the DOM

document.getElementById("myId").innerHTML = "<p> hello! </p>"


Exercise

Update your webpage for the class' students loading directly from the Google sheet

  • Share your results

Required Readings Next three sessions