WEBVTT

00:00:00.921 --> 00:00:06.523
აქამდე ძალიან ბევრ უკვე არსებულ
ელემენტს ვცვლიდით გვერდზე.

00:00:06.523 --> 00:00:09.909
მაგრამ როგორ უნდა დავუმატოთ გვერდს
ახალი ელემენტები?

00:00:09.909 --> 00:00:15.075
ამის გაკეთება შეგვიძლია 'innerHTML'-ით
HTML-ს თეგების წერით

00:00:15.075 --> 00:00:18.926
სხვადასხვა ხაზებში.

00:00:18.926 --> 00:00:22.258
ამან შეიძლება ცოტა არიოს სიტუაცია,

00:00:22.258 --> 00:00:25.540
განსაკუთრებით თუ ბევრი თეგის დაწერა გინდა,
სხვადასხვა ატრიბუტებით, სტილებით და კლასებით.

00:00:25.540 --> 00:00:31.097
ამითომ, შეგვიძლია

00:00:31.097 --> 00:00:35.393
ახალი ელემენტები ნულიდან შევქმნათ
და შემდეგ დავუმატოთ ისინი გვერდს.

00:00:35.393 --> 00:00:40.685
დავუშვათ, ამ გვერდზე კატის სურათის 
დამატება გვინდა.

00:00:40.685 --> 00:00:44.018
იმიტომ რომ გვგონია, რომ ჯერ კიდევ
საკმარისად ბევრი არ არის.

00:00:44.018 --> 00:00:48.620
პირველ რიგში ახალი  ელემენტი
უნდა შევქმნათ, ხომ სწორია?

00:00:48.620 --> 00:00:50.786
სწორია.

00:00:50.786 --> 00:00:55.980
დავიწყოთ ელემენტის შესანახი ცვლადის
შექმნით. დავარქვათ მას catEI

00:00:55.980 --> 00:01:00.935
შემდეგ უნდა გამოვიყენოთ
`document.createElement`,

00:01:00.935 --> 00:01:06.615
და ჩავსვათ თეგის სახელი, რომელსაც ვქმნით
ამ შემთხვევაში img.

00:01:06.615 --> 00:01:12.065
ახლა წარმოიდგინე, რომ ბრაუზერმა
შექმნა სურათის თეგი

00:01:12.065 --> 00:01:15.069
და ახლა ეს სურათის თეგი სადღაც სივრცეში
ტივტივებს

00:01:15.069 --> 00:01:19.111
ამიტომ ახლა უნდა მივანიჭოთ მას წყარო

00:01:19.111 --> 00:01:23.308
catEl.src =

00:01:23.308 --> 00:01:29.376
და უბრალოდ ჩავსვათ წყარო აქედან

00:01:29.376 --> 00:01:34.764
და... ჰო, უნდა დავუმატოთ alt, რომ 
სურათი უფრო ადვილად მისაწვდომი იყოს

00:01:34.764 --> 00:01:42.081
alt თეგები ყოველთვის უნდა გვქონდეს სურათებზე

00:01:42.081 --> 00:01:47.178
ახლა ამ  თეგს, რომელიც ჩვენ შევქმენით

00:01:47.178 --> 00:01:58.144
აქვს src და ასევე alt თეგები
"Photo of cute cat/საყვარელი კათის სურათი"

00:01:58.144 --> 00:02:04.928
ოქეი, ეს გავაკეთეთ JavaScript-ით.

00:02:04.928 --> 00:02:08.983
თუმცა  თეგი ჯერ კიდევ ტივიტვებს
სივრცეში,

00:02:08.983 --> 00:02:11.764
იმიტომ რომ არ გვითქვამს ბრაუზერისთვის,
სად უნდა წაიღოს იგი.

00:02:11.764 --> 00:02:15.832
ჩვენს DOM-ში უამრავი ადგილია, სადაც
მისი მოთავსება შეიძლება.

00:02:15.832 --> 00:02:21.342
ყველაზე მარტივად რომ ვქნათ, გამოვაჩინოთ
ეს სურათი გვერდის ბოლოს.

