WEBVTT

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

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

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

00:00:14.671 --> 00:00:18.076
და ამან შეიძლება სერიოზულად არიოს შენი
JavaScript.

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

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

00:00:23.213 --> 00:00:28.275
და CSS წესი ამ კლასისთვის,
ჩვენთვის სასურველი სტილით.

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

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

00:00:38.932 --> 00:00:45.798
შევქმნათ კლასი .catcolors და CSS წესი
ამ კლასისთვის.

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

00:00:53.085 --> 00:00:58.854
ახლა თუ გვინდა ეს მივმართოთ ელემენტს 
"heading" (ჰედერს)

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

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

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

00:01:12.222 --> 00:01:13.322
და

00:01:13.322 --> 00:01:15.113
გამოვიდა!

00:01:15.113 --> 00:01:17.466
ამჩნევთ რაღაც უცნაურობას?

00:01:17.466 --> 00:01:21.249
HTML ატრიბუტი კლასების სახელებისთვის
არის უბრალოდ class

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

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

00:01:31.589 --> 00:01:33.806
რაც ჩვენთვის ცოტა უჩვეულოა.

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

00:01:39.084 --> 00:01:42.613
რომელსაცა ამ ენაში განსაკუთრებული 
მნიშვნელობა აქვს.

00:01:42.613 --> 00:01:47.534
ამის გამო, ბრაუზერებმა გადაწყვიტეს 
გამოიყენონ className , როცა

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

00:01:52.205 --> 00:01:56.613
დაიმახსოვრე, თუ გინდა განსაზღვრო ელემენტის
კლასის ატრიბუტი,

00:01:56.613 --> 00:02:00.333
წერ .className უდრის ....

00:02:00.333 --> 00:02:04.383
ახლა დაუკავშირე ეს ცხოველის
ყოველ სახელს;

00:02:04.383 --> 00:02:06.657
ეს შეიძლება ჩავსვათ ციკლში.

00:02:06.657 --> 00:02:13.449
nameEls[i].className = "catColors";

00:02:13.449 --> 00:02:19.427
ასე დავამატებთ ახალ კლასს და სახელს,
მაგრამ წავშლით ყველა კლასს,

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

00:02:23.704 --> 00:02:28.236
ასე რომ, თუ აქ მანამდე რამე კლასები იყო
ახლა აღარ არის.

00:02:28.236 --> 00:02:32.053
ვიცით, რომ აქ ადრე იყო კლასები,
რომლებიც უდრიდა ცხოველებს,

00:02:32.053 --> 00:02:34.340
ახლა კი catColors გვაქვს.

00:02:34.340 --> 00:02:41.305
ახლა ამ კლასის ატრიბუტს უნდა დავუმატოთ
კლასის ახალი სახელი.

00:02:41.305 --> 00:02:47.562
ამის გაკეთება შეგვიძლია ასე:
+ = catColors

00:02:47.562 --> 00:02:48.828
ესეც ასე.

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

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

00:02:58.048 --> 00:03:02.209
ახალ ბრაუზერებში კიდევ შეიძლება

00:03:02.209 --> 00:03:04.975
classList თვისების გამოყენება.

00:03:04.975 --> 00:03:15.035
ვაკეთებთ ასე:
nameEls[i].classList.add("catcolors");

00:03:15.035 --> 00:03:19.649
ეს გაცილებით უფრო კარგია, მაგრამ
ყველგან არ მუშაობს.

00:03:19.649 --> 00:03:24.014
თუ ამის გამოყენება გინდა, უნდა გადახვიდე
გვერდზე caniuse.com

00:03:24.014 --> 00:03:26.532
და დარწმუნდე, რომ ის მუშაობს 
ყველა ბრაუზერში,

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

00:03:28.756 --> 00:03:32.189
შენთვის ეს ფუნქცია კი არის კარგი, მაგრამ 
კარგი სულაც არაა თუ გვერდი არ ჩაიტვირთა

00:03:32.189 --> 00:03:36.254
იმის გამო, რომ ისეთი ფუნქცია გამოიყენე,
რომლის შესახებაც ბრაუზერს ჯერ არაფერი არ სმენია.

00:03:36.254 --> 00:03:38.143
ეს ისე, ზოგადად.

00:03:38.143 --> 00:03:41.337
მე მაგალითად მირჩევნია, რომ ჩემი
გვერდი ყველა ბრაუზერში იხსნებოდეს.

00:03:41.337 --> 00:03:46.067
საკითხს რომ დავუბრუნდეთ, ხანდახან 
კლასების სახელების მინიჭების მაგივრად

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

00:03:48.558 --> 00:03:54.463
მოკლედ, გახსოვდეს, რომ ორივე ეს ხერხი 
არსებობს და შეგიძლია გამოიყენო.

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