1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Σε αυτό το βίντεο, θελήσαμε
να φωνάξει ιδιαίτερης προσοχής

3
00:00:07,230 --> 00:00:09,110
σε ένα πολύ συγκεκριμένο
στοιχείο το JavaScript

4
00:00:09,110 --> 00:00:11,350
ότι μπορεί να φανούν χρήσιμες
όταν ξεκινάτε

5
00:00:11,350 --> 00:00:15,750
να εργαστούν για το χειρισμό ιστοσελίδες και
να αλλάξει το περιεχόμενο της ιστοσελίδας σας

6
00:00:15,750 --> 00:00:16,460
σχετικά με τη μύγα.

7
00:00:16,460 --> 00:00:19,450
Και αυτή είναι η έννοια της
το Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Έτσι, όπως είδαμε στο βίντεο μας
JavaScript, τα αντικείμενα είναι πολύ ευέλικτο.

9
00:00:23,030 --> 00:00:24,750
>> Και μπορούν να περιέχουν διάφορα πεδία.

10
00:00:24,750 --> 00:00:28,075
Και αν εμείς δεν πάμε σε πολλά
λεπτομέρεια, αυτά τα πεδία ή ιδιότητες,

11
00:00:28,075 --> 00:00:30,200
ότι θα πιθανώς περισσότερο
κατάλληλα τους αποκαλούν

12
00:00:30,200 --> 00:00:33,915
στο πλαίσιο ενός αντικειμένου, ακόμη και
αυτές οι ιδιότητες μπορεί να είναι άλλα αντικείμενα.

13
00:00:33,915 --> 00:00:36,210
Και μέσα από αυτά τα αντικείμενα
μπορεί να είναι άλλα αντικείμενα.

14
00:00:36,210 --> 00:00:39,630
>> Έχετε αυτό το πολύ μεγάλο αντικείμενο
με πολλά άλλα αντικείμενα

15
00:00:39,630 --> 00:00:43,550
στο εσωτερικό του, το οποίο το είδος του
δημιουργεί την ιδέα ενός μεγάλου δέντρου.

16
00:00:43,550 --> 00:00:47,540
Τώρα, το αντικείμενο είναι ένα έγγραφο
πολύ ιδιαίτερο αντικείμενο στο JavaScript

17
00:00:47,540 --> 00:00:52,580
ότι οργανώνει ολόκληρο τον ιστό σας
σελίδα κάτω από αυτό το είδος της ομπρέλας

18
00:00:52,580 --> 00:00:53,470
ενός αντικειμένου.

19
00:00:53,470 --> 00:00:56,770
Και έτσι μέσα του εγγράφου
αντικείμενο είναι αντικείμενα που παρουσιάζουν

20
00:00:56,770 --> 00:00:59,630
το κεφάλι και το σώμα της ιστοσελίδας σας.

21
00:00:59,630 --> 00:01:03,760
>> Μέσα από αυτά είναι και άλλα
αντικείμενα, κ.λπ., κ.λπ.,

22
00:01:03,760 --> 00:01:08,411
έως ότου ολόκληρη η ιστοσελίδα σας έχει
έχουν οργανωθεί σε αυτό το μεγάλο αντικείμενο.

23
00:01:08,411 --> 00:01:09,660
Ποιο είναι το ανάποδα εδώ, σωστά;

24
00:01:09,660 --> 00:01:12,170
Λοιπόν, ξέρουμε πώς να εργάζονται
με αντικείμενα σε JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Έτσι, αν έχουμε ένα αντικείμενο που
αναφέρεται σε ολόκληρη την ιστοσελίδα μας, ότι

26
00:01:15,840 --> 00:01:19,590
σημαίνει καλώντας τη σωστή
μεθόδους για να χειριστείτε αυτό το αντικείμενο

27
00:01:19,590 --> 00:01:22,360
ή την τροποποίηση ορισμένων
των ιδιοτήτων του, θα

28
00:01:22,360 --> 00:01:25,500
μπορεί να αλλάξει τα στοιχεία του
σελίδα μας προγραμματισμού

29
00:01:25,500 --> 00:01:30,210
τη χρήση JavaScript αντί
να κωδικοποιήσει τα πράγματα με το, ας πούμε, HTML.

30
00:01:30,210 --> 00:01:33,760
Έτσι, εδώ είναι ένα παράδειγμα ενός
πολύ απλή ιστοσελίδα, σωστά;

31
00:01:33,760 --> 00:01:35,850
Είναι πήρε HTML tags, ένα κεφάλι.

32
00:01:35,850 --> 00:01:37,979
>> Στο εσωτερικό του υπάρχει ένας τίτλος, hello world.

33
00:01:37,979 --> 00:01:38,770
Στη συνέχεια, έχω ένα σώμα.

34
00:01:38,770 --> 00:01:40,686
Μέσα από αυτό, έχω
τρία διαφορετικά πράγματα.

35
00:01:40,686 --> 00:01:44,170
Έχω μια header ετικέτα H2,
μια παράγραφο, και ένα σύνδεσμο.

36
00:01:44,170 --> 00:01:45,920
Αυτή είναι μια πολύ απλή ιστοσελίδα.

37
00:01:45,920 --> 00:01:48,590
>> Λοιπόν, τι θα μπορούσε το έγγραφο
αντιρρήσεις για αυτή μοιάζει;

38
00:01:48,590 --> 00:01:50,700
Λοιπόν, αυτό είναι ένα μικρό
τρομακτικό ίσως από την πρώτη.

39
00:01:50,700 --> 00:01:52,510
Αλλά είναι πραγματικά ακριβώς ένα μεγάλο δέντρο.

40
00:01:52,510 --> 00:01:54,890
Και στη ρίζα του είναι εγγράφου.

41
00:01:54,890 --> 00:02:00,030
>> Μέσα από το έγγραφο είναι ένα άλλο
αντικείμενο που αναφέρεται στην HTML της σελίδας μου.

42
00:02:00,030 --> 00:02:02,660
Και η HTML της σελίδας μου είναι όλα αυτά.

