JavaScript (ქართ. ჯავასკრიპტი) არის დაპროგრამების ენა, რომელიც შემატებს თქვენს ვებგვერდს მომხმარებელთან ურთიერთქმედების შესაძლებლობას (როგორიცაა თამაშები, საპასუხო მოქმედებები ღილაკზე დაჭერისას ან მონაცემების ველებში შეყვანისას, ცვალებადი გაფორმება, მოძრავი გამოსახულებები). ეს სტატია საშუალებას მოგცემთ გაეცნოთ ამ საოცარ ენას და შეგიქმნით წარმოდგენას მის შესაძლებლობებზე.

რა არის JavaScript-ი სინამდვილეში?

JavaScript (შემოკლებით „JS“) არის დაპროგრამების სრულყოფილი დინამიკური ენა, რომელიც გამოიყენება HTML-დოკუმენტებთან და შეუძლია უზრუნველყოს ვებგვერდის დინამიკური ინტერაქტიულობა. მისი შემქმნელია ბრენდან აიკი (Brendan Eich), რომელიც აგრეთვე თანადამფუძნებელია Mozilla-ს პროექტის, Mozilla-ს ფონდისა და Mozilla-ს კორპორაციის.

JavaScript წარმოუდგენლად მრავალმხრივია. შეგიძლიათ დაიწყოთ მცირედით, როგორიცაა კარუსელები, სურათების გალერეები, მოძრავი განლაგებები და საპასუხო მოქმედებები ღილაკზე დაწკაპებისას. გამოცდილების ზრდის კვალდაკვალ კი შეძლებთ შექმნათ ორი და სამგანზომილებიანი მოძრავი გამოსახულებები, თამაშები, მონაცემთა ბაზებზე ორიენტირებული პროგრამები და ბევრი სხვა რამ!

JavaScript თავისთავად მეტად მჭიდრო და ამასთან, ძალზე მოქნილი ენაა. შემმუშავებლებს, უამრავი სხვადასხვა სახის ხელსაწყო აქვთ დაწერილი JavaScript-ენის ბირთვზე დაფუძნებით, რომელთა მეშვეობითაც, უამრავი დამატებითი შესაძლებლობა გახდა ხელმისაწვდომი, მცირე ძალისხმევით. მათ შორისაა:

  • ბრაუზერის გამოყენებითი პროგრამების მაკავშირებლები (Application Programming Interfaces, შემოკლ. API-ები) — რომლებიც ჩაშენებულია ბრაუზერებში, იძლევა შესაძლებლობას HTML-ის პირდაპირ რეჟიმში აგებისა და CSS-გაფორმების პარამეტრების მითითების, მომხმარებლის კამერიდან ვიდეონაკადის მიღებისა და გარდაქმნის ან სამგანზომილებიანი გამოსახულებებისა და ხმოვანი ჩანაწერების შექმნის.
  • მესამე მხარის API-ების დახმარებით, კი შემმუშავებლებს შეუძლიათ თავიანთ საიტებზე დაამატონ შიგთავსი სხვა საიტებიდან, როგორიცაა Twitter ან Facebook.
  • მესამე მხარის სამუშაო გარსები და ბიბლიოთეკები — შეგიძლიათ ასახოთ თქვენს HTML-ში საიტებისა და პროგრამების სწრაფად ასაგებად.

ვინაიდან, ეს სტატია JavaScript-ის მხოლოდ მსუბუქ მიმოხილვას ისახავს მიზნად, ამ ეტაპზე აღარ დაგაბნევთ JavaScript-ის ენის ბირთვსა და ზემოთ აღნიშნულ სხვადასხვა ხელსაწყოებს შორის განსხვავებების განხილვით. დაწვრილებით, მათ შესახებ შეგიძლიათ იხილოთ შემდგომ, ჩვენს JavaScript-ის სასწავლო განყოფილებაში და MDN-ის სხვადასხვა სტატიებიდან.

