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

All right.
1

So now that we've heard all about how awesome Javascript can be then it's really time to give it a spin
2

and see how we can start adding behavior to our web site by learning and using just a little bit of Javascript.
3

So I want you to open up a brand new tab inside Chrome and we're going to go into the menu under View
4

and then we're going to go into Developer and you can navigate to the Javascript Console.
5

Now this is pretty cool because it allows you to start writing Javascript straight away and it will
6

run them as you hit enter.
7

So for example we can write something like alert,
8

and then we're going to open up some round brackets or parentheses, and we're going to tell it what we
9

want it to alert us.
10

So let's just get it to write Hello.
11

And then at the end we're going to close everything off with this semi-colon.
12

So now if I hit Enter, Chrome will run this line of code,
13

and as you can see it brings up a pop up, and that pop up has the message of Hello.
14

Now if you hit OK the pop up will disappear,
15

and that is the end of our alert.
16

Now while the console is useful it has one downside.
17

So, for example, if I wanted two alerts to happen, for example I want one pop up to say Hello, and then I
18

want another pop up straight afterwards,
19

so say World, as soon as I hit Enter my first line is already executed,
20

and I don't get to go to the next line and finish off what I was writing, which was a multi line instruction.
21

So the way that you can get around this is by holding down Shift and hitting Enter,
22

and that takes you on to the next line,
23

and so you can now write World!,
24

close off the round brackets,
25

and then finally add a semi-colon.
26

So now if I hit Enter it will execute the first pop up which says Hello, and when I dismiss that one
27

it will straight away execute the next line of code, which is a pop up that should say World.
28

Now this is a little bit cumbersome and very often when you're typing inside the console and you're
29

writing multi line code you forget to hold down Shift and you hit Enter and you've lost all of your progress,
30

and it's a little bit painful.
31

So I want to show you another way of writing Javascript code that can be executed inside Chrome.
32

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
33

tab.
34

Now on the left corner you see this little arrow.
35

And I want you to click on it and go to Snippets.
36

Now this is a little bit of a hidden area in Chrome as not a lot of people even know about it.
37

But it's really really useful for what we're trying to do.
38

Now once you're here, you're going to create a new snippet by clicking on this + New snippet button,
39

and you're going to call your script index.js, or whatever it is that you want to call it.
40

So now you can see that we've got these Javascript files and it's showing up over here almost like what
41

we've got going on inside Atom.
42

So I'm going to close off the hello.js,
43

and I'm going to remove it so that we only have one file and it's less confusing.
44

Now inside this file here I can start writing code.
45

So, for example, I can say alert Hello, and then alert World, and I can write as many lines of code as I
46

wish.
47

And once I'm done I can go over to the bottom right corner here and I can press it to run my code.
48

So this is slightly different from how Console works. Console is kind of intended for you to test out
49

lines of code, so you write one line, you hit Enter, you test it out, but the snippet editor is meant to execute
50

your code only once you finish writing the entire script.
51

So now if I hit this button it will run my code and I will get one alert and then another alert.
52

And you can see that it's actually converting it into these instructions line by line inside the console.
53

So this snippets editor is what we'll be using in the next few lessons as we learn more about Javascript,
54

and we'll use it to complete some of the exercises and challenges.
55

Now how do we know which instructions the browser will listen to and which instructions are just gobbledygook,
56

you know, say if I said say Hello, then it's not really going to work because it's not a real command.
57

So once it goes through Hello and World, then my code actually crashes, and in the console
58

I get this error message that says Uncaught ReferenceError: say is not defined.
59

So to translate that to English, the browser is basically trying to tell you that I have no idea
60

what this say keyword is that you're trying to tell me and it's not a real instruction.
61

I don't know what you want me to do.
62

You have to look at the proper keywords and use something that I can accept and I can execute.
63

So how do we know what those keywords are?
64

Well if we head over to our trusty MDN Web Docs, and we select Javascript as our technology, then you
65

can see that we've got all the information that we need in the world in order to get started using Javascript.
66

Now, you can either scroll through the left menu and look through all the different sections that they've compiled
67

for you,
68

or we can just go straight in and start searching for this alert that we've used. So you can see that
69

the first result I get back is something called Window.alert, and if you click on it it tells you
70

that this is a method that displays an alert dialog, which is a pop up, with the optional specified content
71

and an OK button.
72

So the syntax looks somewhat like this.
73

And they give you an example of what code you would need to write
74

and what it would produce.
75

So you can see that the full version of triggering a pop up is by saying window.alert,
76

and sometimes you'll see programmers writing that out, but in most cases most people will go with the
77

shorter version, which is simply just using the keyword alert, and then enclosing your message inside
78

the round brackets or parentheses.
79

So let's take a look at this line of code in more detail.
80

Now the alert in this case is a keyword,
81

and as we mentioned before, the keywords are special.
82

You can't just use any word you wish.
83

It has to be something that the browser knows about.
84

And in this case the browser knows that when you write alert you're trying to tell it to create a pop
85

up.
86

And this is also known as a function because it's a little bit of functionality.
87

It gets the browser to do something, not like what we've done so far, which is just to change the appearance
88

of the web site,
89

this is actually a little bit of behavior which we got by writing Javascript code.
90

