JavaScript

"It's Java, but for the browser!"

"It's only used to animate stuff in your website..."

"Only used on the frontend..."

Oh you couldn't be more wrong!

JavaScript

"JavaScript is a high-level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript language specification."

Wait... Whaat!?

JavaScript

Fully fledged technology.

Capable of running almost everywhere (your browser is just the begining!)

In fact, tons of enterprises run backend services in JavaScript through NodeJS

Oh shut up! Show me some code.

var thisIsAVariable = "And this is a string. This is not a number "
var thisIsANumber = 10
console.log(thisIsAVariable + thisIsANumber)

Let's try it! Open your browser.

Strings: In JavaScript a bunch of letters, numbers, words or anything else is known as a String

Strings have to begin AND end with a quotation mark. Single ' or double " is fine, just make sure you use the same at the beginning as you do at the end.

Values & Variables:

Values are the simplest components in JavaScript. 1 is a value, true is a value, "hello" is a value, function() {} is a value (we'll talk later on this, don't worry)

To store values we use things called variables

var b = 'This is a string stored in a variable'

Control flow

Like many other languages, you have your regular control flow statements

• if () { } else { }
• while () { }
• for ( ; ; ) { }

var a = 20 * Math.random()
if (a > 15) {
    while (a > 10) {
        a--;
        console.log(a)
    }
}

Common pitfalls

The semicolon dramma

Boolean evaluations

null vs undefined

var a
console.log(a)
a = null
console.log(a)
if (a) {
    console.log('This will never be executed')
}
a = 0
if (a) {
    console.log('Nor will this')
}
a = ''
if (a) {
    console.log('Still no...')
}
a = 'Finally'
if (a) {
    console.log(a)
}

Now, to the more complex elements!

Functions

Functions are one of the most important building blocks in JS. They allow you to have modularity, but are also very, very powerful in a lot more aspects. Watch this:

    function disguisedFunction (num, func) {
        return function (otherNum) {
            return func(num, otherNum)
        }
    }
    var misteryFunction = disguisedFunction(2, Math.pow)
    console.log(misteryFunction(3))

Functions

Functions don't have a mandatory num of arguments. This is very useful!

But better yet, you can access all the arguments in an abstract form, through the arguments variable inside the function scope (watch out, it may seem like an array but some features are lacking!)

    function disguisedFunction (num, func) {
        if (arguments.length === 1) {
            console.log('Well... creating a disguised function without a function is hard...')
            return
        }
        return function (otherNum) {
            return func(num, otherNum)
        }
    }
    disguisedFunction(2)

Scopes

Local scope is your best friend! Use it and abuse it whenever you can

function lynx (age, name, specialPower) {
    return function (feeling) {
        return 'I\'m a lynx named ' + name +
            ', age ' + age + '. My super power is ' +
            specialPower + '. Right now I\'m feeling ' + feeling
    }
}
var hacky = lynx(2, 'Hacky', 'be awesome at SINFO')
console.log(hacky('awesome to be learning some JavaScript!'))

Arrays

All is good when you're looking to store simple information. But what if you wanted to store some kind of ordered list?

function presenceList () {
    var list = []
    return function (name) {
        list.push(name)
        return list
    }
}
var workshopTicket = presenceList()
workshopTicket('João')
console.log(workshopTicket('Hacky'))

Arrays

JavaScript natively provides with some useful methods to handle arrays

• myArray.length
• myArray.push(value)
• myArray.pop()
• myArray.indexOf(value)
• myArray.sort()
• myArray.concat(otherArray)
• ...

Objects

Arrays are good for lists, but for other tasks they can be hard to work with. Luckily, we've saved the best for last! You can store complex information using objects! To do that we use JSON (JavaScript Object Notation), a very powerful, yet simple structure that allows you to model complex data

    var hacky = {
        type: 'lynx',
        powers: ['be cool', 'dance well', 'awesome javascripter'],
        growl: function() {
            console.log('Such Javascript!! Much wow!!')
        },
        personal: {
            age: 2,
            lovesSinfo: true
        }
    }
    hacky.growl()
    console.log('Age: ' + hacky.personal.age)
    console.log('All the info:', hacky)

Objects

JavaScript natively provides with some useful methods to handle objects

• myObject.keys()
• myObject.values()
• ...

    function iterator (obj) {
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                console.log('The key ' + key + ' has value ' + obj[value])
            }
        }
    }

Note the awesome obj[value] feature... It's like a key value store!

Prototype

This will be a bonus round... If we have time for it.

The challenge!

You should also build your own lynx! Go nuts with it! But... There are some requirements:

• Your lynx must have name, a special growl and special powers.
• Your lynx should be able to express it's awesome dance moves through a dance function.
• Your lynx should have method to print all it's super powers.
• Your lynx should have method to print all it's properties.
• Oh... And almost forgot! Your lynx is deep into math, so it should be able to print a fibonacci sequence for a given number like:

//The next number is found by adding the two numbers before it
myLynx.fib(10) //should print 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55

Please, I want more!

The end