ქვემოთ, გავეცნობით ენის ბირთვის სხვადასხვა მხარეებსა და საკითხებს, აგრეთვე ცოტა წავეთამაშებით ბრაუზერის API-ის შესაძლებლობების ნაწილსაც. ასე რომ, მოდი გავერთოთ!

მაგალითი „hello world“

წინა აბზაცი მართლაც შთამბეჭდავი იყო, და ასეც უნდა ყოფილიყო — JavaScript არის ერთ-ერთი ყველაზე ცოცხალი ვებტექნოლოგია და მისი გამოყენებისთანავე, თქვენი საიტები გადავა სრულიად ახალ, მძლავრ და შთაგონების წყაროებით სავსე სიბრტყეში.

თუმცაღა, JavaScript-თან გაშინაურება ოდნავ უფრო რთულია, ვიდრე HTML-თან ან CSS-თან. ჯობია დაიწყოთ მცირედით და ასევე განაგრძოთ პატარა ნაბიჯებით თავიდან, ჩვენ გაჩვენებთ თუ როგორ უნდა დაამატოთ JavaScript-ის მარტივი კოდები თქვენს გვერდზე, „hello world!“ მაგალითისთვის („hello world“ ფრაზით მოიხსენიებენ დაპროგრამებაში მარტივ მაგალითებს შესწავლის დასაწყებად).

ყურადღებით: თუ თქვენ არ მიყვებით საიტზე მოცემულ სასწავლო გეგმას, ჩამოტვირთეთ ეს კოდი მაგალითისთვის და პირდაპირ გამოიყენეთ.

  1. დასაწყისისთვის, გადადით თქვენს საცდელ საიტზე და შექმენით საქაღალდე დასახელებით „scripts“ (ბრჭყალების გარეშე). შემდეგ, ამ ახლად შექმნილ საქაღალდეში, შექმენით ახალი ფაილი დასახელებით main.js. შეინახეთ თქვენს scripts საქაღალდეში.
  2. შემდეგ, თქვენს index.html ფაილის ბოლოს, შეიყვანეთ ქვემოთ მოცემული ელემენტი ახალ ხაზზე, ოღონდ </body> ჭდის დახურვამდე:
    <script src="scripts/main.js"></script>
  3. ეს სინამდვილეში აკეთებს იმავეს, რასაც <link> ელემენტი CSS-ისთვის — იგი ასახავს JavaScript-ს გვერდზე, შედეგად მისით შესაძლებელი გახდება HTML-ზე ზემოქმედება (აგრეთვე CSS-ზე და ყველაფერზე, რაც ამ გვერდზეა).
  4. ახლა კი დაამატეთ შემდეგი კოდი main.js ფაილს:
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. ბოლოს, დარწმუნდით რომ HTML და JavaScript ფაილები შენახულია და ჩატვირთეთ index.html ბრაუზერში. უნდა დაინახოთ რაღაც ამის მსგავსი:

შენიშვნა: მიზეზი, თუ რატომაც მოვათავსეთ <script> ელემენტი HTML-ფაილის ბოლოსკენ ისაა, რომ HTML ბრაუზერში იტვირთება იმ თანმიმდევრობით, როგორც ფაილშია წარმოდგენილი. თუ JavaScript ჩაიტვირთება უფრო ადრე, შეიძლება ვეღარ იმოქმედოს ქვემოთ არსებულ HTML-ზე. შესაბამისად, JavaScript-ის განთავსება HTML-გვერდის ბოლოში, უმჯობესია ხოლმე.

რა შეიცვალა?

თქვენი გვერდის სათაურში ახლა უკვე მოცემულია ტექსტი „Hello world!“, რომელიც ჩასწორდა JavaScript-ით. ეს გაკეთდა ფუნქციით querySelector(), რომლითაც შეირჩა სათაურის ტექსტი და მიენიჭა ცვლადს სახელწოდებით myHeading. ეს ძალიან ჰგავს იმ მოქმედებას, რასაც CSS-ის შემრჩევები (სელექტორები) აკეთებს. როცა ელემენტზე რაღაცის გაკეთებაა საჭირო, პირველ რიგში მისი შერჩევაა უნდა მოხდეს.