The middle part here in green is the message.
91

This is what we want to show up in the pop up and you can change that message to anything you wish and
92

it doesn't matter what you write, it could be gobbledygook
93

for all the browser cares, but it will faithfully display that message in the pop up.
94

And finally at the end there is this semi-colon and that denotes the end of this sentence or the end
95

of your instruction, so that the browser doesn't get confused between one line and the next line and
96

doesn't combine it into a single line of instruction.
97

So it might seem a little bit confusing why we have these semicolons and parentheses and these quotation
98

marks.
99

But all it is is just a part of the grammar of the programming language.
100

So just as in English we could type out something like say: "hello".
101

and this as a human we will know that it's trying to tell us to say the word hello, in programming.
102

it's exactly the same.
103

We need some of these symbols to tell the browser or the computer what it should do.
104

So for example the semi-colon is just like the full stop in English.
105

This is the end of the sentence or the end of the instruction. And the quotation marks works exactly
106

the same. It denotes that whatever is between the quotation marks is not a part of the functionality
107

or the code.
108

It's simply just a quote or, as we would say in programming, a string, a string of characters.
109

Now the round brackets or the parentheses dictate what should be the message.
110

So everything that's in between the opening and closing brackets are the things that will be included
111

in the alert pop up.
112

And finally the alert is just a keyword that the browser recognizes and knows what it should do when
113

it sees that in the command.
114

So as you can see in different languages we might have different syntax or different symbols that we
115

use.
116

And that's exactly the same thing in programming as well.
117

So looking at Ruby code or Python or Java you'll see that sometimes you have different syntax or different
118

symbols are used.
119

But at the end of the day it's just a way of trying to create grammar so that the computer can better
120

understand what it is that we're trying to tell it to do.
121

Now there's a couple of important things I want you to notice and the first is that when you type quotation
122

marks in a word processor for example word or Google Docs then you actually get very different symbols
123

from what you use in programming.
124

And the reason is because in programming the open quotation and the closing quotation are the same symbol,
125

whereas in a word processor we care more about how it looks,
126

so the open quote and the closing quote are actually completely different symbols, and if you try to
127

run this line of code using these symbols then it won't work.
128

But thankfully whenever you're typing inside a text editor that's intended for code,
129

so, for example, the snippets tool, or in Atom, then it will automatically give you the programming quotes
130

instead of the stylistic quotes.
131

It only is a problem when you copy and paste things from things like Word or from Notes, and you have
132

to be careful about what symbols you're copying in,
133

which is one of the reasons that typing code out and getting more practice is always better than just
134

copying and pasting.
135

The other thing I want to show you is that when I write code in the coming lessons modules I will write
136

it so that there is no space between the keyword, the round braces, the quotation marks and also the
137

semicolons.
138

There's no spaces in between here.
139

Now you can also add spaces, as many as you wish, but in this course I want to show you the best practice
140

in terms of stylistic choices.
141

So I want to teach you the way that most programmers will structure their code and while it doesn't
142

change the behavior of your code it will make your code much more uniform with every other programmer’s
143

code, and it'll make it more readable and make it easier for other people to understand your code.
144

Now the other stylistic choice is that when you have the hello inside quotation marks you can either
145

choose to use single quotes or double quotes. The browser and the computer doesn't care.
146

It treats it as the same. But, as a style convention, most Javascript programmers in this case will use
147

the double quotes over the single quotes. And later on
148

I'll show you cases where the single quotes are preferred.
149

But when we're talking about a quote, a string, a piece of text, basically something that we're writing
150

and we're telling the computer that this is not code,
151

this is just text, so that it doesn't treat it as a keyword like alert, then we're going to be using
152

the double quotes.
153

Now if all of this seems very confusing in terms of which style choices to make then I want you to know
154

that in this course I will be teaching you best practice in terms of structuring your code and your syntax.
155

But if you're writing code by yourself and you ever get confused about which stylistic choices to make
156

then I want you to take a look at this web site and bookmark it because it's going to be really really
157

useful in the coming months and years as you develop into a fully fledged Javascript developer.
158

And this is a living document that's been compiled by lots and lots of people, some people who are really
159

influential in the community as well.
160

And essentially the key message is that all code in any codebase should look like a single person typed
161

it, no matter how many people contributed.
162

So that means that everybody has to stick to the same style so that the whole project looks consistent.
163

Now it might be that at the current stage this document is a little bit too advanced, especially if you're
164

learning programming for the first time. But after you complete this course, and as you start going on
165

to build your own projects then this is a really handy reference guide to just look back at every so
166

often to check to make sure that you are using the right syntax and the right structure. And for me it's
167

a little bit like the book The Elements of Style which is a writing style guide for writing in English.
168

And every so often, after, you know, a year or so, I tend to read this small book just to refresh myself
169

on, you know, whether if I'm using the correct grammatical style, whether I'm using the Oxford comma, and
170

it's exactly the same for code. So it's not a large document, and it's something that you can browse through
171

as you get more and more experienced in programming.
172

Now in the next lesson we're going to continue our Javascript learning, and I'm going to talk about different
173

data types and the primitive data types that we can use when we're writing Javascript code.
174

So for all of that and more, I’ll see you on the next lesson.