All language subtitles for [English (auto-generated)] Learn JavaScript in Under 30 Minutes (Speed Lesson) [DownSub.com]

hey guys this is Ross and today we are

doing the JavaScript tutorial cause the

past couple days we did our HTML

tutorial we did our CSS tutorial so

today I'm showing you how to build a

calculator in JavaScript here is what

the calculator is gonna look like I

already wrote it in the HTML and CSS it

will be fully available to you so you

can look at the code you can see how it

works but currently I mean refresh it

currently it doesn't actually do

anything you press buttons nothing

really happens right

nothing nothing happens so again I'm

gonna show you the code for those things

and then I'll show you the JavaScript so

let's jump right in first off we have

our HTML that I wrote for this project

right we have our title as you can see

up here intro to JavaScript I included a

stylesheet just like I showed you in the

last lesson and then in our body I have

a div a divider that contains everything

in here I gave it an ID of app now an ID

is something that we can use to select

this div in particular kind of like we

used classes in the last one we can use

an ID right we see we have class classes

selector we can use in like CSS stuff

like that the difference between a class

and an ID is an ID can only be used for

one element you can use classes for as

many elements as you want you can have

15 or thousand different elements with

the same class name but you must only

have one out element with each ID and

ideas unique to one thing anyway we have

our heading calculator right there I

have a little description and then of

course we have our actual calculator you

see it's just an input a form input and

then a div with a bunch of buttons in

the plus button minus button the times

button the / button the equals symbol

and the Clear button and then of course

down here we have a script tag script

source equals script J s that's how we

pull in the java script writing and then

of course we have the file that we wrote

for the java script called script j s

which there's nothing there right now

also let me just show you the Styles

really quick in our CSS I made the font

family sans-serif so it looks

let's see here what else is there oh let

me let me turn ons in mode really quick

there we go that looks better we just

have some Styles this really isn't

important it's not part of this lesson I

will answer any questions you want about

the styles but let's just get into the

actual JavaScript but everything because

that's what you're here to learn today

so javascript is the way that we're

going to give this functionality we're

gonna make it actually do stuff when we

hit these buttons because currently

nothing's happening javascript is an

actual programming language unlike HTML

unlike CSS javascript can perform logic

it can perform math so I'm just going to

explain a few concepts to you first off

this web browser I'm using Google Chrome

a web browser is really just a way to

view a certain type of document on your

computer and these documents are the

kind that are written in HTML the

written in CSS the written in JavaScript

and when we want to make something

happen in that document we have to call

it from our programming language in this

case JavaScript using the word document

so that's you're just gonna see that in

the code so I just wanted to tell you

that what that is now I'm going to teach

you about something called a variable

alright let me zoom in a little bit

variables a variable stores information

so that it can be used over and over for

example I could have a variable in

JavaScript we just say bear ok and then

you call it something we can call this

one name and it can just hold my name

right and then we can use my name as

much as we want in our application so I

actually made a little example I'm just

gonna paste it in here okay so this is

gonna show well I'll just show you what

it does actually okay so whoa that's ok

let me refresh and here's a little

pop-up box that says hi Ross Libby and

then the next one says Ross Libby did

you miss me and so the next one says ok

Ross let me see you later as you can see

it's a really clean annoying box but the

point is it showed my name three

different times but I only typed it once

because this variable name

store it is so now if I want to make a

change in my program let's say someone

named Billy is using it then I just

write Billy I'll save that and now let

me refresh it it says hi Billy

it says Billy did you miss me and it

says okay Billy see you later as you can

see it said Billy three times but I only

had to write it one time because we

stored it in a variable and then we used

that variable throughout the rest of our

code so variables are very powerful and

I see how those work the next day I'm

gonna teach you about it's called a

function there we go there we go

functions a function is a piece of code

that can be run over and over again it's

basically a set of rules that does

something specific so if you take

something normal like a microwave for

example that has a specific function a

specific function of the microwave is to

make your food warm that's it that's

what it does it makes your food warm it

doesn't make it cold it makes it one a

function in programming is the same it

does something and that's all it does it

does something very specific so an

example of a function I'm going to give

it a name called say hi and this

function is going to say hi okay it's

going to send out unless as that says hi

and now every single time I run this

function by writing its name and putting

some parentheses after that it's going

to say hi it's gonna be really annoying

see there it is right there it says I'm

gonna refresh the page and it says hi

now you might think if that seems kind

of pointless but what if we want to run

that ten times you know say hi say hi 4

6 8 10 now I should say it 10 times but

I only had to write all this code only

once okay hi let's refresh hi hi hi hi

hi

Wow okay so you see it's reusable it's I

wrote that code only once but it said it

every time that I called the function so

as you can see programming is actually

really simple

I showed you some very basic rules and

I'm gonna teach you one more thing

before we get into the actual

