The 10 Days of JavaScript: Day 1

by birtanpublished on July 3, 2020

[Music]

hello everyone and welcome to the ten

days of JavaScript which is the first

chapter in my upcoming full stack

JavaScript course in this first chapter

we are going to give you a rock solid

foundation that you can build a career

on top of and no prior experience or

knowledge is required so even if you

have zero experience with computer

programming in general or maybe if

you've never even heard of JavaScript

this is the perfect place to get started

okay so right now in video number one

day number one we're gonna get started

in about 30 seconds from now but first I

just want to say that javascript is much

bigger than the web browser in the

modern era javascript can be used for

just about anything having said that we

are indeed going to begin in the web

browser because it's super accessible

right it's something that every computer

already has so this way you don't need

to go download and install anything

fancy or extra your computer already has

a web browser on it so right here right

now we are going to get started get your

hands dirty and have you write your

first bit of JavaScript code so right

now I want you to follow along with me

and I want you to open up googlecom in

a new tab or a new window technically it

doesn't need to be googlecom it could

be any website that you want to visit

okay but the important part is that I

want you to right-click somewhere on the

web page and in the menu that pops up I

want you to choose the inspect option

I'm using Google Chrome as my web

browser you could also use Firefox the

newest versions of Microsoft EDS are

also excellent and if you want to use

Safari you'll need to go into the

advanced preferences and enable the

develop menu anyways the point is is

that no matter what you're using as your

web browser if you right-click somewhere

on the page you should see an inspect

option and I want you to click that ok

and that's going to open up your do

/ tools it might be a separate window

like this or it might be attached to the

bottom of your screen

but either way within this developer

tools area I want you to look for

something called the console once you've

found console go ahead and click on it

if you're having a hard time finding the

console tab you might just want to

perform a quick google search for how do

i open the console in blank and you

would replace blank with the name of the

web browser that you're using so maybe

Chrome or Firefox or Microsoft edge or

Safari because there are keyboard

shortcuts that you can press to directly

open the console and that's a bit easier

but I'm not going to run through those

because they're different for each web

browser and operating system okay but

the idea is once you have successfully

opened the console you should see some

sort of symbol or a blinking cursor

about here or it might be closer to the

bottom but the idea here is this is

where we can experiment with JavaScript

code or in other words this is where we

can type and tell the web browser what

to do so for example we see my cursor

blinking here and if on my keyboard I

say 2 + 2 and press enter we see 4 let

me make this a bit easier to read and

let's try something else

so maybe 5 times 5 so 5 asterisk 5 press

ENTER 25 now at this point you might be

thinking to yourself that this is not

impressive at all because you've seen

Edition before and you've seen

multiplication before right we've all

used the calculator what does this have

to do with JavaScript and learning how

to program well believe it or not these

lines of code so 2 + 2 + 5 asterisk 5

these are lines of JavaScript and we

just used JavaScript code to make the

computer solve these or evaluate these

for us ok but as you might have guessed

computers can do much more than just

basic

one of the most useful things that

computers can do is store values in

memory let me show you what I mean I

want you to type this out with me in

your console if I type Lett and then a

space and then my favorite number space

equals and then just pick a number at

random right whatever your favorite or

whatever your lucky number is so in my

case let my favorite number equal seven

and then press Enter and we just stored

this value in memory so check this out

let's try something new let's say 10

plus let's say my favorite number we

press Enter or return

we see 17 right because we set this my

favorite number to equal or to have a

value of 7 so 10 plus 7 is 17 and we can

store more than just numbers so for

example we could try storing our name in

memory type this out with me let my name

equal and then open up a quote you can

use a single quote or a double quote

it's up to you and then type in your

name and then close out the quote just

make sure your quotes are consistent so

if you use a double quote at the

beginning use a double quote at the end

in case you're wondering why we're using

quotes this time it's because in

JavaScript if you're just dealing with a

number that doesn't need quotes because

a number is a special type of data but

if you want a string of text right like

a name or word a sentence or even a

paragraph in JavaScript we call that a

string of text or just a string and we

always want to wrap that in quotes so

you would typing your name right and

wrap it in quotes and then press Enter

okay we just stored that in memory so

now if you ever want to use it again you

can just type in my name press Enter and

it's going to give you your name or for

a more useful example we

open up a string of text and say hello

my name is and then a space and then

close out the quote and then after that

let's add on so the addition symbol and

then let's type in this label name of

where we stored the value so my name and

then let's add on a closing period to

close out the sentence right so

quotation period close out the quote

press ENTER and the computer adds all of

this up for us and generates hello my

name is Brad and closes the sentence out

with a period so you can see that

addition is not only four numbers we can

also add strings of text together if

you're still a little bit confused on

the difference between a number and a

string let me show you this quick

example so when we say 2+2 we get 4

however if we opened up a quote and said

to close out the quote and then plus and

then quote to close out the quote if I

press enter here we see 22 which doesn't

make any sense mathematically this is

because when you wrap something in

quotes javascript is not going to treat

it as a number it's going to treat it as

a string of text and interpret it quite

literally right so which is going to

squish these together to two without the

quotes javascript knows to interpret

these as actual numbers now if this

distinction between numbers and strings

of text is still not clear don't worry

