1 00:00:09,180 --> 00:00:09,840 Hey, everyone. 2 00:00:09,900 --> 00:00:10,770 Welcome back. 3 00:00:11,040 --> 00:00:17,640 Now it's time to start learning JavaScript for real, and the first thing we need to ask ourselves is 4 00:00:17,670 --> 00:00:19,230 why JavaScript? 5 00:00:19,680 --> 00:00:26,100 Well, if you're coming from my ASTM, Allen, CSX course, you know that we can be beautiful Web sites 6 00:00:26,130 --> 00:00:28,140 using these two languages. 7 00:00:29,010 --> 00:00:32,940 So this is the project we're finished in the last section. 8 00:00:33,240 --> 00:00:36,090 This is a beautiful front page of a Web site. 9 00:00:36,240 --> 00:00:37,980 This is hosted online. 10 00:00:38,160 --> 00:00:39,750 It's fully responsive. 11 00:00:39,780 --> 00:00:43,410 It's loading beautifully on mobile devices and all that. 12 00:00:43,680 --> 00:00:45,720 But there's one problem with this page. 13 00:00:45,750 --> 00:00:47,670 This is a static page. 14 00:00:48,060 --> 00:00:54,540 The only thing the users can do if this is just scrolling up and down and clicking on links. 15 00:00:54,720 --> 00:00:58,170 So there's no interaction with JavaScript. 16 00:00:58,580 --> 00:01:05,520 We'll add the layer of interactivity that will make our Web sites much richer in terms of usability. 17 00:01:06,000 --> 00:01:08,280 So I have a few examples here to show you. 18 00:01:08,550 --> 00:01:11,760 So here's the front page of Microsoft's Web site. 19 00:01:12,000 --> 00:01:18,690 So as you can see, we can't navigate through these photos, sliders, and then the content changes. 20 00:01:18,960 --> 00:01:21,150 We can open and close menus. 21 00:01:22,050 --> 00:01:24,600 I have also Apple's Web site here. 22 00:01:25,050 --> 00:01:29,850 So you can create this kind of personalized shopping experience. 23 00:01:29,880 --> 00:01:35,040 So if I change the colors, you can see that the photos change as well. 24 00:01:35,190 --> 00:01:42,450 So this can make your Web site not only much more user friendly, but this can drastically increase 25 00:01:42,450 --> 00:01:43,220 conversion. 26 00:01:43,230 --> 00:01:48,120 So you can sell much more if you have an interactive Web site like this. 27 00:01:48,510 --> 00:01:49,470 If you go down. 28 00:01:49,890 --> 00:01:52,350 We also have a photo slider here. 29 00:01:55,730 --> 00:02:00,140 We can also expand and collapse sections like this. 30 00:02:00,470 --> 00:02:02,480 So here we have a few questions. 31 00:02:03,630 --> 00:02:07,920 So by doing this, we're not overcrowding our page with content. 32 00:02:07,970 --> 00:02:13,680 But if I'm interested in reading this question, I can open it and close it. 33 00:02:13,920 --> 00:02:18,810 So with JavaScript, we are going to make our Web sites fully interactive. 34 00:02:18,930 --> 00:02:22,380 So how do we use JavaScript in our Web site? 35 00:02:22,710 --> 00:02:29,490 Let's go back to the course material and let's try to run some JavaScript code in this page. 36 00:02:29,700 --> 00:02:33,910 So this is the zero one first steps that H.T. Amale. 37 00:02:34,290 --> 00:02:36,120 Let's go to Visual Studio Code. 38 00:02:36,390 --> 00:02:37,860 So I have it right here. 39 00:02:38,800 --> 00:02:41,140 To include JavaScript in this page. 40 00:02:41,410 --> 00:02:48,790 We just need to write the code inside script tags so these tags can be either inside the head element 41 00:02:48,880 --> 00:02:50,560 or the body element. 42 00:02:50,860 --> 00:02:54,160 So let's start by using it inside the head element. 43 00:02:54,310 --> 00:02:57,460 So I'm just going to write a script tag. 44 00:02:58,210 --> 00:03:01,890 So this just looks like any other age to Amelle element. 45 00:03:02,350 --> 00:03:09,970 But the difference is that instead of writing content inside it, we are going to write JavaScript code. 46 00:03:10,330 --> 00:03:14,500 So let's start with the alert comment just to test. 47 00:03:14,860 --> 00:03:15,600 So just write. 48 00:03:15,760 --> 00:03:16,360 Alert. 49 00:03:16,810 --> 00:03:17,680 Open and close. 50 00:03:17,680 --> 00:03:19,570 Parentheses and. 51 00:03:19,960 --> 00:03:21,790 And weave a semicolon. 52 00:03:22,000 --> 00:03:23,820 Don't worry about the syntax. 53 00:03:23,830 --> 00:03:24,700 How do we write? 54 00:03:24,730 --> 00:03:26,350 Why do we need parentheses? 55 00:03:26,380 --> 00:03:29,350 We're going to talk about all this at the moment. 56 00:03:29,380 --> 00:03:32,950 We just want to test writing some JavaScript here. 57 00:03:33,220 --> 00:03:38,620 So this comment is going to show a message on our Web page. 58 00:03:38,830 --> 00:03:41,530 So alert inside the parentheses. 59 00:03:41,950 --> 00:03:44,620 Let's open and close quotation marks. 60 00:03:45,010 --> 00:03:48,220 And inside it, we can write the message we want. 61 00:03:48,460 --> 00:03:52,510 So I'm just going to write testing the alert. 62 00:03:53,590 --> 00:03:54,160 Comment. 63 00:03:55,060 --> 00:04:02,680 I'm going to save this, and if I go back to the Web site and refresh it, you can see that we are already 64 00:04:02,680 --> 00:04:04,930 running Chavez script on our page. 65 00:04:05,380 --> 00:04:10,420 So this is the message that we sent through the alert comment. 66 00:04:10,690 --> 00:04:11,860 Let's click, OK? 67 00:04:12,040 --> 00:04:14,230 And now our page is going to load. 68 00:04:15,760 --> 00:04:19,510 So this is one way of using JavaScript in some cases. 69 00:04:19,540 --> 00:04:22,300 We are going to use it inside the head element. 70 00:04:22,660 --> 00:04:30,970 But normally the most recommended thing in most cases is including it inside the body elements right 71 00:04:31,000 --> 00:04:32,230 before closing it. 72 00:04:32,620 --> 00:04:35,080 So let's go to the end of the body element. 73 00:04:35,830 --> 00:04:36,610 Here it is. 74 00:04:39,610 --> 00:04:41,780 And now right before closing it. 75 00:04:42,080 --> 00:04:45,260 So this is the best place to include the script tags. 76 00:04:45,290 --> 00:04:49,220 This is because we we're going to interact with the elements of our page. 77 00:04:49,460 --> 00:04:55,850 So we want the browser to first render the page, generate all the elements so we can interact with 78 00:04:55,850 --> 00:04:57,280 them using JavaScript. 79 00:04:57,320 --> 00:05:00,590 So this is the best place to put our script tag. 80 00:05:00,860 --> 00:05:08,450 However, writing JavaScript inside this age, the amale file is not the best way of doing this because 81 00:05:08,720 --> 00:05:13,490 then our script is going to grow and this is not going to be very organized. 82 00:05:13,820 --> 00:05:19,430 So the best thing is placing our JavaScript code in separate files. 83 00:05:19,610 --> 00:05:22,590 So instead of doing this, let's go to the J. 84 00:05:22,590 --> 00:05:23,600 S folder. 85 00:05:23,690 --> 00:05:28,010 Right now it's an empty folder, but we can create a new file here. 86 00:05:28,280 --> 00:05:30,920 So I'm going to create a new file called. 87 00:05:32,150 --> 00:05:35,690 Scripts dot j yes, so J. 88 00:05:35,690 --> 00:05:39,150 S is the extension for a JavaScript files. 89 00:05:40,570 --> 00:05:41,500 So here it is. 90 00:05:42,220 --> 00:05:46,880 And now I'm going to cut this comment with Control X. 91 00:05:47,290 --> 00:05:49,840 I'm just going to paste that inside this file. 92 00:05:50,920 --> 00:05:58,660 And if we go back to the browser, nothing is going to happen yet because we don't have any link to 93 00:05:58,660 --> 00:06:00,160 that file yet. 94 00:06:00,490 --> 00:06:03,470 So we are still going to use the script tag. 95 00:06:03,820 --> 00:06:08,680 But instead of writing scripts inside it, we are just going to use it as a link. 96 00:06:09,010 --> 00:06:11,690 So we are going to use the source attribute. 97 00:06:11,950 --> 00:06:13,570 So as our C. 98 00:06:15,280 --> 00:06:19,950 And now we are just going to call the fire that it's inside J. 99 00:06:19,950 --> 00:06:23,070 S slash scripts DOT. 100 00:06:23,090 --> 00:06:23,610 Yes. 101 00:06:24,010 --> 00:06:26,950 So now we can see that this is still working. 102 00:06:27,610 --> 00:06:30,460 So this is how we are going to work from now on. 103 00:06:32,160 --> 00:06:38,250 Now, going back to Visual Studio Code, if you go to the other files, you will see that I already 104 00:06:38,250 --> 00:06:42,540 included a link to this file in all of them. 105 00:06:42,720 --> 00:06:44,370 So you don't have to do it again. 106 00:06:44,700 --> 00:06:49,890 I just left it undone on the first file so we could do together. 107 00:06:50,160 --> 00:06:52,890 But you don't have to worry about this anymore. 108 00:06:53,160 --> 00:06:57,420 All the other files we are going to work from now on already have the link. 109 00:06:57,660 --> 00:07:02,750 So we are ready to start learning a few more JavaScript comments. 110 00:07:03,360 --> 00:07:06,870 I just want to show you one more useful comment that you can use. 111 00:07:06,880 --> 00:07:08,970 So instead of using the alert. 112 00:07:09,980 --> 00:07:11,500 I'm going to copy this. 113 00:07:14,450 --> 00:07:21,560 And I'm going to paste it right after and instead of using alert, I'm just going to use console dot 114 00:07:22,130 --> 00:07:22,640 log. 115 00:07:23,060 --> 00:07:26,960 So this time let's write a different message so we can differentiate. 116 00:07:27,230 --> 00:07:32,200 So testing the console dot log comment. 117 00:07:32,810 --> 00:07:35,240 So let's save this now. 118 00:07:35,240 --> 00:07:36,650 Refreshing the page. 119 00:07:37,010 --> 00:07:45,620 We can see the message sent using the alert comment and to see the message sent using the console dot 120 00:07:45,620 --> 00:07:45,980 log. 121 00:07:46,220 --> 00:07:47,090 We can just right. 122 00:07:47,090 --> 00:07:49,280 Click on the page and go to inspect. 123 00:07:52,850 --> 00:07:58,520 And then if you go to the can so we can see our message being printed right here. 124 00:07:59,060 --> 00:08:03,430 The messages we send to the console are not for the users. 125 00:08:03,440 --> 00:08:05,540 The users are never going to come here. 126 00:08:05,930 --> 00:08:13,310 But this is an extremely useful tool to identify mistakes in our code and to understand what our JavaScript 127 00:08:13,310 --> 00:08:17,570 code is doing as you are going to see in the next few lessons. 128 00:08:18,320 --> 00:08:24,830 So now that we have JavaScript up and running in our Web site, we learned two ways of running it, 129 00:08:25,670 --> 00:08:32,300 using a script tag directly in the agency email file and using an external dot J. 130 00:08:32,310 --> 00:08:33,350 S file. 131 00:08:33,680 --> 00:08:37,280 We just tested to comments so we can see that this is working. 132 00:08:37,550 --> 00:08:43,430 So now in the next video, we're going to talk about some basic JavaScript syntax. 133 00:08:43,670 --> 00:08:44,450 I'll see you then.