43
00:02:02,660 --> 00:02:06,900
Και στη συνέχεια εσωτερικό του HTML
αντικείμενο, έχω ένα αντικείμενο στο κεφάλι,

44
00:02:06,900 --> 00:02:09,000
το οποίο αναφέρεται στην πάντα εκεί.

45
00:02:09,000 --> 00:02:11,009
>> Και μέσα από εκεί,
Έχω ένα αντικείμενο τίτλου.

46
00:02:11,009 --> 00:02:15,620
Και μέσα από εκεί, έχω ένα άλλο
αντιτείνουν ότι είναι απλά ένα γεια κόσμο.

47
00:02:15,620 --> 00:02:18,020
Θα μπορούσα να έχω το σώμα μου
αντιπροσωπεύεται σαν αυτό.

48
00:02:18,020 --> 00:02:22,850
>> Μέσα από το σώμα μου, έχω ένα H2
αντικείμενο και ένα αντικείμενο σ την παράγραφο

49
00:02:22,850 --> 00:02:25,270
και ένα ένα αντικείμενο για μια σύνδεση.

50
00:02:25,270 --> 00:02:29,660
Και έτσι αυτό το όλης της ιεραρχίας
μπορεί να αναπαρασταθεί ως ένα μεγάλο δέντρο

51
00:02:29,660 --> 00:02:31,990
με πολλά μικρότερα λίγο
πράγματα που προέρχονται από αυτό.

52
00:02:31,990 --> 00:02:33,740
Τώρα, φυσικά, όταν
είμαστε προγραμματισμό, εμείς

53
00:02:33,740 --> 00:02:35,560
Δεν νομίζω ότι τα πράγματα όπως ένα μεγάλο δέντρο.

54
00:02:35,560 --> 00:02:37,980
Θέλουμε να δούμε πραγματική
κώδικα που σχετίζονται πράγματα.

55
00:02:37,980 --> 00:02:40,790
>> Και ευτυχώς, μπορούμε
χρησιμοποιούν εργαλεία για προγραμματιστές μας

56
00:02:40,790 --> 00:02:46,080
να λάβει πράγματι μια ματιά
αντικειμένου εγγράφου αυτής της ιστοσελίδας.

57
00:02:46,080 --> 00:02:48,150
Και ας το κάνουμε αυτό.

58
00:02:48,150 --> 00:02:49,580
Έτσι έχω ανοίξει μια καρτέλα του προγράμματος περιήγησης.

59
00:02:49,580 --> 00:02:51,540
>> Και έχω ανοίξει Εργαλεία για προγραμματιστές.

60
00:02:51,540 --> 00:02:54,460
Και σε βίντεο μου για JavaScript, Ι
αναφέρουν ότι η κονσόλα δεν είναι

61
00:02:54,460 --> 00:02:56,770
μόνο κάπου όπου
τυπώνουμε πληροφορίες,

62
00:02:56,770 --> 00:02:59,560
είναι επίσης ένα μέρος όπου
μπορούμε να εισάγουμε πληροφορίες.

63
00:02:59,560 --> 00:03:01,380
Σε αυτό το πλαίσιο, τι
Πάω να πω είναι

64
00:03:01,380 --> 00:03:05,720
Θα ήθελα να επιστρέψω
τα αντικείμενα έγγραφο,

65
00:03:05,720 --> 00:03:07,502
ώστε να μπορώ να αρχίσετε να έχετε μια ματιά σε αυτό.

66
00:03:07,502 --> 00:03:08,460
Λοιπόν, πώς θα μπορούσε να το κάνω αυτό;

67
00:03:08,460 --> 00:03:10,740
Λοιπόν, αν θέλω να
οργανώσει πραγματικά όμορφα,

68
00:03:10,740 --> 00:03:16,317
Πάω να πω console.dir, D-Ι-Κ.
Τώρα, μπορώ να χρησιμοποιήσω console.log σε μόλις εκτύπωση

69
00:03:16,317 --> 00:03:17,400
κάτι πολύ απλό.

70
00:03:17,400 --> 00:03:20,450
Αλλά αν θέλω να το οργανώσουμε
ιεραρχικά σαν ένα αντικείμενο,

71
00:03:20,450 --> 00:03:23,800
Θέλω είδος των δομημένων
σαν μια δομή καταλόγου.

72
00:03:23,800 --> 00:03:27,400
>> Γι 'αυτό θέλω να console.dir έγγραφο.

73
00:03:27,400 --> 00:03:28,430
Πάω να πατήστε Enter.

74
00:03:28,430 --> 00:03:32,350
Και ακριβώς από κάτω τώρα,
και εγώ θα μεγεθύνετε εδώ,

75
00:03:32,350 --> 00:03:36,000
Έχω αυτό το έγγραφο απάντηση
με ένα μικρό βέλος δίπλα σε αυτό.

76
00:03:36,000 --> 00:03:39,470
Τώρα, όταν ανοίγω αυτό το βέλος,
εκεί πρόκειται να είναι πολλά πράγματα.

77
00:03:39,470 --> 00:03:42,560
>> Αλλά θα πάμε να αγνοήσει πολλά
από αυτό και μόνο το είδος της εστίασης

78
00:03:42,560 --> 00:03:46,250
για το πιο σημαντικό μέρος, έτσι ώστε να
μπορεί να αρχίσει να πλοηγηθείτε σε αυτό το έγγραφο.

79
00:03:46,250 --> 00:03:50,125
Υπάρχουν πολλά περισσότερα για να το DOM από
μόνο γονέα κόμβων και των κόμβων του παιδιού.

80
00:03:50,125 --> 00:03:51,500
Υπάρχουν πολλά πράγματα βοηθητικών.

81
00:03:51,500 --> 00:03:52,280
>> Έτσι, Πάω να ανοίξει αυτό επάνω.

82
00:03:52,280 --> 00:03:54,610
Και υπάρχει ένα πάρα πολύ
πράγματα που αναδύεται.

