JavaScript 101

    > 1 + 1
    2

    > "cup" + "cakes"
    "cupcakes"

    var potato;

    potato = "potato";
    

    potato = 5;

    var yellowPotato = "yukon gold";
    var alivePotato = "Mrs.Potato Head";
    var potatoCount = 12;

    var myPotatoes = 2;
    var yourPotatoes = 3;
    var ourPotatoes = myPotatoes + yourPotatoes;

Now ourPotatoes holds the value of 5.

    >  ourPotatoes
    5

Types

We saw how variables hold values, pieces of data.

Each value in JavaScript is of a certain type. What type a piece of data is will determine what we can do with it in JavaScript.

The different types that are available in JavaScript are:

• Numbers - 10, 0.3
• Strings - "hi!", "5 pieces"
• Booleans - true/false
• Undefined - no value
• Null - value of nothing
• Objects - stores complex collections of data

Today we'll be focusing on strings.

Strings

We've seen strings as well, they are all characters including spaces.

They must be contained in single quotes ' ' or double quotes " " to be a valid string.

    > "Cake is tasty."
    > "92"
    > 'what?#!?%?'

String Concatination

It might surprise you to know, that we can also add strings using the + operator!

    > "I love " + "JavaScript" + "!";
    "I love JavaScript!"

    > var language = "JavaScript";
    > var sentence = "I love " +  language + "!";

    > sentence;
    "I love JavaScript!"
    

Arrays

What if we wanted to store a list containing many strings, or many numbers in one variable? We can do that with a built in JavaScript object, an Array.

An Array can hold as many elements as you can dream of.

To create an Array, we utilize the [ ] square brackets and commas to separate each element.

    var weekDays = ["mon", "tue", "wed", "thur", "fri"];

    var bingoDraws = [8, 14, 2, 3, 11, 21, 7];
    

There are many different ways to access values in an array and do something with them.

Let's learn about functions so we can dive into a cool way to access elements in an array.

Functions

Functions are chunks of code that can be called to run at anytime when they're called to action, and they perform a certain task.

Functions are possibly the most powerful concept in any programming language but especially in JavaScript. They allow you to unlock your powers as a JavaScript wizard.🔮💫

We are going to use functions today to:

• grab HTML elements on our page
• add and remove CSS classes from them
• access values in arrays
• listen to events from users interacting with our page
• we'll be writing some of our own custom functions as well

Defining a Function

A function is defined with the function keyword, followed by the name you would like to call your function, and then a set of smooth brackets ( ) and curly { } brackets.

    function nameOfFunction() { }

    function nameOfFunction() {
        // do things here
    }

We can using a special built in function in JavaScript console.log() to print something to the user.

Let's work in our CodePen and try out some code.

    console.log("Hello JavaScript Wizard!");
    

console.log() will log the thing we gave it in our console!

Lets put our console.log() into a function called sayHiWizard()

    function sayHiWizard() {
        console.log("Hello JavaScript Wizard!");
    }

Hmm.... 🤔 nothing gets logged out to the console this time.

This is because we can define a function at any time, but to actually use the function we've defined, we need to call it to action!

If we don't call our function, it will never run.

To call our function we use the function name, followed by a pair of ( ) brackets.

        sayHiWizard();
    

Like magic!

    // defining a function
    function lovePotatoes() { 
        console.log("I love potatoes so much!");
    }

    // calling a function
    lovePotatoes();

Exercise: Writing Your Own Functions

In CodePen, write the following function and call it:

• Write a function that console logs out this sentence:

  "Hi my name is [yourName], but they call me [nickName]."

  Replace [nickName] and [yourName] with names that relate to you.

  Hi my name is Nicolas Cage, but they call me The National Treasure.

Parameter

Instead of running the same code over and over again, we can give our functions a parameter as we define the function, so we can pass in different values to our functions during the function call.

If we can pass different values to work with each time into our functions, we have the power to reuse our functions in more situations!

To add a parameter to your function definition, pop the name of the param in between the ( ) brackets.

This name is completely up to you, it is just a placeholder for the values that will actually be passed in during a function call.

        function dinnerPotatoes(potatoNum) {
            /* potatoNum is this function's param! we can now do something with the value of what is passed in for potatoNum in our function */
        }
    

We can use string concatination to console log out a sentence with our placeholder potatoNum that can hold any value!

        function dinnerPotatoes(potatoNum) {
            console.log("I'll have " + potatoNum + " potatoes for dinner.");
        }

        // lets pass in the number "8" where potatoNum is
        > dinnerPotatoes("8");
        "I'll have 8 potatoes for dinner."

        // we can also pass in a variable!
        > var myPotatoCount = "52";
        > dinnerPotatoes(myPotatoCount);
        "I'll have 52 potatoes for dinner."
    

The DOM

Manipulating the elements we see on our page is one of the best parts about using JavaScript for web development. To learn how we can manipulate things we see on the page, let's learn about the DOM.

What is the DOM

The DOM stands for document object model, it represents all the HTML elements on our page in a tree like structure. When we talk about using JavaScript to manipulate the DOM we are adding removing, and changing functionality and style to elements on our page.

To access the DOM, we can use keyword document.

Let's type that into our browser's console and see what we get back!

Grabbing Specific Elements from the DOM

We can grab specific elements from the DOM using .querySelector() and .querySelectorAll(), these special functions are available on our document.

Let's try grabbing a few HTML elements from the page.

    document.querySelector("h1");
    document.querySelectorAll("p");
    

document.querySelector( ) will return the first matched element found in the DOM.

document.querySelectorAll( ) will return all matched elements in a nodeList (kind of like an Array)

Theres a lot we can do to an element once we grab it from the DOM.

Event Listeners

Here comes an incredibly fun part of JavaScript, listening to user interactions with the elements on our page. 🎧

When a user clicks something, hovers over something, presses a key on their keyboard, these are all events we can listen for on DOM elements, and after we hear on of these events we can write code to react to these interactions!

We can listen for events on DOM elements using the .addEventListener() function.

    document.addEventListener("event", functionToRun);
    

.addEventListener() takes 2 things in between the brackets () , the event we want to listen for, and the function we want to run when the event has been heard.

Codealong

Let's go into our CodePen and add an event listener to the document to listen for the keydown event, which will listen to everytime a key on the keyboard is pressed down.

    document.addEventListener("keydown", function(){
        /* code to run here when
        "keydown" event is heard */
    });

In our function that we passed in, let's make it log out to our console in CodePen that a key was pressed down, to see the event listener working.

    document.addEventListener("keydown", function(){
        console.log("A key was pressed down!");
    });

    document.addEventListener("keydown", function(e){
        console.log(e);
    });

    document.addEventListener("keydown", function(e){
        console.log(e.key);
    });