WEBVTT 00:01.810 --> 00:05.060 Yes, six allows us to work with iRace in kind of a different way. 00:05.470 --> 00:11.530 There are new features released in ECMAScript 2015 that actually makes our job much comfortable and 00:11.530 --> 00:12.010 easier. 00:12.520 --> 00:17.530 So in this lecture, we're going to be talking about changes that we have in ethics regarding our rights 00:18.400 --> 00:20.660 before we actually start and write some examples. 00:20.680 --> 00:23.640 Let's take a look on indexed on file. 00:24.220 --> 00:30.490 I have created you will element with some list items simply I have a your ABCDE. 00:31.120 --> 00:36.090 We have some starchier and also I've created a class which I will use a bit later. 00:37.030 --> 00:41.140 So you see on the page for nicely designed list items. 00:41.860 --> 00:45.430 And the first thing that I'm going to do is to select those list elements. 00:46.000 --> 00:55.660 So create a variable cost and allies and assign to it documents that and use your gut elements by Takanabe 00:55.660 --> 00:56.020 method. 00:58.290 --> 01:00.840 And insert here, Tognum Elai. 01:01.800 --> 01:05.430 Then run in council variable Ellyse. 01:08.610 --> 01:10.880 So here we got a collection. 01:11.520 --> 01:12.660 I'm sure you remember. 01:12.690 --> 01:13.670 What does it mean? 01:13.700 --> 01:20.700 Actually, my collection is an array like object, it looks like is array items in that collection have 01:20.700 --> 01:22.440 index numbers also. 01:22.440 --> 01:23.670 It has length property. 01:23.670 --> 01:30.180 But again, it's not array, it's an actual collection in document object Model S. We have talked about 01:30.180 --> 01:35.580 it, but I'm going to remind you that we cannot use our Ableton methods with estimate collections. 01:36.450 --> 01:38.940 For that, we have to transform them into arrays. 01:39.330 --> 01:43.220 And in order to do that, we were using a right that from method. 01:43.950 --> 01:46.050 Actually, it's yes, it's a feature. 01:46.800 --> 01:52.950 We used it in advance because in iOS five, we can transform a collections into arrays in kind of a 01:52.950 --> 01:59.280 difficult way, which then would cause confusion and misunderstanding, because in that moment you were 01:59.280 --> 02:01.470 not familiar with advanced JavaScript concepts. 02:01.860 --> 02:04.920 But at this point we can feel free and use this approach. 02:05.370 --> 02:12.570 So in order to convert Estima collection into array, we have to use the following tweak, create new 02:12.570 --> 02:17.030 variable constant Elyse array. 02:18.960 --> 02:25.390 Then we have to assign to this variable array dot prototype write. 02:25.470 --> 02:30.210 That prototype is an object which contains all built-In properties and methods of error. 02:31.610 --> 02:35.130 After that, we have to access on array slice method. 02:36.060 --> 02:39.650 It's first time when we use this method, but there is nothing difficult. 02:39.660 --> 02:41.220 It works in a very simple way. 02:42.090 --> 02:45.140 Generally, slice method copies a piece of array. 02:45.150 --> 02:51.390 It takes two parameters which indicate beginning and the end of eRate, but without arguments. 02:51.690 --> 02:54.050 Slight method just copies the entire right. 02:55.020 --> 03:01.980 So we have access on a slice method and now we need to use call method in which we have to indicate 03:01.980 --> 03:04.870 on which object has slice method to work. 03:05.730 --> 03:11.370 You can imagine that slice is a regular function and we change on which object you point. 03:11.370 --> 03:12.000 It's partial. 03:12.060 --> 03:20.820 This variable in simple words slice method assumes that this Actimel collection object is an array because 03:20.820 --> 03:23.780 it's actually index based and also it has length property. 03:24.480 --> 03:27.450 So without any problem slice method, the returns are right. 03:28.570 --> 03:36.340 Let's insert inside call method ice and that check and castle, what we have, right, cancel that log. 03:36.940 --> 03:38.020 Elyse Ouray. 03:39.890 --> 03:43.230 Reload and they say that we have here a right. 03:44.630 --> 03:50.300 I know that all of this stuff is a little bit hard to understand, and that's why in Essex version, 03:50.300 --> 03:54.230 we have a great solution, which you are already familiar with. 03:54.380 --> 04:01.220 And it's a right that from it allows us to get rid of this little bit difficult stuff and instead of 04:01.220 --> 04:01.460 it. 04:01.460 --> 04:01.910 Right. 04:01.910 --> 04:08.370 Just from reload and see that we have again a right here. 04:09.710 --> 04:12.020 All right, let's remove Castle dot log. 04:12.020 --> 04:18.040 And also, we don't need this variable in order to make our example more interesting. 04:18.050 --> 04:21.770 I'm going to use your foreach array holper. 04:22.850 --> 04:27.150 Actually, we can do it because Elice variable is already converted into array. 04:28.580 --> 04:32.600 I'm going to make those boxes dynamically changeable on click event. 04:33.020 --> 04:37.060 So that's why I have created class changing extremophile. 04:37.820 --> 04:40.870 Let's attach event listener to each list element. 04:41.600 --> 04:44.720 So as current item insert here I. 04:46.210 --> 04:55.870 Then use Arrow function and that set event listener with click events, right, ally, dot at event 04:55.880 --> 04:59.530 listener that click event. 05:00.450 --> 05:08.220 Again, right here function so unclick, we're going to assign it to list elements, last name change 05:09.120 --> 05:18.480 and for that right I class list in order to change dynamically style of list elements, I'm going to 05:18.480 --> 05:25.830 use here Tuggle method, which actually assigns and then removes class from elements and as an argument 05:26.100 --> 05:27.900 right to your class name change. 05:30.520 --> 05:36.880 Reload and then click on items you see that we have here, little nice effect. 05:38.890 --> 05:39.430 All right. 05:40.670 --> 05:48.080 Let's go ahead and talk about next feature of ethics, which is far off statement, it actually raised 05:48.080 --> 05:49.210 through every items. 05:49.250 --> 05:55.400 And besides that, it also works with array like objects like XHTML collections now at least, and so 05:55.400 --> 05:55.610 on. 05:56.120 --> 06:00.710 Using false statements, we can achieve the same results that you have seen just minutes ago. 06:01.070 --> 06:12.800 Let's comment this cold out and write for then inside parentheses declare a variable which actually 06:12.800 --> 06:18.140 should be current item from ELLYSE collection and then we need to keep it off. 06:18.590 --> 06:26.510 And also the collection itself so far off will iterate through Ellyse items and will execute the code 06:26.510 --> 06:34.040 inside code block for each item that's copied these two lines and Pasir. 06:35.370 --> 06:40.380 Reload, click on at least elements and see that we have some nice effects. 06:41.940 --> 06:48.570 OK, that's a notice for a statement is expressed in very simple way, we don't have to use here some 06:48.840 --> 06:50.250 complicated conditions. 06:50.580 --> 06:53.550 We just have to use those two key words for and of. 06:54.990 --> 06:55.470 All right. 06:55.860 --> 07:01.050 And just like shall we have introduced the changes in ethics regarding race and also you have learned 07:01.050 --> 07:02.440 how far of statement works. 07:03.090 --> 07:04.350 See you in the next video.