1 00:00:00,720 --> 00:00:06,000 All right guys so before we get started I just want to explain that this section is basically the javascript 2 00:00:06,000 --> 00:00:07,470 language from scratch. 3 00:00:07,590 --> 00:00:12,660 So if you're not new to javascript you're going to know a lot of these concepts but I'd still suggest 4 00:00:12,660 --> 00:00:18,060 watching them maybe even with double speed on even if you know this stuff a refresher isn't going to 5 00:00:18,060 --> 00:00:18,700 hurt. 6 00:00:18,720 --> 00:00:25,110 We're going to talk about data types conversion functions loops arrays object literals all the core 7 00:00:25,110 --> 00:00:26,840 fundamentals of the language. 8 00:00:26,970 --> 00:00:29,420 OK we're going to work in the console for the most part. 9 00:00:29,430 --> 00:00:35,610 And then in the next section we'll start on the document object model and working in the UI with events 10 00:00:35,640 --> 00:00:36,750 and so on. 11 00:00:36,750 --> 00:00:41,280 So what I want to do first is just set up our sandbox which is very simple it's just going to be in 12 00:00:41,280 --> 00:00:48,510 each team all file and a javascript file and I'll go over how to include internal script tags as well 13 00:00:48,540 --> 00:00:52,560 as how to link an external javascript file with script tags. 14 00:00:52,560 --> 00:00:52,860 All right. 15 00:00:52,860 --> 00:00:55,830 So let's go ahead and jump in and get started. 16 00:00:55,830 --> 00:01:00,900 All right so I'm on my desktop we already have Visual Studio code installed and that's the text editor 17 00:01:00,900 --> 00:01:02,100 that I'll be using. 18 00:01:02,100 --> 00:01:09,380 So what I'm going to do is create a new folder here and going to call it J.S. underscore sandbox. 19 00:01:09,390 --> 00:01:12,400 OK and this is what we're going to work in for quite a while. 20 00:01:12,540 --> 00:01:17,230 So I'm going to open it with Visual Studio code by right clicking and saying open with code. 21 00:01:17,340 --> 00:01:23,000 But if you're not using this text editor just open up this folder in whatever you're using. 22 00:01:23,010 --> 00:01:23,340 All right. 23 00:01:23,350 --> 00:01:29,080 And going to just close the welcome screen up and you can see we have an empty sandbox folder over here. 24 00:01:29,310 --> 00:01:34,920 So I'm just going to create two files one is indexed on aged himself and then I'm also going to create 25 00:01:34,920 --> 00:01:36,170 one called out. 26 00:01:36,300 --> 00:01:36,910 Yes. 27 00:01:36,930 --> 00:01:40,640 OK so that's what I'm going to choose to call my main javascript file. 28 00:01:40,650 --> 00:01:41,000 All right. 29 00:01:41,010 --> 00:01:46,860 Now in the index each time we're going to create a basic structure Visual Studio code includes Emett 30 00:01:46,860 --> 00:01:52,530 by default which allows me to use shortcuts and I can just do an exclamation tab and that'll give me 31 00:01:52,530 --> 00:01:56,620 this basic aged him structure with head and body tags. 32 00:01:56,640 --> 00:01:56,880 All right. 33 00:01:56,880 --> 00:02:02,470 So I'm just going to change the title here to javascript sandbox. 34 00:02:02,470 --> 00:02:05,820 I am going to say This is Section 2. 35 00:02:06,120 --> 00:02:11,690 And then I'm going to put an H one down here and put the same thing. 36 00:02:11,700 --> 00:02:14,400 So I'll just say javascript sandbox. 37 00:02:14,550 --> 00:02:16,350 Section 2. 38 00:02:16,350 --> 00:02:16,690 All right. 39 00:02:16,710 --> 00:02:19,990 Now I'm going to save this and I'm using Live server. 40 00:02:20,040 --> 00:02:23,730 As you saw me set up back in the environment set up video. 41 00:02:23,850 --> 00:02:29,610 So I'm going to go ahead and right click and say open with live server that's going to go ahead and 42 00:02:29,610 --> 00:02:32,060 open open this up in a browser. 43 00:02:32,160 --> 00:02:37,080 You can see the H-1 I can open up my console in the browser with F 12. 44 00:02:37,140 --> 00:02:39,830 And we're going to go over the console and the next video. 45 00:02:40,080 --> 00:02:46,080 But what I want to do now is just show you how to insert javascript into your h tim file. 46 00:02:46,080 --> 00:02:52,200 All right so you can do two things you can do it inside the H Tim Allen file or you can link to an external 47 00:02:52,200 --> 00:02:53,990 file like our app. 48 00:02:54,040 --> 00:02:54,770 Yes. 49 00:02:54,780 --> 00:03:01,770 So if I were to just put in script tags here I could actually run javascript so I could say like Alert 50 00:03:02,640 --> 00:03:06,900 which is a window function that will just show a pop up with whatever I've put in here. 51 00:03:06,900 --> 00:03:13,590 So if I say hello and I save that you'll see that it'll automatically run now it automatically runs 52 00:03:13,590 --> 00:03:16,120 when I save because I'm using live server. 53 00:03:16,140 --> 00:03:21,500 If you're not using something like that you'll have to reload the page in order for it to run. 54 00:03:21,690 --> 00:03:22,080 OK. 55 00:03:22,080 --> 00:03:25,770 Now this is this putting a script tag in your age. 56 00:03:25,800 --> 00:03:31,190 I wouldn't recommend unless it's maybe one or two lines of javascript that you're using. 57 00:03:31,350 --> 00:03:33,780 So we're not going to do that for this course. 58 00:03:33,810 --> 00:03:35,610 We're going to go ahead and link to our app. 59 00:03:35,670 --> 00:03:36,330 Yes. 60 00:03:36,510 --> 00:03:44,640 By just putting in script tags and then setting source SIRC equal to app dot J.S.. 61 00:03:44,670 --> 00:03:44,970 All right. 62 00:03:44,970 --> 00:03:53,660 Now if we had the javascript file in another folder like a J folder we'd have to say J.S. slash app. 63 00:03:53,710 --> 00:03:54,450 J.S. Right. 64 00:03:54,450 --> 00:03:58,400 But since it's in the same directory or the same folder we don't have to do that. 65 00:03:58,680 --> 00:03:59,610 So let's save it. 66 00:03:59,640 --> 00:04:04,310 Let's go to app J.S. and let's try out an alert. 67 00:04:04,770 --> 00:04:06,600 So we'll say Alert. 68 00:04:07,060 --> 00:04:10,330 Well say hello world and save and it runs. 69 00:04:10,320 --> 00:04:13,310 And now we know that app Chasse's linked. 70 00:04:13,320 --> 00:04:18,930 All right so now we have our little sandbox to work in the next video we're going to explore the Google 71 00:04:18,930 --> 00:04:20,490 Chrome console.