WEBVTT

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

00:00:07.387 --> 00:00:12.583
მე უფრო კატები მომწონს. ვიცი ყველა
არ დამეთანხმება. მე მინდა

00:00:12.583 --> 00:00:17.178
გადავაკეთო ეს ვებგვერდი
"All about cats"-ად.

00:00:17.178 --> 00:00:23.267
მე გამოვიყენებ ჯავასკრიპტს ამისათვის,
HTML-ის მაგივრად.

00:00:23.267 --> 00:00:26.431
შესაძლოა ასევე გადავაქციო ეს გვერდი
ბრაუზერის გაფართოებად, რომ

00:00:26.431 --> 00:00:32.096
ყველა ვებ გვერდი გადავაკეთო.

00:00:32.096 --> 00:00:37.450
არ იქნება ეს საოცარი?
მთელი ინტერნეტი მხოლოდ კატების შესახებ.

00:00:37.450 --> 00:00:44.761
ამ ვებ გვერდს აქვს სათაური, აბზაცი
და რამდენიმე სურათი.

00:00:44.761 --> 00:00:50.340
ჩვენ შევცვლით ყოველ მათგანს და
დავიწყებთ სათაურით.

00:00:50.340 --> 00:00:53.909
გამოვიყენებთ იმ ორ ნაბიჯს,
რომელიც ახლა ვისწავლეთ.

00:00:53.909 --> 00:00:59.268
პირველი ნაბიჯია DOM-ის იმ ბმულის
პოვნა რომელიც შეიცავს სათაურს.

00:00:59.268 --> 00:01:06.895
აქამდე DOM-ს ვპუოლობდით
document.body-ს გამოყენებით.

00:01:06.895 --> 00:01:12.492
მაგრამ ახლა მინდა უფრო სპეციფიურად
გავაკეთო, მინდა მხოლოდ ეს h1.

00:01:12.492 --> 00:01:14.700
ამ h1-ს აქვს ID.

00:01:14.700 --> 00:01:19.743
რაც ნიშნავს, ის ერთადერთი თეგია
ამ ID-თი ვებ გვერდზე.

00:01:19.743 --> 00:01:24.980
ძალიან მარტივია DOM კვანძის პოვნა,
რომელსაც აქვს ეს ID.

00:01:24.980 --> 00:01:30.342
მეთოდი დოკუმენტ ობიექტზე, რომელსაც
getElementById ეწოდება.

00:01:30.342 --> 00:01:33.198
მოდი, გამოვიყენოთ იგი 
-ის თეგზე.

00:01:33.198 --> 00:01:38.527
დავიწყოთ ცვლადის შექმნით და დავარქვათ
მას შესაბამისი სახელი 'var headinEl'.

00:01:38.527 --> 00:01:42.299
ცვლადების სახელებს ხშირად ვამთავრებ
El-ით ან Node-ით. იმიტომ, რომ

00:01:42.299 --> 00:01:47.390
ვიცოდე რომ ისინი ინახავენ ელემნტს,
რომელსაც ასევე ვუწოდებთ კვანძს.

00:01:47.390 --> 00:01:52.743
ახლა გამოვიყენოთ მეთოდი. ეს არის მეთოდი,
რომელიც უკავშირდება გლობალურ

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

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

00:02:04.753 --> 00:02:07.733
მან არ იცის, თუ რომელ ID-ს ეძებს.

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

00:02:12.011 --> 00:02:21.354
ეს არის 'heading'.

00:02:21.354 --> 00:02:24.098
საიდან ვიცით ვიპოვეთ თუ არა ელემენტი

00:02:24.098 --> 00:02:26.537
იქამდე სანამ ვცდით მის გამოყენებას?

00:02:26.537 --> 00:02:31.770
ერთი ხერხია console.log ფუნქციის
გამოყენება.

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

00:02:36.202 --> 00:02:40.896
სცადეთ კლავიატურის command-option-i
მაკზე,

00:02:40.896 --> 00:02:48.029
ან contorl-shift-i უინდოუსზე.

00:02:48.029 --> 00:02:54.833
შემაჩნიეთ რომ h1 გამოვიდა თქვენი
კონსოლიდან? თუ ასეა, ეს ნიშნავს, რომ

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

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

00:03:06.359 --> 00:03:10.679
შინგანი HTML-ის შეცვლით.
ანუ, უნდა დავწეროთ

00:03:10.679 --> 00:03:22.727
'headingEl.innerHTML= All about cats '

00:03:22.727 --> 00:03:26.655
და ჩვენც დავიწყეთ, კატიფიკაცია
დაწყებულია.

00:03:26.655 --> 00:03:32.320
ახლა, თქვენ სცადეთ
რაიმე მსგავსის გაკეთება.