ამის შემდეგ, ცვლადს myHeading მიეთითა ახალი მნიშვნელობა „Hello world!“ მოცემული თვისებით textContent (რომელიც წარმოადგენს სათაურის ტექსტს).

შენიშვნა: ორივე ელემენტი რაც ზემოთაა გამოყენებული ეკუთვნის დოკუმენტის ობიექტური მოდელის (Document Object Model, შემოკლ. DOM) API-ს, რომელიც დოკუმენტის ნაწილებს წარმოადგენს ობიექტების სახით და მათზე სხვადასხვა მოქმედების ჩატარების საშუალებას იძლევა.

ენის საფუძვლების სწრაფი შესწავლა

მოდი ავხსნათ JavaScript-ის ენის ძირეული შესაძლებლობები, რომ უკეთ გაიგოთ, როგორ მუშაობს. აღსანიშნავია, რომ ეს შესაძლებლობები, საერთოა დაპროგრამების ყველა ენისთვის, ასე რომ თუ ამ საფუძვლებს კარგად შეისწავლით, თავისუფლად შეძლებთ თითქმის ყველაფრის დაპროგრამებას!

ყურადღება: ამ ნაწილში, სცადეთ მაგალითების კოდების JavaScript-ის კონსოლში მოსინჯვა. ვრცლად, JavaScript-ის კონსოლების შესახებ, იხილეთ ბრაუზერის ხელსაწყოები შემმუშავებლებისთვის.

ცვლადები

ცვლადები (Variables) არის ერთგვარი სათავსები, რომლებშიც შესაძლებელია რაღაც მნიშვნელობების განთავსება, შენახვა. ცვლადის გამოცხადება ხდება var აღნიშვნით, რომელსაც გვერდით მიეწერება სასურველი სახელი:

var myVariable;

შენიშვნა: წერტილ-მძიმე ხაზის ბოლოს აღნიშნავს განაცხადის, ბრძანების დასასრულს; მისი გამოყენება აუცილებელია რამდენიმე განაცხადების გამოსაყოფად, როცა ერთ ხაზზეა განთავსებული. თუმცა ზოგს მიაჩნია, რომ ყოველთვისაა საჭირო მისი დასმა თითოეული განაცხადის ბოლოს. არსებობს წესები, როდისაა სასურველი და როდის არა, წერტილ-მძიმის გამოყენება — ვრცლად იხილეთ სახელმძღვანელო წერტილ-მძიმეების გამოყენების შესახებ JavaScript-ში.

შენიშვნა: ცვლადს თითქმის ნებისმიერი რამ შეიძლება დაერქვას, თუმცა არსებობს გარკვეული შეზღუდვებიც (იხილეთ სტატია, ცვლადებისთვის სახელების შერჩევის წესებზე). თუ გეეჭვებათ სახელი, გადაამოწმეთ იგი მართებულობის დასადგენად.

შენიშვნა: JavaScript-ში გათვალისწინებულია მთავრული (დიდი) ასონიშნებიც — myVariable ცვლადი და myvariable ცვლადი, იქნება სხვადასხვა. თუ კოდში რაღაც ხარვეზს გადააწყდებით, კარგი იქნება თუ გადაამოწმებთ ხოლმე დიდ და პატარ ასონიშნებსაც!

ცვლადის გამოცხადების შემდეგ, შეგიძლიათ მიანიჭოთ მნიშვნელობაც:

myVariable = 'Bob';

შეგიძლიათ ეს ორივე მოქმედება, ერთ ხაზზეც გააკეთოთ:

var myVariable = 'Bob';

მნიშვნელობის მისაღებად ცვლადის გამოძახება შეგიძლიათ, უბრალოდ მისი სახელის მითითებით:

myVariable;

