WEBVTT 00:00.870 --> 00:04.300 Let's figure out how to write your first JavaScript code. 00:04.590 --> 00:06.660 It's pretty simple and you will see it now. 00:06.960 --> 00:13.470 In order to do that, we need some to end our JavaScript code to estimate that we have different ways 00:13.470 --> 00:14.460 to write JavaScript. 00:15.110 --> 00:20.670 You remember that we have created the folder called JavaScript and also the index estimate extremophile 00:20.670 --> 00:21.550 in previous video. 00:21.990 --> 00:23.640 Let's open it in brackets. 00:25.620 --> 00:29.410 You can see here the very basic structure of HTML documents. 00:29.430 --> 00:33.080 I hope that you already know at least the basics of HDMI. 00:33.420 --> 00:37.350 If you don't, then I recommend to introduce the ABC of that technology. 00:37.980 --> 00:40.320 All right, let's go ahead and run this file. 00:40.440 --> 00:41.100 Google Chrome. 00:43.660 --> 00:49.870 So you can see here on the page the heading, which tells us the title of the lecture, it's written 00:49.870 --> 00:52.770 inside the body elements using H1 in text. 00:53.350 --> 00:56.560 At first let's organise brackets and Browsr nicely. 00:57.840 --> 01:05.070 I like working this way because it saves our time so you can use this technique to to write JavaScript 01:05.070 --> 01:07.500 code, we have to open the script text. 01:08.130 --> 01:11.340 But before that, let's turn off life preview mode. 01:12.430 --> 01:18.800 Because it's very handy when you work on e-mail and access, but now we don't need it, so let's write 01:18.820 --> 01:25.630 script tax, which should be placed above to the closing estimate that we can physically replace them 01:25.630 --> 01:27.360 almost anywhere in HTML. 01:27.400 --> 01:33.340 But this one is the best practice that helps browser to load Web page. 01:33.340 --> 01:41.380 Foser this way is called inline method because we write JavaScript and HTML in the same file. 01:41.980 --> 01:42.600 That's right. 01:42.610 --> 01:44.410 Our very first line of code. 01:44.980 --> 01:46.030 Cancel that log. 01:46.840 --> 01:48.070 And Hello World. 01:51.410 --> 01:55.320 Now, open the counsel tab, I hope you remember how to do that. 01:55.340 --> 01:56.360 There are three ways. 01:57.020 --> 02:02.030 Let's use one of them, click on Inspect and you can see the text. 02:02.210 --> 02:03.140 Hello, world. 02:04.520 --> 02:13.140 You can also notice you're on the right side, that this text is placed on the 11th line in Ed Consul 02:13.160 --> 02:18.770 Tab is the great tool for testing, debugging the applications and for getting the results and outputs 02:19.250 --> 02:22.280 throughout the course will be working in Castlebury frequently. 02:23.360 --> 02:23.870 All right. 02:24.350 --> 02:27.110 Let's figure out how actually the code works. 02:27.830 --> 02:35.150 When we launched the documents, browser can read the content of HTML, but to read and execute JavaScript 02:35.150 --> 02:37.870 code, it needs something to translate it. 02:38.420 --> 02:43.340 Imagine that you can't understand the foreign language and your friend is helping to translate the language. 02:43.790 --> 02:50.300 Browser has such front, which is JavaScript engine and it's already built in browsers. 02:50.830 --> 02:52.220 Let's explain it deeper. 02:52.790 --> 02:57.860 Browser is reading HTML code line by line when it switches to script. 02:57.860 --> 03:04.280 Text browser understands that the content inside script text is not any more HTML and it caused the 03:04.280 --> 03:05.420 engine to translate. 03:05.430 --> 03:07.760 It makes sense. 03:09.080 --> 03:09.530 All right. 03:10.850 --> 03:16.930 The next way to write JavaScript is an external method, we need to create another file in our folder, 03:17.090 --> 03:19.100 let's call it cryptologists. 03:19.910 --> 03:23.570 The extension of JavaScript files should be Duchesse. 03:24.380 --> 03:29.400 In order to connect JavaScript file to HTML, we need to create the link between them. 03:29.870 --> 03:30.800 Let's do that. 03:31.010 --> 03:36.290 Delete this line of code because we don't need it anymore than inside. 03:36.290 --> 03:40.850 The opening script tag indicates the directory of cryptologist file. 03:41.600 --> 03:46.730 For that we have to use source, attribute and the path of JavaScript file. 03:49.170 --> 03:53.200 Now open this cryptologist file and write the same code here. 03:54.120 --> 03:55.030 Castle, good luck. 03:55.920 --> 03:56.790 Hello, world. 03:59.520 --> 04:04.290 Reload the page and you can see that we've got the same hello, Walt. 04:05.260 --> 04:11.380 You can use either in line or external methods, both work fine, but the second one is better practice 04:11.380 --> 04:12.780 because it's more organized. 04:12.790 --> 04:19.990 And when you need, for example, the same JavaScript code for multiple pages, you can write it once 04:20.410 --> 04:24.510 and then link the JavaScript file to all Actimel pages. 04:26.260 --> 04:31.510 All right, so in this election, we have learned how to write JavaScript using inline and external 04:31.510 --> 04:31.930 methods. 04:32.380 --> 04:34.800 Also, we have discussed how the process works. 04:35.230 --> 04:36.190 So let's move on.