functionality of this app all right the

last time going over is called if

statements or conditionals okay

conditionals mean that something only

happens if a condition is met okay it's

really simple it tells your code to do

something only if something is true if

like for example I could say everybody

if your name starts with the letter a

raise your hand and everyone that whose

name starts with an able to raise their

hand and no one else would but if your

name doesn't start with an A you would

not raise your hand you would not follow

that instruction programming is the

exact same it checks if something is

true and if it's true it does that thing

and if it's not true then it skips that

instruction so here's an example okay if

name equals Ross actually excuse me let

me set a variable name equals Ross okay

and now I'm going to check if the name

is Ross then I want you to learn to say

this name is Ross if it's not Ross I

want it to alert and say this is not

Ross all right let's see what happens

oh there's the box it says this name is

Ross now let's see what happens if I

change it to Jack all right this is not

Ross see how that works I didn't have to

change this code at all it just checked

it said is the name Ross is either if it

is then it runs this otherwise else

it runs this that's it if statements are

very simple program is easy and for some

reason they still pay a lot for it so

let's let's get started we're gonna look

at our HTML one more time well probably

more than one more time

for now one more time okay we're going

to write our calculator what we're going

to do we're going to want to modify

we're going to want to know what people

are putting inside of our input for the

number right is that this part right

here we're gonna want to know what

people are typing there we are going to

want to know whether they're clicking

this button or this button or this

button right the add button the subtract

button the x button divide button equals

button clear button you see I've given

them each IDs so that I can reference

each of them individually I can say get

the button with the idea of a door get

the button with the idea of subtracts

right and then I want to tell it what to

happen what should happen if someone

clicks on it so that's pretty much it

let's get started let's get started

writing our script it's gonna be kind of

a long script actually it's about 70

lines but it's cool you guys are smart

the first thing we're going to do make a

function that runs all right we want all

the codes to be contained in a function

and since we're building a calculator

we're gonna call our function calculator

because we're super creative function

calculator there we go that's how we

make it we write the word function we

write the name of it that we make up it

could also be something awesome I wrote

that all something oh if we wanted it to

but I don't I want to be calculator

there we go and then we put parentheses

and then we put curly braces okay next

step we want to get each of these

elements let's see where was the HTML we

want to get this thing and each of these

buttons by their ID so we can use them

in the code so we know what's happening

like I said so wrong button there we go

so let's start by doing that

so get the elements and store them in

variables now you'll notice remember in

HTML we had comments that didn't show up

in the actual thing but they stayed in

the code for us to look at and read for

our own notes that's what these things

are when I put the two slashes in

JavaScript that makes a comment it won't

show up here anywhere

it's just here okay so here we're going

to store the elements and variables so

remember you're right there and then

let's start with the addition button add

we're gonna call it add we can call that

whatever we want to call it add 33

awesomeness if we wanted but now we're

gonna call it add then we're gonna set

it equal to something right that's not

right

we want to store the element from the

HTML remember how I said if we want to

access things from from the webpage we

have to use the word document that's

what we're gonna do we're gonna say

inside of our document which is this

giant thing I want you dot gets elements

right because each of these things is an

element this is the h1 element the P

element the input element right we want

to say get element by ID because we set

an ID on each of them and then we're

just gonna say let's see here what was

this one's ID called it's called add you

know I'm gonna do I'm gonna copy this

list actually so that we can so we don't

have to keep looking back at the file

okay I'm gonna paste it down here this

code will break the website if I try to

run it but we'll just look at it for now

so we know what we're getting right so

for the add button get the element by

the add okay so now this variable is

actually storing this thing it's weird

it's cool though okay so let's do the

same for subtract there some tracks

equals document dot get element by ID

subtracts yeah and then same for

multiply so again if you guys have

questions about anything let me know I

find that you will learn best by doing

which is why I'm using kind of a complex

example to start us out because if you

try to build this and if you fail that

is when you will learn the most if you

have questions about it and I can answer

those questions which I can't answer

those questions if you post them in the

group

that is how you will learn the best the

fastest that is what will prepare you

for real-world scenarios every day at my

job

I run into things that I don't know how

to do and that is what once I figure

those things out that's what pushes me

to be a better developer and just get

better at what I do up here I have a

typo there we go get element by ID that

one is called equals and then the all

clear button fair clear these documents

get elements by IV here all right so I

selected all of those and we probably

want our input to I think I called that

I don't know what I call that doesn't

matter I don't think we need it right

now actually next step you the code

doesn't do anything yet we didn't even

run our function yet so next thing we're

going to do is we're going to make

another function inside of the

calculator function and we are going to

call it do operation because remember in

from basic math right add subtract

multiply divide those are all called

operators okay add does the operation of

adding two things together it does the

plus operation subtract does the -

operation it subtracts one thing from

another right so we're gonna make a