83
00:03:54,610 --> 00:03:59,000
Αλλά όλα νοιάζει είναι
ακριβώς εδώ, οι κόμβοι παιδί.

84
00:03:59,000 --> 00:04:00,410
Ας ανοίξουμε το επάνω.

85
00:04:00,410 --> 00:04:03,810
>> Μέσα από εκεί βλέπω
κάτι γνωστό, HTML.

86
00:04:03,810 --> 00:04:07,670
Έτσι, στο εσωτερικό του εγγράφου μας
ένα επίπεδο πιο κάτω, HTML.

87
00:04:07,670 --> 00:04:08,550
Ανοίγω το επάνω.

88
00:04:08,550 --> 00:04:10,380
Τι περιμένουμε;

89
00:04:10,380 --> 00:04:13,760
>> Αν θυμάστε από το διάγραμμα μας,
τι πρέπει να βρείτε μέσα της HTML;

90
00:04:13,760 --> 00:04:17,275
Ποιες δύο κόμβοι είναι κάτω στο δέντρο;

91
00:04:17,275 --> 00:04:17,899
Ας ανακαλύψουμε.

92
00:04:17,899 --> 00:04:18,940
Έχουμε ανοίξει HTML.

93
00:04:18,940 --> 00:04:22,079
Κατεβαίνουμε σε κόμβους παιδί του.

94
00:04:22,079 --> 00:04:23,440
>> Pop που ανοίγουν.

95
00:04:23,440 --> 00:04:25,990
Υπάρχει κεφάλι και το σώμα.

96
00:04:25,990 --> 00:04:28,540
Και μπορούμε να ανοίξουμε το κεφάλι.

97
00:04:28,540 --> 00:04:30,460
Μετάβαση σε κόμβους παιδί του.

98
00:04:30,460 --> 00:04:31,460
Λοιπόν, υπάρχει ο τίτλος.

99
00:04:31,460 --> 00:04:33,293
>> Και θα μπορούσαμε να πάμε και να
κατ 'αυτόν για πάντα.

100
00:04:33,293 --> 00:04:34,770
Θα μπορούσαμε να το κάνουμε αυτό με το σώμα, καθώς και.

101
00:04:34,770 --> 00:04:40,090
Αλλά υπάρχει ένας τρόπος για εμάς να εξετάσουμε
το έγγραφο που οργανώνεται ως ένα μεγάλο αντικείμενο.

102
00:04:40,090 --> 00:04:42,610
Και αν κοιτάξουμε είναι μια μεγάλη
αντικείμενο που μοιάζει πολύ

103
00:04:42,610 --> 00:04:47,480
όπως κωδικός, αυτό σημαίνει ότι μπορούμε να αρχίσουμε
να χειριστούν αυτό το μεγάλο αντικείμενο χρησιμοποιώντας

104
00:04:47,480 --> 00:04:51,220
κώδικα για να αλλάξετε ό, τι μας
ιστοσελίδα φαίνεται και αισθάνεται όπως.

105
00:04:51,220 --> 00:04:54,920
>> Έτσι, αυτό είναι ένα πολύ ισχυρό εργαλείο
έχουμε στη διάθεσή μας σήμερα.

106
00:04:54,920 --> 00:04:57,360
Έτσι, όπως μόλις είδαμε, η
το ίδιο το αντικείμενο του εγγράφου

107
00:04:57,360 --> 00:05:01,392
και όλα τα αντικείμενα στο εσωτερικό του
έχουν ιδιότητες και μεθόδους, μόλις

108
00:05:01,392 --> 00:05:04,100
όπως και κάθε άλλο αντικείμενο που έχουμε
συνεργάζεται με σε JavaScript.

109
00:05:04,100 --> 00:05:08,370
Αλλά μπορούμε να χρησιμοποιήσουμε αυτές τις ιδιότητες και
χρησιμοποιήσετε αυτές τις μεθόδους για να είδος τρυπάνι κάτω

110
00:05:08,370 --> 00:05:10,900
από το μεγάλο έγγραφο και να πάρει
και πιο χαμηλά και κάτω,

111
00:05:10,900 --> 00:05:13,360
λεπτότερη και λεπτότερη σπόροι
λεπτομέρεια, μέχρι να

112
00:05:13,360 --> 00:05:17,510
φτάσουμε σε ένα πολύ συγκεκριμένο κομμάτι μας
ιστοσελίδα που θέλουμε να αλλάξουμε.

113
00:05:17,510 --> 00:05:22,700
>> Και όταν ενημερώσουμε ιδιότητες του
Document Object ή καλέστε τις μεθόδους αυτές,

114
00:05:22,700 --> 00:05:24,450
τα πράγματα μπορεί να συμβεί στην ιστοσελίδα μας.

115
00:05:24,450 --> 00:05:28,420
Και δεν χρειάζεται να κάνει οποιαδήποτε δροσιστικό
να έχουν αυτές οι αλλαγές τεθούν σε ισχύ.

116
00:05:28,420 --> 00:05:33,160
>> Και αυτό είναι ένα πολύ δροσερό δυνατότητα να
έχουν όταν δουλεύουμε με κωδικό.

117
00:05:33,160 --> 00:05:37,185
Έτσι τι είναι μερικές από αυτές τις ιδιότητες
που αποτελούν μέρος ενός αντικειμένου εγγράφου;

118
00:05:37,185 --> 00:05:40,100
Λοιπόν, ίσως είδε ένα
μερικά από αυτά πολύ γρήγορα

119
00:05:40,100 --> 00:05:42,700
όπως είχαμε zipping
μέσω του γίγαντα έγγραφο

120
00:05:42,700 --> 00:05:45,150
αντικείμενο που μόλις είδατε στο web browser.

121
00:05:45,150 --> 00:05:48,420
>> Όμως, ένα ζευγάρι από αυτές τις ιδιότητες
μπορεί να είναι τα πράγματα όπως εσωτερική HTML.

122
00:05:48,420 --> 00:05:52,950
Και ίσως να θυμηθούμε μένα, ακόμη και
χρησιμοποιώντας αυτό στο βίντεο JavaScript

