WEBVTT

00:00.670 --> 00:09.240
Already that's a good start for code editing I've chosen one that's called Comodo edit and it's free.

00:09.240 --> 00:14.460
You're free to use this one or to use any other code editing tool that you feel the most comfortable

00:14.460 --> 00:14.960
with.

00:15.150 --> 00:18.460
My advice is to pick one to try a couple of them.

00:18.570 --> 00:21.600
Pick one that you like and just stick with it.

00:21.760 --> 00:27.400
In my course I use different code editors because sometimes I'm in the mood for one or another.

00:27.600 --> 00:31.360
And also I just want to show you how flexible this can be.

00:31.380 --> 00:37.560
I don't want you to really get married with one particular called eight or so earlier when you're in

00:37.570 --> 00:39.750
your learning path.

00:39.870 --> 00:41.730
So let's get started.

00:41.730 --> 00:49.650
I have an almost empty page the HTML document here which contains the head the body and all of the corresponding

00:49.650 --> 00:51.630
tags on it.

00:51.930 --> 00:55.850
I'll show you to madness of adding Javascript code.

00:55.890 --> 01:01.070
First thing I want to say javascript code just like hit the medico's it's basically text.

01:01.320 --> 01:09.000
So it's code it's text that we're going to write whether in whether it's in this file or in an external

01:09.000 --> 01:13.000
file that external file is also going to be text a text file.

01:13.140 --> 01:17.510
But the extension of the external file when working with javascript is Dot.

01:17.600 --> 01:19.070
Yes.

01:19.610 --> 01:29.540
OK first manner of including javascript code is by using the script tag the code editor I'm using has

01:29.600 --> 01:36.680
order completion so it's automatically close the script tag inside of the script tag is where I enter

01:36.830 --> 01:38.210
my javascript code.

01:38.240 --> 01:44.630
We haven't really learnt any javascript coding yet so I'm just going to write alert which allows you

01:44.630 --> 01:56.040
to show a pop up pop up window that's going to say hello and I'll save this when you open a website.

01:56.110 --> 01:59.650
It always gets loaded from top to bottom.

01:59.910 --> 02:06.210
So these things get processed first and then when we reach the javascript code all of the statements

02:06.210 --> 02:12.030
all of the lines of code that were right are processed from top a top down manner.

02:12.130 --> 02:19.950
So in my web browser here I have this page loaded but I need to reload it now that we've modified things

02:20.240 --> 02:27.200
and I can do that by using this button on the reload page button or by pressing F5 in the keyboard.

02:27.360 --> 02:34.770
So I'm going to press five and you'll see that now the javascript go gets executed and I get an alert

02:34.890 --> 02:38.010
box that says hello.

02:38.250 --> 02:40.320
That's one way of including Javascript code.

02:40.500 --> 02:45.090
Now equivalent way is to also use the script tag.

02:45.240 --> 02:50.160
But in this script we're going to specify an external file source attribute

02:53.210 --> 02:59.210
the file that I'll include is going to be in the same folder as index that page the amount and going

02:59.210 --> 03:01.220
to be called a script.

03:01.470 --> 03:09.830
Just it's important to close the stack or to close it in this way not to if you just close it like that.

03:09.870 --> 03:14.250
It's not going to work and it will be close like this.

03:14.550 --> 03:18.980
Now where to place where to place the script tags when you were including files.

03:19.320 --> 03:25.220
It's recommended to wait at the very bottom right before the closing of the body.

03:25.230 --> 03:31.180
The reason being that the page gets loaded top down as I mentioned.

03:31.380 --> 03:37.200
And if you include external files it's going to look for those files before rendering the rest of the

03:37.200 --> 03:37.820
page.

03:37.980 --> 03:44.110
So you always want the page to be rendered for the final use as fast as it can be.

03:44.160 --> 03:50.800
And then behind the scenes it keeps on loading other javascript files.

03:50.880 --> 03:57.200
There are cases when you're using javascript in your body where you need the file that declares that

03:57.250 --> 04:00.000
javascript loaded before hand.

04:00.090 --> 04:05.610
But most cases you're OK with putting this at the end and it's recommended best practice.

04:05.730 --> 04:13.140
It's a different case with style tags with C Ss doesn't it to always be loaded at the beginning because

04:13.260 --> 04:18.950
once the page is rendered in the browser it doesn't get modified by the CSSA changes.

04:18.960 --> 04:22.690
So you want to have the CSSA first and then you render the page.

04:22.860 --> 04:27.130
Now let's create this script that Jarius files because we have that pending still.

04:27.150 --> 04:34.260
So I want to create a new file and I'm going to type in the same code as I type before which is going

04:34.260 --> 04:42.990
to be hello and semicolon at the end and I'm gonna save this in the folder.

04:44.410 --> 04:48.330
Where is the other one was the other file creeps.

04:48.430 --> 04:58.620
Yes and now if I really love the page you'll see that it's loading that external file on it saying hello.

04:58.650 --> 05:04.550
So just to summarize two ways of including javascript they both involve using the script tags.

05:04.800 --> 05:12.300
You can put it in an external file or you can do it directly in your code if Europe including external

05:12.300 --> 05:13.020
files.

05:13.200 --> 05:19.220
It's always recommended to put them at the end of your body except for particular cases.

05:19.230 --> 05:24.290
But 90 percent of the time you're putting them at the end for better performance.