about it this is a topic that we will

address again later on in future lessons

trust me we are going to learn through

repetition

okay now finally let's get to the truly

interesting part of this lesson so we've

seen that we can store values in memory

right so we stored my favorite number

and we stored my name and these are

labels that I just made up there's

nothing special about the phrase my

favorite number

my name right so you could have said let

unicorn equal 12 or let pizza equal

cheese as long as your label name starts

with a letter and doesn't contain any

spaces in it you can basically create

any label name that you want okay that

was a bit of a tangent anyways the idea

is we've seen that we can store values

in memory with our own custom labels but

the really interesting part is that the

environment also stores a ton of its own

values in memory now when I say

environment what do I mean well in this

case the web browser is our environment

so for example the web browser is

storing the title of this web page in

memory in my case that's Google or

whichever web page you were visiting now

check this out we can actually use

JavaScript code to manipulate this title

that we see right here so back in our

console I want you to follow along with

me so just like we made up labels like

my favorite number or my name or unicorn

pizza

well the web browser environment has

created a label or object named document

now I just used a new word their object

at this point we have no idea what an

object is don't worry we are going to

learn about objects in lesson number

three but for now all you need to know

is that we can look inside an object

with a period and then the document

object contains a property named title

so if we say document dot title and then

press ENTER we see Google or the title

of whichever webpage you're visiting now

here is where things finally get

interesting and we start to see the big

picture we can update or manipulate the

value of this property and the web

browser will use that new value so if we

want it to change

change this instead of saying Google to

saying something random we could just

say document dot title equals and then a

string of text so quotes and maybe I'll

just say hello and and the quote press

ENTER and you can see up in my tab for

the web browser we now see hello instead

of Google cool now let's try one more

example task before we bring this lesson

to a close let's try to use javascript

code to change the background color of

Google from white to maybe a light blue

or any other color that you would choose

so back in the console check this out we

can say document dot body dot style dot

background color so I'll give you a

minute to type that out again remember

that the dot or period is how you look

inside an object for other properties we

will learn more about objects in future

lessons

but for now you could almost think of

this as a Russian stacking doll you know

the dolls where one is slightly smaller

and it fits inside the other that's

basically what's going on here so

document contains a property named body

body contains a property name style and

style contains a property named

background color and make sure you type

the C in color here as a capital an

uppercase C because this is case

sensitive anyways so after that we can

say equals and then in quotes you can

choose any color name you want so I'm

gonna say light blue but you could say

yellow or orange or green just type out

a really common color name that you can

think of and as soon as I press ENTER

you can see the web page updated cool

now that's gonna bring the hands-on

portion of this lesson to a close but I

do have a quick review for you so the

takeaway for this lesson is the idea of

values

storing values in memory accessing those

values and then even assigning or

updating to new different values because

at its core that's really all

programming is working with values now

Before we jump into lesson number two I

do want to stress the fact that these

words like document and body and style

and background color these words are not

part of the JavaScript language itself

so just like earlier when you and I

chose words like my favorite number and

my name and unicorn and pizza just like

we did that the web browser environment

chose the words document and body style

and background color these words have no

meaning outside the context of the web

browser environment so just like you

might have a word or phrase in your

family that doesn't have meaning outside

the context of your home because

remember the web browser is just one of

many different JavaScript environments

later on in the course we will learn

about the node environment which can be

used as a server and also the MongoDB

environment which is used for storing

and retrieving data in a database so

long story short at this point in the

course I do not want you to worry about

trying to memorize these words that you

see here this is just environmental

jargon that the web browser uses we can

start to remember some of these key

property names later on in the course

but for now I want you to focus on the

equal sign and the quotes and the

periods and the plus symbols that we

used earlier right because that is the

skeleton in the core of the JavaScript

language itself it's the aspect that

never changes regardless of environment

anyways congratulations on writing your

first bit of JavaScript in this lesson

you got your hands dirty with code which

is already more than most people can say

I've got a quick vocabulary

note at the end here throughout this

lesson you heard me refer to things like

my favorite number and my name as labels

label is not the technical term I just

made that up to try and make the lesson

more understandable or less intimidating

the technical term is that this is a

variable in the example that I'm

highlighting right now we stored the

value of 7 within a variable named my

favorite number so the technical term

instead of label we would refer to this

as the identifier for the variable cool

so I like to strike a balance between

using easy to understand language but

also letting you know the technical

names for everything all right now

looking ahead to our very next lesson we

are going to learn about one of the most

important ideas in all of programming

and that is functions so what in the

world is a function well let's answer

that question let's keep our momentum

rolling and I will see you in the next

lesson the ten days of JavaScript is the

first chapter from my upcoming premium

course full stack JavaScript from

scratch I'm making these first 10 or 11

videos freely available on YouTube and

so for the next 10 days I'm going to

upload one new video each day so stay

tuned or if you're watching this in the

future all the lessons are up so feel

free to binge watch the full premium

course is not available just yet but if

you subscribe to this channel you'll be

notified as soon as it's out or you're

watching this video in the future it's

already available enjoy

[Music]

Related Videos

Be the first to comment “The 10 Days of JavaScript: Day 1”

Your email address will not be published.

There are no comments yet.