[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.92,0:00:06.52,Default,,0000,0000,0000,,აქამდე ძალიან ბევრ უკვე არსებულ\Nელემენტს ვცვლიდით გვერდზე.
Dialogue: 0,0:00:06.52,0:00:09.91,Default,,0000,0000,0000,,მაგრამ როგორ უნდა დავუმატოთ გვერდს\Nახალი ელემენტები?
Dialogue: 0,0:00:09.91,0:00:15.08,Default,,0000,0000,0000,,ამის გაკეთება შეგვიძლია 'innerHTML'-ით\NHTML-ს თეგების წერით
Dialogue: 0,0:00:15.08,0:00:18.93,Default,,0000,0000,0000,,სხვადასხვა ხაზებში.
Dialogue: 0,0:00:18.93,0:00:22.26,Default,,0000,0000,0000,,ამან შეიძლება ცოტა არიოს სიტუაცია,
Dialogue: 0,0:00:22.26,0:00:25.54,Default,,0000,0000,0000,,განსაკუთრებით თუ ბევრი თეგის დაწერა გინდა,\Nსხვადასხვა ატრიბუტებით, სტილებით და კლასებით.
Dialogue: 0,0:00:25.54,0:00:31.10,Default,,0000,0000,0000,,ამითომ, შეგვიძლია
Dialogue: 0,0:00:31.10,0:00:35.39,Default,,0000,0000,0000,,ახალი ელემენტები ნულიდან შევქმნათ\Nდა შემდეგ დავუმატოთ ისინი გვერდს.
Dialogue: 0,0:00:35.39,0:00:40.68,Default,,0000,0000,0000,,დავუშვათ, ამ გვერდზე კატის სურათის \Nდამატება გვინდა.
Dialogue: 0,0:00:40.68,0:00:44.02,Default,,0000,0000,0000,,იმიტომ რომ გვგონია, რომ ჯერ კიდევ\Nსაკმარისად ბევრი არ არის.
Dialogue: 0,0:00:44.02,0:00:48.62,Default,,0000,0000,0000,,პირველ რიგში ახალი  ელემენტი\Nუნდა შევქმნათ, ხომ სწორია?
Dialogue: 0,0:00:48.62,0:00:50.79,Default,,0000,0000,0000,,სწორია.
Dialogue: 0,0:00:50.79,0:00:55.98,Default,,0000,0000,0000,,დავიწყოთ ელემენტის შესანახი ცვლადის\Nშექმნით. დავარქვათ მას catEI
Dialogue: 0,0:00:55.98,0:01:00.94,Default,,0000,0000,0000,,შემდეგ უნდა გამოვიყენოთ\N`document.createElement`,
Dialogue: 0,0:01:00.94,0:01:06.62,Default,,0000,0000,0000,,და ჩავსვათ თეგის სახელი, რომელსაც ვქმნით\Nამ შემთხვევაში img.
Dialogue: 0,0:01:06.62,0:01:12.06,Default,,0000,0000,0000,,ახლა წარმოიდგინე, რომ ბრაუზერმა\Nშექმნა სურათის თეგი
Dialogue: 0,0:01:12.06,0:01:15.07,Default,,0000,0000,0000,,და ახლა ეს სურათის თეგი სადღაც სივრცეში\Nტივტივებს
Dialogue: 0,0:01:15.07,0:01:19.11,Default,,0000,0000,0000,,ამიტომ ახლა უნდა მივანიჭოთ მას წყარო
Dialogue: 0,0:01:19.11,0:01:23.31,Default,,0000,0000,0000,,catEl.src =
Dialogue: 0,0:01:23.31,0:01:29.38,Default,,0000,0000,0000,,და უბრალოდ ჩავსვათ წყარო აქედან
Dialogue: 0,0:01:29.38,0:01:34.76,Default,,0000,0000,0000,,და... ჰო, უნდა დავუმატოთ alt, რომ \Nსურათი უფრო ადვილად მისაწვდომი იყოს
Dialogue: 0,0:01:34.76,0:01:42.08,Default,,0000,0000,0000,,alt თეგები ყოველთვის უნდა გვქონდეს სურათებზე
Dialogue: 0,0:01:42.08,0:01:47.18,Default,,0000,0000,0000,,ახლა ამ  თეგს, რომელიც ჩვენ შევქმენით
Dialogue: 0,0:01:47.18,0:01:58.14,Default,,0000,0000,0000,,აქვს src და ასევე alt თეგები\N"Photo of cute cat/საყვარელი კათის სურათი"
Dialogue: 0,0:01:58.14,0:02:04.93,Default,,0000,0000,0000,,ოქეი, ეს გავაკეთეთ JavaScript-ით.
Dialogue: 0,0:02:04.93,0:02:08.98,Default,,0000,0000,0000,,თუმცა  თეგი ჯერ კიდევ ტივიტვებს\Nსივრცეში,
Dialogue: 0,0:02:08.98,0:02:11.76,Default,,0000,0000,0000,,იმიტომ რომ არ გვითქვამს ბრაუზერისთვის,\Nსად უნდა წაიღოს იგი.
Dialogue: 0,0:02:11.76,0:02:15.83,Default,,0000,0000,0000,,ჩვენს DOM-ში უამრავი ადგილია, სადაც\Nმისი მოთავსება შეიძლება.
Dialogue: 0,0:02:15.83,0:02:21.34,Default,,0000,0000,0000,,ყველაზე მარტივად რომ ვქნათ, გამოვაჩინოთ\Nეს სურათი გვერდის ბოლოს.
Dialogue: 0,0:02:21.34,0:02:26.30,Default,,0000,0000,0000,,დავაჭიროთ  თეგის ბოლოს
Dialogue: 0,0:02:26.30,0:02:29.86,Default,,0000,0000,0000,,და დავწეროთ:\N`document.body.appendChild(catEl);`
Dialogue: 0,0:02:29.86,0:02:31.20,Default,,0000,0000,0000,,აი, ისიც!
Dialogue: 0,0:02:31.20,0:02:32.71,Default,,0000,0000,0000,,საკმაოდ დიდია.
Dialogue: 0,0:02:32.71,0:02:34.98,Default,,0000,0000,0000,,და ცოტა საშიშად გამოიყურება.
Dialogue: 0,0:02:34.98,0:02:41.20,Default,,0000,0000,0000,,ახლა შეგიძლია გამოიძახო appendChild\Nგვერდის ნებისმიერი DOM კვანძზე
Dialogue: 0,0:02:41.20,0:02:47.34,Default,,0000,0000,0000,,და ეს შესულ ელემენტს ამ კვანძის\Nბოლო ელემენტად აქცევს.
Dialogue: 0,0:02:47.34,0:02:52.12,Default,,0000,0000,0000,,აი ასეთ შემთხვევებში ნამდვილად სასარგებლოა\NDOM-ის ხის სახით გამოსახვა
Dialogue: 0,0:02:52.12,0:02:57.87,Default,,0000,0000,0000,,თეგი  არის ამ ხის კვანძი\Nდა მას რამდენიმე განყოფილება აქვს
Dialogue: 0,0:02:57.87,0:03:00.08,Default,,0000,0000,0000,,მაგალითად ` და``,
Dialogue: 0,0:03:00.08,0:03:04.40,Default,,0000,0000,0000,,და ახლა ბოლოს კიდევ ერთს ვუმატებთ.
Dialogue: 0,0:03:04.40,0:03:09.07,Default,,0000,0000,0000,,მოკლედ ეს გადმოვა  თეგის მერე,\Nაი, აქ.
Dialogue: 0,0:03:09.07,0:03:13.32,Default,,0000,0000,0000,,DOM მეთოდების გამოყენებით თეორიულად\Nუნდა შეგეძლოს მიამაგრო ელემენტები
Dialogue: 0,0:03:13.32,0:03:15.53,Default,,0000,0000,0000,,DOM-ის ნებისმიერ ნაწილში.
Dialogue: 0,0:03:15.53,0:03:19.45,Default,,0000,0000,0000,,ჩვენ უბრალოდ ის ყველაზე მარტივ და \Nადვილად მისაგნებ ადგილას მოვათავსეთ.
Dialogue: 0,0:03:19.45,0:03:22.02,Default,,0000,0000,0000,,გავაკეთოთ კიდევ ერთი მაგალითი.
Dialogue: 0,0:03:22.02,0:03:28.28,Default,,0000,0000,0000,,აქ ჩვენ გამოვიყენეთ innerHTML იმისთვის,\Nრომ  თეგებში ჩაგვესვა 
Dialogue: 0,0:03:28.28,0:03:31.44,Default,,0000,0000,0000,,თუმცა შეგვიძლია გამოვიყენოთ createElement
Dialogue: 0,0:03:31.44,0:03:33.16,Default,,0000,0000,0000,,[ბეჭდავს]
Dialogue: 0,0:03:39.62,0:03:43.82,Default,,0000,0000,0000,,ჰმ, ბეჭდური შეცდომა დავუშვი.\Nმართლწერა აქ ძალიან მნიშვნელოვანია.
Dialogue: 0,0:03:43.82,0:03:48.66,Default,,0000,0000,0000,,ასე შევქმენით ცარიელი თეგი ,\Nრომელიც სადღაც სივრცეშია.
Dialogue: 0,0:03:48.66,0:03:51.88,Default,,0000,0000,0000,,პირველ რიგში უნდა განვსაზღვროთ მისთვის ტექსტი:
Dialogue: 0,0:03:51.88,0:03:56.57,Default,,0000,0000,0000,,strongEl.textContent = "cat";
Dialogue: 0,0:03:56.57,0:03:57.75,Default,,0000,0000,0000,,ხომ სწორია?
Dialogue: 0,0:03:57.75,0:04:01.82,Default,,0000,0000,0000,,შეგვეძლო კიდევ შეგვექმნა
Dialogue: 0,0:04:01.82,0:04:04.58,Default,,0000,0000,0000,,textNode
Dialogue: 0,0:04:04.58,0:04:10.20,Default,,0000,0000,0000,,DOM-ის ბევრ კვანძს შეიძლება სპეციალური\NtextNode ჰქონდეს
Dialogue: 0,0:04:10.20,0:04:14.100,Default,,0000,0000,0000,,და ეს კვანძები ცალკე ელემენტები კი არა,\Nმაინც DOM-ის კვანძებად რჩება.
Dialogue: 0,0:04:14.100,0:04:17.54,Default,,0000,0000,0000,,რეალურად მათ ფოთლის კვანძებს ვეძახით
Dialogue: 0,0:04:17.54,0:04:20.08,Default,,0000,0000,0000,,იმიტომ რომ ესენი ხის უკანასკნელი ელემენტებია.
Dialogue: 0,0:04:20.08,0:04:21.74,Default,,0000,0000,0000,,[ბეჭდავს]
Dialogue: 0,0:04:27.55,0:04:31.82,Default,,0000,0000,0000,,მოკლედ, ჩავწერთ ტექსტი "cat"
Dialogue: 0,0:04:31.82,0:04:34.50,Default,,0000,0000,0000,,ახლა ჩვენ
Dialogue: 0,0:04:34.50,0:04:42.17,Default,,0000,0000,0000,,შევქმენით ორი კვანძი, რომელიც უმისამართოდ\Nმდებარეობს სივრცეში: თეგი 
Dialogue: 0,0:04:42.17,0:04:46.55,Default,,0000,0000,0000,,და ეს textNode, რომელიც უბრალოდ გვეუბნება\N"cat"-ს
Dialogue: 0,0:04:46.55,0:04:49.68,Default,,0000,0000,0000,,ახლა კი ისინი ერთმანეთს უნდა დავუკავშიროთ.
Dialogue: 0,0:04:49.68,0:04:54.91,Default,,0000,0000,0000,,და  უნდა იყოს "cat"-ის მშობელი.
Dialogue: 0,0:04:54.91,0:05:03.15,Default,,0000,0000,0000,,ამისთვის უნდა ჩავწეროთ\N`strongEl.appendChild(strongText);`
Dialogue: 0,0:05:03.15,0:05:12.11,Default,,0000,0000,0000,,მოკლედ, გვაქვს თეგი \Nრომელიც მოიცავს კვანძს "cat" .
Dialogue: 0,0:05:12.11,0:05:18.58,Default,,0000,0000,0000,,ახლა კი სადმე უნდა ჩავსვათ ეს, მივუჩინოთ\Nადგილი ამ კოდში და ვებ-გვერდზე.
Dialogue: 0,0:05:18.58,0:05:24.53,Default,,0000,0000,0000,,ახლა ვართ ციკლში "for", რომელიც შექმნილია\Nელემენტისთვის nameEls
Dialogue: 0,0:05:24.53,0:05:27.35,Default,,0000,0000,0000,,სწორედ ყოველი nameEls-ს გვინდა, რომ\Nგადაებას თეგს 
Dialogue: 0,0:05:27.35,0:05:34.98,Default,,0000,0000,0000,,გამოვა ასე:\N`nameEls[i].appendChild(strongEl);`
Dialogue: 0,0:05:34.98,0:05:42.20,Default,,0000,0000,0000,,ახლა სურათს ორჯერ ვხედავთ, იმიტომ \Nრომ წინა გზით გაკეთებულიც დავტოვე.
Dialogue: 0,0:05:42.20,0:05:47.34,Default,,0000,0000,0000,,მოკლედ, ეს გადაება თეგს ,\Nრომელიც უკვე შეიცავს  თეგს.
Dialogue: 0,0:05:47.34,0:05:52.43,Default,,0000,0000,0000,,ეს ხაზი შეიძლება შევცვალოთ ასე:\NinnerHTML უდრის ცარიელ ხაზს
Dialogue: 0,0:05:52.43,0:05:57.82,Default,,0000,0000,0000,,რაც ეფექტურად მოაშორებს სპანს,\Nსანამ მას რამეს მივუმაგრებთ.
Dialogue: 0,0:05:57.82,0:06:04.92,Default,,0000,0000,0000,,როგორც ხედავ, ამ მეთოდს კოდის მეტი ხაზი\Nდასჭირდა, ვიდრე innerHTML-ს.
Dialogue: 0,0:06:04.92,0:06:06.99,Default,,0000,0000,0000,,შეიძლება, გაინტერესებს, საერთოდ რატომ\Nგამოვიყენეთ ის?
Dialogue: 0,0:06:06.99,0:06:11.10,Default,,0000,0000,0000,,ბევრ დეველოპერს დოკუმენტის ასე შეცვლა არ\Nმოსწონს,
Dialogue: 0,0:06:11.10,0:06:13.43,Default,,0000,0000,0000,,იმიტომ რომ მეტი კოდის წერა უწევთ.
Dialogue: 0,0:06:13.43,0:06:16.71,Default,,0000,0000,0000,,უმეტესობა ბიბლიოთეკებს იყენებს, მაგალითად\NjQuery-ს.
Dialogue: 0,0:06:16.71,0:06:21.35,Default,,0000,0000,0000,,შემდეგ კი ცვლიან DOM-ს.
Dialogue: 0,0:06:21.35,0:06:26.87,Default,,0000,0000,0000,,ასე იგივე კოდში შენ, როგორც დეველოპერს, \Nგაცილებით ნაკლები ხაზის წერა გიწევს,
Dialogue: 0,0:06:26.87,0:06:29.31,Default,,0000,0000,0000,,იმიტომ რომ ბიბლიოთეკის ფუნქციებს იყენებს.
Dialogue: 0,0:06:29.31,0:06:33.37,Default,,0000,0000,0000,,მე კიდევ საკმაოდ მომწონს ასე წერა,
Dialogue: 0,0:06:33.37,0:06:38.67,Default,,0000,0000,0000,,იმიტომ რომ ზუსტად ვხედავ, როგორც ვცვლი\NDOM-ს, ხაზს ხაზის შემდეგ,
Dialogue: 0,0:06:38.67,0:06:43.04,Default,,0000,0000,0000,,ასე თითტოს უფრო ცხადია ყველაფერი, ვიდრე\NinnerHTML-ის ერთ ხაზში.
Dialogue: 0,0:06:43.04,0:06:44.77,Default,,0000,0000,0000,,შეიძლება, შენ არ მეთანხმები,
Dialogue: 0,0:06:44.77,0:06:47.19,Default,,0000,0000,0000,,მაგრამ, მთავარია, იცი, რომ ეს გზაც არსებობს.
Dialogue: 0,0:06:47.19,0:06:50.94,Default,,0000,0000,0000,,თუ დაგჭირდა, შეძლებ გამოიყენო და გაიგო,
Dialogue: 0,0:06:50.94,0:06:55.06,Default,,0000,0000,0000,,რა ხდება "სცენის მიღმა" jQuery -ის მსგავს\Nბიბლიოთეკებში.