All language subtitles for 102 Javascript Alerts - Adding Behaviour to Websites.en_US

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 web site 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 web site,

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 web site 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.