123
00:05:52,950 --> 00:05:54,950
στο τέλος, όταν
μιλούσε για γεγονότα.

124
00:05:54,950 --> 00:05:56,125
Ποια ήταν αυτή η εσωτερική HTML;

125
00:05:56,125 --> 00:05:59,030
Λοιπόν, αυτό είναι ακριβώς ό, τι είναι
μεταξύ των ετικετών.

126
00:05:59,030 --> 00:06:01,590
>> Και έτσι η εσωτερική HTML,
για παράδειγμα, του τίτλου

127
00:06:01,590 --> 00:06:05,390
ετικέτα, αν είχαμε συνεχίζαμε σε
ότι το παράδειγμα πριν από λίγο,

128
00:06:05,390 --> 00:06:08,020
θα ήταν hello world.

129
00:06:08,020 --> 00:06:10,140
Αυτός ήταν ο τίτλος της σελίδας μας.

130
00:06:10,140 --> 00:06:12,370
Άλλες ιδιότητες
περιλαμβάνει το όνομα κόμβου, ο οποίος

131
00:06:12,370 --> 00:06:15,810
είναι το όνομα μιας HTML
στοιχείο όπως ο τίτλος.

132
00:06:15,810 --> 00:06:19,100
ID, το οποίο είναι το αναγνωριστικό
αποδίδουν ενός στοιχείου HTML.

133
00:06:19,100 --> 00:06:23,790
>> Υπενθυμίζουμε ότι μπορούμε να υποδείξει ειδικά
συγκεκριμένα στοιχεία της HTML μας

134
00:06:23,790 --> 00:06:27,510
με ένα χαρακτηριστικό αναγνωριστικό, το οποίο συνήθως
έρχεται σε πρακτικό, στο πλαίσιο των CSS,

135
00:06:27,510 --> 00:06:29,000
ειδικά.

136
00:06:29,000 --> 00:06:33,217
Μητρικό κόμβο, η οποία είναι μια αναφορά σε
τι είναι ακριβώς από πάνω μου στο DOM.

137
00:06:33,217 --> 00:06:35,800
Και κόμβους παιδί, το οποίο είναι ένα
αναφορά σε αυτό που είναι κάτω από μένα.

138
00:06:35,800 --> 00:06:37,950
Και είδαμε πολλά γι 'αυτό
απλά ψάχνουν μέσα.

139
00:06:37,950 --> 00:06:42,970
Κόμβους παιδί, αυτό είναι το πώς φτάσαμε
και χαμηλότερα στο δέντρο.

140
00:06:42,970 --> 00:06:46,590
>> Χαρακτηριστικά, αυτό είναι μόνο μια σειρά
της χαρακτηριστικά του στοιχείου HTML.

141
00:06:46,590 --> 00:06:50,270
Έτσι, ένα παράδειγμα θα μπορούσε χαρακτηριστικά
είναι εάν έχετε μια ετικέτα εικόνας,

142
00:06:50,270 --> 00:06:54,090
έχει συνήθως ένα χαρακτηριστικό πηγή,
ίσως ένα ύψος και το πλάτος χαρακτηριστικό.

143
00:06:54,090 --> 00:06:57,120
Και έτσι αυτό θα ήταν απλά ένας πίνακας
από όλα τα χαρακτηριστικά που συνδέονται

144
00:06:57,120 --> 00:06:59,300
με εκείνο το στοιχείο HTML.

145
00:06:59,300 --> 00:07:04,140
>> Style είναι ένα άλλο που
δεν αντιπροσωπεύει το CSS

146
00:07:04,140 --> 00:07:06,050
styling ενός συγκεκριμένου στοιχείου.

147
00:07:06,050 --> 00:07:08,310
Και αργότερα σε αυτό το
βίντεο, θα ειδικώς

148
00:07:08,310 --> 00:07:14,592
στυλ μόχλευση για να κάνει ένα ζευγάρι
από αλλαγές στην ιστοσελίδα μας.

149
00:07:14,592 --> 00:07:15,800
Έτσι, αυτές είναι μερικές ιδιότητες.

150
00:07:15,800 --> 00:07:17,591
>> Και υπάρχουν και κάποιοι
μεθόδους που μπορούμε να

151
00:07:17,591 --> 00:07:22,450
χρησιμοποιήσετε για να επίσης πιο γρήγορα ίσως απομόνωση
στοιχεία του Αντικειμένου Εγγράφου.

152
00:07:22,450 --> 00:07:26,730
Ίσως, το πιο ευέλικτο
των οποίων είναι getElementById.

153
00:07:26,730 --> 00:07:31,190
Γι 'αυτό και θα μπορούσε να πει κάτι σαν, επειδή
να θυμάστε ότι είναι μια μέθοδος του εγγράφου

154
00:07:31,190 --> 00:07:34,880
Αντικείμενο, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> Και μέσα από αυτές τις παρενθέσεις, καθορίστε
ένα στοιχείο HTML με ένα συγκεκριμένο αναγνωριστικό

156
00:07:39,820 --> 00:07:42,330
χαρακτηριστικό που έχω στο παρελθόν
που, και εγώ θα αμέσως

157
00:07:42,330 --> 00:07:46,685
πηγαίνετε δεξιά στο στοιχείο αυτό
του συνολικού ιστοσελίδας.

158
00:07:46,685 --> 00:07:49,310
Γι 'αυτό και δεν χρειάζεται να τρυπάνι ίσως
κάτω, σε κάθε στρώση.

159
00:07:49,310 --> 00:07:52,841
Μπορώ να χρησιμοποιήσω μόνο αυτή τη μέθοδο για να το βρείτε,
περίπου όπως ένα πύραυλο θερμότητας που αναζητούν,

160
00:07:52,841 --> 00:07:53,340
δικαίωμα?

161
00:07:53,340 --> 00:07:56,300
Απλά πηγαίνει και βρίσκει
ακριβώς αυτό που ψάχνει.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName είναι
πολύ παρόμοια στο πνεύμα.

