1
00:00:00,921 --> 00:00:06,523
აქამდე ძალიან ბევრ უკვე არსებულ
ელემენტს ვცვლიდით გვერდზე.

2
00:00:06,523 --> 00:00:09,909
მაგრამ როგორ უნდა დავუმატოთ გვერდს
ახალი ელემენტები?

3
00:00:09,909 --> 00:00:15,075
ამის გაკეთება შეგვიძლია 'innerHTML'-ით
HTML-ს თეგების წერით

4
00:00:15,075 --> 00:00:18,926
სხვადასხვა ხაზებში.

5
00:00:18,926 --> 00:00:22,258
ამან შეიძლება ცოტა არიოს სიტუაცია,

6
00:00:22,258 --> 00:00:25,540
განსაკუთრებით თუ ბევრი თეგის დაწერა გინდა,
სხვადასხვა ატრიბუტებით, სტილებით და კლასებით.

7
00:00:25,540 --> 00:00:31,097
ამითომ, შეგვიძლია

8
00:00:31,097 --> 00:00:35,393
ახალი ელემენტები ნულიდან შევქმნათ
და შემდეგ დავუმატოთ ისინი გვერდს.

9
00:00:35,393 --> 00:00:40,685
დავუშვათ, ამ გვერდზე კატის სურათის 
დამატება გვინდა.

10
00:00:40,685 --> 00:00:44,018
იმიტომ რომ გვგონია, რომ ჯერ კიდევ
საკმარისად ბევრი არ არის.

11
00:00:44,018 --> 00:00:48,620
პირველ რიგში ახალი  ელემენტი
უნდა შევქმნათ, ხომ სწორია?

12
00:00:48,620 --> 00:00:50,786
სწორია.

13
00:00:50,786 --> 00:00:55,980
დავიწყოთ ელემენტის შესანახი ცვლადის
შექმნით. დავარქვათ მას catEI

14
00:00:55,980 --> 00:01:00,935
შემდეგ უნდა გამოვიყენოთ
`document.createElement`,

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

16
00:01:06,615 --> 00:01:12,065
ახლა წარმოიდგინე, რომ ბრაუზერმა
შექმნა სურათის თეგი

17
00:01:12,065 --> 00:01:15,069
და ახლა ეს სურათის თეგი სადღაც სივრცეში
ტივტივებს

18
00:01:15,069 --> 00:01:19,111
ამიტომ ახლა უნდა მივანიჭოთ მას წყარო

19
00:01:19,111 --> 00:01:23,308
catEl.src =

20
00:01:23,308 --> 00:01:29,376
და უბრალოდ ჩავსვათ წყარო აქედან

21
00:01:29,376 --> 00:01:34,764
და... ჰო, უნდა დავუმატოთ alt, რომ 
სურათი უფრო ადვილად მისაწვდომი იყოს

22
00:01:34,764 --> 00:01:42,081
alt თეგები ყოველთვის უნდა გვქონდეს სურათებზე

23
00:01:42,081 --> 00:01:47,178
ახლა ამ  თეგს, რომელიც ჩვენ შევქმენით

24
00:01:47,178 --> 00:01:58,144
აქვს src და ასევე alt თეგები
"Photo of cute cat/საყვარელი კათის სურათი"

25
00:01:58,144 --> 00:02:04,928
ოქეი, ეს გავაკეთეთ JavaScript-ით.

26
00:02:04,928 --> 00:02:08,983
თუმცა  თეგი ჯერ კიდევ ტივიტვებს
სივრცეში,

27
00:02:08,983 --> 00:02:11,764
იმიტომ რომ არ გვითქვამს ბრაუზერისთვის,
სად უნდა წაიღოს იგი.

28
00:02:11,764 --> 00:02:15,832
ჩვენს DOM-ში უამრავი ადგილია, სადაც
მისი მოთავსება შეიძლება.

29
00:02:15,832 --> 00:02:21,342
ყველაზე მარტივად რომ ვქნათ, გამოვაჩინოთ
ეს სურათი გვერდის ბოლოს.

