tags: `JavaScript`

What is JS?

It describes the behavior of the elements being displayed.
It is read line by line when called upon. (this is important)
Basically it adds functionality to your site.

Why do we use it?:

Those submit buttons need instructions behind them beyond going to a new page like a link.
Ever gone to a page that when you hover over those little ?'s, well what pops up is all done through JS.

The basics

So far we have learned HTML which is the bones behind our websites. It contains the content in an organized way. Then we moved to CSS where we give our websites some style. Gave it that personal touch you know pictures on the walls, that fancy new dress, or heck even that tattoo you just got. Thats all CSS. Now we are going to give our sites the good stuff. Some movement or action.

Root level meaning

JavaScript is a language that gives instructions to your website when activated.

For example:
You have a car…HTML is the body of said car
Your car has a paint job …CSS is the style
Your car has an engine … the JS

Will your car move? Nope not till you tell it too…in this case by turning it on. You have to add something to the HTML of your car that will activate the JS that runs the car… our CSS in this case would make that code into a key hole that requires user interaction (of inserting a key) to actually tell the JS hey man do your job.

Sounds simple right? Ha not even close!
You wired up your battery wrong but things in the wrong order, and since we are JavaScript we read the instructions or code line by line and follow it to a T. Since we messed up somewhere not a thing will happen…yet

Those are these pesky anoying errors we get. If the builder of the car was smart they left these cool hints or console.logs in the instructons so we can see just where it broke down.

Why do we need to understand how to add 2 numbers in JS?:

Ok so that one does seem a little silly but think about a human. Before they can run they need to learn how to walk, before they can walk they need to learn how to crawl, and before crawling it's usually rolling over.

JS is just like that. You got to know the basics before you can get intricate. Start from the beginning and work your way up.

Will we really ever use that later?:

Hey you never know. But basically on some level yes you will. It might be the idea behind how you add those numbers that you use later but it's all part of building your knowledge.

The Basics:

1: Declairing a variable

What the what now?
Well as we said before JS is a set of instructions to make something happen, so before we can write those instructions we should really give it a name

So lets (kinda) teach someone to walk

var person = ("J Doe")
console.log(person)

Ok so we just said that we are creating a person and calling them J Doe and just to make sure we are giving the correct instructions in the right order we also are sending a message to our console with the console.log statement
Our console if we did things right should read "J Doe"

2: The Array

So maybe we want to teach more than 1 person an array can help us use 1 variable but give it 2 2 different names

var person = ['Jane Doe', 'John Doe']
console.log(person)

So now we said that we are setting that variable to 2 names and using the console.log to make sure it prints both names

3: The function

So we have declaired our variable and right now it has an array of 2 name. But so what? This certainly won't tell them how to walk. That is where the function comes in…this will contain all our instructions

var person = ['Jane Doe', 'John Doe']

function walk() {
    console.log(person)
}
walk()

Ok now wait a min what in the world is going on here? Well lets break it down. 1st we are declairing the variable again. Then we are creating a function and calling it walk. Inside those () if needed anything that is required for the function to work (like a key to start the car) would be placed in there meaning can't do this function without xyz first. Then the actuall instructions will go inside these guys {}. Ok ok I get that. what the heck is this walk() thing? Well that is our way to call or activate our function. Typically this will go inside like your button tag in the html like this:

<button onclick='walk()''>Start walking</button>

Ok now we have the basic set up of how JS will work. In this instance all we are doing is creating a variable that contains and array of people, creating a funciton called walk and giving it the instructions of printing that array to the console when invoked.

Another example:

Lets add some numbers

HTML

<button onclick='addNumbers(2,4)'>Add Numbers</button>

JS

function addNumbers(num1, num2) {
    var sum = num1 + num2
    console.log(sum)
}

If we set everything up correctly we should get the answer of 6 in our console.log

Check this Codepen to see these all in action

tags: JavaScript