163
00:07:59,290 --> 00:08:02,500
Ίσως αυτό θα βρείτε όλα τα
έντονους ετικέτες ή το σύνολο των ετικετών p

164
00:08:02,500 --> 00:08:05,920
και να μου δώσει μια σειρά από ό, τι
ότι θα μπορούσα τότε να συνεργαστεί με.

165
00:08:05,920 --> 00:08:12,080
appendChild προσθέτει κάτι
ένα επίπεδο πιο κάτω στο δέντρο.

166
00:08:12,080 --> 00:08:16,440
>> Έτσι μπορώ να προσθέσω μια ολόκληρη νέα
στοιχείο ένα επίπεδο χαμηλότερα.

167
00:08:16,440 --> 00:08:19,700
Ή μπορώ να αφαιρέσετε ένα στοιχείο που είναι
ένα επίπεδο χαμηλότερα, καθώς, αν θέλω

168
00:08:19,700 --> 00:08:22,870
για να διαγράψετε κάτι από την ιστοσελίδα μου.

169
00:08:22,870 --> 00:08:28,480
Τώρα, μια γρήγορη κωδικοποίηση σημείωμα και μια γρήγορη
εξοικονόμησης πονοκέφαλο σημείωμα, ελπίζω.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- το d είναι πεζά.

171
00:08:31,670 --> 00:08:36,950
Δεν μπορώ να σας πω πόσες φορές έχω
μεταχειρισμένα getElementById και της κεφαλαιοποιημένης

172
00:08:36,950 --> 00:08:38,336
το δ εκεί.

173
00:08:38,336 --> 00:08:39,460
Επειδή είναι πολύ συχνές.

174
00:08:39,460 --> 00:08:42,990
Αν γράφουμε το αναγνωριστικό λέξη, είναι
συνήθως κεφάλαιο Ι κεφάλαιο Δ

175
00:08:42,990 --> 00:08:44,240
Και τον κωδικό μου απλά δεν λειτουργεί.

176
00:08:44,240 --> 00:08:45,630
Και δεν μπορώ να καταλάβω γιατί.

177
00:08:45,630 --> 00:08:49,490
Αυτό είναι ένα πραγματικά, πραγματικά, πραγματικά
κοινό σφάλμα που όλοι κάνουν,

178
00:08:49,490 --> 00:08:51,890
ακόμη και οι εμπειρογνώμονες που έχουν
το κάνουν αυτό για πάντα.

179
00:08:51,890 --> 00:08:55,410
Έτσι απλά να γνωρίζουν, getElementById,
ότι d είναι πεζά.

180
00:08:55,410 --> 00:09:00,080
Και ελπίζουμε, ότι σας εξοικονομεί αρκετά
λεπτά τουλάχιστον στενοχώρια.

181
00:09:00,080 --> 00:09:02,204
>> Έτσι τι σημαίνουν όλα αυτά μας λένε;

182
00:09:02,204 --> 00:09:03,120
Έχουμε αυτές τις μεθόδους.

183
00:09:03,120 --> 00:09:04,161
Έχουμε αυτές τις ιδιότητες.

184
00:09:04,161 --> 00:09:06,610
Τώρα, αν αρχίσουμε από
έγγραφο, το έγγραφο.

185
00:09:06,610 --> 00:09:10,220
ό, μπορούμε τώρα να πάρει σε οποιοδήποτε
μόνο κομμάτι της ιστοσελίδας μας

186
00:09:10,220 --> 00:09:14,870
ότι θέλουμε να χρήση JavaScript
απλά καλώντας αυτές τις μεθόδους

187
00:09:14,870 --> 00:09:19,940
και αξιοποιώντας τις ιδιότητες
ότι θα βρούμε σε διάφορες τοποθεσίες.

188
00:09:19,940 --> 00:09:24,890
>> Αυτό μπορεί να πάρει φλύαρος, αυτό
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
ίσως να έχουν ένα μεγάλο όνομα ετικέτας,
ίσως να κάνετε περισσότερες κλήσεις αργότερα.

190
00:09:28,560 --> 00:09:31,230
Τα πράγματα μπορούν να πάρουν λίγο φλύαρο.

191
00:09:31,230 --> 00:09:34,480
Και οι προγραμματιστές, όπως έχετε
ίσως δει σε πολλά από αυτά τα βίντεο,

192
00:09:34,480 --> 00:09:36,600
δεν μας αρέσει φλύαρος πράγματα.

193
00:09:36,600 --> 00:09:38,520
>> Μας αρέσει να είναι σε θέση να κάνουμε τα πράγματα γρήγορα.

194
00:09:38,520 --> 00:09:42,640
Έτσι, θα θέλαμε μια πιο
συνοπτικό τρόπο για να πω κάτι.

195
00:09:42,640 --> 00:09:46,270
Έτσι, αυτό το είδος της οδηγεί στην
έννοια της κάτι που ονομάζεται jQuery.

196
00:09:46,270 --> 00:09:49,170
Τώρα δεν είναι jQuery JavaScript.

197
00:09:49,170 --> 00:09:50,350
Δεν είναι μέρος της JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Είναι μια βιβλιοθήκη που γράφτηκε
από κάποιους προγραμματιστές JavaScript

199
00:09:54,790 --> 00:09:57,060
Πριν από περίπου 10 χρόνια.

200
00:09:57,060 --> 00:10:01,300
Και ο στόχος της είναι να απλοποιήσει τι είναι αυτό
που ονομάζεται side scripting πελάτη, η οποία

201
00:10:01,300 --> 00:10:04,310
είναι βασικά αυτό που ήμασταν
μιλάμε για το DOM με χειρισμούς.

202
00:10:04,310 --> 00:10:11,090
Και έτσι αν ήθελα να τροποποιήσει το
χρώμα στο φόντο της ιστοσελίδας μου, ίσως

203
00:10:11,090 --> 00:10:11,980
ένα ειδικό Div.

204
00:10:11,980 --> 00:10:15,325
>> Εδώ, είμαι προφανώς να πάρει
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Και θέλω να ορίσετε το χρώμα φόντου της.

