Javascript


John Alexis Guerra Gómez


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

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

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 session

Project 1

P1 Requirements

  • Your homepage: Your skills, courses, projects, hobbies, etc.
  • ✓ W3C Compliant
  • ✓ Bootstrap 4+ (can use templates)
  • ✓ At least two pages
  • ✓ At least one JS (Vanilla) feature not copied
  • ✓ Can use templates

P1 Submission Requirements

  • Github page (README, MIT License, code)
  • Deployed URL (consider github pages)
    • Must remain online 6 months after the class ends
  • 2 min presentation Google slides
  • Code review (Github Pull Request)

Presentation

  • Objective
  • Technologies used
  • What you are most proud of
  • What was the hardest part
  • Demo
  • Use Google Slides
  • Make sure they are public

Code + Github

Good README

  • Good project name
  • Project objective
  • Screenshot
  • Tech requirements
  • How to install/use
  • Author with link to homepage
  • Reference to the class with link