1
00:00:00,000 --> 00:00:07,380
მოცემული გვაქვს ეს ვებ გვერდი
"All about dogs". ეს მშვენიერია, მაგრამ

2
00:00:07,387 --> 00:00:12,583
მე უფრო კატები მომწონს. ვიცი ყველა
არ დამეთანხმება. მე მინდა

3
00:00:12,583 --> 00:00:17,178
გადავაკეთო ეს ვებგვერდი
"All about cats"-ად.

4
00:00:17,178 --> 00:00:23,267
მე გამოვიყენებ ჯავასკრიპტს ამისათვის,
HTML-ის მაგივრად.

5
00:00:23,267 --> 00:00:26,431
შესაძლოა ასევე გადავაქციო ეს გვერდი
ბრაუზერის გაფართოებად, რომ

6
00:00:26,431 --> 00:00:32,096
ყველა ვებ გვერდი გადავაკეთო.

7
00:00:32,096 --> 00:00:37,450
არ იქნება ეს საოცარი?
მთელი ინტერნეტი მხოლოდ კატების შესახებ.

8
00:00:37,450 --> 00:00:44,761
ამ ვებ გვერდს აქვს სათაური, აბზაცი
და რამდენიმე სურათი.

9
00:00:44,761 --> 00:00:50,340
ჩვენ შევცვლით ყოველ მათგანს და
დავიწყებთ სათაურით.

10
00:00:50,340 --> 00:00:53,909
გამოვიყენებთ იმ ორ ნაბიჯს,
რომელიც ახლა ვისწავლეთ.

11
00:00:53,909 --> 00:00:59,268
პირველი ნაბიჯია DOM-ის იმ ბმულის
პოვნა რომელიც შეიცავს სათაურს.

12
00:00:59,268 --> 00:01:06,895
აქამდე DOM-ს ვპუოლობდით
document.body-ს გამოყენებით.

13
00:01:06,895 --> 00:01:12,492
მაგრამ ახლა მინდა უფრო სპეციფიურად
გავაკეთო, მინდა მხოლოდ ეს h1.

14
00:01:12,492 --> 00:01:14,700
ამ h1-ს აქვს ID.

15
00:01:14,700 --> 00:01:19,743
რაც ნიშნავს, ის ერთადერთი თეგია
ამ ID-თი ვებ გვერდზე.

16
00:01:19,743 --> 00:01:24,980
ძალიან მარტივია DOM კვანძის პოვნა,
რომელსაც აქვს ეს ID.

17
00:01:24,980 --> 00:01:30,342
მეთოდი დოკუმენტ ობიექტზე, რომელსაც
getElementById ეწოდება.

18
00:01:30,342 --> 00:01:33,198
მოდი, გამოვიყენოთ იგი 
-ის თეგზე.

19
00:01:33,198 --> 00:01:38,527
დავიწყოთ ცვლადის შექმნით და დავარქვათ
მას შესაბამისი სახელი 'var headinEl'.

20
00:01:38,527 --> 00:01:42,299
ცვლადების სახელებს ხშირად ვამთავრებ
El-ით ან Node-ით. იმიტომ, რომ

21
00:01:42,299 --> 00:01:47,390
ვიცოდე რომ ისინი ინახავენ ელემნტს,
რომელსაც ასევე ვუწოდებთ კვანძს.

22
00:01:47,390 --> 00:01:52,743
ახლა გამოვიყენოთ მეთოდი. ეს არის მეთოდი,
რომელიც უკავშირდება გლობალურ

23
00:01:52,743 --> 00:01:58,964
დოკუმენტ ობიექტს. დავწეროთ 'document' ,
შემდეგ მძიმე, შემდეგ კი 'getElementById' ,

24
00:01:58,964 --> 00:02:04,753
შემდეგ კვადრატული ფრჩხილები, იმიტომ, რომ
ფუნქციაა. სხვანაირად ვერ იპოვის.

25
00:02:04,753 --> 00:02:07,733
მან არ იცის, თუ რომელ ID-ს ეძებს.

26
00:02:07,733 --> 00:02:12,011
ფრჩხილებში უნდა მივუთითოთ ID,
რომელსაც ვეძებთ, სტრინგად.

27
00:02:12,011 --> 00:02:21,354
ეს არის 'heading'.

28
00:02:21,354 --> 00:02:24,098
საიდან ვიცით ვიპოვეთ თუ არა ელემენტი

29
00:02:24,098 --> 00:02:26,537
იქამდე სანამ ვცდით მის გამოყენებას?

30
00:02:26,537 --> 00:02:31,770
ერთი ხერხია console.log ფუნქციის
გამოყენება.

31
00:02:31,770 --> 00:02:36,202
ახლა შეგიძლიათ დააპაუზოთ და გახსნათ
თქვენი დეველოპერის ინსტრუმენტები.

32
00:02:36,202 --> 00:02:40,896
სცადეთ კლავიატურის command-option-i
მაკზე,

33
00:02:40,896 --> 00:02:48,029
ან contorl-shift-i უინდოუსზე.

34
00:02:48,029 --> 00:02:54,833
შემაჩნიეთ რომ h1 გამოვიდა თქვენი
კონსოლიდან? თუ ასეა, ეს ნიშნავს, რომ

35
00:02:54,833 --> 00:03:00,255
თქვენი პირველი ნაბიჯი დასრულებულია. ჩვენ
ვიპოვეთ ელემენტი და შევინახეთ ის ცვლადად.

36
00:03:00,255 --> 00:03:06,359
მეორე ნაბიჯით, შევცვალოთ ელემენტი
იმ ხერხის გამოყენებით რომელიც უკვე ვიცით.

37
00:03:06,359 --> 00:03:10,679
შინგანი HTML-ის შეცვლით.
ანუ, უნდა დავწეროთ

38
00:03:10,679 --> 00:03:22,727
'headingEl.innerHTML= All about cats '

39
00:03:22,727 --> 00:03:26,655
და ჩვენც დავიწყეთ, კატიფიკაცია
დაწყებულია.

40
00:03:26,655 --> 00:03:32,320
ახლა, თქვენ სცადეთ
რაიმე მსგავსის გაკეთება.