ძირითადი ვებგვერდი შედგება HTML-ის
თეგებისგან, ამათ მსგავსად.
როგორ უნდა შევუცვალოთ სტილი
ვებგვერდს CSS-ით?
დავამატოთ თეგი.
ბრაუზერმა ხვდება ამ თეგის დანახვისას,
რომ უნდა აამუშავოს CSS
ამ თეგის გამოსაყენებლად.
ჩვეულებრივ თეგს -ის
თეგში ვსვამთ ხოლმე, იმისთვის, რომ
დავრწმუნდეთ, რომ ბრაუზერი სტილს ჩართავს
იქამდე, სანამ HTML-ის თეგებს მიადგება.
თუ ჩავსვამთ -ს დაბლა, მაშინ
გვექნება FOUC შემთხვევა
და ხალხი ჩვენს ვებ გვერდს
გაშიშვლებულს დაინახავს.
მოდი, დავაბრუნოთ თავის ადგილზე.
ახლა, ამ გვერდს აქვს სტილი.
როგორ გამოვიყენოთ ჯავასკრიპტი ვებგვერდზე,
თუ გვინდა ინტერაქტიულობის დამატება?
ამისათვის, ჩვენ ვამატებთ თეგს.
საუკეთესო ადგილი ამ თეგის ჩასასმელად
სინამდვილეში არის თეგის ბოლოში.
უკვე მივუჩინე მას ადგილი.
მოგვიანებით აგიხსნით რატომ.
რა შემიძლია ჩავსვა -ის თეგში?
შეგვიძლია ჩავსვათ ნებისმიერი დასაშვები
ჯავასკრიპტი, მაგალითად var four = 2 +2; .
არაფერია გასაოცებელი იმიტომ, რომ
ჩვენს გვერდზე არანაირად არ აისახა.
თუ უკვე ნამყოფი ხართ Khan Academy-ზე
მაშინ გეცოდინებათ, რომ 2+2 უდრის 4-ს.
იმის შესამოწმებლად, მუშაობს თუ არა
შემიძლია ეს ხაზი აქ დავწერო.
მაგრამ ახლაც ვერ ხედავთ ვერაფერ, არა?
შეიძლება არასოდეს გინახავთ ეს ფუნქცია.
ფუნქცია console.log არის
განსაკუთრებული, რომელიც ჯავასკრიპტის
მრავალ გარემოში შეგვიძლია გამოვიყენოთ.
მაგალითად, ბრაუზერში.
ის დაწერს მონაცემებს
ჯავასკრიპტის კონსოლში.
კონსოლის პოვნა ბრაუზერში შეგიძლიათ
Commant-Option-I-ს დაჭერით
ან Control-Option-I-ს დაჭერით,
ან მაუსის მარჯვენა დაკლიკებით,
ვებგვერდის ნებისმიერ ადგილას და
Inspect element-ის მითითებით.
დააპაუზეთ ვიდეო და თავად სცადეთ
კონსოლის გამოძახება შეტყობინების სანახავდ.
დაინახეთ? მშვენიერია.
ახლა შეგიძლიათ დახუროთ კონსოლი,
რადგან ის დიდ ადგილს იკავებს.
ასევე შეიძლება გაგართოთ, რადგან გაჩვენებთ
ყოველ შეცდომას რომელსაც დავუშვებ.
დებაგინგის შესანიშნავი ინსტრუმენტია.
აუცილებლად გადაიტანეთ თქვენს
ინტსრუმენტების ყუთში.
ახლა, რაიმე მოვუხერხოთ ვებგვერდს
ჯავასკრიპტის დახმარებით,
კოდის ისეთი ხაზის დაწერით,
რომელსაც ჯერჯერობით დიდი აზრი არ ექნება.
დაინახეთ რა მოხდა?
ჩვენი ვებგვერდი გაქრა და შეიცვალა
'leet hacker' შეტყობინებით.
ამ ხაზის მუშაობის დეტალებს
მოგვიანებით ჩავუღრმავდებით.
მაგრამ მან იპოვა თეგი,
და შეცვალა შიგთავსი.
რა მოხდება თუ თეგს დავაკოპირებ და
ჩავსვამ თეგში <style> თეგთან ერთად?</style>
არ იმუშავებს. რატომ?
იმიტომ, რომ ვებგვერდი აფასებს
თეგს იქამდე, სანამ
დაინახავს თეგს.
ჯერ არც უნახავს document.body
და უკვე მის შეცვლას ვცდილობთ.
ასე არ გამოვა.
ამიტომაც ჩვენი თეგი გვერდის
ბოლოში უნდა ჩავსვათ.
იმისთვის, რომ ვებგვერდმა ჯერ
თეგი დაინახოს,
მთელი მისი შიგთავსით და
შემდეგ შევძლებთ მის შეცვლას.
ჯერ უნდა დავრწმუნდეთ, რომ
ვებგვერდი არსებობს.
ამით CSS-ისგან განსხვავდება.
თეგი თავში გვინდა რომ ჩავსვათ,
რადგან CSS-ის ახერხებს სტილის შეცვლას
ობიექტებისადმი, რომლებიც ჯერ
არ არსებობენ.
მათი სტილი მაშინ შეიცვლება,
როგორც კი შეიქმნებიან.
ჯავასკრიპტის დომს ეს არ მოსწონს.
ამიტომ, დარწმუნდით, რომ
ბოლოში ჩასვამთ.
სცადეთ თეგის დამატება
და დარწმუნდით რომ ბოლოში სვამთ.
შემდეგ კი დეტალებში გაგესაუბრებით
ამ ხაზის შესახებ.