0:00:00.215,0:00:04.034 Lad os fortsætte med at se,[br]hvad vi kan gøre med objekter. 0:00:04.034,0:00:07.931 Vi er tilbage med det program[br]vi brugte i modulet om funktioner. 0:00:07.931,0:00:10.610 Dette program har funktionen 'drawWinston' 0:00:10.610,0:00:14.514 som kan tegne Winston[br]ved visse x'er og y'er. 0:00:14.514,0:00:18.038 Her kalder vi 'drawWinston' fire gange. 0:00:18.038,0:00:20.809 Hver gange med et forskelligt[br]sæt af x- og y-koordinater. 0:00:20.809,0:00:23.258 Du kender mig jo. 0:00:23.258,0:00:25.887 Når jeg ser disse fire kald[br]på 'drawWinston', 0:00:25.887,0:00:29.431 der ser så ens ud,[br]så tænker jeg straks på, 0:00:29.431,0:00:32.324 hvor meget bedre det ville[br]være at bruge en løkke 0:00:32.324,0:00:36.186 og kalde den én gang inde i løkken 0:00:36.186,0:00:39.301 og ændre x og y i hvert[br]af løkkens gennemløb. 0:00:39.301,0:00:45.504 For at gøre det skal vi gemme disse[br]x- og y-positioner i et array, 0:00:45.504,0:00:47.447 som kan gennemløbes. 0:00:47.447,0:00:52.217 Vi har to sæt af værdier,[br]så vi kan lave to arrays. 0:00:52.217,0:00:56.364 Et for x-positionerne og[br]et for y-positionerne. 0:00:56.364,0:01:02.676 Vi taster[br]>var xPositions = [99, 294, 101, 294];< og 0:01:02.676,0:01:08.870 >var yPositions = [117, 117, 316, 316];< 0:01:08.870,0:01:12.780 Nu kan vi gennemløbe disse[br]ved at bruge en for-løkke. 0:01:12.780,0:01:18.666 >for (var i = 0; i < xPositions.length; i++)< 0:01:18.666,0:01:21.127 som gennemløber hvert element i xPositions 0:01:21.127,0:01:23.220 og vi tegner Winston med 0:01:23.220,0:01:30.511 >drawWinston(xPositions[i], yPositions[i]);< 0:01:30.511,0:01:34.531 Okay, lad os se om det virker,[br]når vi sletter dette. 0:01:34.531,0:01:35.595 Okay, det virker. 0:01:35.595,0:01:40.885 Nu har vi denne ene linje med kode,[br]der tegner Winston 0:01:40.885,0:01:44.979 og gør det i hver position[br]i arrayet xPositions. 0:01:44.979,0:01:49.836 Vi kan tilføje flere positioner[br]ved at skrive 10 og 1 0:01:49.847,0:01:53.250 og 1 og 1 0:01:53.250,0:01:58.290 og 100 og 1. 0:01:58.290,0:02:01.723 Det begynder at se lidt rodet ud, 0:02:01.723,0:02:03.067 og det kan jeg ikke lide, 0:02:03.067,0:02:08.439 da det er svært at se,[br]hvilket x der hører til hvilket y. 0:02:08.439,0:02:14.447 Det skal være nemt at se mine x og y par 0:02:14.447,0:02:21.442 uden jeg skal forsøge at skrive dem[br]under hinanden på denne måde. 0:02:21.442,0:02:26.719 Jeg vil gerne gemme disse[br]positioner på en anden måde. 0:02:26.719,0:02:30.833 En ide er i stedet at gemme dem i objekter 0:02:30.833,0:02:36.016 da hver position består af[br]to informationer, x og y. 0:02:36.016,0:02:39.728 Vi kan lave et objekt[br]med egenskaberne x og y. 0:02:39.728,0:02:44.612 Og dernæst kan vi have et array af[br]objekter med disse x- og y-positioner. 0:02:44.612,0:02:45.631 Lad os gøre det. 0:02:45.631,0:02:49.229 Vi taster >var positions = [];< 0:02:49.229,0:02:51.421 da det skal være et array, 0:02:51.421,0:02:54.293 men i stedet for[br]at hvert element er et tal, 0:02:54.293,0:02:56.545 så skal det være et objekt. 0:02:56.545,0:03:04.509 Vi bruger derfor {} og[br]indsætter x: 99, y: 117. 0:03:04.509,0:03:08.499 Nu har vi en af vores positioner. 0:03:08.499,0:03:10.998 Vi kan tilføje endnu en 0:03:10.998,0:03:14.024 >{x: 294, y: 117},< 0:03:14.024,0:03:19.086 hvor x er 294 og y er 117. 0:03:19.086,0:03:25.237 Den tredje er>{x: 101, y: 316},< 0:03:25.237,0:03:31.168 og den sidste er >{x: 294, y: 316},<. 0:03:31.168,0:03:34.744 Nu har vi et array af objekter, 0:03:34.744,0:03:38.795 hvor hvert objekt har egenskaberne x og y. 0:03:38.795,0:03:44.495 Hernede i vores for-løkke ændrer vi[br]den til at gennemløbe positions.length 0:03:44.495,0:03:49.090 og så indsætter vi objektet. 0:03:49.090,0:03:53.759 Lige nu er det hele objektet,[br]men vi skal bruge x og y, 0:03:53.759,0:03:59.046 så vi skal ændrer det til[br]position[i].x og positions[i].y 0:03:59.046,0:04:00.571 Sådan!!! 0:04:00.571,0:04:04.576 Nu kan vi fjerne disse[br]gamle kludrede arrays. 0:04:04.576,0:04:05.662 Flot. 0:04:05.662,0:04:09.614 Dette ser, for mig, meget pænere ud[br]og gør koden meget nemmere at læse. 0:04:09.614,0:04:12.960 Og når vi har mere læsbar kode,[br]så er det godt. 0:04:12.960,0:04:15.116 Det gør det også nemmere at tilføje noget. 0:04:15.116,0:04:19.060 Jeg tilføjer x y parret samlet. 0:04:19.060,0:04:22.820 Lad os sige >{x: 200, y: 200},< 0:04:22.820,0:04:26.521 og jeg får en Winston i midten. 0:04:26.521,0:04:27.476 Sejt. 0:04:27.476,0:04:31.333 Nu vil jeg vise dig noget,[br]der er endnu mere smart. 0:04:31.333,0:04:36.932 Bemærk at vores funktion lige nu[br]accepterer to tal 0:04:36.932,0:04:38.676 og dernæst bruger disse to tal. 0:04:38.676,0:04:42.134 Vi kan ændre vores funktion,[br]så den forventer et objekt 0:04:42.134,0:04:45.108 og får x og y fra dette objekt. 0:04:45.108,0:04:49.695 Hernede skal vi blot have[br]objektet positions[i] 0:04:49.695,0:04:50.731 Lad os prøve det. 0:04:50.731,0:04:53.686 Vi bruger vores objekt,[br]men nu virker det ikke. 0:04:53.686,0:04:57.405 Det er fordi vores funktion stadig[br]forventer to argumenter, 0:04:57.405,0:04:58.938 og den får kun ét. 0:04:58.938,0:05:02.348 Så vi ændrer funktionen til[br]kun at få 'facePosition'. 0:05:02.348,0:05:06.406 Nu får vi fejlen faceX er ikke defineret, 0:05:06.406,0:05:11.702 fordi vi før brugte faceX som et argument,[br]men nu eksisterer det ikke. 0:05:11.702,0:05:13.407 i stedet har vi et objekt. 0:05:13.407,0:05:21.117 Det vi gør er, at gemme x positionen[br]fra objektet i variablen faceX. 0:05:21.117,0:05:24.515 Vi har dette objekt og[br]objektet har egenskaben x, 0:05:24.536,0:05:28.190 så vi gemmer den i variablen faceX. 0:05:28.190,0:05:30.255 Og så gør vi det samme for y, 0:05:30.255,0:05:33.350 og taster >faceY = facePosition.y<. 0:05:33.350,0:05:34.968 Sådan. 0:05:34.968,0:05:38.165 I resten af funktionen bruges[br]faceX og faceY. 0:05:38.165,0:05:40.168 Vi skal sikre os, at de er stavet korrekt, 0:05:40.168,0:05:41.987 hvis vi brugte xx, så virker det ikke, 0:05:41.987,0:05:46.303 da det ikke er det, der står hernede[br]i vores array af objekter. 0:05:46.303,0:05:48.315 Det skal passe sammen. 0:05:48.315,0:05:49.902 Men det er ret smart. 0:05:49.902,0:05:51.774 Du kan have et array af objekter. 0:05:51.774,0:05:53.830 Du kan have funktioner,[br]der bruger objekter. 0:05:53.830,0:05:58.621 Du vil opdage at dine programmer bliver[br]ret smarte på grund af den måde 0:05:58.621,0:06:00.314 de strukturer deres data. 0:06:00.314,0:06:04.218 Da du så tit har x og y, der hører sammen, 0:06:04.218,0:06:08.804 så vil du opdage, at de især er nyttige i[br]dine grafik og animationsprogrammer. 0:06:08.804,0:06:11.394 Så kom bare i gang og ha' det sjovt.