ცვლადისთვის მნიშვნელობის მინიჭების შემდგომ, შეგიძლიათ შეცვალოთ სხვა მნიშვნელობითაც:

var myVariable = 'Bob';
myVariable = 'Steve';

გაითვალისწინეთ, რომ ცვლადებში არჩეული მნიშვნელობები, შესაძლოა სხვადასხვა სახის მონაცემს წარმოადგენდეს:

ცვლადი განმარტება მაგალითი
String ტექსტის მონაკვეთი, სტრიქონი. იმის აღსანიშნავად, რომ მნიშვნელობა ტექსტს წარმოადგენს, საჭიროა მისი ბრჭყალებში მოქცევა. var myVariable = 'Bob';
Number ციფრი, რიცხვი. ციფრები არ საჭიროებს ბრჭყალებს. var myVariable = 10;
Boolean ბულის ცვლადი, ანუ ჭეშმარიტი ან მცდარი მნიშვნელობა. ლათინური სიტყვები  true და false საგანგებო კოდური სიტყვებია JS-ში და არც ისინი საჭიროებს ბრჭყალებს. var myVariable = true;
Array მასივი, რომელიც საშუალებას იძლევა რამდენიმე მნიშვნელობის ერთი მითითებით შენახვის. var myVariable = [1,'Bob','Steve',10];
თითოეული წევრის მითითება შეიძლება შემდეგნაირად:
myVariable[0], myVariable[1], და ა. შ.
Object თითქმის ყველაფერი. JavaScript-ში ნებისმიერი რამ წარმოადგენს ობიექტს, საგანს, რომელიც შეიძლება ცვლადში განთავსდეს. დაიხსომეთ ეს, სწავლისას. var myVariable = document.querySelector('h1');
და ზემოთ მოცემული ყველა მაგალითი.

და რაში გვჭირდება ცვლადები? საქმე ისაა, რომ სწორედ ცვლადები ხდის აზრიანს დაპროგრამებას. მნიშვნელობები რომ ვერ იცვლებოდეს, შეუძლებელი იქნებოდა რამე მოძრავის, ცვალებადის, დინამიკურის გაკეთება, მაგალითად მისალმების შეცვლა თითოეული მომხმარებლისთვის, გალერეიდან სხვადასხვა სურათის გამოტანა და ა. შ.

შენიშვნები

შენიშვნების ანუ კომენტარების დართვა JavaScript-ში შესაძლებელია ზუსტად ისე, როგორც CSS-ში:

/*
ნებისმიერი წარწერა ამ ნიშნებს შორის იქნება კომენტარი.
*/

თუ თქვენი შენიშვნა მოკლეა და რამდენიმე ხაზზე არ გადადის, სიმარტივისთვის და სისწრაფისთვის შეგიძლიათ ორი წინ გადახრილი ხაზის გამოყენებაც:

// ეს კომენტარია

მოქმედებები

მოქმედება (operator) არის მათემატიკური აღნიშვნა, სიმბოლო რომელიც აწარმოებს შედეგს ორი მნიშვნელობის (ან ცვლადის) გარდაქმნით. ქვემოთ მოცემულ ცხრილში, იხილავთ რამდენიმე მარტივ მოქმედებას და მაგალითებს, რომელთა შედეგიც შეგიძლიათ შეამოწმოთ JavaScript-ის კონსოლში.

მოქმედება განმარტება აღნიშვნ(ებ)ა მაგალითი
მიმატება გამოიყენება ციფრების შესაკრებად, ხოლო ტექსტის შემთხვევაში, ფრაზების ერთმანეთზე მისაწებებლად. + 6 + 9;
"Hello " + "world!";
გამოკლება, გამრავლება, გაყოფა ეს ნიშნები მუშაობს ზუსტად ისევე, როგორც არითმეტიკაში. -, *, / 9 - 3;
8 * 2; // გამრავლება JS-ში ხდება ვარსკვლავით
9 / 3;
მინიჭება ეს უკვე ნანახი გაქვთ ზემოთ: იგი ანიჭებს რამე მნიშვნელობას ცვლადს. = var myVariable = 'Bob';
ტოლობის შემოწმება გამოიყენება ორი მნიშვნელობის ცვლადების შესადარებლად და აბრუნებს true/false (ბულის) კოდს. === var myVariable = 3;
myVariable === 4;
არ არის ტოლი, არ უდრის! წინასგან განსხვავებით, აბრუნებს საპირისპირო მნიშვნელობას; ჭეშმარტს (true) აქცევს მცდარად (false). როცა გამოიყენება ტოლობის  მოქმედებასთან, ამოწმებს, რომ მნიშვნელობები არაა ტოლი. !, !==

