1 00:00:02,000 --> 00:00:04,066 Now let's simply see an example, 2 00:00:04,066 --> 00:00:07,666 which should make this clearer for that attached you find 3 00:00:07,700 --> 00:00:08,800 a simple project, 4 00:00:08,800 --> 00:00:12,233 which has? Free folders or 2 folders in one file 5 00:00:12,300 --> 00:00:15,067 assets folder at info folder and index. 6 00:00:15,067 --> 00:00:18,700 HTML file the extra folders and files we see here. 7 00:00:18,700 --> 00:00:21,600 Are just here in my local setup for version control 8 00:00:21,634 --> 00:00:23,167 and for my editor settings. 9 00:00:23,167 --> 00:00:24,600 We can ignore them right? 10 00:00:24,600 --> 00:00:26,000 Now you don't need them, 11 00:00:26,000 --> 00:00:28,534 they're not related to the web page so we get. 12 00:00:28,534 --> 00:00:32,001 3 things in there to folders and the index HTML 13 00:00:32,067 --> 00:00:35,867 file now you can simply double click that index HTML 14 00:00:35,934 --> 00:00:36,301 file. 15 00:00:36,301 --> 00:00:38,501 And it will open up here in a new browser 16 00:00:38,534 --> 00:00:41,034 window where it should at least have not open a 17 00:00:41,101 --> 00:00:41,901 browser window. 18 00:00:41,901 --> 00:00:44,434 And drag the index HTML file into it now. 19 00:00:44,434 --> 00:00:46,201 This is a little dummy page. 20 00:00:46,201 --> 00:00:49,434 I prepared for you. It holds some damning information about 21 00:00:49,501 --> 00:00:50,835 this course in about me, 22 00:00:50,835 --> 00:00:53,835 your instructor all this information is valid by the way. 23 00:00:53,835 --> 00:00:56,301 But of course, we're not building. 24 00:00:56,301 --> 00:00:58,401 This web page here right now. 25 00:00:58,401 --> 00:01:01,135 This is mostly HTML and CSS S or to be 26 00:01:01,202 --> 00:01:01,768 precise. 27 00:01:01,768 --> 00:01:04,335 It's pretty much all HTML and CSS S at this 28 00:01:04,402 --> 00:01:04,768 point, 29 00:01:04,768 --> 00:01:07,368 and you can always go back to these files and 30 00:01:07,435 --> 00:01:08,802 then the assets folder. 31 00:01:08,802 --> 00:01:11,769 You'll find images folder with my image. 32 00:01:11,769 --> 00:01:15,369 You'll find a styles folder with the CSS files and 33 00:01:15,435 --> 00:01:16,402 if you would. 34 00:01:16,402 --> 00:01:18,869 Look into the index HTML file for example, 35 00:01:18,869 --> 00:01:20,302 by right clicking on it, 36 00:01:20,302 --> 00:01:22,269 and opening it with a text editor. 37 00:01:22,269 --> 00:01:25,369 And you can use your text editor on Mac or 38 00:01:25,436 --> 00:01:29,236 the normal notepad or text editor on windows if you 39 00:01:29,302 --> 00:01:31,303 are using text edit on Mac. 40 00:01:31,303 --> 00:01:34,969 Go to preferences here. And on open and save make 41 00:01:35,036 --> 00:01:36,536 sure you check this. 42 00:01:36,536 --> 00:01:40,603 Display HTML files as HTML code instead of formatted text 43 00:01:40,670 --> 00:01:40,970 box. 44 00:01:40,970 --> 00:01:43,770 Then close this and reopen. 45 00:01:43,770 --> 00:01:47,903 With Textedit and there's only applies to Mac here and 46 00:01:47,970 --> 00:01:50,337 you will see the raw HTML code. 47 00:01:51,703 --> 00:01:53,970 So this is a bunch of HTML code here. 48 00:01:53,970 --> 00:01:57,137 But what you won't see in there is anything JavaScript 49 00:01:57,203 --> 00:01:58,537 in this file it's just. 50 00:01:58,537 --> 00:02:02,004 HTML and some imported CSS styles. 51 00:02:02,004 --> 00:02:05,004 This needs to this page and here on this page. 52 00:02:05,004 --> 00:02:08,537 We have these 2 links dynamic interpreted and weekly type 53 00:02:08,604 --> 00:02:11,437 that if you click on any of these links you're 54 00:02:11,504 --> 00:02:12,737 taken to a new page. 55 00:02:12,737 --> 00:02:16,004 Here's the dynamic page where we see a more detailed 56 00:02:16,071 --> 00:02:16,837 explanation. 57 00:02:16,837 --> 00:02:19,337 And here is the weakly typed page. 58 00:02:19,337 --> 00:02:22,071 Now, what we have here is a traditional web page 59 00:02:22,104 --> 00:02:24,538 and what we also have here is a new request 60 00:02:24,604 --> 00:02:25,904 being sent to a server. 61 00:02:25,904 --> 00:02:28,738 If this were served by a server instead of our 62 00:02:28,804 --> 00:02:32,071 local file system and the new page being loaded right 63 00:02:32,105 --> 00:02:34,405 we're always loading a new page here. 64 00:02:34,405 --> 00:02:37,105 Of course, there's nothing wrong with that, 65 00:02:37,105 --> 00:02:40,038 but a more modern way a more user friendly way 66 00:02:40,105 --> 00:02:41,005 of doing that. 67 00:02:41,005 --> 00:02:43,538 Might be to not load a new page here, 68 00:02:43,538 --> 00:02:46,672 but instead to show this piece of information, 69 00:02:46,672 --> 00:02:49,838 maybe in an? Overlay to the existing page. 70 00:02:49,838 --> 00:02:53,539 Such a modal as it's called little pop up like 71 00:02:53,605 --> 00:02:54,172 window, 72 00:02:54,172 --> 00:02:58,505 which gets loaded. As a overlay on this already existing 73 00:02:58,572 --> 00:02:58,972 page, 74 00:02:59,639 --> 00:03:02,806 so that we don't need to fetch a new HTML 75 00:03:02,872 --> 00:03:03,572 page and. 76 00:03:03,572 --> 00:03:05,539 Break the user experience of it, 77 00:03:05,539 --> 00:03:09,006 therefore, but instead that we stay on this existing page 78 00:03:09,072 --> 00:03:11,539 and only tweak it a little bit so we kind 79 00:03:11,606 --> 00:03:12,873 of need to tweak the? 80 00:03:12,873 --> 00:03:15,306 Existing HTML code this code here, 81 00:03:15,306 --> 00:03:18,106 which was loaded by the browser whilst. 82 00:03:18,106 --> 00:03:21,140 We are on the page so without loading a new 83 00:03:21,206 --> 00:03:21,906 HTML file. 84 00:03:22,440 --> 00:03:25,906 That's the idea and that is where JavaScript can help 85 00:03:25,973 --> 00:03:28,973 us and why JavaScript was invented and why it. 86 00:03:28,973 --> 00:03:32,507 Is so important these days be cause any modern website 87 00:03:32,573 --> 00:03:36,673 you visit all these exciting user interactions you have there? 88 00:03:36,673 --> 00:03:39,873 With drop downs with overlays and so on all of 89 00:03:39,940 --> 00:03:43,374 that is driven by JavaScript and we can turn this 90 00:03:43,440 --> 00:03:44,140 page here. 91 00:03:44,140 --> 00:03:46,074 Thank you more exciting page as well, 92 00:03:46,074 --> 00:03:48,507 I prepared something for you. 93 00:03:49,174 --> 00:03:51,241 You might have noticed that in this. 94 00:03:51,241 --> 00:03:54,907 Starting code I provided to you in the assets folder. 95 00:03:54,907 --> 00:03:58,207 You also have a scripts folder with a huge file 96 00:03:58,307 --> 00:04:01,674 dot JS stands for JavaScript and this is how you 97 00:04:01,741 --> 00:04:03,308 store JavaScript code. 98 00:04:03,308 --> 00:04:05,608 In JavaScript now we can of course, 99 00:04:05,608 --> 00:04:08,941 also inspect that file by clicking on open with. 100 00:04:08,941 --> 00:04:11,208 And then also texted it. 101 00:04:11,208 --> 00:04:13,175 And what you see in there. 102 00:04:13,175 --> 00:04:15,608 Is JavaScript code now at this point of time? 103 00:04:15,608 --> 00:04:17,275 Of course you won't understand. 104 00:04:17,275 --> 00:04:19,908 All this code? Maybe you understand none of that, 105 00:04:19,908 --> 00:04:22,575 if you have no previous experience with JavaScript. 106 00:04:22,575 --> 00:04:25,642 And will of course changed it throughout the course will 107 00:04:25,675 --> 00:04:28,508 start at the core basics and you will understand all 108 00:04:28,575 --> 00:04:29,108 this code. 109 00:04:29,108 --> 00:04:31,709 Once we progress throughout the course and of course, 110 00:04:31,709 --> 00:04:33,142 once we completed the course. 111 00:04:33,142 --> 00:04:35,209 But for now, we can just take this code for 112 00:04:35,242 --> 00:04:35,642 granted. 113 00:04:35,642 --> 00:04:38,742 Close this file and ignore it, 114 00:04:39,275 --> 00:04:41,776 and instead. Let's go back to our index. 115 00:04:41,776 --> 00:04:44,442 HTML file to the source code we open here in 116 00:04:44,509 --> 00:04:45,176 the editor. 117 00:04:45,176 --> 00:04:48,576 And below this link here where we import the app 118 00:04:48,642 --> 00:04:50,743 CS as file above the hat here. 119 00:04:50,743 --> 00:04:53,809 Let's add a new HTML tag. 120 00:04:53,809 --> 00:04:57,743 Script. Also, closing tag for it. 121 00:04:57,976 --> 00:05:03,976 And then add a SRC attribute to script here and 122 00:05:04,110 --> 00:05:07,943 point at assets slash scripts, 123 00:05:07,943 --> 00:05:12,143 slash apdj so at. This JavaScript file we just had 124 00:05:12,243 --> 00:05:13,077 a look at. 125 00:05:13,077 --> 00:05:14,977 That alone won't do the trick. 126 00:05:14,977 --> 00:05:17,110 Let's also Scroll down a bit. 127 00:05:17,110 --> 00:05:19,877 And go to these 2 links we have here to 128 00:05:19,943 --> 00:05:23,144 dynamic interpreted and the weekly type link. 129 00:05:23,144 --> 00:05:26,510 Now, Dear. Let's remove that link to info. 130 00:05:26,510 --> 00:05:29,644 Dynamic HTML and add a hash instead. 131 00:05:29,644 --> 00:05:32,944 And instead add a new attribute here. 132 00:05:32,944 --> 00:05:36,477 Data dash text to this anchor tag here equals and 133 00:05:36,544 --> 00:05:39,644 then double quotes and now let's go to the. 134 00:05:39,644 --> 00:05:43,044 Info folder and then to the dynamic HTML file open 135 00:05:43,111 --> 00:05:46,478 that with the text editor and simply grab the text 136 00:05:46,544 --> 00:05:47,744 you have in there. 137 00:05:47,744 --> 00:05:51,478 Between the paragraph tax excluding the paragraph tax. 138 00:05:51,478 --> 00:05:56,878 And copy that. And paste that here between the double 139 00:05:56,978 --> 00:05:57,678 quotes. 140 00:05:57,678 --> 00:06:00,045 Now make sure you get rid of any line breaks. 141 00:06:00,045 --> 00:06:02,645 You might have in their becaus that will not work, 142 00:06:02,645 --> 00:06:04,978 so that this is all one long line of code 143 00:06:05,045 --> 00:06:05,678 in the end. 144 00:06:05,678 --> 00:06:08,678 And they're off to read one more thing to the 145 00:06:08,745 --> 00:06:09,945 anchor tech class. 146 00:06:09,945 --> 00:06:13,779 To add a CSS S class info dash modal? 147 00:06:13,779 --> 00:06:17,445 Now repeat that. We can copy all of these attributes 148 00:06:17,512 --> 00:06:21,379 on the second linked and replace its reference with the 149 00:06:21,446 --> 00:06:23,246 hashtag reference as well. 150 00:06:23,246 --> 00:06:25,512 And the text. We show there should of course, 151 00:06:25,512 --> 00:06:27,679 now be the text we find in the weakly typed. 152 00:06:27,679 --> 00:06:31,013 HTML files if you open that with a text editor, 153 00:06:31,013 --> 00:06:33,313 Let's grab this. Text here, 154 00:06:33,313 --> 00:06:36,946 we find in their copy it. 155 00:06:37,813 --> 00:06:41,746 And also replaced the text here on the second anchor 156 00:06:41,813 --> 00:06:45,280 tag with this text now again make sure you get 157 00:06:45,380 --> 00:06:45,680 rid. 158 00:06:45,680 --> 00:06:49,580 Of any line breaks you might have here. 159 00:06:49,580 --> 00:06:52,347 Becaus these will break your code. 160 00:06:52,347 --> 00:06:55,713 Now, with that let's go back to our script important. 161 00:06:55,713 --> 00:06:59,147 Add one important word here after the SRC attribute and 162 00:06:59,213 --> 00:07:00,914 that's the defer attribute. 163 00:07:00,914 --> 00:07:03,980 This controls how and when this JavaScript code is executed 164 00:07:04,014 --> 00:07:06,447 and I'll dive back into this a little bit later 165 00:07:06,514 --> 00:07:06,914 for now, 166 00:07:06,914 --> 00:07:10,181 let's just add it. Then saved as whole index HTML 167 00:07:10,247 --> 00:07:12,914 file go back to your page and reload it. 168 00:07:12,914 --> 00:07:15,281 By simply clicking the reload I can hear and then 169 00:07:15,347 --> 00:07:16,681 click on one of these links. 170 00:07:16,681 --> 00:07:19,347 And now you will get this nice overlay here, 171 00:07:19,347 --> 00:07:22,614 which you can also close by clicking on that backdrop. 172 00:07:24,048 --> 00:07:26,048 Now, what we have here. 173 00:07:26,048 --> 00:07:31,015 Is knew content which is dynamically added to the existing 174 00:07:31,081 --> 00:07:31,848 web page? 175 00:07:31,848 --> 00:07:36,181 By JavaScript were not loading a new web page here. 176 00:07:36,181 --> 00:07:40,315 Instead, this overlay is shown by JavaScript. 177 00:07:40,315 --> 00:07:43,815 And this of course, is a way better user experience. 178 00:07:43,815 --> 00:07:46,682 Becaus now we don't send the user off to a 179 00:07:46,748 --> 00:07:47,348 new page. 180 00:07:47,348 --> 00:07:48,882 We don't wait for knew. 181 00:07:48,882 --> 00:07:52,882 HTML code to be downloaded which change the existing page. 182 00:07:52,882 --> 00:07:55,849 This is something you see on a lot of modern 183 00:07:55,915 --> 00:07:56,582 web pages. 184 00:07:56,582 --> 00:07:59,515 Because it's faster it's more like in a mobile app 185 00:07:59,582 --> 00:08:02,349 where you also don't have to wait for things to 186 00:08:02,416 --> 00:08:02,949 complete. 187 00:08:02,949 --> 00:08:06,249 And effort this is one of the core reasons why 188 00:08:06,316 --> 00:08:08,316 JavaScript is dad important, 189 00:08:08,316 --> 00:08:10,516 it allows us to make web pages. 190 00:08:10,516 --> 00:08:15,349 More dynamic. So if we come back to that question 191 00:08:15,349 --> 00:08:17,816 of what JavaScript is. 192 00:08:17,816 --> 00:08:20,950 If I quickly dive into the core things we learned 193 00:08:21,016 --> 00:08:22,483 on this previous slide. 194 00:08:22,483 --> 00:08:26,150 JavaScript is a dynamic weakly typed programming language. 195 00:08:26,150 --> 00:08:30,383 It's interpreted language, which means it's compiled on the fly. 196 00:08:30,383 --> 00:08:34,617 It's compiled before it runs and not compiled during development. 197 00:08:34,617 --> 00:08:37,917 As some other programming languages are it's a hosted language 198 00:08:37,983 --> 00:08:39,917 that runs in different environments, 199 00:08:39,917 --> 00:08:41,917 though, thus far in the last example. 200 00:08:41,917 --> 00:08:43,550 We just saw it. Run in the browser, 201 00:08:43,550 --> 00:08:46,117 but I'll come back to our environments in this course 202 00:08:46,150 --> 00:08:47,450 as well. 203 00:08:47,450 --> 00:08:50,051 And the most prominent use cases to case. 204 00:08:50,051 --> 00:08:52,917 We just thought we run code in a browser on 205 00:08:52,984 --> 00:08:55,317 a web page to make it more dynamic. 206 00:08:55,651 --> 00:08:58,217 So now we understand why we use JavaScript and what 207 00:08:58,251 --> 00:08:59,184 it allows us to do, 208 00:08:59,184 --> 00:09:00,384 but what do these turns? 209 00:09:00,384 --> 00:09:06,684 Dynamic weakly typed, and interpreted as well as host language 210 00:09:06,784 --> 00:09:08,318 mean in detail.