0:00:00.702,0:00:05.963
ბოლო ტუტორიალში მე გაჩვენეთ, როგორ [br]განსაზღვროთ სტილები JavaScript-ში

0:00:05.963,0:00:10.202
თუ ბევრ სხვადასხვა სტილს გამოიყენებ[br]JavaScript-ში, ბოლოს

0:00:10.202,0:00:14.671
კოდის ასობით ხაზი გექნება,[br]რომელთაც უდა მიანიჭო CSS მნიშვნელობები.

0:00:14.671,0:00:18.076
და ამან შეიძლება სერიოზულად არიოს შენი[br]JavaScript.

0:00:18.076,0:00:20.666
მაგრამ, შეგვიძლია გავაკეთოთ ასე:

0:00:20.666,0:00:23.213
შეგვიძლია შევქმნათ CSS კლასი

0:00:23.213,0:00:28.275
და CSS წესი ამ კლასისთვის,[br]ჩვენთვის სასურველი სტილით.

0:00:28.275,0:00:33.116
შემდეგ კი დინამიურად დავამატოთ ამ კლასის[br]სახელი JavaScript-ში.

0:00:33.116,0:00:38.932
დავიწყოთ თეგით ``.

0:00:38.932,0:00:45.798
შევქმნათ კლასი .catcolors და CSS წესი[br]ამ კლასისთვის.

0:00:45.798,0:00:53.085
ფერები იქნება შემდეგი: color: orange`,[br]and `background-color: black`.

0:00:53.085,0:00:58.854
ახლა თუ გვინდა ეს მივმართოთ ელემენტს [br]"heading" (ჰედერს)

0:00:58.854,0:01:05.813
ჩავწეროთ `headingEl.className = "catcolors";

0:01:05.813,0:01:09.485
ახლა შეგვიძლია წავშალოთ ფერების

0:01:09.485,0:01:12.222
განსაზღვრებები JavaScript-იდან.

0:01:12.222,0:01:13.322
და

0:01:13.322,0:01:15.113
გამოვიდა!

0:01:15.113,0:01:17.466
ამჩნევთ რაღაც უცნაურობას?

0:01:17.466,0:01:21.249
HTML ატრიბუტი კლასების სახელებისთვის[br]არის უბრალოდ class

0:01:21.249,0:01:26.779
ეს რომ HTML-ში გამეკეთებინა, იქნებოდა[br]class="catcolors"

0:01:26.779,0:01:31.589
მაგრამ როცა JavaScript-ში ვმუშაობთ,[br]უნდა გამოვიყენოთ .className

0:01:31.589,0:01:33.806
რაც ჩვენთვის ცოტა უჩვეულოა.

0:01:33.806,0:01:39.084
ეს ასეა იმიტომ, რომ class JavaScript-ში არის[br]ფუქნციური სიტყვა,

0:01:39.084,0:01:42.613
რომელსაცა ამ ენაში განსაკუთრებული [br]მნიშვნელობა აქვს.

0:01:42.613,0:01:47.534
ამის გამო, ბრაუზერებმა გადაწყვიტეს [br]გამოიყენონ className , როცა

0:01:47.534,0:01:52.205
HTML კლასის ატრიბუტს უნდა მიმართონ.

0:01:52.205,0:01:56.613
დაიმახსოვრე, თუ გინდა განსაზღვრო ელემენტის[br]კლასის ატრიბუტი,

0:01:56.613,0:02:00.333
წერ .className უდრის ....

0:02:00.333,0:02:04.383
ახლა დაუკავშირე ეს ცხოველის[br]ყოველ სახელს;

0:02:04.383,0:02:06.657
ეს შეიძლება ჩავსვათ ციკლში.

0:02:06.657,0:02:13.449
nameEls[i].className = "catColors";

0:02:13.449,0:02:19.427
ასე დავამატებთ ახალ კლასს და სახელს,[br]მაგრამ წავშლით ყველა კლასს,

0:02:19.427,0:02:23.704
რაც მანამდე იყო - ეს მოხდება[br]იმის გამო, რომ გავატოლეთ.

0:02:23.704,0:02:28.236
ასე რომ, თუ აქ მანამდე რამე კლასები იყო[br]ახლა აღარ არის.

0:02:28.236,0:02:32.053
ვიცით, რომ აქ ადრე იყო კლასები,[br]რომლებიც უდრიდა ცხოველებს,

0:02:32.053,0:02:34.340
ახლა კი catColors გვაქვს.

0:02:34.340,0:02:41.305
ახლა ამ კლასის ატრიბუტს უნდა დავუმატოთ[br]კლასის ახალი სახელი.

0:02:41.305,0:02:47.562
ამის გაკეთება შეგვიძლია ასე:[br]+ = catColors

0:02:47.562,0:02:48.828
ესეც ასე.

0:02:48.828,0:02:52.044
ეს საკმაოდ უსაფრთხო გზაა,

0:02:52.044,0:02:58.048
იმიტომ რომ წინა კლასს უმატებს ახალს.

0:02:58.048,0:03:02.209
ახალ ბრაუზერებში კიდევ შეიძლება

0:03:02.209,0:03:04.975
classList თვისების გამოყენება.

0:03:04.975,0:03:15.035
ვაკეთებთ ასე:[br]nameEls[i].classList.add("catcolors");

0:03:15.035,0:03:19.649
ეს გაცილებით უფრო კარგია, მაგრამ[br]ყველგან არ მუშაობს.

0:03:19.649,0:03:24.014
თუ ამის გამოყენება გინდა, უნდა გადახვიდე[br]გვერდზე caniuse.com

0:03:24.014,0:03:26.532
და დარწმუნდე, რომ ის მუშაობს [br]ყველა ბრაუზერში,

0:03:26.532,0:03:28.756
სადაც გინდა, რომ შენი გვერდი გაიხსნას.

0:03:28.756,0:03:32.189
შენთვის ეს ფუნქცია კი არის კარგი, მაგრამ [br]კარგი სულაც არაა თუ გვერდი არ ჩაიტვირთა

0:03:32.189,0:03:36.254
იმის გამო, რომ ისეთი ფუნქცია გამოიყენე,[br]რომლის შესახებაც ბრაუზერს ჯერ არაფერი არ სმენია.

0:03:36.254,0:03:38.143
ეს ისე, ზოგადად.

0:03:38.143,0:03:41.337
მე მაგალითად მირჩევნია, რომ ჩემი[br]გვერდი ყველა ბრაუზერში იხსნებოდეს.

0:03:41.337,0:03:46.067
საკითხს რომ დავუბრუნდეთ, ხანდახან [br]კლასების სახელების მინიჭების მაგივრად

0:03:46.067,0:03:48.558
გვირჩევნია ცალკე სტილების შეცვლა.

0:03:48.558,0:03:54.463
მოკლედ, გახსოვდეს, რომ ორივე ეს ხერხი [br]არსებობს და შეგიძლია გამოიყენო.

0:03:54.463,0:03:59.083
აირჩიე საუკეთესო სიტუაციიდან გამომდინარე.