206
00:10:16,950 --> 00:10:20,720
Αν είμαι απλά χρησιμοποιώντας αγνά JavaScript
χρησιμοποιώντας το Document Object Model,

207
00:10:20,720 --> 00:10:23,990
ότι είναι πολλά πράγματα, έτσι δεν είναι;
document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = πράσινο.

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> Μπά.

211
00:10:28,050 --> 00:10:30,110
Αυτό ήταν μια πολλά να πει.

212
00:10:30,110 --> 00:10:31,720
Είναι μια πολύ να πληκτρολογήσετε, πάρα πολύ.

213
00:10:31,720 --> 00:10:35,760
Και έτσι σε jQuery, μπορούμε να πούμε ίσως
αυτό το λίγο πιο συνοπτικά.

214
00:10:35,760 --> 00:10:39,350
Το εμπόριο off είναι ότι είναι ίσως λίγο
λίγο πιο αινιγματικά ξαφνικά,

215
00:10:39,350 --> 00:10:39,850
δικαίωμα?

216
00:10:39,850 --> 00:10:43,580
>> Τουλάχιστον το χρονικό διάστημα είναι λίγο πιο
επεξηγηματικές ως προς το τι κάνουμε.

217
00:10:43,580 --> 00:10:49,947
Αυτό το σύμβολο του δολαρίου, παρενθέσεις,
απλά εισαγωγικά, χασίς, colorDiv, σωστά;

218
00:10:49,947 --> 00:10:50,780
Τι σημαίνει αυτό?

219
00:10:50,780 --> 00:10:53,640
Λοιπόν, αυτό είναι βασικά ακριβώς
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Αλλά είναι αυτό το είδος στενογραφίας
τρόπος για να γίνει αυτό με τη χρήση jQuery.

221
00:10:58,700 --> 00:11:01,380
Ας ρίξουμε μια ματιά τώρα
σε δυο διαφορετικούς τρόπους

222
00:11:01,380 --> 00:11:04,520
ότι θα μπορούσα πραγματικά
χρησιμοποιήσετε αυτό το Αντικειμένου Εγγράφου

223
00:11:04,520 --> 00:11:06,807
Μοντέλο για να χειραγωγήσουν τα κομμάτια του site μου.

224
00:11:06,807 --> 00:11:09,140
Ειδικότερα, θα πάμε
να εργάζεται για το χειρισμό

225
00:11:09,140 --> 00:11:14,090
το χρώμα ενός συγκεκριμένου
Div, colorDiv, σε μια ιστοσελίδα.

226
00:11:14,090 --> 00:11:15,299
Έτσι, ας ρίξουμε μια ματιά σε αυτό.

227
00:11:15,299 --> 00:11:15,798
Εντάξει.

228
00:11:15,798 --> 00:11:16,700
Έτσι, είμαι σε μια σελίδα.

229
00:11:16,700 --> 00:11:20,750
Αυτό λέγεται test.html όταν κάνετε λήψη
αυτό αν θέλετε να πειραματιζόμαστε με αυτό.

230
00:11:20,750 --> 00:11:24,730
Και έχω ένα σωρό
κουμπιά σε αυτή τη σελίδα.

231
00:11:24,730 --> 00:11:27,730
Και λέω επιμέρους λειτουργίες
για το χρώμα του φόντου, μοβ, πράσινο,

232
00:11:27,730 --> 00:11:31,330
πορτοκαλί, κόκκινο, μπλε, μία ενιαία λειτουργία
για το χρώμα του φόντου, χειρισμού συμβάντων

233
00:11:31,330 --> 00:11:34,360
για το χρώμα του φόντου, και με τη χρήση jQuery.

234
00:11:34,360 --> 00:11:38,147
Τι μιλάω
όταν το κάνω αυτό;

235
00:11:38,147 --> 00:11:39,230
Έτσι έχουμε δει τα κουμπιά.

236
00:11:39,230 --> 00:11:41,521
Τώρα, ας ρίξουμε μια ματιά
μερικά από τον πηγαίο κώδικα εδώ.

237
00:11:41,521 --> 00:11:44,770
Θα ξεκινήσουμε με test.html.

238
00:11:44,770 --> 00:11:48,100
Έτσι, επιμέρους λειτουργίες για φόντο
το χρώμα είναι αυτό που έχω πληκτρολογήσει εδώ.

239
00:11:48,100 --> 00:11:49,350
Επιτρέψτε μου να μετακινηθείτε λίγο.

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> Και θα παρατηρήσετε ότι εγώ
έχουν καθορίσει αυτά τα κουμπιά

242
00:11:58,820 --> 00:12:03,990
να πω όταν πατηθεί αυτό το κουμπί,
κλήση της συνάρτησης γίνουν μοβ.

243
00:12:03,990 --> 00:12:06,670
Όταν αυτό το κουμπί κλικ, μάλλον,
καλέσει η λειτουργία γίνεται πράσινο,

244
00:12:06,670 --> 00:12:08,710
γίνει πορτοκαλί, γίνονται κόκκινα, μπλε.

245
00:12:08,710 --> 00:12:11,880
Μπορείτε να μαντέψετε ότι αυτό
Δεν είναι ίσως ο καλύτερος σχεδιασμός

246
00:12:11,880 --> 00:12:12,460
έννοια, σωστά;

247
00:12:12,460 --> 00:12:16,490
>> Θα ήταν ωραίο αν μπορούσα
έχουν μια πιο γενική προσέγγιση.

248
00:12:16,490 --> 00:12:19,570
Λοιπόν, πρώτα θα ρίξουμε μια ματιά
σε ό, τι είναι αυτά τα πέντε λειτουργίες

249
00:12:19,570 --> 00:12:24,400
document.getElementById
colorDiv.style.background = μωβ,

250
00:12:24,400 --> 00:12:27,250
πράσινο, πορτοκαλί, κόκκινο,
και μπλε, αντίστοιχα.