30
00:02:21,342 --> 00:02:26,304
დავაჭიროთ  თეგის ბოლოს

31
00:02:26,304 --> 00:02:29,860
და დავწეროთ:
`document.body.appendChild(catEl);`

32
00:02:29,860 --> 00:02:31,197
აი, ისიც!

33
00:02:31,197 --> 00:02:32,711
საკმაოდ დიდია.

34
00:02:32,711 --> 00:02:34,979
და ცოტა საშიშად გამოიყურება.

35
00:02:34,979 --> 00:02:41,198
ახლა შეგიძლია გამოიძახო appendChild
გვერდის ნებისმიერი DOM კვანძზე

36
00:02:41,198 --> 00:02:47,337
და ეს შესულ ელემენტს ამ კვანძის
ბოლო ელემენტად აქცევს.

37
00:02:47,337 --> 00:02:52,115
აი ასეთ შემთხვევებში ნამდვილად სასარგებლოა
DOM-ის ხის სახით გამოსახვა

38
00:02:52,115 --> 00:02:57,873
თეგი  არის ამ ხის კვანძი
და მას რამდენიმე განყოფილება აქვს

39
00:02:57,873 --> 00:03:00,076
მაგალითად ` და``,

40
00:03:00,076 --> 00:03:04,395
და ახლა ბოლოს კიდევ ერთს ვუმატებთ.

41
00:03:04,395 --> 00:03:09,074
მოკლედ ეს გადმოვა  თეგის მერე,
აი, აქ.

42
00:03:09,074 --> 00:03:13,320
DOM მეთოდების გამოყენებით თეორიულად
უნდა შეგეძლოს მიამაგრო ელემენტები

43
00:03:13,320 --> 00:03:15,531
DOM-ის ნებისმიერ ნაწილში.

44
00:03:15,531 --> 00:03:19,447
ჩვენ უბრალოდ ის ყველაზე მარტივ და 
ადვილად მისაგნებ ადგილას მოვათავსეთ.

45
00:03:19,447 --> 00:03:22,016
გავაკეთოთ კიდევ ერთი მაგალითი.

46
00:03:22,016 --> 00:03:28,283
აქ ჩვენ გამოვიყენეთ innerHTML იმისთვის,
რომ  თეგებში ჩაგვესვა 

47
00:03:28,283 --> 00:03:31,443
თუმცა შეგვიძლია გამოვიყენოთ createElement

48
00:03:31,443 --> 00:03:33,159
[ბეჭდავს]

49
00:03:39,622 --> 00:03:43,824
ჰმ, ბეჭდური შეცდომა დავუშვი.
მართლწერა აქ ძალიან მნიშვნელოვანია.

50
00:03:43,824 --> 00:03:48,663
ასე შევქმენით ცარიელი თეგი ,
რომელიც სადღაც სივრცეშია.

51
00:03:48,663 --> 00:03:51,879
პირველ რიგში უნდა განვსაზღვროთ მისთვის ტექსტი:

52
00:03:51,879 --> 00:03:56,573
strongEl.textContent = "cat";

53
00:03:56,573 --> 00:03:57,746
ხომ სწორია?

54
00:03:57,746 --> 00:04:01,816
შეგვეძლო კიდევ შეგვექმნა

55
00:04:01,816 --> 00:04:04,581
textNode

56
00:04:04,581 --> 00:04:10,204
DOM-ის ბევრ კვანძს შეიძლება სპეციალური
textNode ჰქონდეს

57
00:04:10,204 --> 00:04:14,998
და ეს კვანძები ცალკე ელემენტები კი არა,
მაინც DOM-ის კვანძებად რჩება.

58
00:04:14,998 --> 00:04:17,541
რეალურად მათ ფოთლის კვანძებს ვეძახით

59
00:04:17,541 --> 00:04:20,077
იმიტომ რომ ესენი ხის უკანასკნელი ელემენტებია.

60
00:04:20,077 --> 00:04:21,736
[ბეჭდავს]

61
00:04:27,548 --> 00:04:31,816
მოკლედ, ჩავწერთ ტექსტი "cat"

62
00:04:31,816 --> 00:04:34,496
ახლა ჩვენ

63
00:04:34,496 --> 00:04:42,169
შევქმენით ორი კვანძი, რომელიც უმისამართოდ
მდებარეობს სივრცეში: თეგი 

64
00:04:42,169 --> 00:04:46,547
და ეს textNode, რომელიც უბრალოდ გვეუბნება
"cat"-ს

65
00:04:46,547 --> 00:04:49,680
ახლა კი ისინი ერთმანეთს უნდა დავუკავშიროთ.

66
00:04:49,680 --> 00:04:54,910
და  უნდა იყოს "cat"-ის მშობელი.

67
00:04:54,910 --> 00:05:03,152
ამისთვის უნდა ჩავწეროთ
`strongEl.appendChild(strongText);`

68
00:05:03,152 --> 00:05:12,114
მოკლედ, გვაქვს თეგი 
რომელიც მოიცავს კვანძს "cat" .

69
00:05:12,114 --> 00:05:18,582
ახლა კი სადმე უნდა ჩავსვათ ეს, მივუჩინოთ
ადგილი ამ კოდში და ვებ-გვერდზე.

70
00:05:18,582 --> 00:05:24,527
ახლა ვართ ციკლში "for", რომელიც შექმნილია
ელემენტისთვის nameEls

71
00:05:24,527 --> 00:05:27,354
სწორედ ყოველი nameEls-ს გვინდა, რომ
გადაებას თეგს 

72
00:05:27,354 --> 00:05:34,975
გამოვა ასე:
`nameEls[i].appendChild(strongEl);`

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

74
00:05:42,195 --> 00:05:47,335
მოკლედ, ეს გადაება თეგს ,
რომელიც უკვე შეიცავს  თეგს.

75
00:05:47,335 --> 00:05:52,434
ეს ხაზი შეიძლება შევცვალოთ ასე:
innerHTML უდრის ცარიელ ხაზს

76
00:05:52,434 --> 00:05:57,817
რაც ეფექტურად მოაშორებს სპანს,
სანამ მას რამეს მივუმაგრებთ.

77
00:05:57,817 --> 00:06:04,925
როგორც ხედავ, ამ მეთოდს კოდის მეტი ხაზი
დასჭირდა, ვიდრე innerHTML-ს.

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

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

80
00:06:11,099 --> 00:06:13,433
იმიტომ რომ მეტი კოდის წერა უწევთ.

81
00:06:13,433 --> 00:06:16,714
უმეტესობა ბიბლიოთეკებს იყენებს, მაგალითად
jQuery-ს.

82
00:06:16,714 --> 00:06:21,352
შემდეგ კი ცვლიან DOM-ს.

83
00:06:21,352 --> 00:06:26,873
ასე იგივე კოდში შენ, როგორც დეველოპერს, 
გაცილებით ნაკლები ხაზის წერა გიწევს,

84
00:06:26,873 --> 00:06:29,310
იმიტომ რომ ბიბლიოთეკის ფუნქციებს იყენებს.

85
00:06:29,310 --> 00:06:33,366
მე კიდევ საკმაოდ მომწონს ასე წერა,

86
00:06:33,366 --> 00:06:38,666
იმიტომ რომ ზუსტად ვხედავ, როგორც ვცვლი
DOM-ს, ხაზს ხაზის შემდეგ,

87
00:06:38,666 --> 00:06:43,043
ასე თითტოს უფრო ცხადია ყველაფერი, ვიდრე
innerHTML-ის ერთ ხაზში.

88
00:06:43,043 --> 00:06:44,772
შეიძლება, შენ არ მეთანხმები,

89
00:06:44,772 --> 00:06:47,188
მაგრამ, მთავარია, იცი, რომ ეს გზაც არსებობს.

90
00:06:47,188 --> 00:06:50,939
თუ დაგჭირდა, შეძლებ გამოიყენო და გაიგო,

91
00:06:50,939 --> 00:06:55,064
რა ხდება "სცენის მიღმა" jQuery -ის მსგავს
ბიბლიოთეკებში.