00:02:21.342 --> 00:02:26.304
დავაჭიროთ  თეგის ბოლოს

00:02:26.304 --> 00:02:29.860
და დავწეროთ:
`document.body.appendChild(catEl);`

00:02:29.860 --> 00:02:31.197
აი, ისიც!

00:02:31.197 --> 00:02:32.711
საკმაოდ დიდია.

00:02:32.711 --> 00:02:34.979
და ცოტა საშიშად გამოიყურება.

00:02:34.979 --> 00:02:41.198
ახლა შეგიძლია გამოიძახო appendChild
გვერდის ნებისმიერი DOM კვანძზე

00:02:41.198 --> 00:02:47.337
და ეს შესულ ელემენტს ამ კვანძის
ბოლო ელემენტად აქცევს.

00:02:47.337 --> 00:02:52.115
აი ასეთ შემთხვევებში ნამდვილად სასარგებლოა
DOM-ის ხის სახით გამოსახვა

00:02:52.115 --> 00:02:57.873
თეგი  არის ამ ხის კვანძი
და მას რამდენიმე განყოფილება აქვს

00:02:57.873 --> 00:03:00.076
მაგალითად ` და``,

00:03:00.076 --> 00:03:04.395
და ახლა ბოლოს კიდევ ერთს ვუმატებთ.

00:03:04.395 --> 00:03:09.074
მოკლედ ეს გადმოვა  თეგის მერე,
აი, აქ.

00:03:09.074 --> 00:03:13.320
DOM მეთოდების გამოყენებით თეორიულად
უნდა შეგეძლოს მიამაგრო ელემენტები

00:03:13.320 --> 00:03:15.531
DOM-ის ნებისმიერ ნაწილში.

00:03:15.531 --> 00:03:19.447
ჩვენ უბრალოდ ის ყველაზე მარტივ და 
ადვილად მისაგნებ ადგილას მოვათავსეთ.

00:03:19.447 --> 00:03:22.016
გავაკეთოთ კიდევ ერთი მაგალითი.

00:03:22.016 --> 00:03:28.283
აქ ჩვენ გამოვიყენეთ innerHTML იმისთვის,
რომ  თეგებში ჩაგვესვა 

00:03:28.283 --> 00:03:31.443
თუმცა შეგვიძლია გამოვიყენოთ createElement

00:03:31.443 --> 00:03:33.159
[ბეჭდავს]

00:03:39.622 --> 00:03:43.824
ჰმ, ბეჭდური შეცდომა დავუშვი.
მართლწერა აქ ძალიან მნიშვნელოვანია.

00:03:43.824 --> 00:03:48.663
ასე შევქმენით ცარიელი თეგი ,
რომელიც სადღაც სივრცეშია.

00:03:48.663 --> 00:03:51.879
პირველ რიგში უნდა განვსაზღვროთ მისთვის ტექსტი:

00:03:51.879 --> 00:03:56.573
strongEl.textContent = "cat";

00:03:56.573 --> 00:03:57.746
ხომ სწორია?

00:03:57.746 --> 00:04:01.816
შეგვეძლო კიდევ შეგვექმნა

00:04:01.816 --> 00:04:04.581
textNode

00:04:04.581 --> 00:04:10.204
DOM-ის ბევრ კვანძს შეიძლება სპეციალური
textNode ჰქონდეს

00:04:10.204 --> 00:04:14.998
და ეს კვანძები ცალკე ელემენტები კი არა,
მაინც DOM-ის კვანძებად რჩება.

00:04:14.998 --> 00:04:17.541
რეალურად მათ ფოთლის კვანძებს ვეძახით

00:04:17.541 --> 00:04:20.077
იმიტომ რომ ესენი ხის უკანასკნელი ელემენტებია.

00:04:20.077 --> 00:04:21.736
[ბეჭდავს]

00:04:27.548 --> 00:04:31.816
მოკლედ, ჩავწერთ ტექსტი "cat"

00:04:31.816 --> 00:04:34.496
ახლა ჩვენ

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

00:04:42.169 --> 00:04:46.547
და ეს textNode, რომელიც უბრალოდ გვეუბნება
"cat"-ს

00:04:46.547 --> 00:04:49.680
ახლა კი ისინი ერთმანეთს უნდა დავუკავშიროთ.

00:04:49.680 --> 00:04:54.910
და  უნდა იყოს "cat"-ის მშობელი.

00:04:54.910 --> 00:05:03.152
ამისთვის უნდა ჩავწეროთ
`strongEl.appendChild(strongText);`

00:05:03.152 --> 00:05:12.114
მოკლედ, გვაქვს თეგი 
რომელიც მოიცავს კვანძს "cat" .

00:05:12.114 --> 00:05:18.582
ახლა კი სადმე უნდა ჩავსვათ ეს, მივუჩინოთ
ადგილი ამ კოდში და ვებ-გვერდზე.

00:05:18.582 --> 00:05:24.527
ახლა ვართ ციკლში "for", რომელიც შექმნილია
ელემენტისთვის nameEls

00:05:24.527 --> 00:05:27.354
სწორედ ყოველი nameEls-ს გვინდა, რომ
გადაებას თეგს 

00:05:27.354 --> 00:05:34.975
გამოვა ასე:
`nameEls[i].appendChild(strongEl);`

00:05:34.975 --> 00:05:42.195
ახლა სურათს ორჯერ ვხედავთ, იმიტომ 
რომ წინა გზით გაკეთებულიც დავტოვე.

00:05:42.195 --> 00:05:47.335
მოკლედ, ეს გადაება თეგს ,
რომელიც უკვე შეიცავს  თეგს.

00:05:47.335 --> 00:05:52.434
ეს ხაზი შეიძლება შევცვალოთ ასე:
innerHTML უდრის ცარიელ ხაზს

00:05:52.434 --> 00:05:57.817
რაც ეფექტურად მოაშორებს სპანს,
სანამ მას რამეს მივუმაგრებთ.

00:05:57.817 --> 00:06:04.925
როგორც ხედავ, ამ მეთოდს კოდის მეტი ხაზი
დასჭირდა, ვიდრე innerHTML-ს.

00:06:04.925 --> 00:06:06.991
შეიძლება, გაინტერესებს, საერთოდ რატომ
გამოვიყენეთ ის?

00:06:06.991 --> 00:06:11.099
ბევრ დეველოპერს დოკუმენტის ასე შეცვლა არ
მოსწონს,

00:06:11.099 --> 00:06:13.433
იმიტომ რომ მეტი კოდის წერა უწევთ.

00:06:13.433 --> 00:06:16.714
უმეტესობა ბიბლიოთეკებს იყენებს, მაგალითად
jQuery-ს.

00:06:16.714 --> 00:06:21.352
შემდეგ კი ცვლიან DOM-ს.

00:06:21.352 --> 00:06:26.873
ასე იგივე კოდში შენ, როგორც დეველოპერს, 
გაცილებით ნაკლები ხაზის წერა გიწევს,

00:06:26.873 --> 00:06:29.310
იმიტომ რომ ბიბლიოთეკის ფუნქციებს იყენებს.

00:06:29.310 --> 00:06:33.366
მე კიდევ საკმაოდ მომწონს ასე წერა,

00:06:33.366 --> 00:06:38.666
იმიტომ რომ ზუსტად ვხედავ, როგორც ვცვლი
DOM-ს, ხაზს ხაზის შემდეგ,

00:06:38.666 --> 00:06:43.043
ასე თითტოს უფრო ცხადია ყველაფერი, ვიდრე
innerHTML-ის ერთ ხაზში.

00:06:43.043 --> 00:06:44.772
შეიძლება, შენ არ მეთანხმები,

00:06:44.772 --> 00:06:47.188
მაგრამ, მთავარია, იცი, რომ ეს გზაც არსებობს.

00:06:47.188 --> 00:06:50.939
თუ დაგჭირდა, შეძლებ გამოიყენო და გაიგო,

00:06:50.939 --> 00:06:55.064
რა ხდება "სცენის მიღმა" jQuery -ის მსგავს
ბიბლიოთეკებში.