1 00:00:02,060 --> 00:00:03,830 So we want to write some script code 2 00:00:03,960 --> 00:00:08,640 and as I mentioned already, you got the vendor.js file which you could name however you want, 3 00:00:08,640 --> 00:00:13,770 I just named it like this to make it clear that I provide this to you and you don't really need to care 4 00:00:13,770 --> 00:00:14,480 about it. 5 00:00:14,640 --> 00:00:18,600 So we could add our code in that file but actually, we won't 6 00:00:18,810 --> 00:00:23,670 and instead I'll create a separate brand new file next to it which I'll name app.js 7 00:00:23,690 --> 00:00:26,940 Now you can also name this file however you want, 8 00:00:26,940 --> 00:00:33,780 I'll name it app.js because it will drive our simple front-end browser based application we're building 9 00:00:33,780 --> 00:00:34,230 here 10 00:00:34,230 --> 00:00:41,430 but you could name it my-script.js or just script.js or whatever you want. 11 00:00:41,430 --> 00:00:46,860 The only thing that matters here is the file extension which should of course be .js because it will 12 00:00:46,860 --> 00:00:49,390 hold Javascript code. 13 00:00:49,560 --> 00:00:57,450 Now that's the script file we'll work on and that's the file where we will add our calculator logic. 14 00:00:57,750 --> 00:01:04,530 Now to get started and see that this works, let's start very simple and simply add in an alert where 15 00:01:04,530 --> 00:01:06,440 we say this works. 16 00:01:06,510 --> 00:01:11,490 Now you might not fully understand what's happening here, what this alert thing means, what these parentheses 17 00:01:11,490 --> 00:01:17,160 mean, what the single quotes here mean and we'll explore all of that throughout this module but just enter 18 00:01:17,160 --> 00:01:26,490 this for the moment and then go back to your page and reload and what you'll see is that nothing happens. 19 00:01:26,640 --> 00:01:33,000 Well the reason for that is that of course I added my script file here but the default behavior of the 20 00:01:33,000 --> 00:01:41,220 browser is not to scan all subfolders next to my HTML file which I loaded for scripts which 21 00:01:41,220 --> 00:01:42,450 it could execute, 22 00:01:42,450 --> 00:01:48,600 that would be a horrible default behavior because it would mean that we can't control when which of 23 00:01:48,600 --> 00:01:52,050 our scripts runs and we want to control that, 24 00:01:52,050 --> 00:01:56,910 So of course it's good that the browser doesn't load and execute our script by default 25 00:01:57,030 --> 00:02:02,770 but how can we tell the browser that it should load and execute that script? There are a couple of ways 26 00:02:02,770 --> 00:02:05,130 of importing Javascript, now 27 00:02:05,140 --> 00:02:12,200 the first way of importing it is to go to the HTML file and in there, like here in the head section 28 00:02:12,210 --> 00:02:19,120 let's say, you can add a script opening and closing tag and you can add Javascript between those script 29 00:02:19,120 --> 00:02:21,060 tags. So we could write alert, 30 00:02:21,100 --> 00:02:26,830 this works between script tags in here, so the alert function 31 00:02:26,830 --> 00:02:29,950 just as I used it in app.js but not in 32 00:02:29,950 --> 00:02:30,330 app.js 33 00:02:30,360 --> 00:02:32,770 between the script tags here. 34 00:02:32,860 --> 00:02:39,400 If we do that and I reload this page, you see before the page loads, I already see that alert indeed and 35 00:02:39,400 --> 00:02:44,030 I can click OK and confirm this and now the rest of the page loads. 36 00:02:44,050 --> 00:02:46,010 Now that's one way of doing it. 37 00:02:46,060 --> 00:02:52,570 Now you can of course throw in some script code here into your HTML file but the downside with that 38 00:02:52,570 --> 00:03:00,100 is that the longer your script gets, the longer this HTML file gets and this is not necessarily a 39 00:03:00,160 --> 00:03:07,210 technical issue but one issue it might be is that for you, it gets harder to manage your 40 00:03:07,210 --> 00:03:07,750 website. 41 00:03:07,810 --> 00:03:12,940 If all your script and all your HTML is in one file, then this file gets very big and if you then 42 00:03:12,940 --> 00:03:17,730 ever need to change something in there, be that Javascript or be that HTML, 43 00:03:17,740 --> 00:03:22,120 you need to scroll through all the content here and find the part you want to change. 44 00:03:22,180 --> 00:03:29,200 So putting your scripts in there is typically not the best idea unless it's a very short script, 45 00:03:29,230 --> 00:03:36,370 instead you typically want to import your script and therefore you add a source attribute, src to 46 00:03:36,370 --> 00:03:42,520 the script tags and then between double quotes typically, single quotes or no quotes at all would also 47 00:03:42,520 --> 00:03:45,400 work to some extent but typically use double quotes, 48 00:03:45,400 --> 00:03:48,650 you point at the location of your script file. 49 00:03:48,700 --> 00:03:55,090 So in my case here, I point that the assets folder by adding assets, then a slash to kind of go into that 50 00:03:55,090 --> 00:04:00,730 folder or to tell the browser to look into that folder and then there, we want to go into the scripts 51 00:04:00,850 --> 00:04:01,890 folder right 52 00:04:01,900 --> 00:04:08,220 which is a folder we have in there and then go into that folder and then load the app.js file, 53 00:04:08,230 --> 00:04:13,540 that's what we want to tell the browser, it should go in there and load the app.js file. 54 00:04:13,720 --> 00:04:16,780 Now important, you still need a closing script tag here, 55 00:04:16,780 --> 00:04:21,050 you must not have a self-closing script tag like you have it for the link, 56 00:04:21,130 --> 00:04:25,990 that's not supported for script tags, you must have opening and closing separate 57 00:04:25,990 --> 00:04:27,100 script tag. 58 00:04:27,400 --> 00:04:32,980 And now with that indeed, you should see that when I reload the page again we see just this works from 59 00:04:32,980 --> 00:04:34,150 this file, 60 00:04:34,150 --> 00:04:38,400 so if I go back and reload this page indeed we see this works 61 00:04:38,560 --> 00:04:41,910 and if I confirm this, the rest of the page loads. 62 00:04:42,130 --> 00:04:45,010 So that's how we can import a script. 63 00:04:45,010 --> 00:04:51,700 One problem we're facing here is that this blocks the rendering of the page until the script is done 64 00:04:51,700 --> 00:04:56,560 and in the case of an alert, the script is really only done when the user confirmed the alert, 65 00:04:56,590 --> 00:05:02,320 so when we close the alert. To make sure that the page loads first, we can do one simple thing - 66 00:05:02,470 --> 00:05:08,350 we can take the script, take it out of the head here and move it to the end of the body so that the browser 67 00:05:08,350 --> 00:05:15,250 has a chance of first parsing all the HTML code and finishing that rendering before it executes our script 68 00:05:15,640 --> 00:05:19,230 and later, I'll show you an alternative strategy to that as well 69 00:05:19,240 --> 00:05:23,020 but for the moment we can do that. If I now save this and we now reload, 70 00:05:23,020 --> 00:05:27,700 you see first everything renders, then we can click OK and then it finishes. 71 00:05:27,700 --> 00:05:32,270 Now actually, the font only came in after but that's something we can work on later, 72 00:05:32,380 --> 00:05:37,480 for the moment, this is better than what we had before because at least a majority of this file is now 73 00:05:37,480 --> 00:05:43,680 done loading before the script executes and blocks the browser from finishing this up. 74 00:05:43,870 --> 00:05:46,060 So that's the basic setup we'll work with, 75 00:05:46,150 --> 00:05:53,320 now we will also depend on the code I run here in the vendor.js file and therefore you should import 76 00:05:53,320 --> 00:05:59,800 that as well and you should import it before you import the app.js file because the code you write 77 00:05:59,830 --> 00:06:06,940 in the app.js file will depend on the code in the vendor.js file and the order does matter in Javascript, 78 00:06:07,330 --> 00:06:11,990 so we have to import the thing we depend on before we use it. 79 00:06:12,040 --> 00:06:19,930 So we first import, from our assets folder, scripts folder, vendor.js and then you have your import to 80 00:06:19,990 --> 00:06:26,080 app.js so that in the app.js file, we can actually work with the things that are happening in here 81 00:06:26,170 --> 00:06:29,680 even though we don't fully understand what's happening in there yet. 82 00:06:30,100 --> 00:06:36,420 So that's the finished import setup we need, now with the importing done, 83 00:06:36,430 --> 00:06:40,330 we can dive into actually writing some Javascript code.