JavaScript

At the gate to hell

Some scary figures

Javascript fatigue

:(

Syntax

var foo = "bar"
var num = 1
var array = []
var object = {
    foo: "bar"
} //Bad excuse for a python dictionary :(

function foo(bar) {
    console.log(bar) //Print Statement
    return "Succeeded!"
}
foo(object.foo)

Functions and Types

Note: JavaScript is loosely typed

Conditionals and Loops

for (var i = 0; i < 5; i++) {
    console.log("Daniel Rocks!")
}

var name = "Daniel"

if (name == "Daniel") {
    console.log("I found Daniel!")
} else {
    console.log(":( I can't find Daniel")
}

Event-driven

this ain't Java

var btn = document.getElementById("btn")
btn.addEventListener("click", function() {
    console.log("button clicked")
})
while (true) {
    if (button.isClicked) {
        console.log("button clicked")
        button.isClicked = false
    }
    setTimeout(function() {
    }, 1000)    
}

Blocking vs non-Blocking

Event API

var clickListener = function(evt) {
    console.log(evt)
}

target.addEventListener("click", clickListener)
target.dispatchEvent(new Event("My custom event"))
target.removeEventListener("click", clickListener) //this makes no sense to me :(

Browser Variables

  • window
  • document
  • location

Forms

Default behavior

<form method="GET" action="https://www.google.com">
    <input name="q"></input>
    <button type="submit">submit</submit>
</form>

HTTP

GET http://www.google.com HTTP/1.1
Host: danielhsing.com
Accept: image/fig, application/json
Content-Type: application/json
User-Agent: random browser agent
Content-Length: 1337

10101010101101010101101 l33t

GET, PUT, POST, UPDATE

Resources

  • https://developer.mozilla.org/en-US/
  • http://eloquentjavascript.net/
  • http://superherojs.com/
Made with Slides.com