If you're seeing this message, it means we're having trouble loading external resources on our website.

თუ ვებფილტრს იყენებთ, დარწმუნდით, რომ *.kastatic.org და *.kasandbox.org დომენები არ არის დაბლოკილი.

ძირითადი მასალა

თემა: შესავალი JavaScript-ში: ხატვა და ანიმაცია

პროგრამირების შესავალი

თუ პირველად ხართ აქ, უყურეთ ჩვენს გასაცნობ ვიდეოს და გაიგეთ მეტი პროგრამირების კურსის შესახებ. შემდეგ კი დაიწყეთ კოდის წერა!
ისწავლეთ
რა არის პროგრამირება?
(გახსნის ფანჯარას)
პროგრამირების სწავლა ხანის აკადემიაში
(გახსნის ფანჯარას)

ხატვის საწყისები

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

გაფერადება

ჩვენ გაჩვენებთ, თუ როგორ უნდა გაფერადება და ფიგურების კონტურების ხატვა!
ისწავლეთ
კოდით გაფერადება
(გახსნის ფანჯარას)
სწრაფი რჩევა: ფერის არჩევა
(გახსნის ფანჯარას)
გამოწვევა: მზიანი თოვლიანი დღე
(გახსნის ფანჯარას)
Doc-ების ძალა
(გახსნის ფანჯარას)
პროექტი: რა გვაქვს სადილად?
(გახსნის ფანჯარას)

ცვლადები

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

ანიმაციის საწყისები

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

ინტერაქტიული პროგრამები

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

ბონუსი: ზომის შეცვლა ცვლადებით

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

ტექსტი და სტრიქონები

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

ფუნქციები

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

ლოგიკა და if დებულებები

ასწავლეტ თქვენს პროგრამას გადაწყვეტილებების მიღება!
ისწავლეთ
If დებულება
(გახსნის ფანჯარას)
გამოწვევა: მხტუნავი ბურთი
(გახსნის ფანჯარას)
მეტი ინტერაქცია მაუსით
(გახსნის ფანჯარას)
გამოწვევა: თქვენი პირველი სახატავი აპლიკაცია
(გახსნის ფანჯარას)
ლოგიკური ტიპები (booleans)
(გახსნის ფანჯარას)
გამოწვევა: რიცხვის გაანალიზება
(გახსნის ფანჯარას)
ლოგიკური ოპერატორები
(გახსნის ფანჯარას)
გამოწვევა: თქვენი პირველი ღილაკი
(გახსნის ფანჯარას)
გამოწვევა: უფრო ჭკვიანი ღილაკი
(გახსნის ფანჯარას)
If/Else - ნაწილი 1
(გახსნის ფანჯარას)
გამოწვევა: ფერადი ბარათი
(გახსნის ფანჯარას)
If/Else - ნაწილი 2
(გახსნის ფანჯარას)
მიმოხილვა: ლოგიკა და if დებულება
(გახსნის ფანჯარას)
შემთხვევითი რიცხვები
(გახსნის ფანჯარას)
პროექტი: მაგიური ბურთი-8
(გახსნის ფანჯარას)

პროგრამების გამართვა

როგორ უნდა გაიგოთ, თუ რა პრობლემა აქვს თქვენს კოდს? გაეცანით რჩევებს და ხრიკებს თქვენი პროგრამების გამართვისთვის.
ისწავლეთ
println()-ით გამართვა
(გახსნის ფანჯარას)
მეტი რჩევა გამართვაზე
(გახსნის ფანჯარას)

ციკლის შექმნა

რაღაცის გამუდმებით გამეორება გიწევთ? ციკლი დაგეხმარებათ!
ისწავლეთ
ციკლები: შესავალი
(გახსნის ფანჯარას)
გამოწვევა: ციკლური სახაზავი
(გახსნის ფანჯარას)
კიდევ მეტი ციკლებზე: საჰაერო ბუშტი
(გახსნის ფანჯარას)
გამოწვევა: ციკლური ლანდშაფტი
(გახსნის ფანჯარას)
ციკლებს შემოვევლეთ! ციკლის ახალი სახეობა
(გახსნის ფანჯარას)
გამოწვევა: ხაზებიანი ფურცელი
(გახსნის ფანჯარას)
ჩასმული for ციკლები
(გახსნის ფანჯარას)
მიმოხილვა: ციკლების შექმნა
(გახსნის ფანჯარას)
პროექტი: ააშენეთ სახლი
(გახსნის ფანჯარას)
ივარჯიშეთ
while ციკლების გამოყენება
6 კითხვა

სუფთა კოდის წერა

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

მასივები

შეინახეთ უამრავი მნიშვნელობა თქვენს ცვლადებში მასივების დახმარებით!
ისწავლეთ
რა არის მასივები
(გახსნის ფანჯარას)
გამოწვევა: საყვარელი ხილი
(გახსნის ფანჯარას)
ციკლის შექმნა მასივების საშუალებით
(გახსნის ფანჯარას)
გამოწვევა: საყვარელი ცხოველები
(გახსნის ფანჯარას)
მასივების მოდიფიცირება
(გახსნის ფანჯარას)
გამოწვევა: თანავარსკვლავედის შემქმნელი
(გახსნის ფანჯარას)
მიმოხილვა: მასივები
(გახსნის ფანჯარას)
პროექტი: წვიმის დაწყება
(გახსნის ფანჯარას)

ობიექტები

ისწავლეთ, როგორ უნდა შეინახოთ რთული მონაცემები ობიექტებში.
ისწავლეთ
რა არის ობიექტები
(გახსნის ფანჯარას)
გამოწვევა: რეცეპტის ბარათი
(გახსნის ფანჯარას)
ობიექტების მოდიფიცირება
(გახსნის ფანჯარას)
გამოწვევა: სურათის ხატვა
(გახსნის ფანჯარას)
ობიექტების მასივები
(გახსნის ფანჯარას)
გამოწვევა: ფილმის მიმოხილვა
(გახსნის ფანჯარას)
მიმოხილვა: ობიექტები
(გახსნის ფანჯარას)
პროექტი: წიგნების თარო
(გახსნის ფანჯარას)

ობიექტზე ორიენტირებული დიზაინი

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

გახდით უკეთესი პროგრამისტი

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

ამ თემის შესახებ

ისწავლეთ JavaScript ენის და ProcessingJS ბიბლიოთეკის გამოყენება მხიარული ნახატების და ანიმაციების შესაქმნელად.