251
00:12:27,250 --> 00:12:30,930
Έτσι, δεν είναι ιδιαίτερα το καλύτερο σχέδιο.

252
00:12:30,930 --> 00:12:33,390
>> Το επόμενο σύνολο των κουμπιών
Έχω αυτό που έχω γράψει

253
00:12:33,390 --> 00:12:36,380
μια ενιαία λειτουργία που ονομάζεται
αλλάξετε το χρώμα που προφανώς

254
00:12:36,380 --> 00:12:38,960
δέχεται ένα string ως όρισμα.

255
00:12:38,960 --> 00:12:40,290
Έτσι, αυτό είναι λίγο καλύτερα.

256
00:12:40,290 --> 00:12:43,840
Μοβ, πράσινο, πορτοκαλί, κόκκινο,
το μπλε είναι τώρα ένα επιχείρημα.

257
00:12:43,840 --> 00:12:46,230
Έτσι έχω γράψει ένα πιο γενικό
περίπτωση λειτουργία JavaScript,

258
00:12:46,230 --> 00:12:47,771
η οποία μπορεί να μοιάζει κάπως έτσι.

259
00:12:47,771 --> 00:12:48,680
Είμαι περνώντας.

260
00:12:48,680 --> 00:12:52,090
Αυτή η αλλαγή χρώματος η λειτουργία είναι
περιμένοντας ένα επιχείρημα που ονομάζεται χρώμα.

261
00:12:52,090 --> 00:12:54,970
Και λέω που η
χρώμα φόντου με το χρώμα.

262
00:12:54,970 --> 00:12:58,390
Έτσι, εδώ αντιπροσωπεύει αυτό που έχω εδώ.

263
00:12:58,390 --> 00:12:59,770
Έτσι, αυτό είναι λίγο καλύτερα.

264
00:12:59,770 --> 00:13:02,740
>> Αλλά εγώ θα μπορούσε να είναι σε θέση να
κάνουμε κάτι καλύτερο από αυτό.

265
00:13:02,740 --> 00:13:06,140
Αν πάμε κάτω για να ρίξετε μια ματιά
για την κατάσταση χειρισμού συμβάντων,

266
00:13:06,140 --> 00:13:07,860
τώρα όλες οι κλήσεις αυτές φαίνονται το ίδιο.

267
00:13:07,860 --> 00:13:10,340
Αν θυμάστε για μας
συζήτηση σχετικά με τα προγράμματα χειρισμού συμβάντων,

268
00:13:10,340 --> 00:13:15,770
Μπορώ να πάρω πληροφορίες σχετικά με το ποια από
Αυτά τα κουμπιά έγινε κλικ και να τις χρησιμοποιούν.

269
00:13:15,770 --> 00:13:19,560
>> Και έτσι σε event.JavaScript, έχω
γραπτή εκδήλωση αλλαγή χρώματος, η οποία

270
00:13:19,560 --> 00:13:21,110
υπολογίζει ποιο κουμπί έχει πατηθεί.

271
00:13:21,110 --> 00:13:23,250
Αυτή είναι η γραμμή αντικείμενο σκανδάλη.

272
00:13:23,250 --> 00:13:25,240
Και τότε εδώ, παίρνει πραγματικά φλύαρος.

273
00:13:25,240 --> 00:13:27,420
Αλλά αυτό που κάνω είναι ότι είμαι
τον καθορισμό του υποβάθρου

274
00:13:27,420 --> 00:13:30,340
χρώμα να triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Αυτό είναι το κείμενο
μεταξύ των ετικετών κουμπιού.

276
00:13:34,170 --> 00:13:36,500
>> Και τότε θα έχουν προφανώς
για να το ρυθμίσετε σε πεζά.

277
00:13:36,500 --> 00:13:40,780
Και αυτό είναι το πώς μπορώ να μετατρέψει μια ολόκληρη
συμβολοσειράς σε πεζούς σε JavaScript χρησιμοποιώντας

278
00:13:40,780 --> 00:13:42,940
ότι η μέθοδος αυτή πεζά.

279
00:13:42,940 --> 00:13:46,570
Γιατί όταν έθεσα ένα χρώμα,
όπως είμαι προσπαθούμε να κάνουμε εδώ,

280
00:13:46,570 --> 00:13:48,260
το χρώμα πρέπει να είναι όλα πεζά.

281
00:13:48,260 --> 00:13:50,920
>> Αλλά το κουμπί που είχα,
αν πάρουμε μια άλλη ματιά,

282
00:13:50,920 --> 00:13:55,890
παρατηρήσετε ότι το κείμενο είναι εκεί
γραμμένο με κεφαλαίο P για μωβ.

283
00:13:55,890 --> 00:13:59,140
Και στη συνέχεια στο πολύ
κάτω εδώ, προφανώς

284
00:13:59,140 --> 00:14:02,630
να προσπαθήσουμε και να το κάνετε αυτό χρησιμοποιώντας το jQuery, καθώς και.

285
00:14:02,630 --> 00:14:06,000
Και σε αυτή την περίπτωση, δεν είμαι στην πραγματικότητα
καλώντας μια λειτουργία σε όλα.

286
00:14:06,000 --> 00:14:11,430
Έχω μόλις είπε η τάξη που είμαι
χρησιμοποιώντας γι 'αυτό το πλήκτρο είναι ένα κουμπί jQ.

287
00:14:11,430 --> 00:14:12,360
Αυτό ήταν.

288
00:14:12,360 --> 00:14:14,950
>> Και πώς jQuery ξέρω τι κάνω;

289
00:14:14,950 --> 00:14:18,740
Λοιπόν, αυτό είναι ένα από τα πλεονεκτήματα
μειώσει τα μειονεκτήματα του jQuery.

290
00:14:18,740 --> 00:14:21,560
Μπορεί να μου επιτρέψετε να κάνω πράγματα
πολύ συνοπτικά, αλλά ίσως όχι

291
00:14:21,560 --> 00:14:22,570
όπως διαισθητικά.

292
00:14:22,570 --> 00:14:25,570
Ίσως αυτά τα άλλα τρία να κάνει μια
λίγο περισσότερο νόημα αυτό που κάνω.

