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