1
00:00:00,215 --> 00:00:04,034
Lad os fortsætte med at se,
hvad vi kan gøre med objekter.

2
00:00:04,034 --> 00:00:07,931
Vi er tilbage med det program
vi brugte i modulet om funktioner.

3
00:00:07,931 --> 00:00:10,610
Dette program har funktionen 'drawWinston'

4
00:00:10,610 --> 00:00:14,514
som kan tegne Winston
ved visse x'er og y'er.

5
00:00:14,514 --> 00:00:18,038
Her kalder vi 'drawWinston' fire gange.

6
00:00:18,038 --> 00:00:20,809
Hver gange med et forskelligt
sæt af x- og y-koordinater.

7
00:00:20,809 --> 00:00:23,258
Du kender mig jo.

8
00:00:23,258 --> 00:00:25,887
Når jeg ser disse fire kald
på 'drawWinston',

9
00:00:25,887 --> 00:00:29,431
der ser så ens ud,
så tænker jeg straks på,

10
00:00:29,431 --> 00:00:32,324
hvor meget bedre det ville
være at bruge en løkke

11
00:00:32,324 --> 00:00:36,186
og kalde den én gang inde i løkken

12
00:00:36,186 --> 00:00:39,301
og ændre x og y i hvert
af løkkens gennemløb.

13
00:00:39,301 --> 00:00:45,504
For at gøre det skal vi gemme disse
x- og y-positioner i et array,

14
00:00:45,504 --> 00:00:47,447
som kan gennemløbes.

15
00:00:47,447 --> 00:00:52,217
Vi har to sæt af værdier,
så vi kan lave to arrays.

16
00:00:52,217 --> 00:00:56,364
Et for x-positionerne og
et for y-positionerne.

17
00:00:56,364 --> 00:01:02,676
Vi taster
>var xPositions = [99, 294, 101, 294];< og

18
00:01:02,676 --> 00:01:08,870
>var yPositions = [117, 117, 316, 316];<

19
00:01:08,870 --> 00:01:12,780
Nu kan vi gennemløbe disse
ved at bruge en for-løkke.

20
00:01:12,780 --> 00:01:18,666
>for (var i = 0; i < xPositions.length; i++)<

21
00:01:18,666 --> 00:01:21,127
som gennemløber hvert element i xPositions

22
00:01:21,127 --> 00:01:23,220
og vi tegner Winston med

23
00:01:23,220 --> 00:01:30,511
>drawWinston(xPositions[i], yPositions[i]);<

24
00:01:30,511 --> 00:01:34,531
Okay, lad os se om det virker,
når vi sletter dette.

25
00:01:34,531 --> 00:01:35,595
Okay, det virker.

26
00:01:35,595 --> 00:01:40,885
Nu har vi denne ene linje med kode,
der tegner Winston

27
00:01:40,885 --> 00:01:44,979
og gør det i hver position
i arrayet xPositions.

28
00:01:44,979 --> 00:01:49,836
Vi kan tilføje flere positioner
ved at skrive 10 og 1

29
00:01:49,847 --> 00:01:53,250
og 1 og 1

30
00:01:53,250 --> 00:01:58,290
og 100 og 1.

31
00:01:58,290 --> 00:02:01,723
Det begynder at se lidt rodet ud,

32
00:02:01,723 --> 00:02:03,067
og det kan jeg ikke lide,

33
00:02:03,067 --> 00:02:08,439
da det er svært at se,
hvilket x der hører til hvilket y.

34
00:02:08,439 --> 00:02:14,447
Det skal være nemt at se mine x og y par

35
00:02:14,447 --> 00:02:21,442
uden jeg skal forsøge at skrive dem
under hinanden på denne måde.

36
00:02:21,442 --> 00:02:26,719
Jeg vil gerne gemme disse
positioner på en anden måde.

37
00:02:26,719 --> 00:02:30,833
En ide er i stedet at gemme dem i objekter

38
00:02:30,833 --> 00:02:36,016
da hver position består af
to informationer, x og y.

39
00:02:36,016 --> 00:02:39,728
Vi kan lave et objekt
med egenskaberne x og y.

40
00:02:39,728 --> 00:02:44,612
Og dernæst kan vi have et array af
objekter med disse x- og y-positioner.

41
00:02:44,612 --> 00:02:45,631
Lad os gøre det.

42
00:02:45,631 --> 00:02:49,229
Vi taster >var positions = [];<

43
00:02:49,229 --> 00:02:51,421
da det skal være et array,

44
00:02:51,421 --> 00:02:54,293
men i stedet for
at hvert element er et tal,

45
00:02:54,293 --> 00:02:56,545
så skal det være et objekt.

46
00:02:56,545 --> 00:03:04,509
Vi bruger derfor {} og
indsætter x: 99, y: 117.

47
00:03:04,509 --> 00:03:08,499
Nu har vi en af vores positioner.

48
00:03:08,499 --> 00:03:10,998
Vi kan tilføje endnu en

49
00:03:10,998 --> 00:03:14,024
>{x: 294, y: 117},<

50
00:03:14,024 --> 00:03:19,086
hvor x er 294 og y er 117.