ფრჩხილებს შიგნით არსებული გამოსახულება ჭეშმარიტია და აბრუნებს true მნიშვნელობას, მაგრამ ქვემოთ მოცემული შედარებისას, დაბრუნდება false ვინაიდან წინ უარყოფას ვამატებთ:

var myVariable = 3;
!(myVariable === 3);

ქვემოთ მოწმდება შემდეგი რამ: „myVariable არაა ტოლი 3-ის“. შედეგად დაბრუნდება false, ვინაიდან myVariable არის ტოლი 3-ის.

var myVariable = 3;
myVariable !== 3;

       

კიდევ უამრავი მოქმედებაა შესასწავლი, მაგრამ ჯერჯერობით, ესეც საკმარისია. იხილეთ გამოსახულებები და მოქმედებები სრული სიის სანახავად.

გაითვალისწინეთ: მონაცემთა სხვადასხვა სახეობების არევა, იძლევა არასწორ და გაუგებარ შედეგებს გამოთვლებისას, ასე რომ ყურადღებით იყავით, როცა უთითებთ ცვლადებს სასურველი შედეგის მისაღებად. მაგალითად, შეიყვანეთ "35" + "25" თქვენს კონსოლში. რატომ არ იკრიბება მოცემული რიცხვები? იმიტომ, რომ ბრჭყალები ამ რიცხვებს აქცევს ტექსტად, შედეგად კი შეკრების ნაცვლად, ეს ორი ტექსტი ერთმანეთს უერთდება. თუ შეიყვანთ, 35 + 25 უკვე სასურველ შედეგს მიიღებთ.

პირობა

პირობა წარმოადგენს ერთგვარი აგებულების კოდს, რომელიც საშუალებას იძლევა შემოწმდეს, მოცემული გამოსახულება მცდარია თუ ჭეშმარიტი და იმისდა მიხედვით გაეშვას სხვა კოდი. ყველაზე გავრცელებული ფორმა პირობის არის if ... else წყობის განაცხადი. მაგალითად:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

გამოხახულება რომელიც მოთავსებულია if ( ... ) ფრჩხილებში მოწმდება — სადაც გამოიყენება ზემოთ ნახსენები მოქმედებები შესადარებლად iceCream ცვლადის chocolate ტექსტთან, ტოლია თუ არა ერთმანეთის. თუ ამ შედარების შედეგი იქნება ჭეშმარიტი true, გაეშვება კოდის პირველი განყოფილება. თუ შედარების შედეგი არ იქნება ჭეშმარიტი, პირველ განყოფილებას გამოტოვებს და სანაცვლოდ გაეშვება მეორე განყოფილება, რომელიც else განაცხადის ქვეშ წერია.

ფუნქციები

ფუნქცია არის შესასრულებელი მოქმედებების ნაკრები, რომელიც ერთი და იმავე კოდის ხელმეორედ გამოყენების საშუალებას იძლევა. როდესაც გსურთ რაღაც მოქმედებების ხელახლა ჩატარება, ამისთვის საკმარისია ფუნქციის გამოძახება მისი სახელის მეშვეობით, ნაცვლად იმავე კოდის ახლიდან დაწერისა. რამდენიმე ფუნქცია ზემოთ უკვე იხილეთ, მაგალითად:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

