WEBVTT

00:00:00.000 --> 00:00:06.440
დავბრუნდით მე და ჩემი გვერდი ძაღლების შესახებ
და მე ვაპირებ გამოვიყენო JavaScript

00:00:06.440 --> 00:00:11.888
და DOM api იმისთვის, რომ ეს გვერდი
კატების შესახებ გვერდად გადავაქციო.

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

00:00:17.464 --> 00:00:23.671
რეალურად, ოთახში ძაღლია, უფრო სწორად - ორი, 
კიდევ უფრო სწორად - ძაღლების სურათებია.

00:00:23.671 --> 00:00:29.478
კატების შესახებ გვერდზე ძაღლების სურათები 
ვერ მექნება. უნდა ჩავანაცვლო ისინი რამით.

00:00:29.487 --> 00:00:36.342
დავიწყოთ სურათების ძებნით. ვეძებთ
თეგის სახელით.

00:00:36.342 --> 00:00:47.869
`var imageEls = 
document.getElementsByTagName("img");`

00:00:47.869 --> 00:00:50.668
ახლა, რადგანაც ეს ბევრ ელემენტს გვიბრუნებს,

00:00:50.668 --> 00:00:54.725
მათ შორის ბრძანების გასამეორებლად
უნდა გამოვიყენოთ ციკლი for

00:00:54.725 --> 00:01:04.427
`var i = 0; i < imageEls.length; i++`

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

00:01:11.456 --> 00:01:18.755
ისინი იყენებენ innerHTML-ს, იმიტომ რომ
სურათების თეგები არ შეიცავენ innerHTML-ს.

00:01:18.755 --> 00:01:23.796
მე უნდა შევცავლო ის, რის გამოც ამ სურათებზე
გამოსახულია ძაღლები --

00:01:23.796 --> 00:01:27.176
სურათების URL , რაც განისაზღვრება

00:01:27.176 --> 00:01:30.721
ყოველი თეგის src ატრიბუტში.

00:01:30.721 --> 00:01:36.461
ელემენტების ატრიბუტები . ნოტაციით იცვლება.
მოდი, გაჩვენებ.

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

00:01:43.179 --> 00:01:50.653
და ვსვამთ HTML ატრიბუტის სახელს როგორც
JavaScript თვისების სახელს -- src -- უდრის

00:01:50.653 --> 00:01:54.841
და აქ ვსვამთ ახალ მნიშვნელობას;
ჯერ ცარიელი ხაზი იყოს.

00:01:54.841 --> 00:01:57.298
ხედავ? სურათები გაქრა.

00:01:57.298 --> 00:02:01.672
იმიტომ რომ ცარიელი ხაზი
არ მიუთითებს საერთოდ არანაირ სურათზე.

00:02:01.672 --> 00:02:07.664
იმისთვის, რომ ახალი URL ჩავსვა,
ვაკოპირებ აქ ძველს

00:02:07.664 --> 00:02:13.022
და ფაილის სახლეს ვცვლი კატაზე;
ასე მოხდა, რომ ვიცი

00:02:13.022 --> 00:02:16.842
რომ სწორედ ასეთია ხანის აკადემიაზე
კატის სურათის URL

00:02:16.842 --> 00:02:23.404
გამოვიდა! ძაღლები კატებად გადაიქცა და
ჩვენი კატიფიკაცია თითქმის დასრულდა.

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

00:02:30.897 --> 00:02:36.827
მაგრამ რაღაც დაგვრჩა - ესაა ვიკიპედიის 
ბმული, რომელიც გადადის ძაღლების გვერდზე.

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

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

00:02:47.347 --> 00:02:51.828
შემიძლია მივცე ამ ბმულს ID
და გამოვიყენო getElementById

00:02:51.828 --> 00:02:57.096
ან შემიძლია გამოვიყენო getElementsByTagName
და შევცვალო ყველა ბმული გვერდზე.

00:02:57.096 --> 00:02:59.414
ან, სუპერ-მონდომებული თუ ვარ,

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

00:03:06.657 --> 00:03:11.822
ახლა გაჩვენებ CSS სელექტორს, რომელსაც
გამოვიყენებ აქ, თეგში 

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

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

00:03:19.325 --> 00:03:26.041
შემდეგ კი ჩავწერ [href*="Dog"]

00:03:26.041 --> 00:03:31.950
ეს აცნობებს CSS-ს, რომ უნდა იპოვოს ყველა 
ბმული, რომელიც შეიცავს სიტყვას "Dog"

00:03:31.950 --> 00:03:38.166
შემდეგ კი შევცვალოთ მათი ფერი იასამნისფერზე.
მზადაა.

00:03:38.166 --> 00:03:43.566
კარგი მეთოდია, არა?
ეს არის ატრიბუციის სელექტორი

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

00:03:49.467 --> 00:03:58.041
ახლა ამის JavaScript-ში საპოვნად
შეგვიძლია გამოვიყენოთ document.querySelectorAll

00:03:58.041 --> 00:04:07.992
ვუთითებთ var linkEls = document.querySelectorAll

00:04:07.992 --> 00:04:12.580
და ვსვამთ შედეგს სელექტორში.

00:04:12.580 --> 00:04:22.695
მთავარია, ორმაგი ბრჭყალები არ დაგვრჩეს.
ესეც ასე. კარგი ხაზი გამოვიდა.

00:04:22.695 --> 00:04:27.558
ახლა ამათშიც უნდა გავიმეოროთ ბრძანება,
ანუ, ისევ უნდა შევქმნათ ციკლი --

00:04:27.558 --> 00:04:34.645
ალბათ, უკვე შეეჩვიე ციკლების შექმნას --

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

00:04:41.642 --> 00:04:45.501
ამისთვის ჩავწეროთ linkEls[i].href --

00:04:45.501 --> 00:04:50.681
იმიტომ რომ ეს არის იმ ატრიბუტის სახელი,
რომელსაც ვცვლით -- უდრის

00:04:50.681 --> 00:05:00.113
ჩავსვათ აქ ეს URL და შეცვალოთ ის კატებზე.

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

00:05:04.305 --> 00:05:10.532
მორჩა, სამყაროს კატიფიკაცია დასრულებულია.

00:05:10.532 --> 00:05:30.526
მაგრამ JavaScript-ის სწავლა ჯერ არ დასრულებულა.