51
00:03:19,086 --> 00:03:25,237
Den tredje er>{x: 101, y: 316},<

52
00:03:25,237 --> 00:03:31,168
og den sidste er >{x: 294, y: 316},<.

53
00:03:31,168 --> 00:03:34,744
Nu har vi et array af objekter,

54
00:03:34,744 --> 00:03:38,795
hvor hvert objekt har egenskaberne x og y.

55
00:03:38,795 --> 00:03:44,495
Hernede i vores for-løkke ændrer vi
den til at gennemløbe positions.length

56
00:03:44,495 --> 00:03:49,090
og så indsætter vi objektet.

57
00:03:49,090 --> 00:03:53,759
Lige nu er det hele objektet,
men vi skal bruge x og y,

58
00:03:53,759 --> 00:03:59,046
så vi skal ændrer det til
position[i].x og positions[i].y

59
00:03:59,046 --> 00:04:00,571
Sådan!!!

60
00:04:00,571 --> 00:04:04,576
Nu kan vi fjerne disse
gamle kludrede arrays.

61
00:04:04,576 --> 00:04:05,662
Flot.

62
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.

63
00:04:09,614 --> 00:04:12,960
Og når vi har mere læsbar kode,
så er det godt.

64
00:04:12,960 --> 00:04:15,116
Det gør det også nemmere at tilføje noget.

65
00:04:15,116 --> 00:04:19,060
Jeg tilføjer x y parret samlet.

66
00:04:19,060 --> 00:04:22,820
Lad os sige >{x: 200, y: 200},<

67
00:04:22,820 --> 00:04:26,521
og jeg får en Winston i midten.

68
00:04:26,521 --> 00:04:27,476
Sejt.

69
00:04:27,476 --> 00:04:31,333
Nu vil jeg vise dig noget,
der er endnu mere smart.

70
00:04:31,333 --> 00:04:36,932
Bemærk at vores funktion lige nu
accepterer to tal

71
00:04:36,932 --> 00:04:38,676
og dernæst bruger disse to tal.

72
00:04:38,676 --> 00:04:42,134
Vi kan ændre vores funktion,
så den forventer et objekt

73
00:04:42,134 --> 00:04:45,108
og får x og y fra dette objekt.

74
00:04:45,108 --> 00:04:49,695
Hernede skal vi blot have
objektet positions[i]

75
00:04:49,695 --> 00:04:50,731
Lad os prøve det.

76
00:04:50,731 --> 00:04:53,686
Vi bruger vores objekt,
men nu virker det ikke.

77
00:04:53,686 --> 00:04:57,405
Det er fordi vores funktion stadig
forventer to argumenter,

78
00:04:57,405 --> 00:04:58,938
og den får kun ét.

79
00:04:58,938 --> 00:05:02,348
Så vi ændrer funktionen til
kun at få 'facePosition'.

80
00:05:02,348 --> 00:05:06,406
Nu får vi fejlen faceX er ikke defineret,

81
00:05:06,406 --> 00:05:11,702
fordi vi før brugte faceX som et argument,
men nu eksisterer det ikke.

82
00:05:11,702 --> 00:05:13,407
i stedet har vi et objekt.

83
00:05:13,407 --> 00:05:21,117
Det vi gør er, at gemme x positionen
fra objektet i variablen faceX.

84
00:05:21,117 --> 00:05:24,515
Vi har dette objekt og
objektet har egenskaben x,

85
00:05:24,536 --> 00:05:28,190
så vi gemmer den i variablen faceX.

86
00:05:28,190 --> 00:05:30,255
Og så gør vi det samme for y,

87
00:05:30,255 --> 00:05:33,350
og taster >faceY = facePosition.y<.

88
00:05:33,350 --> 00:05:34,968
Sådan.

89
00:05:34,968 --> 00:05:38,165
I resten af funktionen bruges
faceX og faceY.

90
00:05:38,165 --> 00:05:40,168
Vi skal sikre os, at de er stavet korrekt,

91
00:05:40,168 --> 00:05:41,987
hvis vi brugte xx, så virker det ikke,

92
00:05:41,987 --> 00:05:46,303
da det ikke er det, der står hernede
i vores array af objekter.

93
00:05:46,303 --> 00:05:48,315
Det skal passe sammen.

94
00:05:48,315 --> 00:05:49,902
Men det er ret smart.

95
00:05:49,902 --> 00:05:51,774
Du kan have et array af objekter.

96
00:05:51,774 --> 00:05:53,830
Du kan have funktioner,
der bruger objekter.

97
00:05:53,830 --> 00:05:58,621
Du vil opdage at dine programmer bliver
ret smarte på grund af den måde

98
00:05:58,621 --> 00:06:00,314
de strukturer deres data.

99
00:06:00,314 --> 00:06:04,218
Da du så tit har x og y, der hører sammen,

100
00:06:04,218 --> 00:06:08,804
så vil du opdage, at de især er nyttige i
dine grafik og animationsprogrammer.

101
00:06:08,804 --> 00:06:11,394
Så kom bare i gang og ha' det sjovt.