(upbeat music)
- The browser is the natural environment
for JavaScript and modern browsers
shipped with development tools built right in
to work with JavaScript, for logging, testing,
debugging and more.
Knowing how to use these development tools
will make working with JavaScript much easier
and more interesting.
So before we start working in a code editor,
let's take a look at Chrome's developer tools
and the console.
Either right click anywhere in the viewport
and select inspect,
or press control shift I on windows
or command option I on a MAC.
This opens the Chrome DevTools
where you can do things like inspect the DOM elements
and the styles that are connected to them,
run network audits, and a lot more.
Right now, I want to draw your attention
to the second tab called console.
Click on console and you open the browser
console as a panel.
You can also open this panel directly
by pressing control shift J on Windows,
or command option J on a MAC.
Or open it as a drawer while viewing the elements tab
by either clicking on the DOM menu
on the right hand side and selecting show console drawer,
or simply hitting the escape key on your keyboard.
For now will work with the console as a separate tab.
The console is a command line
for the browser where you can write,
manage and monitor JavaScript on the fly.
We'll spend a lot of time in this console.
So I want you to get acquainted
with its basic functionality right now.
When you open the console, there's an angle bracket
and a text cursor right here in the top left-hand corner.
Here, you can type in JavaScript commands
that run in the browser immediately.
So let's try that.
First, the classic JavaScript 101 demo.
Type in alert, followed by a parentheses, quotation marks,
and then some sentence you want to alert out to the browser.
Like I love ducks.
Close your quotation marks and your parentheses
and hit the return key on your keyboard.
Up pops a browser alert box saying I love ducks
with an okay button.
This is JavaScript action.
We provide some type of command to the browser
in a form of a script.
And the browser executes that command when we tell it to.
We can also do some math here.
I can say something like alert five plus eight return,
and we get 13, do some more advanced math.
Five point blah times 83 point blah divided by 4.7.
And here we get the results again.
Let's do something a bit more complex.
Using JavaScript, we can ask the browser
what's date and time it is right now and get it to tell us.
type in var dates equals new date.
And here's important to have a capitalized deep.
Then hold down shift
and hit returned to create a new line and type in alert.
Today is plus date.
Here we're creating what's known as a variable.
That is a container that just holds whatever we put in it.
We give it the name date,
and then we populate it with the current date object.
This is something the browser holds that we can request.
So we're just saying to the browser,
hey, what date and time is it right now,
and can you put that information inside this container
and then I'll call the container later.
Then, I alert out the text today is,
and add to it that data container.
So effectively we're alerting out
today is followed by the date
which is a request for the browsers current date and time.
Hit return and you see the results.
Today is Monday, March 13, 2017,
and this is the exact time
and it's adjusted for pacific daylight time
because I'm in Vancouver, Canada right now.
Now you're starting to see the power of JavaScript.
And you're also noticing
that this alert can get really annoying
because you have to keep clicking okay to close it,
and it's not really doing what you want it to do.
So we can do the exact same thing down here in the console.
But instead of alerting out the content,
we can log it in the console itself.
So if instead of saying alert today is date,
I can say console log today is plus date, hit return,
and now it logs right here in the console.
Today is exact same information,
but it's not popping up in this annoying alert window.
That's cool in all,
but it's not happening on the webpage itself.
You'll notice the webpage up here
is still conspicuously blank.
The real magic happens when we start interacting
with what we see in the browser viewport.
To do that, we first need to know a little bit
about the structure of the HTML on the current page.
So let's switch back to the elements tab for a second.
Here you see the current document contains only two things,
ahead element at the top and an empty body elements.
I want to inject some new HTML
into this page using JavaScript,
and that content will go
between the beginning and end body tags.
So it will display on the page itself.
I already have this date variable,
so I don't need to set that up again.
What I need to do is grab the document,
then get ahold of that body tag,
and then add some HTML inside it.
And I can do that by literally calling the document,
use a dot then body that gives me the body element
and then find its inner HTML.
So whatever's inside and replacing it with something new.
So I'll say, in there HTML equals,
and then I just set up my new HTML.
Quotation mark, I create an H one element.
Then I say, the date today is plus date.
Now I also have to close my H one elements.
So I add another plus and then type in quotation,
aged one and add my quotation mark.
when I run this,
the page HTML is updated on the fly and we see the text.
The date today is followed by the actual date and time
right here in the visual viewport.
If I now go back to the elements tab
and look inside the body element,
you'll see here we have an H one,
but this H one only exists in the browser right now
because it was injected using JavaScript.
Now that I know this works,
I can improve the display of this information a bit.
Because right now it's kind of a big mess
and it's not really easy to read.
So, I can go back and grab document,
body, inner, HTML, equals,
and then I'll change the output
by reducing this information down
to something more human readable.
So I'll start the same way.
H one, the dates today is,
then I'll take the date object and use some methods on it
to just grab specific pieces of information.
So I'll say get month.
This will give me the month number in computer terms
and you'll see what that means in a second.
Then I'll add a forward slash
as plain text plus date, get date.
That gives me the date number.
So that would be one, two,
either 30 or 31 or 28 if it's February,
and then finally dates get full year.
And just like before and my H one element.
Run this and I now get a string as much shorter
because we grabbed the date object
and reduced it down to only specific pieces of information.
If you paid close attention though,
you'll notice there's something really strange here.
Today's date is the 13th of March,
but here it says today's date is the 13th of February.
Now this is a weird thing computers do sometimes.
When you ask a computer to give you a list of items
from one to 10, it'll return a list
that's indexed as zero, one, two, three,
four, five, six, seven, eight, nine.
And since we're asking for the month object,
we're getting the number in the index.
So the third month is indexed as two
because the first month is indexed as zero.
So the fix this,
we need to help the JavaScript along a little bit.
I'll hit the up arrow on my keyboard
to get back the function we just ran in the console.
And I'll navigate to date get month
and wrap it in parenthesis.
And then on the other side,
I'll say plus one that just adds one to the number
which currently is two.
And when I run this,
it says correctly the date today is March 13, 2017.
The neat thing is,
all of this is happening on the fly in the browser.
We're not changing the HTML document.
So if I reload this document right now,
everything resets back to normal.
A blank page and an empty console.
If you feel a bit or maybe very confused right now,
that's all right.
Seeing JavaScript and action for the first time,
is kind of like looking at the pieces of a wristwatch,
laid out in front of you
and trying to figure out how to put it all together.
What I want you to walk away with right now
is this simple message.
The console is your JavaScript playground.
This is where you get to experiment and try new things.
(upbeat music)