გზამკვლევი Front-End ტექნოლოგიებში: HTML, CSS, JavaScript
კომპიუტერული მეცნიერებებისა და ტექნოლოგიების ეპოქაში Front-end Development ერთ-ერთი ყველაზე საინტერესო და მოთხოვნადი პროფესიაა, რადგანაც ის აკავშირებს ანალიტიკურ და ტექნიკურ უნარებს შემოქმედებით ხელოვნებასთან, დიზაინთან. ეს სფერო კი Front-end ტექნოლოგიების მრავალფეროვნებით გამოირჩევა.
თუ დაინტერესებული ხარ Front-end Development-ის შესწავლით, მნიშვნელოვანია გესმოდეს განსხვავება HTML, CSS და JavaScript-ს შორის. ეს სამი ტექნოლოგია არის მომხმარებლის ინტერფეისის სამშენებლო ბლოკი ყველა ვებსაიტისთვის, რომელსაც ოდესმე სწვევიხარ. მიუხედავად იმისა, რომ თითოეულ ენას აქვს განსხვავებული ფუნქციონალური ფოკუსირება, ისინი ერთად მუშაობენ საინტერესო, ინტერაქციული ვებსაიტების შესაქმნელად.
ამ ბლოგში აღმოაჩენ, თუ რატომ არის ამ Front-end ტექნოლოგიების სწავლა მნიშვნელოვანი.
HTML vs. CSS vs. JavaScript: რა განსხვავებაა?
მიუხედავად იმისა, რომ ეს Front-end ტექნოლოგიები ვებ-გვერდების შესაქმნელად გამოიყენება, თითოეულ მათგანს აქვს სპეციფიკური დანიშნულება და სირთულეები. მაგალითად, HTML-სა და CSS-ს შორის მთავარი განსხვავება ისაა, რომ HTML ქმნის ვებ-გვერდის დოკუმენტურ სტრუქტურას, ხოლო CSS მუშაობს მის ვიზუალურ გაუმჯობესებაზე ფორმატირებისა და სტილის დამატებით. JavaScript კი, სავარაუდოდ, ამ სამიდან ყველაზე რთულია, რადგან სწორედ მას იყენებენ უფრო კომპლექსური ვებ-გვერდების შესაქმნელად. შენი საყვარელი ვებ-გვერდების ყველა დინამიური ასპექტი, სავარაუდოდ JavaScript-ით არის ჩართული.
HTML: ინტერნეტის სამშენებლო განყოფილებები/ბლოკები
HTML ნიშნავს ჰიპერტექსტის მარკირების ენას. ეს არის შედარებით მარტივი ტექნოლოგია, რომელიც დეველოპერებს საშუალებას აძლევს შექმნან ვებსაიტის ძირითადი სტრუქტურა. ყველაზე რთულ ვებსაიტებსაც კი აქვთ HTML ბირთვში. Stack Overflow-ს ბოლო კვლევის მიხედვით, ის ასევე არის მეორე ყველაზე ხშირად გამოყენებული პროგრამირების ენა დეველოპერების მიერ.
შესაძლოა გაგიჩნდეს კითხვა – რატომ ჰქვია HTML-ს „მარკირების ენა“? მიზეზი ის არის, რომ HTML (როგორც სხვა მარკირების ენები) იყენებს თეგებს/დესკრიპტორებს ვებ გვერდზე სხვადასხვა ტიპის შინაარსის ანოტაციისთვის და განსაზღვრავს იმ მიზნებს, რომლებსაც ისინი ემსახურება. HTML-ის ფრაგმენტებს, ალბათ, იმაზე ხშირად ხედავ, ვიდრე შენ გგონია. მარკირების ენა ასევე ეხმარება ვებ დეველოპერებს, თავი აარიდონ ელემენტის კატეგორიის ყველა დონის ცალკე ფორმატირებას (მაგ., ვებსაიტზე სათაურების გამუქება), რაც ზოგავს დროს და თავიდან იცილებს შეცდომებს.
HTML იყენებს „ელემენტებს“ ისეთი რაღაცეების აღნიშვნისთვის, როგორიცაა აბზაცის დასაწყისი, შრიფტის გამუქება ან ფოტოზე წარწერის დამატება. ამ გზით, ის აკონტროლებს როგორ გამოიყურება ვებგვერდი, როგორ ხდება ტექსტის ფორმატირება და რას ხედავს მომხმარებელი. თუ აქამდე არასოდეს გამოგიყენებია პროგრამირების ენები, HTML შესანიშნავი დასაწყისია.
CSS
თუ HTML წარმოადგენს ვებსაიტის სამშენებლო მასალას, CSS არის ამ მასალის ჩამოყალიბებისა და გაძლიერების საშუალება. CSS არის სტილური ცხრილის ენა, რომელიც გამოიყენება მომხმარებლისთვის ვებგვერდის სხვადასხვა ნაწილების გამოსაჩენად. სხვა სიტყვებით რომ ვთქვათ, ეს არის გზა, რომ HTML-ით შექმნილ კარკასს გარკვეული სტილი და ფორმატირება დაამატო.
მაგალითად, თუ HTML-ს იყენებდი სათაურის დასამატებლად, CSS გამოიყენება რომ სათაურს ჰქონდეს უფრო სასიამოვნო შრიფტი, ფერი ან სხვა ფორმატირების ელემენტები, რაც მას უფრო პროფესიონალურს და ელეგანტურს გახდის. CSS ასევე ეხმარება ვებსაიტებს, მოერგოს სხვადასხვა მოწყობილობების ტიპს და ეკრანის ზომას, რათა გვერდები თანაბრად კარგად იყოს წარმოდგენილი სმარტფონებზე, ტაბლეტებსა და დესკტოპ კომპიუტერებზე.
HTML-სა და CSS-ს შორის განსხვავების გასაგებად, მნიშვნელოვანია მათი ისტორიების გაგება. როდესაც HTML გამოიგონეს 1990 წელს, ის მხოლოდ დოკუმენტის სტრუქტურული შინაარსის ინფორმირებისთვის იყო შექმნილი (მაგ., სათაურების გამოყოფა ძირითადი ტექსტისგან). თუმცა, როდესაც შემუშავდა სტილისტური ელემენტები, როგორიცაა შრიფტები და ფერები, HTML-მა ვერ შეძლო ადაპტირება. ამ პრობლემის გადასაჭრელად CSS გამოიგონეს, რომელსაც შეუძლია HTML ელემენტებისთვის თვისებების მინიჭება. ანუ, არსებული მარკირების ენის საფუძველზე უფრო რთულ ვებგვერდს ქმნის.
JavaScript
JavaScript არის ამ ბლოგში განხილული Front-end ტექნოლოგიებიდან ყველაზე რთული, რომელიც აგებულია როგორც HTML, ასევე CSS-ზე. თუ ცდილობ ენების შედარებას, იფიქრე ასე: HTML ქმნის ვებსაიტის ძირითად სტრუქტურას, CSS ამ სრუქტურას ამატებს სტილს, ხოლო JavaScript იღებს მთელ ამ სამუშაოს, ხდის მას ინტერაქტიულს და ფუნქციურად უფრო რთულს.
კლასიკური მაგალითი იმისა, თუ როგორ მუშაობს JavaScript არის მენიუს ღილაკი ვებ-გვერდების უმეტესობის ზედა კუთხეში, რომელიც აჩვენებს ვებსაიტის სექციების ჩამონათვალს. ის ასევე დაგეხმარება შექმნა კლავიატურის სწრაფი ბმულები ან შეცვალოთ ღილაკის ფერი, როდესაც მასზე კურსორი ჩერდება.
JavaScript აუცილებელია ყველა ვებ განვითარებისთვის. Stack Overflow-ს ბოლო გამოკითხვის თანახმად, JavaScript-ს დეველოპერების 67.7% იყენებს, რაც მას Front-end ტექნოლოგიებიდან ყველაზე ხშირად გამოყენებულ პროგრამირების ენად აქცევს. ასე რომ, თუ გაინტერესებს ვებ დეველოპმენტის სწავლა – პროფესიონალურად თუ უბრალოდ ჰობის სახით – ჭკვიანური იქნება ისწავლო JavaScript.
როგორ მუშაობს Front-end ტექნოლოგიები (HTML, CSS, JavaScript) ერთად?
აღნიშნული Front-end ტექნოლოგიები აგებულია ერთმანეთზე – ვებსაიტის უმარტივესი სტრუქტურებიდან ყველაზე მოწინავე ინტერაქციულ ფუნქციებამდე. როგორც ადრე აღვნიშნე, HTML ქმნის ვებსაიტის შინაარსს, CSS ამ სტრუქტურას ამატებს სტილსა და ფორმატირებას, შემდეგ კი JavaScript აქცევს ამ სტილიზებულ კომპონენტებს ისეთად, რომლებთანაც უკვე მომხმარებელს შეუძლია ინტერაქცია.
ვთქვათ, გსურს შექმნა ვებ-გვერდი, სადაც მომხმარებლებს შეუძლიათ შეავსონ ფორმა კონკურსისთვის. HTML საშუალებას მოგცემს მიუთითო განსხვავება 2 სახის ტექსტს შორის: რომელიც აცხადებს კონკურსს და რომელიც სვამს კითხვებს, როგორიცაა მონაწილის სახელი, ასაკი, მისამართი და ა.შ. CSS საშუალებას მოგცემს, დააფორმატირო ეს ტექსტი, დაგეხმარება შექმნა ველები, სადაც მომხმარებლები შეიტანენ პასუხებს. შემდეგ JavaScript საშუალებას მოგცემს, მას შემდეგ რაც ყველაფერი შევსებულია, დაპროგრამო პატარა ბოქსი, რომელიც გამოჩნდება და ამბობს: “გმადლობთ რეგისტრაციისთვის”! ეს ყველაფერი უფრო პერსონალიზებული რომ იყოს, მას ასევე შეუძლია შეტყობინებასთან ერთად ჩასვას ამ პიროვნების სახელიც.
ასე რომ, თუ გაინტერესებს Front-end ტექნოლოგიები და მზად ხარ ერთ-ერთ ყველაზე მოთხოვნად პროფესიას დაეუფლო, Commschool-ში გელოდებით! Intro to Front-end Development-ის კურსს 12 ივნისს ვიწყებთ
შესაძლოა გაინტერესებდეს
დამწყები
საშუალო
საშუალო
შესვლა Google-ით
შესვლა Facebook-ით