1
00:00:00,000 --> 00:00:06,440
დავბრუნდით მე და ჩემი გვერდი ძაღლების შესახებ
და მე ვაპირებ გამოვიყენო JavaScript

2
00:00:06,440 --> 00:00:11,888
და DOM api იმისთვის, რომ ეს გვერდი
კატების შესახებ გვერდად გადავაქციო.

3
00:00:11,888 --> 00:00:17,464
მგონი, ამ ოთახში სპილოა და მე ვცდილობ
არ მივაქციო მას ყურადღება..

4
00:00:17,464 --> 00:00:23,671
რეალურად, ოთახში ძაღლია, უფრო სწორად - ორი, 
კიდევ უფრო სწორად - ძაღლების სურათებია.

5
00:00:23,671 --> 00:00:29,478
კატების შესახებ გვერდზე ძაღლების სურათები 
ვერ მექნება. უნდა ჩავანაცვლო ისინი რამით.

6
00:00:29,487 --> 00:00:36,342
დავიწყოთ სურათების ძებნით. ვეძებთ
თეგის სახელით.

7
00:00:36,342 --> 00:00:47,869
`var imageEls = 
document.getElementsByTagName("img");`

8
00:00:47,869 --> 00:00:50,668
ახლა, რადგანაც ეს ბევრ ელემენტს გვიბრუნებს,

9
00:00:50,668 --> 00:00:54,725
მათ შორის ბრძანების გასამეორებლად
უნდა გამოვიყენოთ ციკლი for

10
00:00:54,725 --> 00:01:04,427
`var i = 0; i < imageEls.length; i++`

11
00:01:04,427 --> 00:01:11,456
მაგრამ რა უნდა ჩავსვა ციკლში?
მე ვერ შეცვლი სურათ-ელემენეტბს, თუ

12
00:01:11,456 --> 00:01:18,755
ისინი იყენებენ innerHTML-ს, იმიტომ რომ
სურათების თეგები არ შეიცავენ innerHTML-ს.

13
00:01:18,755 --> 00:01:23,796
მე უნდა შევცავლო ის, რის გამოც ამ სურათებზე
გამოსახულია ძაღლები --

14
00:01:23,796 --> 00:01:27,176
სურათების URL , რაც განისაზღვრება

15
00:01:27,176 --> 00:01:30,721
ყოველი თეგის src ატრიბუტში.

16
00:01:30,721 --> 00:01:36,461
ელემენტების ატრიბუტები . ნოტაციით იცვლება.
მოდი, გაჩვენებ.

17
00:01:36,461 --> 00:01:43,179
გადავდივართ მიმდინარე ელემენტზე, 
ნოტაციით ფრჩხილებში, ვსვამთ წერტილს

18
00:01:43,179 --> 00:01:50,653
და ვსვამთ HTML ატრიბუტის სახელს როგორც
JavaScript თვისების სახელს -- src -- უდრის

19
00:01:50,653 --> 00:01:54,841
და აქ ვსვამთ ახალ მნიშვნელობას;
ჯერ ცარიელი ხაზი იყოს.

20
00:01:54,841 --> 00:01:57,298
ხედავ? სურათები გაქრა.

21
00:01:57,298 --> 00:02:01,672
იმიტომ რომ ცარიელი ხაზი
არ მიუთითებს საერთოდ არანაირ სურათზე.

22
00:02:01,672 --> 00:02:07,664
იმისთვის, რომ ახალი URL ჩავსვა,
ვაკოპირებ აქ ძველს

23
00:02:07,664 --> 00:02:13,022
და ფაილის სახლეს ვცვლი კატაზე;
ასე მოხდა, რომ ვიცი

24
00:02:13,022 --> 00:02:16,842
რომ სწორედ ასეთია ხანის აკადემიაზე
კატის სურათის URL

25
00:02:16,842 --> 00:02:23,404
გამოვიდა! ძაღლები კატებად გადაიქცა და
ჩვენი კატიფიკაცია თითქმის დასრულდა.

26
00:02:23,404 --> 00:02:30,897
ხედავთ კიდევ რაღაცას, რაც ძაღლებთანაა
კავშირში? თითქმის შეუმჩნეველია,

27
00:02:30,897 --> 00:02:36,827
მაგრამ რაღაც დაგვრჩა - ესაა ვიკიპედიის 
ბმული, რომელიც გადადის ძაღლების გვერდზე.

