1 00:00:00,570 --> 00:00:01,710 Welcome back, ladies and gentlemen. 2 00:00:01,740 --> 00:00:04,350 Today, we're going to start a new chapter is called JavaScript Steller. 3 00:00:04,350 --> 00:00:05,880 That's a code name that I use. 4 00:00:06,180 --> 00:00:07,080 It's not connected. 5 00:00:07,080 --> 00:00:08,790 Nothing is connected with the language. 6 00:00:09,060 --> 00:00:16,920 So make sure that you grab the starter file and you're going to have final file in your place. 7 00:00:17,100 --> 00:00:21,030 But grab the starter, put it on the desktop, fire up the. 8 00:00:21,660 --> 00:00:23,010 Let me just close this one. 9 00:00:24,270 --> 00:00:32,190 Um, yeah, let me just close the entire one and just started from the beginning, so open up your Vaskov, 10 00:00:32,610 --> 00:00:38,900 go to desktop, get these starter and inside you're going to have the index file in the lecture one. 11 00:00:39,180 --> 00:00:45,150 Now, make sure that you grab this lecture from your finished finished files, because I'm going to 12 00:00:45,150 --> 00:00:48,390 talk about all of this, and I don't want to waste your time writing it. 13 00:00:48,660 --> 00:00:49,010 Okay. 14 00:00:49,590 --> 00:00:50,190 And right. 15 00:00:50,190 --> 00:00:52,290 Click open with live server. 16 00:00:52,590 --> 00:00:56,070 Make sure that you do have the connection there in in this chapter. 17 00:00:56,070 --> 00:01:01,500 We still going to talk about ESX features in a new features as well, but I didn't want to continue 18 00:01:01,620 --> 00:01:03,440 in that advance section part. 19 00:01:03,450 --> 00:01:05,070 OK, that's the only reason. 20 00:01:05,610 --> 00:01:08,910 And let's talk about what we're going to do today. 21 00:01:08,910 --> 00:01:10,740 Today, we're going to start about Jason. 22 00:01:10,890 --> 00:01:16,110 Some of you know what this Jason is, but please do it again with me. 23 00:01:16,230 --> 00:01:19,260 OK, so Jason is JavaScript object notation. 24 00:01:19,830 --> 00:01:26,520 We use JSON when we want to send data from our site, browser or client side to the server side. 25 00:01:27,240 --> 00:01:32,900 So we use that because we cannot send data through the wire as we want. 26 00:01:32,910 --> 00:01:39,570 For example, I can send JavaScript objects through the wire with HDTV requests. 27 00:01:39,720 --> 00:01:44,850 And so and I imagine that the server will understand what I was trying to do. 28 00:01:44,850 --> 00:01:48,120 So you can't send anything through the wire. 29 00:01:48,120 --> 00:01:52,050 You can send only things that are in Jason the format. 30 00:01:52,110 --> 00:01:57,450 So we need this Jason format because basically Jason is a text now. 31 00:01:57,450 --> 00:02:00,990 Jason is text built on that JavaScript object notation. 32 00:02:00,990 --> 00:02:01,230 Why? 33 00:02:01,230 --> 00:02:03,570 I'm saying JavaScript object notation. 34 00:02:03,870 --> 00:02:05,430 Well, look at here. 35 00:02:05,550 --> 00:02:06,630 This is the example. 36 00:02:08,220 --> 00:02:16,620 Look how the Jason example is very, very similar or resembles to what JavaScript object is. 37 00:02:17,010 --> 00:02:22,060 Now, one more difference here is that we need to use double quotes instead of single quotes. 38 00:02:22,080 --> 00:02:23,050 Remember this. 39 00:02:23,330 --> 00:02:24,950 Everything should be a string. 40 00:02:25,200 --> 00:02:31,260 OK, now in our JavaScript object, we can use single or double quotes. 41 00:02:31,470 --> 00:02:33,000 Doesn't matter, but. 42 00:02:34,020 --> 00:02:37,780 Look, it is so it is very close to what we are familiar. 43 00:02:37,950 --> 00:02:40,200 So this is an array of students. 44 00:02:40,320 --> 00:02:46,300 OK, so we have a first name and then we have or you can say key value pairs. 45 00:02:46,320 --> 00:02:47,940 OK, that's pretty much it. 46 00:02:47,970 --> 00:02:50,940 So we have three different objects inside. 47 00:02:51,150 --> 00:02:51,570 Nice. 48 00:02:51,930 --> 00:02:58,260 So that this is the example and everything needs to be shrink wrapped in double quotes. 49 00:02:58,470 --> 00:03:00,840 Jason is a text and why Jason. 50 00:03:01,840 --> 00:03:03,320 Well, let me show you this. 51 00:03:03,330 --> 00:03:07,890 Well, Jason can be read by all of the languages on the server side. 52 00:03:08,740 --> 00:03:09,100 Right. 53 00:03:09,250 --> 00:03:16,920 I'm not going to give you images here today, because it was it's not important for that. 54 00:03:17,080 --> 00:03:24,150 So that is why we use Jason, because Jason can be read on the server side. 55 00:03:24,340 --> 00:03:28,060 So on the server side, there are different languages like Python go. 56 00:03:29,620 --> 00:03:33,000 So they will understand when they get this Jason format. 57 00:03:33,220 --> 00:03:38,290 So they're going to convert it back to their own language and they can use it. 58 00:03:38,830 --> 00:03:44,230 That's why we can't send straight JavaScript code through the wire to the server. 59 00:03:44,310 --> 00:03:45,310 That's not going to happen. 60 00:03:45,490 --> 00:03:50,860 It's not going to allow us to do that because we need to follow some standard now. 61 00:03:52,180 --> 00:04:00,310 Another thing that we can use is still can use is called XML, so Jason and XML, they're used so we 62 00:04:00,310 --> 00:04:01,240 can send data. 63 00:04:02,340 --> 00:04:06,750 Right now, this is a little bit outdated, but it's still being used. 64 00:04:07,320 --> 00:04:14,080 So here is a boat, Jason and similar used to transfer data and look at the structure of the Ximo. 65 00:04:14,370 --> 00:04:17,130 So this is like the military structure, right? 66 00:04:17,340 --> 00:04:19,860 It resembles the female in this one. 67 00:04:20,070 --> 00:04:21,810 It resembles the JavaScript. 68 00:04:22,620 --> 00:04:28,060 OK, and we're going to stick with that now how what are the steps? 69 00:04:28,440 --> 00:04:30,440 For example, we are in The Blind Side. 70 00:04:30,450 --> 00:04:31,470 This is the browser. 71 00:04:31,650 --> 00:04:32,820 We have a form here. 72 00:04:32,820 --> 00:04:34,260 We just tried to submit something. 73 00:04:34,590 --> 00:04:42,200 We just try to log in using our email and password and that data through Jason travels to the server. 74 00:04:42,480 --> 00:04:48,060 Now, the servers will OK, use their language, convert that data, for example. 75 00:04:48,060 --> 00:04:54,390 We just want to log in, check that we are we have the right credentials and shoot the response back 76 00:04:54,390 --> 00:04:55,350 to the client. 77 00:04:56,040 --> 00:04:58,710 And that response, again, is in Jason format. 78 00:04:59,250 --> 00:04:59,610 Right. 79 00:05:00,150 --> 00:05:03,750 So I'm going to show you just real quick. 80 00:05:03,960 --> 00:05:07,590 I'm going to pause this one and everything will be clear. 81 00:05:08,460 --> 00:05:11,540 So I wasn't planning to include image here, but this is what we do. 82 00:05:11,820 --> 00:05:14,310 So here, imagine we have a login form. 83 00:05:14,550 --> 00:05:19,530 We try to put our credentials here and we send the data into JSON format. 84 00:05:19,530 --> 00:05:22,170 This is what you need to understand now. 85 00:05:23,100 --> 00:05:31,560 The browser, the server, they can be a different language or to be python go or be. 86 00:05:31,560 --> 00:05:33,690 So they going to see this Jason format. 87 00:05:33,690 --> 00:05:42,000 They're going to translate it to whatever they want to whatever language they they have in that request. 88 00:05:42,420 --> 00:05:47,670 They going to do something with that request and they're going to send us back a response with the status 89 00:05:47,670 --> 00:05:48,660 quo, 200. 90 00:05:48,960 --> 00:05:52,680 But the response that they're going to send is going to be a back to Jason format. 91 00:05:53,250 --> 00:05:56,100 But on this side, on the client side, we have JavaScript. 92 00:05:56,100 --> 00:05:57,600 We don't understand this, Jason. 93 00:05:58,080 --> 00:06:00,360 So that is the whole process. 94 00:06:00,450 --> 00:06:06,680 So we need to do something here to convert it back to our Jason, to our JavaScript object. 95 00:06:06,690 --> 00:06:06,940 Right. 96 00:06:07,180 --> 00:06:09,600 So, Jason, we can convert it back to JavaScript. 97 00:06:09,840 --> 00:06:13,410 So these are the steps that I'm going to show you now. 98 00:06:13,680 --> 00:06:16,470 I'm going to do it like this on the first, I'm going to say. 99 00:06:17,960 --> 00:06:25,340 Client side, so this is client side, right, convert 100 00:06:27,680 --> 00:06:28,580 JavaScript. 101 00:06:33,420 --> 00:06:35,610 Object to Jason format, right? 102 00:06:36,150 --> 00:06:39,730 So this is the phase that when we try to send some data. 103 00:06:40,170 --> 00:06:45,840 OK, so that is number one and let's create an object called student. 104 00:06:46,080 --> 00:06:50,340 And this object will have same as our example here. 105 00:06:50,340 --> 00:06:51,510 First name and last name. 106 00:06:51,540 --> 00:06:53,800 OK, I just want to make consistent. 107 00:06:54,000 --> 00:06:55,140 So first name. 108 00:06:57,890 --> 00:07:06,240 And let's put it here, Andy, look, with objects, we can use single quotes, but not with weed. 109 00:07:06,290 --> 00:07:07,140 Jason Right. 110 00:07:07,580 --> 00:07:08,500 So last name. 111 00:07:09,410 --> 00:07:11,330 Let's do it, Garcia. 112 00:07:12,570 --> 00:07:12,900 Cool. 113 00:07:13,740 --> 00:07:22,680 So what I need to use now here, I can't just simply send this data because it's easy JavaScript object 114 00:07:23,040 --> 00:07:24,240 straight to the servers. 115 00:07:24,330 --> 00:07:36,850 So first thing that I want to do so before sending the data, I need to convert to Jason format. 116 00:07:38,130 --> 00:07:39,560 Now, how I will do that? 117 00:07:39,870 --> 00:07:43,320 So there is a method called String ifI. 118 00:07:46,360 --> 00:07:52,540 Let's use this one, so I'm going to create Consed, I'm going to create student. 119 00:07:53,380 --> 00:07:59,180 And I'm going to say, Jason, here like this, and I'm going to say, Jason, that string, if I say 120 00:07:59,190 --> 00:08:06,010 I can use this method and I'm going to pass the student object here just to make sure that everything 121 00:08:06,010 --> 00:08:09,520 is working, just comes along the student object. 122 00:08:12,130 --> 00:08:19,510 Jason Sarina's student, not student object, I need to put this one, Jason, now back in my Google 123 00:08:19,510 --> 00:08:19,930 here. 124 00:08:22,610 --> 00:08:28,560 So here it is, I do have our Jason format, right, cool. 125 00:08:28,940 --> 00:08:36,610 So now you know that in our side, a client side we can use before sending something right before sending 126 00:08:36,620 --> 00:08:41,630 we can use this, Jason, the string, if I and then we can send this data to the servers. 127 00:08:42,050 --> 00:08:42,310 Cool. 128 00:08:42,330 --> 00:08:43,280 Cuz now. 129 00:08:44,860 --> 00:08:46,160 That is the first step. 130 00:08:46,750 --> 00:08:52,050 So let's do what the server will respond back to us. 131 00:08:52,540 --> 00:08:56,370 So when they get to the server, they will do whatever they do with this data. 132 00:08:56,560 --> 00:09:03,330 For example, it's for logging and they will get back us, this student, for example. 133 00:09:03,670 --> 00:09:07,090 Let's imagine that they're going to return the same credentials and it's not going to happen. 134 00:09:07,090 --> 00:09:12,580 But they're going to return some data back to us because we're sending something and they just going 135 00:09:12,580 --> 00:09:14,140 to return now. 136 00:09:15,010 --> 00:09:17,610 They're going to return adjacent to the server. 137 00:09:17,620 --> 00:09:18,100 So No. 138 00:09:18,100 --> 00:09:20,590 Two server. 139 00:09:22,660 --> 00:09:23,770 Will return. 140 00:09:24,990 --> 00:09:34,740 Back data to the client in Jason format, so basically here we need to do opposite of this. 141 00:09:35,130 --> 00:09:44,580 So we need to convert, convert the Jason format to JavaScript object. 142 00:09:45,870 --> 00:09:50,160 And for that reason, we need to use a method called pass. 143 00:09:53,820 --> 00:10:00,470 Pass, so let's create a new object student object, right? 144 00:10:00,960 --> 00:10:03,310 Make sure there is a different name to this one. 145 00:10:03,690 --> 00:10:09,870 So we're going to say, Jason pass and we're going to pass this student, Jason. 146 00:10:09,870 --> 00:10:13,500 Right, because that is the Jason format that we have at the moment. 147 00:10:13,800 --> 00:10:24,030 So this should transform this this Jason format back to JavaScript object so we can do a different manipulation. 148 00:10:24,300 --> 00:10:27,420 So cancel that log, these student. 149 00:10:30,030 --> 00:10:32,550 Object, not Jason. 150 00:10:34,140 --> 00:10:35,830 Object, very good. 151 00:10:35,850 --> 00:10:36,250 Save it. 152 00:10:37,470 --> 00:10:37,990 Let's see. 153 00:10:38,310 --> 00:10:39,000 There you go. 154 00:10:39,030 --> 00:10:46,300 Now we have the student student back to us as here JavaScript object. 155 00:10:46,340 --> 00:10:49,670 So the first one is in JSON format, right? 156 00:10:50,620 --> 00:10:57,460 So when we tried to send something through the wire, we always use we always need to convert that to 157 00:10:57,460 --> 00:11:04,120 Jason format because the server will not understand any other things except ximo OK in the server will 158 00:11:04,120 --> 00:11:10,270 give us a response back to with the status quo, do OK and this data back, it's going to be again through 159 00:11:10,270 --> 00:11:12,220 wires but with Jason format. 160 00:11:12,370 --> 00:11:13,930 So we need to fix that here. 161 00:11:14,110 --> 00:11:16,450 So how we fix it, we'll be passing it back. 162 00:11:16,720 --> 00:11:23,020 So we saying OK, this is in Jason format, let's do it again, let's convert it back to JavaScript 163 00:11:23,020 --> 00:11:28,690 because in a client site we can use JavaScript, the client side, we have JavaScript, we have HTML, 164 00:11:28,690 --> 00:11:30,940 we have Sears's here in the server. 165 00:11:30,940 --> 00:11:32,890 We can have any programming language. 166 00:11:33,130 --> 00:11:33,430 Right. 167 00:11:34,350 --> 00:11:37,580 That is what I need to explain about Jason. 168 00:11:38,040 --> 00:11:43,320 It's a JavaScript object notation so we can use JSON or XML to send data through wires. 169 00:11:43,590 --> 00:11:47,140 But I'm not going to teach you XML because it's outdated. 170 00:11:47,700 --> 00:11:48,690 It's still being used. 171 00:11:49,080 --> 00:11:52,850 But this Jason is pretty much OK, not OK. 172 00:11:52,850 --> 00:11:55,720 But it's great because it's using JavaScript notation. 173 00:11:55,740 --> 00:11:57,410 It's very similar. 174 00:11:57,570 --> 00:12:01,110 So if you understand JavaScript object, you're going to understand this part. 175 00:12:01,330 --> 00:12:08,130 OK, but make sure that you know about if you create sometime in future, we will learn how to create 176 00:12:08,280 --> 00:12:15,950 probably adjacent data with Jason Object like I'm not Jason Object data that is Jason. 177 00:12:16,080 --> 00:12:20,520 So make sure that you understand that this should be everything should be strong and this should be 178 00:12:20,520 --> 00:12:21,230 double quotes. 179 00:12:21,400 --> 00:12:27,160 OK, so you can't use a single code like here we did with the object of the JavaScript. 180 00:12:27,180 --> 00:12:29,500 OK, so that is pretty much it. 181 00:12:29,760 --> 00:12:36,120 Next lecture will be about Ajax and I want you to stay focused because these are your lectures. 182 00:12:36,360 --> 00:12:39,090 But we need badly. 183 00:12:39,240 --> 00:12:42,810 We need them badly because without them we will not be able to continue. 184 00:12:42,960 --> 00:12:43,290 Right. 185 00:12:43,980 --> 00:12:45,780 That's it for this lecture. 186 00:12:45,960 --> 00:12:47,700 So I will see you in the next one.