WEBVTT 0 00:00.630 --> 00:00.930 All right. 1 00:00.930 --> 00:07.020 So now that we've heard all about how awesome Javascript can be then it's really time to give it a spin 2 00:07.350 --> 00:14.460 and see how we can start adding behavior to our web site by learning and using just a little bit of Javascript. 3 00:14.460 --> 00:19.920 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 00:20.010 --> 00:25.290 and then we're going to go into Developer and you can navigate to the Javascript Console. 5 00:25.290 --> 00:31.290 Now this is pretty cool because it allows you to start writing Javascript straight away and it will 6 00:31.290 --> 00:33.300 run them as you hit enter. 7 00:33.360 --> 00:36.180 So for example we can write something like alert, 8 00:36.180 --> 00:40.740 and then we're going to open up some round brackets or parentheses, and we're going to tell it what we 9 00:40.740 --> 00:41.840 want it to alert us. 10 00:41.850 --> 00:43.780 So let's just get it to write Hello. 11 00:43.980 --> 00:48.200 And then at the end we're going to close everything off with this semi-colon. 12 00:48.210 --> 00:52.240 So now if I hit Enter, Chrome will run this line of code, 13 00:52.380 --> 00:58.640 and as you can see it brings up a pop up, and that pop up has the message of Hello. 14 00:58.890 --> 01:01.690 Now if you hit OK the pop up will disappear, 15 01:01.740 --> 01:04.560 and that is the end of our alert. 16 01:04.560 --> 01:09.360 Now while the console is useful it has one downside. 17 01:09.360 --> 01:16.650 So, for example, if I wanted two alerts to happen, for example I want one pop up to say Hello, and then I 18 01:16.650 --> 01:18.790 want another pop up straight afterwards, 19 01:18.840 --> 01:23.920 so say World, as soon as I hit Enter my first line is already executed, 20 01:23.970 --> 01:31.030 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 01:31.080 --> 01:36.250 So the way that you can get around this is by holding down Shift and hitting Enter, 22 01:36.300 --> 01:38.260 and that takes you on to the next line, 23 01:38.490 --> 01:42.500 and so you can now write World!, 24 01:42.510 --> 01:44.340 close off the round brackets, 25 01:44.400 --> 01:46.880 and then finally add a semi-colon. 26 01:46.890 --> 01:53.250 So now if I hit Enter it will execute the first pop up which says Hello, and when I dismiss that one 27 01:53.340 --> 01:59.310 it will straight away execute the next line of code, which is a pop up that should say World. 28 01:59.310 --> 02:03.810 Now this is a little bit cumbersome and very often when you're typing inside the console and you're 29 02:03.810 --> 02:09.600 writing multi line code you forget to hold down Shift and you hit Enter and you've lost all of your progress, 30 02:09.900 --> 02:11.050 and it's a little bit painful. 31 02:11.070 --> 02:17.030 So I want to show you another way of writing Javascript code that can be executed inside Chrome. 32 02:17.070 --> 02:23.340 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 02:23.340 --> 02:23.840 tab. 34 02:23.880 --> 02:27.210 Now on the left corner you see this little arrow. 35 02:27.270 --> 02:30.420 And I want you to click on it and go to Snippets. 36 02:30.420 --> 02:35.610 Now this is a little bit of a hidden area in Chrome as not a lot of people even know about it. 37 02:35.790 --> 02:39.080 But it's really really useful for what we're trying to do. 38 02:39.120 --> 02:44.310 Now once you're here, you're going to create a new snippet by clicking on this + New snippet button, 39 02:44.820 --> 02:49.320 and you're going to call your script index.js, or whatever it is that you want to call it. 40 02:49.440 --> 02:57.090 So now you can see that we've got these Javascript files and it's showing up over here almost like what 41 02:57.090 --> 02:59.180 we've got going on inside Atom. 42 02:59.280 --> 03:01.450 So I'm going to close off the hello.js, 43 03:01.530 --> 03:06.930 and I'm going to remove it so that we only have one file and it's less confusing. 44 03:06.930 --> 03:10.720 Now inside this file here I can start writing code. 45 03:11.160 --> 03:21.450 So, for example, I can say alert Hello, and then alert World, and I can write as many lines of code as I 46 03:21.450 --> 03:22.620 wish. 47 03:22.620 --> 03:31.870 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 03:31.890 --> 03:37.410 So this is slightly different from how Console works. Console is kind of intended for you to test out 49 03:37.500 --> 03:44.790 lines of code, so you write one line, you hit Enter, you test it out, but the snippet editor is meant to execute 50 03:44.790 --> 03:49.140 your code only once you finish writing the entire script. 51 03:49.140 --> 03:56.390 So now if I hit this button it will run my code and I will get one alert and then another alert. 52 03:56.430 --> 04:03.180 And you can see that it's actually converting it into these instructions line by line inside the console. 53 04:03.180 --> 04:09.060 So this snippets editor is what we'll be using in the next few lessons as we learn more about Javascript, 54 04:09.240 --> 04:12.810 and we'll use it to complete some of the exercises and challenges. 55 04:12.810 --> 04:19.600 Now how do we know which instructions the browser will listen to and which instructions are just gobbledygook, 56 04:19.760 --> 04:27.380 you know, say if I said say Hello, then it's not really going to work because it's not a real command. 57 04:27.390 --> 04:34.080 So once it goes through Hello and World, then my code actually crashes, and in the console 58 04:34.110 --> 04:39.450 I get this error message that says Uncaught ReferenceError: say is not defined. 59 04:39.480 --> 04:45.720 So to translate that to English, the browser is basically trying to tell you that I have no idea 60 04:45.900 --> 04:51.020 what this say keyword is that you're trying to tell me and it's not a real instruction. 61 04:51.030 --> 04:52.960 I don't know what you want me to do. 62 04:53.100 --> 04:59.490 You have to look at the proper keywords and use something that I can accept and I can execute. 63 04:59.510 --> 05:01.960 So how do we know what those keywords are? 64 05:02.140 --> 05:10.870 Well if we head over to our trusty MDN Web Docs, and we select Javascript as our technology, then you 65 05:10.870 --> 05:18.520 can see that we've got all the information that we need in the world in order to get started using Javascript. 66 05:18.520 --> 05:24.340 Now, you can either scroll through the left menu and look through all the different sections that they've compiled 67 05:24.340 --> 05:25.070 for you, 68 05:25.150 --> 05:31.870 or we can just go straight in and start searching for this alert that we've used. So you can see that 69 05:31.870 --> 05:38.830 the first result I get back is something called Window.alert, and if you click on it it tells you 70 05:38.860 --> 05:46.570 that this is a method that displays an alert dialog, which is a pop up, with the optional specified content 71 05:46.690 --> 05:47.940 and an OK button. 72 05:48.190 --> 05:51.240 So the syntax looks somewhat like this. 73 05:51.400 --> 05:55.190 And they give you an example of what code you would need to write 74 05:55.240 --> 05:57.030 and what it would produce. 75 05:57.070 --> 06:02.590 So you can see that the full version of triggering a pop up is by saying window.alert, 76 06:02.770 --> 06:08.320 and sometimes you'll see programmers writing that out, but in most cases most people will go with the 77 06:08.320 --> 06:15.610 shorter version, which is simply just using the keyword alert, and then enclosing your message inside 78 06:15.700 --> 06:17.800 the round brackets or parentheses. 79 06:18.040 --> 06:21.960 So let's take a look at this line of code in more detail. 80 06:21.970 --> 06:24.950 Now the alert in this case is a keyword, 81 06:25.060 --> 06:27.700 and as we mentioned before, the keywords are special. 82 06:27.700 --> 06:30.280 You can't just use any word you wish. 83 06:30.280 --> 06:33.180 It has to be something that the browser knows about. 84 06:33.490 --> 06:39.100 And in this case the browser knows that when you write alert you're trying to tell it to create a pop 85 06:39.100 --> 06:39.390 up. 86 06:39.430 --> 06:44.900 And this is also known as a function because it's a little bit of functionality. 87 06:44.920 --> 06:51.250 It gets the browser to do something, not like what we've done so far, which is just to change the appearance 88 06:51.280 --> 06:52.400 of the web site, 89 06:52.420 --> 06:58.460 this is actually a little bit of behavior which we got by writing Javascript code. 90 06:58.690 --> 07:01.920 The middle part here in green is the message. 91 07:01.960 --> 07:08.320 This is what we want to show up in the pop up and you can change that message to anything you wish and 92 07:08.320 --> 07:10.810 it doesn't matter what you write, it could be gobbledygook 93 07:10.810 --> 07:16.390 for all the browser cares, but it will faithfully display that message in the pop up. 94 07:16.420 --> 07:24.160 And finally at the end there is this semi-colon and that denotes the end of this sentence or the end 95 07:24.220 --> 07:30.070 of your instruction, so that the browser doesn't get confused between one line and the next line and 96 07:30.070 --> 07:32.930 doesn't combine it into a single line of instruction. 97 07:32.980 --> 07:41.110 So it might seem a little bit confusing why we have these semicolons and parentheses and these quotation 98 07:41.110 --> 07:41.770 marks. 99 07:41.830 --> 07:47.950 But all it is is just a part of the grammar of the programming language. 100 07:47.950 --> 07:56.320 So just as in English we could type out something like say: "hello". 101 07:56.470 --> 08:03.840 and this as a human we will know that it's trying to tell us to say the word hello, in programming. 102 08:03.850 --> 08:05.200 it's exactly the same. 103 08:05.200 --> 08:11.040 We need some of these symbols to tell the browser or the computer what it should do. 104 08:11.050 --> 08:15.370 So for example the semi-colon is just like the full stop in English. 105 08:15.370 --> 08:21.640 This is the end of the sentence or the end of the instruction. And the quotation marks works exactly 106 08:21.640 --> 08:29.320 the same. It denotes that whatever is between the quotation marks is not a part of the functionality 107 08:29.590 --> 08:30.470 or the code. 108 08:30.520 --> 08:37.860 It's simply just a quote or, as we would say in programming, a string, a string of characters. 109 08:37.870 --> 08:43.770 Now the round brackets or the parentheses dictate what should be the message. 110 08:43.780 --> 08:49.810 So everything that's in between the opening and closing brackets are the things that will be included 111 08:49.990 --> 08:51.740 in the alert pop up. 112 08:51.820 --> 08:58.150 And finally the alert is just a keyword that the browser recognizes and knows what it should do when 113 08:58.150 --> 09:00.320 it sees that in the command. 114 09:00.580 --> 09:06.760 So as you can see in different languages we might have different syntax or different symbols that we 115 09:06.760 --> 09:07.380 use. 116 09:07.570 --> 09:10.290 And that's exactly the same thing in programming as well. 117 09:10.300 --> 09:17.530 So looking at Ruby code or Python or Java you'll see that sometimes you have different syntax or different 118 09:17.530 --> 09:18.930 symbols are used. 119 09:19.210 --> 09:25.390 But at the end of the day it's just a way of trying to create grammar so that the computer can better 120 09:25.390 --> 09:28.500 understand what it is that we're trying to tell it to do. 121 09:28.690 --> 09:34.030 Now there's a couple of important things I want you to notice and the first is that when you type quotation 122 09:34.030 --> 09:41.500 marks in a word processor for example word or Google Docs then you actually get very different symbols 123 09:41.590 --> 09:44.080 from what you use in programming. 124 09:44.080 --> 09:50.890 And the reason is because in programming the open quotation and the closing quotation are the same symbol, 125 09:50.980 --> 09:55.580 whereas in a word processor we care more about how it looks, 126 09:55.600 --> 10:01.320 so the open quote and the closing quote are actually completely different symbols, and if you try to 127 10:01.320 --> 10:05.550 run this line of code using these symbols then it won't work. 128 10:05.610 --> 10:10.740 But thankfully whenever you're typing inside a text editor that's intended for code, 129 10:10.890 --> 10:18.420 so, for example, the snippets tool, or in Atom, then it will automatically give you the programming quotes 130 10:18.690 --> 10:21.020 instead of the stylistic quotes. 131 10:21.210 --> 10:27.990 It only is a problem when you copy and paste things from things like Word or from Notes, and you have 132 10:27.990 --> 10:31.010 to be careful about what symbols you're copying in, 133 10:31.260 --> 10:37.260 which is one of the reasons that typing code out and getting more practice is always better than just 134 10:37.260 --> 10:39.040 copying and pasting. 135 10:39.150 --> 10:45.750 The other thing I want to show you is that when I write code in the coming lessons modules I will write 136 10:45.750 --> 10:52.800 it so that there is no space between the keyword, the round braces, the quotation marks and also the 137 10:52.800 --> 10:53.580 semicolons. 138 10:53.580 --> 10:55.800 There's no spaces in between here. 139 10:56.040 --> 11:03.330 Now you can also add spaces, as many as you wish, but in this course I want to show you the best practice 140 11:03.660 --> 11:06.270 in terms of stylistic choices. 141 11:06.270 --> 11:12.570 So I want to teach you the way that most programmers will structure their code and while it doesn't 142 11:12.570 --> 11:18.960 change the behavior of your code it will make your code much more uniform with every other programmer’s 143 11:18.960 --> 11:25.560 code, and it'll make it more readable and make it easier for other people to understand your code. 144 11:25.560 --> 11:33.210 Now the other stylistic choice is that when you have the hello inside quotation marks you can either 145 11:33.210 --> 11:38.530 choose to use single quotes or double quotes. The browser and the computer doesn't care. 146 11:38.550 --> 11:46.500 It treats it as the same. But, as a style convention, most Javascript programmers in this case will use 147 11:46.500 --> 11:49.920 the double quotes over the single quotes. And later on 148 11:49.920 --> 11:52.770 I'll show you cases where the single quotes are preferred. 149 11:53.010 --> 11:59.220 But when we're talking about a quote, a string, a piece of text, basically something that we're writing 150 11:59.520 --> 12:02.700 and we're telling the computer that this is not code, 151 12:02.700 --> 12:09.450 this is just text, so that it doesn't treat it as a keyword like alert, then we're going to be using 152 12:09.510 --> 12:10.780 the double quotes. 153 12:10.890 --> 12:17.310 Now if all of this seems very confusing in terms of which style choices to make then I want you to know 154 12:17.310 --> 12:24.210 that in this course I will be teaching you best practice in terms of structuring your code and your syntax. 155 12:24.240 --> 12:30.930 But if you're writing code by yourself and you ever get confused about which stylistic choices to make 156 12:31.260 --> 12:37.110 then I want you to take a look at this web site and bookmark it because it's going to be really really 157 12:37.110 --> 12:43.980 useful in the coming months and years as you develop into a fully fledged Javascript developer. 158 12:44.040 --> 12:50.700 And this is a living document that's been compiled by lots and lots of people, some people who are really 159 12:50.700 --> 12:53.270 influential in the community as well. 160 12:53.370 --> 12:59.580 And essentially the key message is that all code in any codebase should look like a single person typed 161 12:59.580 --> 13:02.190 it, no matter how many people contributed. 162 13:02.190 --> 13:08.610 So that means that everybody has to stick to the same style so that the whole project looks consistent. 163 13:08.610 --> 13:14.190 Now it might be that at the current stage this document is a little bit too advanced, especially if you're 164 13:14.190 --> 13:20.310 learning programming for the first time. But after you complete this course, and as you start going on 165 13:20.310 --> 13:26.640 to build your own projects then this is a really handy reference guide to just look back at every so 166 13:26.640 --> 13:33.930 often to check to make sure that you are using the right syntax and the right structure. And for me it's 167 13:33.930 --> 13:40.890 a little bit like the book The Elements of Style which is a writing style guide for writing in English. 168 13:40.920 --> 13:47.100 And every so often, after, you know, a year or so, I tend to read this small book just to refresh myself 169 13:47.190 --> 13:55.110 on, you know, whether if I'm using the correct grammatical style, whether I'm using the Oxford comma, and 170 13:55.140 --> 14:02.190 it's exactly the same for code. So it's not a large document, and it's something that you can browse through 171 14:02.580 --> 14:05.720 as you get more and more experienced in programming. 172 14:05.720 --> 14:11.160 Now in the next lesson we're going to continue our Javascript learning, and I'm going to talk about different 173 14:11.160 --> 14:16.800 data types and the primitive data types that we can use when we're writing Javascript code. 174 14:17.010 --> 14:20.040 So for all of that and more, I’ll see you on the next lesson.