Workshop – JavaScript – JavaScript



Workshop – JavaScript – JavaScript

0 0


workshop-javascript

:books: Slides for the javascript workshop

On Github sinfo / workshop-javascript

Workshop

JavaScript

Created by SINFO, source is on Github.

Who are we?

We are SINFO

JavaScript

JavaScript started as a programming language to make internet pages more interactive. Nowadays JavaScript runs in more places than just web browsers — it runs on web servers, phones and even robots!

How is it used?

Let's open Google chrome console!

To open the console, right click anywhere on the screen and hit Inspect Element, then click on the Console tab

(console)
    > "Hello World!"

(console)
    > "SINFO is awesome!"
    > 'Now seriously folks, SINFO is really awesome'
    > "SINFO!!!'
"

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

To store values we use things called variables

(console)
    > var sinfoWorkshop = "This workshop is awesome!"
    > sinfoWorkshop

Functions: We call things that perform actions, functions

As an example, "replace" can replace words.

(console)
    > var sinfoWorkshops = "SINFO workshops are awesome!"
    > sinfoWorkshops.replace('are', 'participants are')
    > sinfoWorkshops

Making new Functions: Let's make a function called iKnowJavascript that adds a bunch of exclamation points to the end of a string.

(console)
    function iKnowJavascript(string) {
        return string + '!!!!'
    }

Here is another function that doesn't return anything but instead uses a different method to show us the output:

(console)
    function yellIt(string) {
          string = string.toUpperCase()
          string = iKnowJavascript(string)
          console.log(string)
        }

For this part we will need some external libraries. Copy and paste this code onto your console window! http://underscorejs.org/underscore.js

Then hit enter! And now your console will have a new variable named "_"

Loops:Now we can start being lazy

(console)
    function logANumber(someNumber) {
      console.log(someNumber)
    }
    _.times(10, logANumber)
Copy pasta http://underscorejs.org/underscore.js no terminal para poder usar _.

Arrays:Think of an Array like a sorted list that you can keep tons of stuff in.

(console)
    >    var whatsHappeningToday = ["FCUL", "Workshop", "JavaScript"]
    >    console.log(whatsHappeningToday[2])

If you made something else interesting today and you want to add them to your list it is super simple:

    (console)
    >    whatsHappeningToday.push("Slept in class")

To check that the new cat made it into your array you can use .length:

    (console)
    >    whatsHappeningToday.length

Objects:Arrays are good for lists, but for other tasks they can be hard to work with. What if you also wanted to store more than just names?

    (console)
    >    var todayI = { : did:"learn", what: "JavaScript", where: "FCUL" }
    >    console.log("Today i " + todayI.did, todayI.what + " at " + todayI.where)

But all of this is useful for what!? What if we mix all of this with some html.

http://jsbin.com/redujogujosu/edit

THE END

By SINFO Dev Team

Made using reveal.js