function that does those operations

function do operation remember camel

casing from the last one we do that in

JavaScript - okay and now I'm just going

to make a new variable for number and

I'm going to get the number

oh it's showing me that it's broken

because my you know my code is

incomplete let's let's refresh that okay

whatever the numbers in here mmm there

we go

whatever numbers in here I want to get

that and use the operator on it when

someone clicks a button okay so we're

going to document dot get element by ID

and let's find out what we call that we

called it number Wow that's creative

okay so get element by ID number and we

are going to sue now that's how we're

going to get that variable we're gonna

say that number dot value because it's

an input and when we're using inputs we

can say get the value out of that input

and I can actually prove it to you let's

just do let's not do that right now

actually let's stay on track okay now

the way a calculator usually works is

someone enters a number like five and

then they hit plus and when they hit

plus that five disappears so that you

can enter the next number right so we

want to do that too we want to make that

disappear so we're going to say okay now

that we've stored our number in a

variable let's let's set the value of

this input back to zero so we can enter

the next number so we're gonna say

document okay element by ID number dot

value we're gonna set it equal to

nothing a blank string just empty

quotation marks and then it was

something I forgot we want so this

number is going to be a string that

means JavaScript will see it as text it

will be like saying what is Apple plus

three that won't make any sense we have

to tell JavaScript that this is a number

specifically an integer so an integer is

a number that is not decimal right one

two three four those are all integers

for point five that is not an integer

that is a float that's a double we are

not working with those right now we're

just working with whole numbers okay so

we are going to a set number equal to

itself but we're going to tell

JavaScript parse the number as an

integer so we're gonna use parts in

we're gonna say number so now number

JavaScript knows it's a number so now I

can add it can multiply it can subtract

that you can divide it without getting

confused

it's programming so here's the thing

about programming this is the thing that

people find difficult about it you have

to be extremely specific when you

program if you are not extremely

specific the computer will always follow

your struck instructions exactly and if

you forget to give it an instruction or

you give it too many instructions it

won't actually get

it'll follow all of them like if you

said to somebody go get in the car and

bring the dog with you

right you would expect them to grab the

dog and then go get in the car but a

computer would follow your instructions

in order so first it would go it would

step in the car it would get in there

and then it would try to get the dog but

it wouldn't get out of the car first it

would be stupid and it just wouldn't do

it

that's how computers work they're

actually really stupid and we have to

tell them exactly what to do in the

exact right order we even have to tell

it know the number one is actually a

number not a word that looks like a

number like we actually have to tell it

that stuff so just keep that in mind

okay moving on next step we're going to

use some if statements we're going to

say if the operation if they haven't

clicked anything yet then all we want to

do oh wait I forgot something up here

where we made our variables we need

something that's gonna store the result

right if we add two numbers together

I need something waiting to hold that

result right otherwise we won't be able

to show it so we're gonna save result is

going to be equal to zero right that's a

good way to start out and then we also

want something to know what button you

clicked right we're gonna say did they

click the plus do they click the minus

did they click the times who knows right

so we're gonna say operation is equal to

empty we don't know yet right so down

here we're gonna make an if statement

check if and the operator has been

placed yeah

selected right so if an operator like

plus or minus is selected then this will

actually look like that if - is selector

a bat-like plus if plus is selected

right or actually I think it'll look

more like plus or minus or divide

something like that right but if there's

nothing selected it's just gonna look

empty so let's check if anything's been

selected cake

if operation is equal to nothing then

we're gonna set the result equal to a

number

okay cuz remember we got the number so

if someone clicks here and enters the

number six and then they click on an

operation right before they click that

we are result was zero and our operation

was nothing right so if the operation

was nothing then we say well now the

result is six right because that's what

they answered so now when they click

something else like they enter three and

hit plus I mean or equals then it will

go back through and I'll say well they

had already clicked the plus sign and

they just entered the number three which

would come from here so then it would

add the six into three together you'll

see how it works anyway so if the

operator is nothing then it's gonna set

the results the number check if the plus

operator has been selected

if operation is plus okay

yeah I've been other than bit sick sorry

about that then we're going to set the

result to the results plus number pretty

simple right if it's plus then set our

result to itself plus that cuz let's say

I'm just gonna show you a quick example

right person enters number five person

clicks plus first person enters number

three okay well we want this thing to do

is go okay well result was five and then

they clicks operator plus and then they

click number three so five plus three

equals eight so our result should now

equal eight that's what we're telling

the computer to do okay Bob we had to

say was set the result to itself plus

the number excuse me all right let's

move on do the same thing for minus K

check give minus

Reiter has been selected if operation is

- result equals results

- number should make sense to you by now

let me know if it doesn't if the you

know I'm not even gonna keep writing

these comments cuz I'm signaling no I

will I will I will for you guys so you

can look up back at them and know

