All right.
So now that we've heard all about how awesome JavaScript can be then it's really time to give it a spin
and see how we can start adding behavior to our website by learning and using just a little bit of JavaScript.
So I want you to open up a brand new tab inside Chrome and we're going to go into the menu under View
and then we're going to go into Developer and you can navigate to the JavaScript Console.
Now this is pretty cool because it allows you to start writing JavaScript straight away and it will
run them as you hit Enter.
So for example we can write something like alert,
and then we're going to open up some round brackets or parentheses, and we're going to tell it what we
want it to alert us.
So let's just get it to write "Hello".
And then at the end we're going to close everything off with this semi-colon.
So now if I hit Enter, Chrome will run this line of code,
and as you can see it brings up a pop-up, and that pop-up has the message of "Hello".
Now if you hit OK the pop-up will disappear
and that is the end of our alert.
Now while the console is useful it has one downside.
So, for example, if I wanted two alerts to happen, for example I want one pop-up to say "Hello", and then I
want another pop-up straight afterwards,
so say "World", as soon as I hit Enter my first line is already executed,
and I don't get to go to the next line and finish off what I was writing, which was a multi-line instruction.
So the way that you can get around this is by holding down Shift and hitting Enter,
and that takes you on to the next line,
and so you can now write "World!",
close off the round brackets,
and then finally add a semi-colon.
So now if I hit Enter it will execute the first pop-up which says, "Hello", and when I dismiss that one
it will straight away execute the next line of code, which is a pop-up that should say, "World".
Now this is a little bit cumbersome and very often when you're typing inside the console and you're
writing multi-line code you forget to hold down Shift and you hit Enter and you've lost all of your progress,
and it's a little bit painful.
So I want to show you another way of writing JavaScript code that can be executed inside Chrome.
So if you go ahead and go to the next tab which is Sources, and if you click on it you get taken to this
tab.
Now on the left corner you see this little arrow.
And I want you to click on it and go to Snippets.
Now this is a little bit of a hidden area in Chrome as not a lot of people even know about it.
But it's really really useful for what we're trying to do.
Now once you're here, you're going to create a new snippet by clicking on this + New snippet button,
and you're going to call your script index.js, or whatever it is that you want to call it.
So now you can see that we've got these JavaScript files and it's showing up over here almost like what
we've got going on inside Atom.
So I'm going to close off the hello.js,
and I'm going to remove it so that we only have one file and it's less confusing.
Now inside this file here I can start writing code.
So for example, I can say alert("Hello!"), and then alert("World"), and I can write as many lines of code as I
wish,
and once I'm done, I can go over to the bottom right corner here and I can press it to Run my code.
So this is slightly different from how Console works. Console is kind of intended for you to test out
lines of code, so you write one line, you hit Enter, you test it out, but the Snippet editor is meant to execute
your code only once you finish writing the entire script.
So now if I hit this button it will run my code and I will get one alert and then another alert.
And you can see that it's actually converting it into these instructions line by line inside the console.
So this Snippets editor is what we'll be using in the next few lessons as we learn more about JavaScript,
and we'll use it to complete some of the exercises and challenges.
Now how do we know which instructions the browser will listen to and which instructions are just gobbledygook,
you know, say if I said, say("Hello"), then it's not really going to work because it's not a real command.
So once it goes through Hello and World, then my code actually crashes, and in the console
I get this error message that says Uncaught ReferenceError: say is not defined.
So to translate that to English, the browser is basically trying to tell you that, "I have no idea
what this say keyword is that you're trying to tell me and it's not a real instruction.
I don't know what you want me to do.
You have to look at the proper keywords and use something that I can accept and I can execute."
So how do we know what those keywords are?
Well if we head over to our trusty MDN Web Docs, and we select JavaScript as our technology, then you
can see that we've got all the information that we need in the world in order to get started using JavaScript.
Now, you can either scroll through the left menu and look through all the different sections that they've compiled
for you,
or we can just go straight in and start searching for this alert that we've used. So you can see that
the first result I get back is something called, Window.alert(), and if you click on it it tells you
that this is a method that displays an alert dialog, which is a pop-up, with the optional specified content
and an OK button.
So the syntax looks somewhat like this.
And they give you an example of what code you would need to write
and what it would produce.
So you can see that the full version of triggering a pop-up is by saying window.alert...
and sometimes you'll see programmers writing that out, but in most cases, most people will go with the
shorter version, which is simply just using the keyword alert, and then enclosing your message inside
the round brackets or parentheses.
So let's take a look at this line of code in more detail.
Now the alert in this case is a keyword,
and as we mentioned before, the keywords are special.
You can't just use any word you wish.
It has to be something that the browser knows about.
And in this case the browser knows that when you write alert you're trying to tell it to create a
pop-up.
And this is also known as a function because it's a little bit of functionality.
It gets the browser to do something, not like what we've done so far, which is just to change the appearance
of the website,
this is actually a little bit of behavior which we got by writing JavaScript code.
The middle part here in green is the message.
This is what we want to show up in the pop-up and you can change that message to anything you wish and
it doesn't matter what you write, it could be gobbledygook
for all the browser cares, but it will faithfully display that message in the pop-up.
And finally at the end there is this semi-colon and that denotes the end of this sentence or the end
of your instruction, so that the browser doesn't get confused between one line and the next line and
doesn't combine it into a single line of instruction.
So it might seem a little bit confusing why we have these semicolons and parentheses and these quotation
marks,
but all it is is just a part of the grammar of the programming language.
So just as in English, we could type out something like say: "hello".
and this as a human we will know that it's trying to tell us to say the word, "Hello". In programming,
it's exactly the same.
We need some of these symbols to tell the browser or the computer what it should do.
So for example the semi-colon is just like the full stop in English.
This is the end of the sentence or the end of the instruction. And the quotation marks works exactly
the same. It denotes that whatever is between the quotation marks is not a part of the functionality
or the code.
It's simply just a quote or, as we would say in programming, a string, a string of characters.
Now the round brackets or the parentheses dictate what should be the message.
So everything that's in between the opening and closing brackets are the things that will be included
in the alert pop-up.
And finally, the alert is just a keyword that the browser recognizes and knows what it should do when
it sees that in the command.
So as you can see, in different languages we might have different syntax or different symbols that we
use,
and that's exactly the same thing in programming as well.
So looking at Ruby code or Python or Java you'll see that sometimes you have different syntax or different
symbols are used,
but at the end of the day it's just a way of trying to create grammar so that the computer can better
understand what it is that we're trying to tell it to do.
Now there's a couple of important things I want you to notice and the first is that when you type quotation
marks in a word processor for example word or Google Docs then you actually get very different symbols
from what you use in programming.
And the reason is because in programming the open quotation and the closing quotation are the same symbol,
whereas in a word processor, we care more about how it looks,
so the open quote and the closing quote are actually completely different symbols, and if you try to
run this line of code using these symbols then it won't work.
But thankfully whenever you're typing inside a text editor that's intended for code,
so, for example, the Snippets tool, or in Atom, then it will automatically give you the programming quotes
instead of the stylistic quotes.
It only is a problem when you copy and paste things from things like Word or from Notes, and you have
to be careful about what symbols you're copying in,
which is one of the reasons that typing code out and getting more practice is always better than just
copying and pasting.
The other thing I want to show you is that when I write code in the coming lessons modules I will write
it so that there is no space between the keyword, the round braces, the quotation marks and also the
semicolons.
There's no spaces in between here.
Now you can also add spaces, as many as you wish, but in this course I want to show you the best practice
in terms of stylistic choices.
So I want to teach you the way that most programmers will structure their code and while it doesn't
change the behavior of your code it will make your code much more uniform with every other programmer’s
code, and it'll make it more readable and make it easier for other people to understand your code.
Now the other stylistic choice is that when you have the "Hello" inside quotation marks you can either
choose to use single quotes or double quotes. The browser and the computer doesn't care.
It treats it as the same. But, as a style convention, most JavaScript programmers in this case will use
the double quotes over the single quotes. And later on
I'll show you cases where the single quotes are preferred.
But when we're talking about a quote, a string, a piece of text, basically something that we're writing
and we're telling the computer that this is not code,
this is just text, so that it doesn't treat it as a keyword like alert, then we're going to be using
the double quotes.
Now if all of this seems very confusing in terms of which style choices to make then I want you to know
that in this course I will be teaching you best practice in terms of structuring your code and your syntax.
But if you're writing code by yourself and you ever get confused about which stylistic choices to make
then I want you to take a look at this website and bookmark it because it's going to be really really
useful in the coming months and years as you develop into a fully-fledged JavaScript developer.
And this is a living document that's been compiled by lots and lots of people, some people who are really
influential in the community as well.
And essentially the key message is that all code in any codebase should look like a single person typed
it, no matter how many people contributed.
So that means that everybody has to stick to the same style so that the whole project looks consistent.
Now it might be that at the current stage this document is a little bit too advanced, especially if you're
learning programming for the first time, but after you complete this course, and as you start going on
to build your own projects then this is a really handy reference guide to just look back at every so
often to check to make sure that you are using the right syntax and the right structure. And for me it's
a little bit like the book, The Elements of Style, which is a writing style guide for writing in English.
And every so often, after, you know, a year or so, I tend to read this small book just to refresh myself
on, you know, whether if I'm using the correct grammatical style, whether I'm using the Oxford comma, and
it's exactly the same for code. So it's not a large document, and it's something that you can browse through
as you get more and more experienced in programming.
Now in the next lesson, we're going to continue our JavaScript learning, and I'm going to talk about different
data types and the primitive data types that we can use when we're writing JavaScript code.
So for all of that and more, I’ll see you on the next lesson.