WEBVTT 00:00.730 --> 00:06.220 All right, so before we actually start building our project quiz app, we decided to introduce you 00:06.220 --> 00:09.920 to what Jason is because we're going to use it in our application. 00:10.450 --> 00:15.820 Also, we'll talk a little about Ajax, which actually is a really great tool for every developer. 00:16.330 --> 00:19.010 Mostly Jason and Ajax are used together. 00:19.760 --> 00:25.420 Actually, we're not going to use Ajax in your project, but trust me, it will be a really handy tool 00:25.420 --> 00:27.340 which you can use in the future. 00:28.030 --> 00:28.650 All right. 00:28.690 --> 00:29.950 So what is Jason? 00:30.670 --> 00:34.630 Abbreviation itself stands for JavaScript object notation. 00:34.990 --> 00:41.380 In general, when we exchange data between browser and server that this data should be always text, 00:42.010 --> 00:46.830 we need to send data as a text and when we receive it, then it's always the text. 00:47.680 --> 00:50.890 So Jason is a text syntactically. 00:50.890 --> 00:52.660 It's like JavaScript object. 00:53.050 --> 00:58.600 When we need to send and receive some data from server, then we have to do it in JSON format. 00:59.080 --> 01:04.690 As an official definition, Jason is lightweight data interchange format. 01:05.500 --> 01:09.430 It's very easy to use and it has very simple syntax rules. 01:10.120 --> 01:15.840 Also, data conversion, for example, into JavaScript object happens really fast and easily. 01:16.930 --> 01:22.770 Actually, for now, you may not know anything about server or backend development, but that's not 01:22.780 --> 01:23.290 a problem. 01:23.290 --> 01:29.110 We are not going to use it in our application, but we'll use just browser local storage, which somehow 01:29.110 --> 01:30.950 will imitate real server. 01:31.900 --> 01:39.070 As we said, Jason, data is very much like JavaScript objects, so it will be really easy to understand 01:39.070 --> 01:42.580 for you because you're already familiar with JavaScript objects. 01:43.420 --> 01:46.960 All right, let's go ahead and talk about syntax of Jason. 01:47.470 --> 01:50.260 Data is a written in value pairs. 01:50.980 --> 01:53.830 Names should be surrounded by double quotes. 01:53.830 --> 01:55.030 As for values. 01:55.060 --> 01:58.630 If you have strings, then they are surrounded by double quotes. 01:58.960 --> 02:03.790 But in case of rows of data types, I mean numbers, booleans, arrays, objects. 02:03.790 --> 02:09.620 And now they are not surrounded by double quotes because Jason can recognize those data types. 02:10.180 --> 02:13.050 Also, data is separated by commas. 02:13.960 --> 02:18.250 So Jason values must be one of the following data types. 02:19.030 --> 02:24.540 No string object array, boolean and no. 02:25.900 --> 02:29.800 All right, let's go to Brackett's and get our hands dirty in Jason. 02:30.220 --> 02:34.060 First of all, I'm going to create an usual JavaScript object. 02:34.780 --> 02:36.340 Let's call it my object. 02:39.070 --> 02:42.940 That inside properties and values name John. 02:44.890 --> 02:47.110 Then age 27. 02:49.260 --> 02:51.270 Then next one married. 02:52.190 --> 02:54.080 And assigned to it through. 02:55.960 --> 03:05.110 Next, property is going to be children names that's assigned to it array with two, three values and 03:05.110 --> 03:05.530 and. 03:06.640 --> 03:07.060 Nick. 03:10.280 --> 03:16.160 So as we said, in order to send this data to the server, it should be converted into text for that, 03:16.160 --> 03:19.080 we have a method called Jason Thring ify. 03:19.610 --> 03:24.700 It will transport this object into string and will give it JSON format. 03:25.370 --> 03:30.530 So let's see it practically create new variable and call it my data. 03:32.510 --> 03:38.420 And now, as we said, we need to use a method called Jason Swingy Flight. 03:40.150 --> 03:46.050 Inside parentheses as an argument, we have to insert data which we want to be converted into strength 03:46.360 --> 03:50.380 in this case, our object called my object. 03:51.370 --> 03:53.590 All right, let's run in council. 03:55.470 --> 03:56.430 My data. 03:58.210 --> 04:05.230 And you see that we have here our object, but it looks like as a text, actually it is string and in 04:05.230 --> 04:09.940 order to prove that, we can just check its type using type of operator. 04:11.100 --> 04:13.280 So you see that it's definitely spring. 04:14.540 --> 04:22.020 OK, we have created objects, then we converted it into string and it's ready to be sent to server. 04:22.680 --> 04:28.530 Also, if we take a closer look at this data, you will find that all the properties are surrounded 04:28.530 --> 04:33.750 by double clouds because metal, which we used gave to this data Jason formed. 04:34.290 --> 04:40.980 As for values only John and names inside array are surrounded by double quotes. 04:41.490 --> 04:43.710 No true and right. 04:43.710 --> 04:50.880 S are not surrounded by double because, as we already said, Jason recognized them as number boolean 04:50.880 --> 04:51.690 and right. 04:52.260 --> 04:56.460 And also besides them, it can recognize objects and null as well. 04:57.180 --> 04:57.720 All right. 04:57.910 --> 05:00.420 That was all about sending data to a server. 05:00.420 --> 05:03.450 In this case, we used JSON, that swingy fight. 05:03.930 --> 05:06.750 But what happens when we receive data from server? 05:07.470 --> 05:10.680 As we said, we always receive data as a text. 05:11.010 --> 05:15.120 So we need something that converts text data into JavaScript object. 05:15.630 --> 05:21.060 For that, we have to use another method called JSON that pass at first. 05:21.060 --> 05:24.780 Let's convert our object into Jason format. 05:24.780 --> 05:28.860 For that, I'm going to surround all the properties by double quotes. 05:30.300 --> 05:34.710 Also, we need double quotes for those extreme values. 05:37.760 --> 05:40.750 And then surround entire object by. 05:41.900 --> 05:48.140 We are doing that because data should be taxed and actually this is the form of data which we receive 05:48.140 --> 05:49.130 from server. 05:50.290 --> 05:56.460 OK, in order to convert this data back into JavaScript objects, we need to use Jason the pass method. 05:57.160 --> 06:00.070 So let's change this thing, fly into parts. 06:01.770 --> 06:02.970 Let's save. 06:04.290 --> 06:06.540 And you see that we got here an error. 06:07.980 --> 06:11.790 And of course, it's because we have here line breaks. 06:13.530 --> 06:15.270 So let's go ahead and fix that. 06:24.200 --> 06:25.550 Then save again. 06:26.560 --> 06:32.740 And the city council, we got usual JavaScript objects on which we can manipulate and work by JavaScript. 06:33.460 --> 06:39.640 All right, so that's the way how you can prepare data to send to server using JSON, the three define 06:39.640 --> 06:46.690 method and also how you can convert received text data into usual JavaScript object using Jason that 06:46.690 --> 06:47.590 pass method. 06:48.610 --> 06:54.050 Those methods will be used in next section where we will build this application again. 06:54.070 --> 06:59.560 I want to say that you don't need to know what server is and how to work it back in Web development, 06:59.800 --> 07:05.230 because in our app, we are going to use just browser local storage instead of a real server. 07:06.010 --> 07:11.880 In most cases, JSON is used with Ajax, which is asynchronous JavaScript XML. 07:12.280 --> 07:15.500 And in order to discuss those things, let's move on to the next election.