exactly what's going on check if the

multiply operator has been selected

right so you take this time of this

operation equals multiply the results

equal the results time number and check

if the divide operator has been selected

if operation divide result equals

results divided by number and we

actually have to UM put this in

parentheses because they got a little

confused for some reason when I ran it

true story I think I don't know we'll

get into that later okay so now we're

handling all these things if someone

clicks nothing or if they click plus

minus multiply divide those are all

things that do operation handles that

function anytime we are handling a

button click we if a button is clicked

we say okay do the operation and we

never have to write any of these lines

of code again okay so let me just give

that a comment and do something if an

operation like an operator clicks all

right let's move on to our clicks now we

have to make sure that anytime

what did I click there okay anytime one

of these buttons is clicked we want to

make sure they know what to do cuz

currently nothing happens alright so

remember how we saved all the buttons in

variables up here well now it's time to

cash in on that okay we're going to tell

add when you're click to do this

subtract when you're click through that

okay let's just start handle the ad

click okay so we say add dot

which dot is a way of accessing things

that can happen to a function or a

variable anyway we're gonna say Dada

Dada add dot on click all one word

equals of function and when it's clicked

we want to do our operation remember the

add operation is clicked so we're gonna

call this say hey do operation and it's

gonna go through and it's going to say

okay did they click this one

or did they click the plus did they

click the minus and it's gonna figure it

out so all we have to write is to

operation and that's it and then we just

have to say okay which operation is

there we have the operation variable up

here we want to say well they click the

Add button they clicked this button so

we gotta set it to a plus so we say

operation equals plus and then we're

going to handle B subtract plate alright

and that's pretty much the same subtract

click equals function to operation

operation equals - all right let's do

the same thing for the multiply click

multiply down click equals function to

operation operation equals multiply

we wrote do operation three times that

means we didn't have to write let's see

here

all these lines of code more than once

okay

we wrote all those lines and we have to

run them every single button that gets

clicked but since we put it in a

function it takes one line instead of

like 20 dang I do not something divided

click let's do a divided click handle

the divide click divided down click

equals function do operation operation

before

divide and the last thing is of course

the clear clique right because we want

to be able to clear the calculator so

I'll handle the clear clique divide or

not clear dot on click equals function

to offer no we don't need to do the

operation we just need to clear what

Evers in the input excuse me

so we're gonna select our input document

dot get element by ID number get set its

value to nothing and then we're gonna

set our result back to zero because

we're clearing the calculator so you can

start over again

I'm believe it or not guys that is all

the code we need to make this work but

you'll notice if we try to run it right

now it's actually not gonna do anything

right oh that didn't clear it all ten

plus five equals nothing it says five

still that's stupid right because we put

all this in a function called calculator

dang I'm having trouble breathing we put

it in a function called calculator and

we forgot to run calculator so let's go

to the bottom of this unless it's right

calculator like that all right now let's

run it and see what happens I'm gonna

refresh the page let's see if it runs

I'm gonna write 10 plus C it cleared and

now I'm gonna write 5 and I'm say and

that that didn't work so let me open my

console really quick there are no errors

let's see if I missed something just go

back to my code really quick oh we

didn't handle what happens if you click

the equals so let's put that right here

before the clear okay handle that equals

click equals dot on click equals

function do operation mmm yep gonna do

our operation document up and then and

this one we're a little bit different

for getting we're setting the we're

gonna set this input to the value of you

know the easy numbers that'd be just

that we just added or subtracted or

operated on right so we're gonna get the

element by ID number so we're gonna

select the input we're gonna set this

value to the results because the result

is what's been storing the operation

right so now let's refresh and see what

happens

[Music]

okay and let's do 10 plus 5 equals and

there we have 15 ok let's click all

clear let's try something else

20 times 3 equals 60 50 divided by 2

equals 25 it's been about 30 minutes

just over and you guys we wrote a fully

functional JavaScript program

congratulations you guys saw how to do

functions and let's see your functions

and variables you saw how to use

conditionals if statements and how to

set on click properties how to access

the document it has been amazing this is

the sort of programming that you can

literally go out and get a job paying

$120,000 a year and you'll be writing

this sort of code I'm not even kidding I

know people that I've done it I've done

it was like it's not difficult once you

get good at this sort of stuff that we

wrote today and just a few other things

but like this is the core stuff this is

the stuff that I had to learn that got

me my first job for 80 thousand dollars

a year this is the first this is the

stuff that I knew when I started making

$45 an hour which is 90,000 a year right

this is the sort of stuff that got me my

first six-figure job so these are the

sort of things you need to know go

through this learning ask me every

question that you want anything you need

to know to understand it because

seriously this is this is just what she

needs to know if you're going to make a

lot of money in the web space so yeah

thanks for watching like comment

subscribe seriously ask any questions

I'm here to teach you