ეს ფუნქციები document.querySelector და alert, არის ბრაუზერში ჩაშენებული ფუნქციები, რომლებიც ნებისმიერ დროს შეგიძლიათ გამოიყენოთ.

როდესაც ხედავთ რაღაც ცვლადის მსგავს სახელს, მაგრამ თან მოყვება ორი ფრჩხილი გვერდით — (), იგი სავარაუდოდ ფუნქციაა. ფუნქციები ხშირად შემთხვევაში იღებს არგუმენტს — გარკვეულ მონაცემს, რომელიც ესაჭიროება მოქმედების შესასრულებლად. იგი იწერება ფრჩხილებს შორის და გამოიყოფა მძიმეებით, როცა რამდენიმე არგუმენტის გადაცემაა საჭირო.

მაგალითად alert() ფუნქცია ბრაუზერში აგდებს ამომხტომ ფანჯარას, მაგრამ საჭიროა არგუმენტად გადაეცეს ტექსტი, რომელსაც იგი გამოაჩენს ამ ამომხტომ ფანჯარაში.

ყველაზე კარგი ისაა, რომ თავადაც შეგიძლიათ საკუთარი ფუნქციების შექმნა — მომდევნო მაგალითში ჩვენ დავწერთ მარტივ ფუნქციას, რომელიც იღებს ორ რიცხვს არგუმენტად და შემდეგ ამრავლებს მათ ერთმანეთზე:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

სცადეთ ზემოთ არსებული ფუნქციის კონსოლში გაშვება და მოსინჯეთ სხვადასხვა არგუმენტები, მაგალითად:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

შენიშვნა: return განაცხადი ეუბნება ბრაუზერს, რომ დააბრუნოს ცვლადი result ფუნქციის გარეთ, რომ შესაძლებელი იყოს მისი გამოყენება. ეს იმიტომაა საჭირო, რომ ცვლადები, რომლებიც ფუნქციის შიგნითაა გამოცხადებული, მხოლოდ ფუნქციაშია ხელმისაწვდომი. ამას უწოდებენ ცვლადის ხილვადობის არეს. (იხილეთ ვრცლად, ცვლადის ხილვადობის შესახებ.)

ხდომილება

ვებსაიტთან ურთიერთქმედების წინაპირობაა გარკვეული მოვლენის მოხდენა (Event). ეს გულისხმობს კოდის ერთგვარ აგებულებას, რომელიც ელოდება რაღაც მოქმედებას ბრაუზერში, რომლის საპასუხოდაც შეასრულებს განსაზღვრულ სამუშაოს, ან გაუშვებს განსაზღვრლ კოდს და ა. შ. ყველაზე ნათელი მაგალითი არის დაწკაპების ხდომილება, რომელიც აღიქმება ბრაუზერის მიერ, როცა რამეზე დააწკაპებთ თაგვის ღილაკით. უკეთ წარმოსადგენად, შეიყვანეთ შემდეგი კოდი თქვენს კონსოლში, შემდეგ კი დაწკაპეთ არსებულ ვებგვერდზე:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

უამრავი გზა არსებობს, ხდომილების ელემენტზე მიბმის. მოცემულ მაგალითში, ჩვენ ვირჩევთ <html> ელემენტს, ვუთითებთ onclick დამმუშავებელ თვისებას და ვანიჭებთ ანონიმურ (ე.ი. უსახელო) ფუნქციას, რომელიც შეიცავს კოდს, რომლის გაშვებაც გვსურს დაწკაპებისას.

აღსანიშნავია, რომ

document.querySelector('html').onclick = function() {};

იგივეა, რაც

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

უბრალოდ შემოკლებულია.

გავამდიდროთ ჩვენი საიტის მაგალითი

ახლა უკვე გავლილი გვაქვს JavaScript-ის საფუძვლების რაღაც საკითხები, მოდი დავამატოთ ეს შთამბეჭდავი შესაძლებლობები ჩვენს მაგალითს და ვნახოთ, რა გამოვა.

