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
on the fly.

7
00:00:16,460 --> 00:00:19,450
და ეს ცნება
დოკუმენტის ობიექტური მოდელის.

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
>> Inside იმ სხვა
ობიექტების და ა.შ., და ა.შ.,

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
მაქვს h2 header tag,
პუნქტის, და ბმული.

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
და ძალიან root ეს არის დოკუმენტი.

41
00:01:54,890 --> 00:02:00,030
>> Inside დოკუმენტის სხვა
ობიექტის გულისხმობდა 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
ობიექტი და p ობიექტი პუნქტის

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
ასე რომ, მე გახსნეს ბრაუზერის tab.

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-I-R.
ახლა, მე 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
მე ვაპირებ დააჭიროთ.

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
ახლა, როდესაც მე გახსნა arrow,
იქ იქნება ბევრი პერსონალი.

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
და იქ მთელი ბევრი
პერსონალი, რომ pops up.

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
finer და finer მარცვალი
დეტალურად, სანამ ჩვენ

112
00:05:13,360 --> 00:05:17,510
მისაღებად ძალიან კონკრეტული ნაწილი ჩვენი
ვებ გვერდზე, რომ ჩვენ გვინდა, რომ შეიცვალოს.

113
00:05:17,510 --> 00:05:22,700
>> ხოლო როდესაც ჩვენ განახლება თვისებები
დოკუმენტის ობიექტი და მოვუწოდებთ მათ, მეთოდები,

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
ობიექტის ჩვენ ვნახეთ ბრაუზერში.

121
00:05:45,150 --> 00:05:48,420
>> მაგრამ რამდენიმე ამ თვისებები
შეიძლება იყოს რამ, როგორიცაა შიდა HTML.

122
00:05:48,420 --> 00:05:52,950
და თქვენ შეიძლება გავიხსენოთ me
გამოყენებით ამ 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
ისე, ეს მხოლოდ ის, რაც არის
შორის tags.

126
00:05:59,030 --> 00:06:01,590
>> ასე რომ, შიდა HTML,
მაგალითად, სათაური

127
00:06:01,590 --> 00:06:05,390
tag, თუ ჩვენ ინახება აპირებს
რომ მაგალითად მომენტში წინ,

128
00:06:05,390 --> 00:06:08,020
იქნებოდა მიესალმები მსოფლიოში.

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, რომელიც 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
რომ ელემენტი.

145
00:06:59,300 --> 00:07:04,140
>> სტილი არის კიდევ ერთი, რომ
ამჯამად წარმოადგენს CSS

146
00:07:04,140 --> 00:07:06,050
სტილის კონკრეტული ელემენტს.

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- ის ელემენტი კონკრეტული ID

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
შესაძლოა, ეს იქნება ყველა იმ
თამამი tags ან ყველა p tags

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-- დ არის ამას.

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
თუ ჩვენ წერენ სიტყვა ID, რომ ეს
როგორც წესი, კაპიტალის კაპიტალი დ

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
ეს არის ნამდვილად, ნამდვილად, ნამდვილად
საერთო bug რომ ყველას აკეთებს,

178
00:08:49,490 --> 00:08:51,890
მაშინაც კი, ექსპერტები, რომლებსაც აქვთ
ამით სამუდამოდ.

179
00:08:51,890 --> 00:08:55,410
ასე რომ, უბრალოდ უნდა იცოდეს, getElementById,
რომ დ არის ამას.

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
იქნებ აქვს ხანგრძლივი tag სახელი,
იქნებ თქვენ უფრო ზარები მოგვიანებით.

190
00:09:28,560 --> 00:09:31,230
რამ შეიძლება კიდევ ცოტა wordy.

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
და მისი მიზანია გაამარტივოს ეს რა არის
მოუწოდა კლიენტის მხარეს სკრიფტინგის, რომელიც

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
კონკრეტული განყოფ.

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
გამოყენებით დოკუმენტის ობიექტური მოდელის,

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, რომ ეს შესაძლოა, ცოტა
ცოტა მეტი cryptic უეცრად,

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
ეს დოლარის ნიშანი, ფრჩხილებში,
ერთი გაცემა, hash, 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
მოდელი მანიპულირება ცალი ჩემი საიტი.

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 როდესაც თქვენ ჩამოტვირთვა
თუ გსურთ Tinker ერთად ეს.

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
რომ ვთქვათ, როდესაც ამ ღილაკზე დააწკაპუნებთ,
მოვუწოდებთ ფუნქცია ჩართოთ purple.

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 = purple,

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
ადასტურებს სიმებიანი როგორც მისი არგუმენტი.

255
00:12:38,960 --> 00:12:40,290
ასე რომ, ეს ცოტა უკეთესი.

256
00:12:40,290 --> 00:12:43,840
Purple, მწვანე, ნარინჯისფერი, წითელი,
ლურჯი არის არგუმენტი.

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
და მერე აქ, მართლა wordy.

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
ეს არის ტექსტი
შორის ღილაკს tags.

276
00:13:34,170 --> 00:13:36,500
>> და მერე აშკარად აქვს
შექმნას იგი ამას.

277
00:13:36,500 --> 00:13:40,780
და ეს როგორ შემიძლია გარდაქმნას მთელი
სიმებიანი ამას in 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
რასაც ტექსტი შორის tags.

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
რომელიც შესაძლოა ცოტა მეტი
verbose, მაგრამ ცოტა ნაკლები

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
ეს არის მწვანე გამოყენებით string მეთოდს.

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
დიდი აკეთებს კლიენტის მხარეს
სკრიპტირების, როგორიცაა რას ვაკეთებდით

329
00:16:22,550 --> 00:16:26,240
მანიპულირება სახე
და ვგრძნობთ ჩვენს ვებ გვერდზე

330
00:16:26,240 --> 00:16:28,750
ერთად დოკუმენტის ობიექტური მოდელი.

331
00:16:28,750 --> 00:16:29,650
მე Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
ეს არის CS50.

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