- Is a reality where you sign up
for a one-month JavaScript course,
but you actually don't
know what JavaScript is,
and that's fine that's why we are here.
Maybe you heard it was cool,
or somebody told you, you should learn it,
or it was just I don't know
I'm sale who the hell knows.
One month JavaScript is
clearly where we are,
but what is JavaScript?
So in this video let me
just walk you through some
context about the language
that we're learning,
and I think this will be important to you
even if you are coding JavaScript already,
I just want to contextualize exactly
what we're talking about,
so what does JavaScript?
And why do you, I care?
Okay, programming.
JavaScript is a programming language.
Technically this is where
stuff gets way geeky.
Technically it's a scripting language,
but for all intents and
purposes like who cares,
Like it's programming let's just call
it a programming language, right.
We just wanna do something with this,
and it's code that we can do,
and it's code that we can use
to solve a problem. Right?
That's the important thing.
This is something that I teach
in my one month programming
from non-programmers course
is thinking about using code
as a tool to solve problems, yeah.
Cool, so programming
the definition is a set
of instructions used to solve a problem,
and I realize that's kind of
dry and kind of boring sounding
so just to kind of like
apply that to our lives think
about you solve problems
all the time in your life.
You have to make coffee, right?
There's a set of instructions
where you're like
I want coffee I'm going to press buttons,
and get coffee or buy coffee.
You think I have to get to work,
and then there's a set of steps get
the keys, get in the car, buy a car
if you don't have it, walk if you can
because that's awesome
or bike even better,
so there's all different ways that
we can solve problems in our own life,
and that is what we'll be doing week
over week in this course.
I'll be setting these problems up for you.
I'll be like here's a problem
when you wanna get
music from the internet,
and play it how do we do that,
and it's really more
about conceptual thinking,
and breaking these things down
into things that were used to.
Like I said like making
coffee, or going to work,
how do we take things that
we're used to in the real world,
and bring them into cyber world
whatever you want to call it.
Okay, and that's where this language
of programming will help us,
and that's why we're using JavaScript,
so how do I communicate
an idea to a computer?
That is really what we are doing here.
We have ideas, you have ideas
for something you wanna build.
You have an idea for you know something
you wanna do at your company.
Some data you wanna grab,
something you wanna see,
something you wanna share,
and we wanna communicate
that with a computer,
and we'll be using JavaScript for that.
Okay, Front-end development,
so JavaScript is part of
the front-end development world, right?
When we talk about front-end development
we were talking about
three languages HTML, CSS
and JavaScript only.
There are only three front-end languages.
There's not a fourth there
will likely never be a fourth.
This is just the way it works because
this is the way the browser works,
so it's easy to remember that
HTML, CSS and JavaScript are
the front-end languages,
and back-end languages are
pretty much every other language
you've heard of more or less, okay?
so that's what we're working with here.
That's why knowing some HTML
and CSS is helpful coming into
this because as you will see JavaScript
more or less interacts with HTML and CSS
with everything it does
so that's coming up,
but this is something that's
just an important takeaway
to be aware of because
I'll be using these terms.
When we look at each
of the languages of the
front-end the front-end being
what you see in your browser,
they each have our purpose, right?
So we have HTML which is
the structure of the page.
That is it for a second you
don't need to overthink that.
CSS is the style and
JavaScript is the behavior,
so HTML is the structure meaning is
the things that are on the page,
the text that exists, an image that exists
it exists is HTML.
The style describes it,
so the style is like it is
a certain size or color,
and JavaScript is kind
of how it moves behavior
if I click it and the
actions that happen to it.
Again just let us kind of this
lesson pour over your head
you don't need to
memorize this right now ,
but that is important
to understand because
they all have a certain function.
Now let's get real-world, okay?
Trying to apply this to
something that we know,
I made this system where
we look at each of them
as being like a noun,
an adjective and a verb
because it's really easy
to talk about, right?
If we look at HTML as
noun, CSS as adjectives,
and JavaScript as verbs
we can have a conversation
about real world stuff.
Look at this question here.
Chris can you make the logo bigger?
What, what I get this question a lot,
I get questions like this,
this is what your have (laughs) of me out
of working in agency life.
I used to work it at agencies
an agency being you know, a
big company of lots of developers,
and designers where we work on generally
bigger projects, worked with
nonprofits for a while and DC
but I also worked up here
in New York on making
we worked on the Bacardi,
Black Eyed Peas website,
the Toyota website, worked on
a bunch of really big websites
and you know there's like 20 developers
all working on a project,
and you get requests from the client,
and the client often
doesn't know how to code,
and it's my job to go like oh
you know, what do they mean?
What are they saying?
And so we're gonna go through that right
now using HTML, CSS
and JavaScript, got it?
You and me let's do this.
Okay, so Chris can you
make the logo bigger?
Yeah okay, I know you spent
a lot of money on your logo.
Yeah, I wanna make it bigger for you.
We're gonna be a really nice developer.
Yeah, okay I think that
would be a good idea.
We'll make that logo (laughs) bigger.
Yeah okay, yeah okay,
so how do we do that?
What I think of when that
happens is looking at the logo,
if we say that HTML is the noun, right?
HTML is the thing on the
page, we can look at this
and say yeah make the logo bigger.
Making that logo in the page
is gonna be coding with HTML,
and making it bigger is the style,
it's like the adjective,
it's the idea of making it bigger, right?
So making a logo on the page,
you could put a logo on the page or HTML,
the sizing of it is best on with CSS,
and that's how we work it.
Let's do one more, okay?
So hey Chris can you make
the gray heading fade-in?
Okay, that's sounds reasonable,
so we have a blog I imagine,
and the heading the thing at the top,
the text at the top of the blog post,
the heading we want that to fade-in.
I'm gonna give this over to you here,
what do you do with this?
Which one is the HTML?
Which one's the CSS?
And which was the JavaScript?
If you're looking at it
you will think heading is the noun, right?
so the heading the idea
that there's some text
on the page is going to be the HTML.
The gray the idea that it
has a color is the adjective
the CSS and the fading
in is the JavaScript,
and that's why I'm showing
you this example right now
because the JavaScript that we're gonna
be using that's gonna have
the interactivity on the page.
It's gonna have the events
of clicking on something,
and having something else happen.
It's going to have when things load,
and data loads asynchronously,
and all this kind of stuff
that's the JavaScript.
It's the verb,
it's the actions,
it's the behaviors,
it's the really cool sexy stuff
going on all over the page
that you're you get really
excited about, right?
so that's the JavaScript part,
and they all work together is
really the purpose of this.
Alright, so that is JavaScript.
That's how it works together with HTML,
and CSS and it is all part of
the front-end development languages.
Yeah, so that's what we're gonna be doing.
Onto the next video.