სურათის შენაცვლება

ამ ნაწილში, ჩვენ დავამატებთ კიდევ ერთ სურათს საიტს, DOM API-ის შესაძლებლობების გამოყენებით, JavaScript-ით კი გადაირთვება ამ ორ სურათს შორის, დაწკაპებისას.

  1. თავდაპირველად, მონახეთ კიდევ ერთი სურათი რომელიც მოგესურვებათ. დარწმუნდით, რომ იმავე ზომისაა, რაც პირველი ან მიახლოებითი მაინცაა.
  2. შეინახეთ სურათი images საქაღალდეში.
  3. სახელი შეუცვალეთ და დაარქვით „firefox2.png“ (უბრჭყალებოდ).
  4. გადადით main.js ფაილზე და შეიყვანეთ მოცემული JavaScript-კოდი. (თუ „hello world“ კოდი ისევაა დარჩენილი, ამოშალეთ).
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. შეინახეთ ყველა ფაილი და ჩატვირთეთ index.html ბრაუზერში. ახლა უკვე, როცა დააწკაპებთ სურათზე, იგი შეიცვლება მეორე სურათით!

პირველ რიგში ვინახავთ მიმთითებელს <img> ელემენტის myImage ცვლადში. შემდეგ, ცვლადის onclick ხდომილების დამმუშავებელ თვისებაზე ვაბამთ უსახელო (ანონიმურ) ფუნქციას. შედეგად, ყოველი დაწკაპებისას:

  1. მივიღებთ სურათის src თვისების მნიშვნელობას.
  2. პირობით ვამოწმებთ, არის თუარა src მნიშვნელობა იგივე, რაც პირველი სურათის მისამართშია მოცემული:
    1. თუ დადგინდება რომ იგივეა, მაშინ src მნიშვნელობა შეიცვლება მეორე სურათის მისამართით და მას ჩატვირთავს <img> ელემენტში.
    2. თუ დადგინდება რომ განსხვავებულია (რაც ნიშნავს, რომ უკვე შეცვლილია მეორე სურათით), მაშინ src მნიშვნელობა დაბრუნდება პირველი სურათის მნიშვნელობაზე, თავდაპირველ მდგომარეობაში.

ცვალებადი მისალმების დამატება