293
00:14:25,570 --> 00:14:29,010
Εδώ, όμως, τι συμβαίνει;

294
00:14:29,010 --> 00:14:31,940
>> Προφανώς, δημιουργώντας
μια ανώνυμη συνάρτηση

295
00:14:31,940 --> 00:14:36,790
ότι τα φορτία κάθε φορά που το έγγραφό μου
είναι έτοιμο, οπότε document.ready,

296
00:14:36,790 --> 00:14:38,760
κάποια λειτουργία πρόκειται να συμβεί.

297
00:14:38,760 --> 00:14:40,490
Βασικά, όταν είναι έτοιμο ένα έγγραφο;

298
00:14:40,490 --> 00:14:42,310
Είναι όταν σελίδα μου έχει φορτωθεί.

299
00:14:42,310 --> 00:14:46,540
>> Έτσι, το συντομότερο σελίδα μου έχει φορτωθεί, ο
παρακάτω συνάρτηση είναι πάντα έτοιμος.

300
00:14:46,540 --> 00:14:54,310
Λέει, αν ένα αντικείμενο του τύπου jQButton,
ή εάν η κλάση jQButton έχει πατηθεί,

301
00:14:54,310 --> 00:14:55,570
εκτελέσετε αυτή τη λειτουργία.

302
00:14:55,570 --> 00:14:59,360
Έτσι, εδώ είναι δύο ανώνυμες λειτουργίες,
μία ορισμένη εσωτερικό του άλλου.

303
00:14:59,360 --> 00:15:03,930
>> Έτσι, ολόκληρο το πλαίσιο μου
εδώ μέχρι στιγμής είναι η σελίδα μου

304
00:15:03,930 --> 00:15:06,520
όταν φορτώνει καλεί αυτή τη λειτουργία.

305
00:15:06,520 --> 00:15:09,740
Και αυτή η λειτουργία είναι σε αναμονή
για ένα κουμπί να πατηθεί.

306
00:15:09,740 --> 00:15:14,490
Και όταν πατηθεί το κουμπί, jQ
Συγκεκριμένα κουμπί χτυπιέται,

307
00:15:14,490 --> 00:15:17,150
καλεί το άλλο αυτό
λειτουργία, η οποία θα

308
00:15:17,150 --> 00:15:21,250
για να ρυθμίσετε το φόντο
χρώμα colorDiv να

309
00:15:21,250 --> 00:15:25,990
οποιοδήποτε κείμενο βρίσκεται ανάμεσα στις ετικέτες.

310
00:15:25,990 --> 00:15:28,050
>> Αυτή είναι η έννοια της
η οποία κουμπί έγινε κλικ.

311
00:15:28,050 --> 00:15:31,230
Αλλά κατά τα άλλα, αυτό είναι το είδος του
συμπεριφέρεται παρόμοια με ένα γεγονός.

312
00:15:31,230 --> 00:15:34,460
Είναι ακριβώς το ίδιο τρόπο που
Θα εκφράσουμε αυτό με jQuery.

313
00:15:34,460 --> 00:15:36,790
Και πάλι, αυτό είναι πιθανώς ένα
πολύ περισσότερο εκφοβιστικό.

314
00:15:36,790 --> 00:15:40,840
Δεν είναι τόσο σαφής όσο
κάτι σαν event.js,

315
00:15:40,840 --> 00:15:45,080
το οποίο είναι ίσως λίγο περισσότερο
φλύαρη, αλλά λίγο λιγότερο

316
00:15:45,080 --> 00:15:46,000
εκφοβιστικό.

317
00:15:46,000 --> 00:15:51,460
>> Αλλά αν σκάσει πίσω πάνω στο πρόγραμμα περιήγησής μου
παράθυρο, αν αρχίσω clicking-- καλά,

318
00:15:51,460 --> 00:15:52,690
ότι άλλαξε σε μωβ.

319
00:15:52,690 --> 00:15:54,450
Αυτό είναι το πράσινο χρησιμοποιώντας τη μέθοδο χορδή.

320
00:15:54,450 --> 00:15:56,500
Αυτό είναι πορτοκαλί χρησιμοποιώντας το πρόγραμμα χειρισμού συμβάντων.

321
00:15:56,500 --> 00:15:58,300
>> Αυτό είναι το κόκκινο χρησιμοποιώντας το jQuery, σωστά;

322
00:15:58,300 --> 00:16:01,270
Όλοι συμπεριφέρονται ακριβώς το ίδιο.

323
00:16:01,270 --> 00:16:06,509
Μπορούν απλά να το κάνετε χρησιμοποιώντας διαφορετικές
προσεγγίσεις για την επίλυση του προβλήματος.

324
00:16:06,509 --> 00:16:08,550
Υπάρχουν πολλά περισσότερα για να
jQuery τότε είμαστε σίγουρα

325
00:16:08,550 --> 00:16:10,050
πρόκειται να μιλήσω για αυτό το βίντεο.

326
00:16:10,050 --> 00:16:15,410
Αλλά αν θέλετε να μάθετε περισσότερα, μπορείτε να
πάει στο jQuery είδος της τεκμηρίωσης

327
00:16:15,410 --> 00:16:19,710
και να μάθουν αρκετά περισσότερο για
Αυτή η πολύ ευέλικτο βιβλιοθήκη, η οποία

328
00:16:19,710 --> 00:16:22,550
είναι μεγάλη για να κάνει την πλευρά του πελάτη
scripting, όπως αυτό που κάναμε

329
00:16:22,550 --> 00:16:26,240
να χειραγωγήσουν την εμφάνιση
και την αίσθηση της ιστοσελίδας μας

330
00:16:26,240 --> 00:16:28,750
με το Document Object Model.

331
00:16:28,750 --> 00:16:29,650
Είμαι ο Νταγκ Lloyd.

332
00:16:29,650 --> 00:16:31,930
Αυτό είναι CS50.

333
00:16:31,930 --> 00:16:34,022