28
00:02:36,827 --> 00:02:41,448
და თუ მომხმარებელი გადავა ამ ბმულზე,
იგი მიიღებს ინფორმაციას ძაღლებზე.

29
00:02:41,448 --> 00:02:47,347
მე კი მინდა, რომ მან კატებზე წაიკითხოს. 
როგორ ვიპოვო ეს ბმული JavaScript-ში?

30
00:02:47,347 --> 00:02:51,828
შემიძლია მივცე ამ ბმულს ID
და გამოვიყენო getElementById

31
00:02:51,828 --> 00:02:57,096
ან შემიძლია გამოვიყენო getElementsByTagName
და შევცვალო ყველა ბმული გვერდზე.

32
00:02:57,096 --> 00:02:59,414
ან, სუპერ-მონდომებული თუ ვარ,

33
00:02:59,414 --> 00:03:06,657
CSS სელექტორით შემიძლია ვიპოვო ყველა 
ის ბმული, რომელიც ძაღლებიან გვერდზე გადადის.

34
00:03:06,657 --> 00:03:11,822
ახლა გაჩვენებ CSS სელექტორს, რომელსაც
გამოვიყენებ აქ, თეგში 

35
00:03:11,822 --> 00:03:15,946
ეს CSS სელექტორი იპოვის ყველა ბმულს,
რომელიც რამე კავშირშია ძაღლებთან.

36
00:03:15,946 --> 00:03:19,325
პირველ რიგში უნდა ჩავწერო a,
იმიტომ რომ ვეძებ ბმულებს.

37
00:03:19,325 --> 00:03:26,041
შემდეგ კი ჩავწერ [href*="Dog"]

38
00:03:26,041 --> 00:03:31,950
ეს აცნობებს CSS-ს, რომ უნდა იპოვოს ყველა 
ბმული, რომელიც შეიცავს სიტყვას "Dog"

39
00:03:31,950 --> 00:03:38,166
შემდეგ კი შევცვალოთ მათი ფერი იასამნისფერზე.
მზადაა.

40
00:03:38,166 --> 00:03:43,566
კარგი მეთოდია, არა?
ეს არის ატრიბუციის სელექტორი

41
00:03:43,566 --> 00:03:49,467
და ის ძალიან გამოსადეგია, როცა დოკუმენტში
სპეციფიკური რაღაცების პოვნა გინდა.

42
00:03:49,467 --> 00:03:58,041
ახლა ამის JavaScript-ში საპოვნად
შეგვიძლია გამოვიყენოთ document.querySelectorAll

43
00:03:58,041 --> 00:04:07,992
ვუთითებთ var linkEls = document.querySelectorAll

44
00:04:07,992 --> 00:04:12,580
და ვსვამთ შედეგს სელექტორში.

45
00:04:12,580 --> 00:04:22,695
მთავარია, ორმაგი ბრჭყალები არ დაგვრჩეს.
ესეც ასე. კარგი ხაზი გამოვიდა.

46
00:04:22,695 --> 00:04:27,558
ახლა ამათშიც უნდა გავიმეოროთ ბრძანება,
ანუ, ისევ უნდა შევქმნათ ციკლი --

47
00:04:27,558 --> 00:04:34,645
ალბათ, უკვე შეეჩვიე ციკლების შექმნას --

48
00:04:34,645 --> 00:04:41,642
ჩვენ გვინდა, რომ ყოველი ბმული შეიცვალოს
ვიკიპედიის კატების შესახებ სტატიის ბმულით.

49
00:04:41,642 --> 00:04:45,501
ამისთვის ჩავწეროთ linkEls[i].href --

50
00:04:45,501 --> 00:04:50,681
იმიტომ რომ ეს არის იმ ატრიბუტის სახელი,
რომელსაც ვცვლით -- უდრის

51
00:04:50,681 --> 00:05:00,113
ჩავსვათ აქ ეს URL და შეცვალოთ ის კატებზე.

52
00:05:00,113 --> 00:05:04,305
იმიტომ რომ დარწმუნებული ვარ,
რომ სტატიის URL ზუსტად ეს იქნება.

53
00:05:04,305 --> 00:05:10,532
მორჩა, სამყაროს კატიფიკაცია დასრულებულია.

54
00:05:10,532 --> 00:05:30,526
მაგრამ JavaScript-ის სწავლა ჯერ არ დასრულებულა.