აქ, ჩვენ დავამატებთ კიდევ ერთ კოდს, რომელიც გვერდის სათაურს შეცვლის მისალმების ტექსტით, საიტზე შესვლისას. ეს ტექსტი შენარჩუნდება, საიტის დატოვების და ხელახლა გახნის შემდეგაც — ვინაიდან ჩვენ გამოვიყენებთ ვებსაცავის API-ს. ასევე, ჩავამატებთ მომხმარებლის სახელის შეცვლის შესაძლებლობას, რომლის შესაბამისადაც შეიცვლება მისალმების ტექსტიც.

  1. ფაილში index.html, დაამატეთ მოცემული კოდი <script> ელემენტის წინ:
    <button>Change user</button>
  2. ფაილში main.js, განათავსეთ შემდეგი კოდი ბოლოში, ზუსტად ისე, როგორც წერია — იგი აიღებს ახალი ღილაკისა და სათაურის მიმთითებლებს და შეინახავს ცვლადებში.
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. ახლა კი დაამატეთ მოცემული ფუნქცია, მომხმარებელზე მორგებული მისალმების დასაყენებლად — ეს ჯერ არაფერს გააკეთებს, მაგრამ ცოტა ხანში გავასწორებთ:
    function setUserName() {
      var myName = prompt('Please enter your name.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    ეს ფუნქცია შეიცავს prompt() ფუნქციას, რომელსაც გამოაქვს ამომხტომი ფანჯარა, მსგავსია alert() ფუნქციის. თუმცა, prompt() მომხმარებელს სთხოვს მონაცემის შეყვანას და ინახავს შესაბამის ცვლადში, ღილაკზე დაჭერისას „კარგი“ (OK). ამ შემთხვევაში, ჩვენ ვთხოვთ მომხმარებელს შეიყვანოს თავისი სახელი. შემდეგ, ვიძახებთ API-ის დასახელებით localStorage, რომელიც საშუალებას მოგცემს, შევინახოთ ბრაუზერში სასურველი მონაცემი მოგვიანებით გამოსაყენებლად. ვისარგებლებთ localStorage-ის setItem() ფუნქციით და შევქმნით მონაცემს სახელით 'name', მნიშვნელობად კი მივუთითებთ myName ცვლადს, რომელიც შეიცავს მომხმარებლის მიერ შეყვანილ სახელს. ბოლოს, სათაურის textContent შიგთავსად ვუთითებთ სასურველ ტექსტს და თან ვურთავთ, მომხმარებლის მიერ შეყვანილ სახელსაც.
  4. ამის მერე, ვამატებთ if ... else წყობას — მას შეგვიძლია ვუწოდოთ კოდის გამშვებიც, რადგან სწორედ იგი იწყებს ჩვენს პროგრამას, გვერდის პირველი ჩატვირთვისას:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    ეს წყობა თავიდან იყენებს უარყოფის შემცველ გამოსახულებას (ლოგიკური უარყოფა წარმოდგენილია ! ნიშნით) და ამოწმებს name მონაცემი არსებობს თუ არა. თუ არ არსებობს, მაშინ setUserName() ფუნქცია გაეშვება და მომხმარებელს მოთხოვს სახელის შეყვანას. ხოლო, თუ უკვე არსებობს (რაც ნიშნავს, რომ მომხმარებელმა უკვე შეიყვანა წინა სტუმრობისას), მაშინ ჩვენ ვიღებთ შენახულ სახელს getItem() ფუნქციით და textContent თვისებით ვაყენებთ სათაურის ტექსტს, თან ვურთავთ მომხმარებლის სახელს, როგორც გავაკეთეთ setUserName() ფუნქციაში.
  5. ბოლოს კი onclick ხდომილების დამმუშავებლით ღილაკს ვაბამთ ფუნქციას, რომ დაწკაპებისას, setUserName() ფუნქცია გაუშვას. ეს მომხმარებელს საშუალებას მისცემს შეიყვანოს ახალი სახელი ნებისმიერ დროს, ღილაკზე დაჭერით:
    myButton.onclick = function() {
      setUserName();
    }
    

შედეგად, როცა პირველად ეწვევით საიტს, იგი მოგთხოვთ სახელის შეყვანას, შემდეგ კი მოგესალმებათ ამ სახელით. სახელის შეცვლა კი შეგეძლებათ ნებისმიერ დროს, ღილაკზე დაჭერით. ამასთან, ვინაიდან სახელი ინახება ადგილობრივად localStorage-ში, იგი შენარჩუნდება საიტის დახურვის შემდეგაც და მომდევნო გახსნისას, კვლავ ამ სახელით მოგესალმებათ!

შეჯამება

თუ ყველა მითითებას მიჰყევით მოცემულ სტატიაში, უნდა მიგეღოთ ქვემოთ გამოსახული გვერდის მსგავსი რამ (შეგიძლიათ იხილოთ აქედანაც):

რამე დაბრკოლებას თუ გადააწყდით, ნებისმიერ დროს შეგიძლიათ შეადაროთ თქვენი ნამუშევარი ჩვენი მაგალითის სრულ კოდს GitHub-ზე.

აქ, ჩვენ მხოლოდ მცირედით და ზედაპირულად შევეხეთ JavaScript-ს. უფრო ღრმად და საფუძვლიანად გასარკვევად, იხილეთ JavaScript-ის შესწავლის თემა.

 

მოცემულ მოდულში

 

დოკუმენტების ჭდეები და წვლილის შემტანები

ამ გვერდის შექმნაში, წვლილის შემტანები: G12r, mdnwebdocs-bot, Rome00, Evan13
ბოლო განახლების ავტორი: G12r,