# BitCamp🔥

აქ იპოვით ყველაფერს რაც დაგჭირდებათ ჩვენი პროგრამის გასავლელად

### დაიწყე უფასო 2 კვირიანი ჩელენჯი

1\. რეგისტრირდები ამ კურსზე: <https://codehs.com/signup/student/4076B> (თუ კლასის კოდი მოგთხოვა შეიყვანე: 4076B);

2\. იწყებ კურსს იმის სწავლით თუ როგორ მართო ვირტუალური რობოტი(ძაღლუკა) სახელად Karel;

3\. აგრძელებ გრაფიკული პროგრამირების გაკვეთილებით და ჩელენჯებით;

4\. ასრულებ შენი პირველი თამაშის Breakout - ის დაწერით.

ყველაფერი რაც დაგჭირდება კურსის გასავლელად კურსის ნაწილია, ამიტომ სადმე ცალკე ინფორმაციის ძებნა არ მოგიწევს. თუ რაიმეს ვერ გაიგებ პირდაპირ მოგვწერე ხოლმე, ჯობია კითხვა დასვა და შეიძლება გიპასუხოთ ან შეიძლება გითხრათ რომ ჯობია შენით გაერკვე, კითხვას გააჩნია, მაგრამ მაინც ჯობია რომ დასვა კითხვა, ასე ნაკლები დრო დაგეხარჯება.&#x20;

როდესაც რაიმე კითხვა გექნება ან სადმე დახმარება დაგჭირდება პირდაპირ [Facebook ჯგუფში](https://www.facebook.com/groups/3969683209738650/) შეგიძლია იკითხო, ძირითადად სულ იქნება ვინმე ონლაინ და ვეცდებით რაც შეიძლება სწრაფად გიპასუხოთ ხოლმე.&#x20;

შენთვის საცდელი პერიოდი იწყება იმ დღიდან როცა შემოგვიერთდი. 2 კვირა გექნება პირველი ჩელენჯის შესასრულებლად. წარმატებებს გისურვებთ BitCamp - ის გუნდი.

### რა არის BitCamp?

BitCamp — ი არის პროგრამირების და ვებ-ტექნოლოგიების შესწავლითა და სწავლებით დაინტერესებული ადამიანების პლათფორმა.

ამ პლათფორმაზე, დამწყები დეველოპერები ცდილობენ სწავლასა და გამოცდილების მიღებას, გამოცდილი დეველოპრები კი ეხმარებიან მათ ამ გზის გავლაში.

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

[წაიკითხეთ BitCamp - ის სულისკვეთება და ფილოსოფია უფრო ვრცლად.](https://link.medium.com/yW9DoE1QS6)


# BitCamp - ის პროგრამა

მოგესალმებით BitCamp - ში!

ეს არის სივრცე სადაც დაინტერესებული ადამიანები იწყებენ კოდის წერას და სწავლობენ პროგრამირებისა და ვებ-დეველოპმენტის საფუძვლებს.

ყველას ვისაც გსურთ გყავდეთ მენტორი და მოხვდეთ ჩვენს ონლაინ კლასში უნდა გაიაროთ [I ეტაპი](/program/i-etapi).


# I ეტაპი

2 კვირიანი ჩელენჯი / საცდელი პერიოდი

{% tabs %}
{% tab title="დასაწყისი" %}
1\. რეგისტრირდები ამ კურსზე: <https://codehs.com/go/9FB96> (თუ კლასის კოდი მოგთხოვა: 9FB96);

2\. იწყებ კურსს იმის სწავლით თუ როგორ მართო ვირტუალური რობოტი სახელად Karel;

3\. აგრძელებ გრაფიკული პროგრამირების გაკვეთილებით და ჩელენჯებით;

4\. ასრულებ შენი პირველი თამაშის Breakout - ის დაწერით.

ყველაფერი რაც დაგჭირდება კურსის გასავლელად კურსის ნაწილია, ამიტომ სადმე ცალკე ინფორმაციის ძებნა არ მოგიწევს. თუ რაიმეს ვერ გაიგებ პირდაპირ მოგვწერე ხოლმე, ჯობია კითხვა დასვა და შეიძლება გიპასუხოთ ან შეიძლება გითხრათ რომ ჯობია შენით გაერკვე, კითხვას გააჩნია, მაგრამ მაინც ჯობია რომ დასვა კითხვა, ასე ნაკლები დრო დაგეხარჯება.&#x20;

როდესაც რაიმე კითხვა გექნება ან სადმე დახმარება დაგჭირდება პირდაპირ [ჯგუფში](https://www.facebook.com/groups/3969683209738650/) შეგიძლია იკითხო, ძირითადად სულ იქნება ვინმე ონლაინ და ვეცდებით რაც შეიძლება სწრაფად გიპასუხოთ ხოლმე.&#x20;

შენთვის საცდელი პერიოდი იწყება იმ დღიდან როცა შემოგვიერთდი. 2 კვირა გექნება პირველი ჩელენჯის შესასრულებლად. წარმატებებს გისურვებთ BitCamp - ის გუნდი.

**როგორ გადავიდე II ეტაპზე?**\
როგორც კი პირველ ეტაპს მორჩები, მიყევი ამ ინსტრუქციას რომ გადახვიდე მეორე ეტაპზე: <https://www.facebook.com/groups/bitcamp.ge/permalink/5573535242686764/>\ <br>
{% endtab %}

{% tab title="რჩევები" %}

* [ ] დარწმუნდით რომ შემდეგი 2 კვირა თავისუფალი გაქვთ + შემდეგი რამოდენიმე თვე ინტენსიურად შეძლებთ საკუთარ თავზე მუშაობას.
* [ ] გახსოვდეთ რომ დღეში მინიმუმ 5-6 საათი უნდა გქონდეთ ამ პროგრამაზე სამუშაოდ. რაც მეტი უკეთესი.
* [ ] შეეცადეთ არ ჩააგდოთ არცერთი დღე, დასაწყისში განსაკუთრებით მნიშვნელოვანია ყოველდღიური ჩართულობა, წინააღმდეგ შემთხვევაში რაღაც საკითხები შეიძლება დაგავიწყდეთ და ახლიდან გავლა მოგიწიოთ. ეს კი მარტივად შეიძლება იქცეს ფრუსტრაციის წყაროდ და დაგივარდეთ მოტივაცია. ამიტომ თუ რაიმე ისეთი მოხდა რომ რომელიმე დღეს ვერანაერად მოახერხეთ მუშაობა მაშინ თუნდაც 15-20 წუთი მაინც გამონახეთ და თუნდაც ძალიან ცოტათი წაიწიეთ წინ. ეს დაგეხმარებათ ცოცხლად შეინარჩუნოთ მეხსიერება და არ ამოვარდეთ კონტექსტიდან.
* [ ] იმუშავეთ ყოველდღე, შაბათ-კვირის ჩათვლით. რადგან ეხლა იწყებთ, რაც შეიძლება მალე უნდა გახვიდეთ შედეგზე, ამიტომ ჩათვალეთ რომ დასვენეის დღეები არ არსებობს. თუმცა თუ შეატყობთ რომ ძალიან გადაიღალეთ მაგ შემთხვევაში ძალა არ დაატანოთ და რამოდენიმე საათით ან თუნდაც მთელი დღე განიტვირთეთ. თავად შეხედეთ როგორ დაგჭირდებათ.

წარმატებები 🚀🚀🚀
{% endtab %}

{% tab title="დახმარება" %}
როგორ მოვიქცე თუ სადმე გავიჭედე?&#x20;

შემოგვიერთდი [Facebook ჯგუფში](https://www.facebook.com/groups/3969683209738650/) და თან ეს რჩევებიც გაითვალისწინე:

1. აუცილებლად ეცადეთ პრობლემა თავად გამოასწოროთ, მინიმუმ 15-20 წუთი იწვალეთ და იფიქრეთ რა შეიძლება გეშლებოდეთ.
2. თუ 15-20 წუთის შემდეგ ვერ გადაჭერით პრობლემა, შემოიხედეთ [ჯგუფში](https://www.facebook.com/groups/3969683209738650/) და დავალების ნომერი დასერჩეთ პოსტებში. შეიძლება უკვე ჰქონდა ვინმეს თქვენნაერი პრობლემა და გავეცით პასუხი.
3. თუ ზედა 2 პუნქტის შემდეგაც ვერ მიაგენით პრობლემის გადაჭრის გზას მაშინ შეგიძლიათ დაპოსტოთ აქ.
4. დარწმუნდით რომ სახელი და გვარი სრულად და სწორად გაქვთ მითთებული როგორც FB - ზე ისე კურსის პროფაილში რომ შევძლოთ თქვენი პოვნა კურსის ბაზაში!
5. აუცილებლად მიუთითეთ დავალების ნომერი! - ყველა დავალებას აქვს უნიკალური ნომერი. როცა კითხვას დასვამთ დავალების ნომერიც მიუთითეთ პოსტში - ასე მენტორებიც ადვილად ვიპოვით დავალებას და ვნახავთ თქვენ კოდს, ასევე სხვებიც ადვილად დასერჩავენ სამომავლოდ იგივე პრობლემა თუ შეექმნებათ.

ეს წესები არ არის მხოლოდ ამ კურსისთვის, ზოგადად ნებისმიერი დეველოპერისთვის კარგი წესებია პრობლემის გადასაჭრელად და ჯობია აქედანვე შეეჩვიოთ.P.S. ჩათში თუ მოგვწერთ მენტორებს მაინც აქ გადმოგამისამართებთ, ამიტომ ეს წესები გაითვალისწინეთ და პირდაპირ ჯგუფში ვიკონტაქტოთ.
{% endtab %}

{% tab title="დედლაინები" %}
მართალია რომ პირველი ეტაპისთვს 2 კვირაა გამოყოფილი თუმცა 2 კვირა პირობითია და თვითმიზანი არ უნდა იყოს ამ 2 კვირაში ჩატევა. მიზანი უნდა იყოს **სწავლა**. არცერთ შემთხვევაში არ შეგიქმნით პრობლემას როცა ვხედავთ რომ ყოველდღე მუშაობთ, არ ზარმაცობთ და უპასუხისმგებლოდ არ იქცევით. 1 თვეც რომ დაგჭირდეთ მაინც გადაგიყვანთ შემდეგ ეტაპზე - ასე რომ ამაზე ნუ დარდობთ.

1. &#x20;ეს არის ვიდეო კურსი რომელიც ადრეც ვახსენე როგორც დამატებითი  ხოდა როცა შეამჩნევთ რომ გიჭირთ, აუცილებლად ეს კურსი დაიმატეთ. ასევე ვისაც დააგვიანდება ან შევამჩნევ რომ უჭირს მე თვითონ დავუმატებ ხოლმე ამ კურსს. ოღონდ არ მინდა რომ ეს როგორც სასჯელი ისე მიიღოთ, პირიქით, ძალიან მინდა რომ დაგეხმაროთ და გაგიადვილოთ ამ გზის გავლა და ერთადერთი სწორი მიდგომა ამისათვის არის უბრალოდ მეტი მუშაობა, ამიტომ ვეცდები მოგამარაგოთ დამატებით რესურსებით მიღებული ცოდნის და გამოცდილების გასამყარებლად. თან ძაან ძაან მაგარი და სახალისო კურსია ესეც, მთლიანად ვიდეო კურსია და გაცილებით მარტივად შეიძლება გავლა როცა პირველი ჩელენჯიდან უკვე გაქვთ რაღაც ცოდნა და გამოცდილება.

\
ასე რომ KEEP CALM AND LEARN CODING!
{% endtab %}

{% tab title="რესურსები" %}

* [ ] [Javascript - ის და ზოგადად პროგრამირების საბაზისო მექანიზმების გარჩევა](https://www.youtube.com/watch?v=83KFSsTJSNQ)
* [ ] [Code! Programming with p5.js](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA)
  {% endtab %}
  {% endtabs %}


# II ეტაპი

ვებ-პროგრამირების საფუძვლები

გილოცავ 🎉 თუ ამას კითხულობ ესეიგი პირველი ჩელენჯი წარმატებით დაასრულე და გადახვედი შემდეგ ეტაპზე 🚀

(თუ არ დაგისრულებია ან არც დაგიწყია მაშინ სხვაგან მოხვდი და ჯობია [აქ შემოგვიერთდე](/program/i-etapi))

მეორე ეტაპზე მოსაწვევის მისაღებად [გაეცანი ინსტრუქციას.](https://www.facebook.com/groups/3969683209738650/permalink/4825174127522883/)

დღეიდან ვებ-დეველოპმენტის საფუძვლების სწავლას დავიწყებთ: შემდეგი კურსი რომელსაც გაივლი არის freeCodeCamp - ეს ერთ-ერთი საუკეთესო რესურსია დამწყებისთვის ვებ-ტექნოლოგიების სასწავლად რადგან არა მხოლოდ თეორიულ მასალას ითვისებ არამედ პროექტებსაც აკეთებ და პრაქტიკულ გამოცდილებასაც იძენ. გაიარე რეგისტრაცია - [https://www.freecodecamp.org](https://www.freecodecamp.org/) და შემდეგი 3-4 კვირის განმავლობაში უნდა გაიარო პირველი 3 კურსი.

კურსების ჩამონათვალი:

1. Responsive Web Design
2. JavaScript Algorithms and Data Structures
3. Front End Libraries

პარალელურად ასევე უნდა გაიარო დამატებით 2 კურსი:

1. HTML & CSS - <https://learn.shayhowe.com/html-css/>
2. Advanced HTML & CSS - <https://learn.shayhowe.com/advanced-html-css/>

ეს დამატებითი კურსები შინაარსობრივად იგივე მასალას ფარავს რაც freeCodeCamp - ი თუმცა გაცილებით კარგად ხსნის ამ ყველაფრის თეორიულ მხარეს და თან კარგ პროექტზეც გამუშავებს რითაც ძალიან ღირებულ გამოცდილებას მიიღებ.

შევაჯამოთ: მაქსიმუმ 1 თვე გაქვს ამ ყველაფრის დასასრულელბლად და III ეტაპზე გადასასვლელად.

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

წარმატებები 🚀


# III ეტაპი

ვებ-დეველოპმენტი კიდევ უფრო დიდი დოზით

პირველ რიგში გილოცავ 🎉 თუ ამას კითხულობ ესეიგი წარმატებით დაასრულე პირველი და მეორე ეტაპი. უკვე იცი პროგრამირების საფუძვლები და ფლობ ვებ-დეველოპმენტის საწყისებს. ასევე საკმაო რაოდენობის პროექტები გაქვს შესრულებული რომლითაც დარწმუნებული ვარ ამაყობ 💪

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

ისევ [freeCodeCamp](https://www.freecodecamp.org/learn) - ით ვაგრძელებთ:

1. APIs and Microservices Certification - აქ პირველად გექნება შეხება Backend დეველოპმენტთან.
2. Information Security and Quality Assurance Certification — აქ უსაფრთხოების, ტესტირების და ხარისხის კონტროლის ძალიან მნიშვნელოვან თემებს გაეცნობი.
3. Coding Interview Prep — ეს თავი ფარავს ალგორითმებისა და მონაცემთა სტრუქტურების აუცილებელ ნაწილს. ასევე უამრავ რეალურ პროექტს მოიცავს სადაც full-stack აპლიკაციების გაკეთება მოგიწევს. ამ თავის დამთავრება რამოდენიმე თვეში ალბათ შეუძლებელიც კია იმდნად დიდია და ბევრ სამუშაოს მოიცავს, თუმცა მანამდე შეუტიე სანამ ისეთ დონემდე არ მიხვალ რომ შენს შესაძლებლობებში დარწმუნდე.
4. პირადი პორთფოლიოს გაკეთება Github - ზე: ამ პუნქტის ნაწილია [Command Line](https://missing.csail.mit.edu/2020/command-line/) — ის გაცნობა და [Git](https://missing.csail.mit.edu/2020/version-control/) — ის მინიმალური ფუნქციონალის სწავლა. III ეტაპის დასასრულს გექნება შენი პირადი Github პროფაილი, ასევე პირადი პორთფოლიო რომელსაც ექნება ვებ-გვერდის სახე და გამოქვეყნებული იქნება Github Pages — ის საშუალებით.
5. Deep Dive Into Modern Web Development — [FullStack Open](https://fullstackopen.com/en/) ჰელსინკის უნივერსიტეტის კურსია ვებ აპლიკაციებზე. ფრონტზე React — ით და ბექზე NodeJS —ით სწავლობ თანამედროვე ვებ-აპლიკაციების კეთებას.
6. [You Don’t Know JS:](https://github.com/getify/You-Dont-Know-JS/) — წაიკითხე! ძალიან მნიშვნელოვანი წიგნია და Javascript — ის როგორც ენის ყველაზე ბნელ კუნჭულებში შეგახედებს. დაგჭირდება, ბოლო-ბოლო Javascript — ს ვერსად გაექცევი. საერთოდაც, მიეჩვიე რომ წიგნების კითხვა მოგიწევს, ეგეთი პროფესიაა, თუ წარმატებას გინდა მიაღწიო ბლომად სწავლა მოგიწევს და ვერასოდეს მოდუნდები.

არასავალდებულო მაგრამ სასარგებლო ნაწილი: [justjavascript.com](https://justjavascript.com/)


# IV ეტაპი

It’s time to Rock And Roll

მეოთხე ეტაპის წინასწარ დაგეგმვას დიდი აზრი არ აქვს.&#x20;

ამ ეტაპზე უკვე ის მინიმალური ცოდნა და გამოცდილება გაქვს დაგროვებული რაც თავისუფლად არის საკმარისი ჯუნიორ დეველოპერად მუშაობის დაწყებისთვის — This is true! No Kidding!

კომაპნიები საქართველოში, ევროპაში და ზოგადად გლობალურ ბაზარზე სულ ეძებენ თქვენი სქილების მქონე ჯუნიორ დეველოპერებს.

ამ ეტაპზე შეიძლება იფიქრო რომ აღარაფერი გესაქმება BitCamp — ში და შენითაც მშვენივრად შეგიძლია განაგრძო გზა. რაც 100% — ით მართალია!

ეხლა თუ დაფიქრდები არც თავიდან გჭირდებოდით რამეში, პირველი 3 ეტაპის გასავლელ მასალას გადახედე აბა, ხომ ხვდები რომ შენითაც მშვენივრად გაივლიდი? კი ეგრეა!

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

**საქმეზე გადავიდეთ!**

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

* The Missing Semester of Your CS Education — <https://missing.csail.mit.edu/>
* CSS Architecture and Related Stuff — a list by [Irakli Safareli](https://medium.com/u/a8d0fc10a4d3?source=post_page-----f31375379d43----------------------) — <https://github.com/safareli/css-stuff>
* CS50 — <https://online-learning.harvard.edu/course/cs50-introduction-computer-science>
* CS 253 Web Security — <https://web.stanford.edu/class/cs253/>
* Programming Paradigms (Stanford) — <https://see.stanford.edu/Course/CS107> — მნიშვნელოვანი კურსია, აზრზე მოგიყვანთ, ყველაფერი ჯადოქრობად აღარ მოგეჩვენებათ.
* From Nand to Tetris — <https://www.nand2tetris.org/> — ეს მათთვის ვისაც რკინეულობასთან ურთიერთობა აინტერესებს. უფრო გასაგებად კი ამ კურსში ისწავლით საერთოდ როგორ მუშაობს კომპიუტერი low level — ზე, საკუთარ ოპერაციულ სისტემასაც კი დაწერთ რომელიც რეალურად იქნება გარემო იმისთვის რომ ტეტრისი ააწყოთ. ანუ არაფრიდან ტეტრისამდე როგორ უნდა მიხვიდეთ მაგას სწავლობთ. ეს ცოდნა შემდეგ გამოგადგებათ თითქმის ყველგანს ადაც არასტადნარტულ მოწყობილობებთან მუშაობა მოგიწევთ.

სხვა მნიშვნელოვანი საკითხები რომლებიც შენით უნდა მოიკვლიო და ისწავლო:

* HTTP — Foundations
* TCP/IP
* DNS
* DOM
* Algorithms


# ვებ აპლიკაციების ფუნდამენტალები

**ამ კურსის თარგმნა ჯერ არ დაგვისრულებია, ამიტომ გვერდების უმეტესობა ცარიელია, თუმცა თუ ინგლისურად გსურს იგივე მასალის სწავლა ამაზე კარგ რესურსს ვერ იპოვი:** [**https://fullstackopen.com/en**](https://fullstackopen.com/en)

ვებ აპლიკაციების შესასწავლად ალბათ ყველაზე კარგი გზა უკვე არსებული რომელიმე აპლიკაციის გარჩევა იქნებოდა. ჩვენც სწორედ ასე დავიწყებთ, ამ აპლიკაციის გარჩევით: <https://studies.cs.helsinki.fi/exampleapp>&#x20;

გარჩევის მთავარი მიზანია დავინახოთ როგორ მუშაობს ზოგადად ვები მაგრამ ამ სტილით აპლიკაციების კეთება დღეისთვის შეიძლება მოძველებულად ან ცუდ პრაქტიკადაც კი ჩაითვალოს. თუმცა ძალიან მნიშვნელოვანია რომ წარმოდგენა გვქონდეს რა და როგორ ხდება შესაბამისად აუცილებლად ვთვლი რომ ეს საკითხები ავხსნათ და წარმოდგენა შეგიქმნათ იმაზე თუ რა არის და როგორ მუშაობს ვები.&#x20;

ამ მასალაში ყველგან გამოვიყენებთ **Chrome** ბროუზერს და თქვენც იგივეს გირჩევთ რომ ადვილად გამოგვყვეთ.&#x20;

დავიწყოთ! გახენით [აპლიკაცია](https://studies.cs.helsinki.fi/exampleapp/) თქვენს ბროუზერში.

**ვებ დეველოპმენტის პირველი წესი:** ბროუზერის კონსოლი ყოველთვის გახსნილი გაქვს!

თქვენს კლავიატურაზე დააჭირეთ F12 - ღილაკს ან ღილაკების შემდეგ კომბინაციას:&#x20;

* MacOS - ზე: `option-cmd-i`
* Windows/Linux - `ctrl-shift-i`

სანამ გააგრძელებთ კითხვას, აუცილებლად გახსენით კონსოლი და დატოვეთ გახსნილი.&#x20;

აი ასე გამოიყურება ის:&#x20;

![](https://1851035246-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGFoni2btDdEuOnm1wC%2F-MHS-eCy2gbChFSSfp5R%2F-MHS1-3LsK2UBB-22c34%2F1e.png?alt=media\&token=9c07081e-e8e5-4bc1-8688-0fbbfbf7ab50)

შეგიძლიათ გადართოთ Network ტაბზე და ჩართოთ Disable cache ფუნქცია რაც გამორთავს ქეშირებას და თქვენს ბრაუზერში ჩატვირთული კოდი და მასალები ყოველ რეფრეშზე განახლდება - ეს მნიშვნელოვანია დეველოპმენტისას რადგან როდესაც თქვენს ედიტორში კოდს შეცვლით, აუცილებლად დაგჭირდებათ განახლებული კოდის ჩატვირთვა შემდეგ რეფრეშზე.&#x20;

ასევე სასარგებლო შეიძლება იყოს Preserve log ფუნქცია რომელიც უზრუნველყოფს ლოგების ისტორიის შენახვას წინა რეფრეშებიდან. ამ ფუნქციის გარეშე, ყოველ რეფრეშზე წინა რეფრეშის ლოგები წაიშლება, თუმცა მისი გამოყენება თქვენზეა დამოკიდებული, შეიძლება ყოველთვის არც გჭირდებოდეთ.&#x20;

მართალია ყველაზე მნიშვნელოვანი Console ტაბია მაგრამ Network - საც არა ნაკლები სიხშირით გამოიყენებთ ხოლმე.&#x20;


# HTTP GET

სერვერსა და ბროუზერს შორის კომუნიკაცია [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) პროტოკოლის საშუალებით ხდება. Network - ტაბი გვაჩვენებს როგორია კომუნიკაციის პროცესი.

როდესაც გვერდის დარეფრეშებას ეცდებით (F5 ღილაკზე დაჭერით ან ბროუზერის ↺ სიმბოლოზე დაკლიკებით), კონსოლი გაჩვენებთ რომ 5 სხვადასხვა მიმართვა გაიგზავნა სერვერზე და შესაბამისად 5 სხვადასხვა რესურსი ჩაიტვირთა თქვენს ბროუზერში:&#x20;

* პირველად ჩაიტვირთა თავად გვერდის კონტენტი */exampleapp*&#x20;
* *შემდეგ ჩაიტვირთა kuva.png სურათი*
* *შემდეგ index.js ფაილი*
* *რომელსაც მოჰყვა content.min.css ფაილი*
* *და ბოლოს ჩაიტვირთან favicon.ico ფაილი*

![](https://1851035246-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGFoni2btDdEuOnm1wC%2F-MHS3aoD-W6Q5d81s4bM%2F-MHS5GRoQkaHhRIFJwW-%2F2e.png?alt=media\&token=1e18fcb2-a1df-4776-9f6d-f4941f8cbea1)

თუ დააკლიკებთ პირველივე ჩანაწერს exampleapp/ - ს, გამოჩნდება დაწვრილებითი ინფორმაცია იმის შესახებ თუ რა მოხდა კონკრეტულად ამ რესურსთან მიმართებაში:

![](https://1851035246-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGFoni2btDdEuOnm1wC%2F-MHS3aoD-W6Q5d81s4bM%2F-MHS6xMtSHKhvDxV_duW%2F3e.png?alt=media\&token=d9e46e04-a00a-4ee3-86d1-1984cd8e2316)

ჰედერების ტაბში, ზედა პირველი ნაწილი General - ი აჩვენებს რომ ბროუზერმა მოითხოვა ეს რესურსი, სერვერისგან, [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) მეთოდის გამოყენებით და ეს მოთხოვნა წარმატებით დასრულდა რადგან [Status Code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes) 200 იყო სერვერის პასუხი.

მოთხოვნას (Request) და პასუხს (Response) - აქვთ განსხვავებული header - მნიშვნელობები ან როგორც შემოკლებულად ვეძახით header - ები.&#x20;

![](https://1851035246-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGFoni2btDdEuOnm1wC%2F-MHS3aoD-W6Q5d81s4bM%2F-MHS8-waMMiIw3Ri64sp%2F4e.png?alt=media\&token=65685c8a-5037-471e-ba71-ebe02c29978c)

Response headers - სექციას თუ ჩამოშლით, დაინახავთ სხვადასხვა ინფორმაციას სერვერის მიერ გამოგზავნილი პასუხის (Response) შესახებ. აქ ნახავთ ისეთ ინფორმაციას როგორიცაა გამოგზავნილი კონტენტის ზომა (Content-Length), [კონტენტის ტიპი (Content-Type)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type) სადაც ნაჩვენებია რომ ეს რესურსი არის ტექსტური სახის/HTML დოკუმენტი და მისი ფორმატი არის [utf-8](https://en.wikipedia.org/wiki/UTF-8). ამ ინფორმაციაზე დაყრდნობით ხვდება ბროუზერი რომ სერვერისგან მიღებული კონტენტი სინამდვილეში [HTML](https://en.wikipedia.org/wiki/HTML) გვერდია.

Response ტაბი აჩვენებს სერვერის მიერ დაბრუნებულ პასუხს, რეალურ ინფორმაციას რომელიც HTML გვერდის სახი არის წარმოდგენილი. ამ სტრუქტურაში body - სექცია განსაზღვრავს იმ გვერდის სტრუქტურას რომელიც იხატება ბროუზერში:

![](https://1851035246-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGFoni2btDdEuOnm1wC%2F-MHS3aoD-W6Q5d81s4bM%2F-MHS9tpWFKwql8fF0EK_%2F5e.png?alt=media\&token=ca97c1f3-9197-484e-8a32-112f556f5f4c)

გვერდი body სექციის ქვეშ მოიცავს div ელემენტს რომელიც თავის თავში მოიცავს სათაურის ტეგს (h1), ბმულს (a) /notes მისამარზე და img ტეგს რომელის საშუალებითაც იხატება kuva.png სურათი. p ტეგში კი მოცემულია ნოუთების რაოდენობა.

რადგან დოკუმენტში img ტეგია წარმოდგენილი, ეს სიგნალია ბროუზერისთვის რომ ახალი *HTTP* მოთხოვნა (Request) უნდა გაუგზავნოს სერვერს kuva.png მისამართზე. შესაბამისად რომ აირჩიოთ kuva.png მარცხნივ საიდბარიდან დაინახავთ ამ სურათის შესაბამისი მოთხოვნისა (Request) და პასუხის (Response) დეტალებს დაწვრილებით.

![](https://1851035246-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGFoni2btDdEuOnm1wC%2F-MHS3aoD-W6Q5d81s4bM%2F-MHSB_vFuy8jxXb3-WAQ%2F6e.png?alt=media\&token=33f86be6-ef57-44eb-afbc-8a548bc5b1ad)

ამ ბმულის გახსნისას მიღებული <https://studies.cs.helsinki.fi/exampleapp> რექვესთების და რესფონსების ჯაჭვი ასე გამოიყურება:

![](https://1851035246-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MGFoni2btDdEuOnm1wC%2F-MHS3aoD-W6Q5d81s4bM%2F-MHSCVGzwKba6KZWE4-Y%2F7e.png?alt=media\&token=f6c8ded5-212e-4fa3-a28d-5794643b6ac0)


# ტრადიციული ვებ აპლიკაციები

სატესტო ცვლილება


# ვებ აპლიკაციები ბროუზერში


# Event handler - ები და Callback ფუნქციები


# Document Object Model - DOM


# Document Object - ების მანიპულირება კონსოლიდან


# CSS


# ფორმები და HTTP POST


# JavaScript - ის საფუძვლები

მოცემული მასალა თარგმნილია MDN - იდან: https\://developer.mozilla.org/en-US/docs/Web/JavaScript/A\_re-introduction\_to\_JavaScript

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

აქ მოცემული მასალა ნათარგმნია MDN - იდან, კერძოდ ამ თავიდან [A re-introduction to JavaScript (JS tutorial)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript).


# მიმოხილვა

ჯავასკრიპტი მულტი-პარადიგმული, დინამიური ენაა, ტიპებით, ოპერატორებით, სტანდარტული ჩაშენებული ობიექტებით და მეთოდებით. მისი სინტაქსი კი ეფუძნება Java\_ს და C პროგრამულ ენებს და არამარტო ეფუძნება, მოცემული ორი ენიდან ბევრი სტრუქტურის ჯავასკრიპტში გამოყენებაც შეიძლება. ჯავასკრიპტი მხარდაჭერას უწევს ობიექტზე-ორიენტირებულ პროგრამირებასაც, ობიექტური პროტოტიპებით, კლასების მაგიერ. მისი მხარდაჭერა ასევე ვრცელდება ფუნქციონალურ პროგრამირებაზეც, იქიდან გამომდინარე რომ ფუნქციები ობიექტებია, მათი მოთავსება შეიძლება ცვლადებშიც.

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

* numbers
* strings
* boolean
* objects
* symbol

ასევე undefined და null ტიპები, რომლებიც საკმაოდ ძველია. ასევე აღსანიშნავია `Array` (მასივი), რომელიც შედარებით სპეციალური ტიპის ობიექტია. `Date` და `RegExp` ობიექტები. ტექნიკურად რომ სწორად ავღწეროთ, ფუნქციები უბრალოდ სპეციალური ტიპის ობიექტებია, ამიტომ შეგვიძლია ზემოთა ტიპების დიაგრამა ოდნავ ჩავასწოროთ:

* numbers
* strings
* boolean
* symbol
* objects
  * functions
  * Array
  * Date
  * RegExp
* null
* undefined

და ასევე ჩაშენებული `Error` ტიპები. მაგრამ, საქმეს მეტად გავიმარტივებთ თუ პირველი დიაგრამით ვიხელმძღვანებელებთ, ამიტომ ჯერ-ჯერობით ექსტრა მონაცემების ტიპებს რომლებიც ქვემოთ დავამატეთ, არ განვიხილავთ.


# რიცხვები

ჯავასკრიპტში რიცხვები "ორმაგი-სიზუსტის 64-ბიტიანი ფორმატით" არის წარმოდგენილი, ტექნიკურად ამ ენაში არ არსებობს არანაირი `integer` (მთელი რიცხვი) ტიპი, ამიტომ სიფრთხილე უნდა გამოიჩინოთ მათემატიკური ოპერაციების დროს:

```javascript
console.log(3/2); // 1.5, not 1
console.log(Math.floor(3/2)); //1
```

გამოდის რომ, მთელი რიცხვი ჯავასკრიპტში - ათწილადია.

ასევე, ყურადღება მიაქციეთ შემდეგ მაგალIთსაც:

```javascript
0.1 + 0.2 == 0.30000000000000004;
```

პრაქტიკულად მთელი რიცხვები განიხილება როგორც `32-bit int` ტიპებად და ასევე ძირითადად ასეცაა შენახული, სანამ ისეთი ოპერაციების განხორცილება არაა საჭირო, რომლებიც უშუალოდ რიცხვებზე სრულდება და არა `32-bit integer` ტიპის ცვლადებზე.

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

```javascript
Math.sin(3.5);
var circumference = 2 * Math.PI * r;
```

თქვენ შეგიძლიათ მათი კონვერტაცია `string` ან `integer` ტიპებში `parseInt()` ფუნქციით, რომელიც ასევე იღებს გარდაქმნის "საფუძველს" მეორე, ნებაყოფლობით არგუმენტს რომლებიც რეკომენდირებულია რომ აუცილებლად მოაყოლოთ:

```javascript
parseInt('123', 10) // 123
parseInt('010', 10) // 10
```

ასევე შეიძლება ბინარული/ორობითი რიცხვის მთელ რიცხვში კონვერტაციაც:

```javascript
parseInt('11', 2); //3
```

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

`+` ოპეარტორსაც შეუძლია სტრინგების რიცხვებში გარდაქმნა:

```javascript
+ '42' // 42
```

იმ შემთხვევაში თუ კონვერტაციისთვის მითითებული სტრინგი არ არის რიცხვითი, მაშინ მიიღებთ სპეციალური მნიშვნელობა `NaN`\_ს (Not a Number)

```javascript
parseInt('hello', 10); //NaN
```

`NaN` ტოქსიკურია, იმ შემთხევაში თუ მიუმატებთ, გამოაკლებთ, ან რაიმე სახის მათემატიკურ ოპერაციას ჩაატარებთ სხვა რიცხვთან ერთად, პასუხი მუდმივად `NaN` იქნება:

```javascript
NaN + 5; //NaN
```

`NaN`\_ის შემოწმება შეიძლება ჩაშენებული `isNaN()` ფუნქციით:

```javascript
isNaN(NaN); // true
```

ჯავასკრიპტში ასევე შევხვდებით უსასრულობის აღმნიშვნელსაც - `Infinity`:

```javascript
1 / 0; // Infinity
-1 / 0; // -Infinity
```

*`ParseInt() და parseFloat()` ფუნქციები ამოწმებენ სტრინგს სანამ არ მაიღწევენ ისეთ სიმბოლომდე რომელიც არ არის რიცხვითი მნიშვნელობის და ამ რიცხვამდე დააბრუნებენ ყველა რიცხვით მნიშვნელობას ათწილად ფორმატში მაგრამ + ოპერატორი ასეთ შემთხვევაში მხოლოდ `NaN`\\*&#x10E1; განახებთ.\_


# სტრინგები

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

სტრინგის (ზემოთ ნახსენები კოდის დანაყოფები) სიგრძის გასაგებად შეგვიძლია `length` საკუთრების გამოყენება:

```
'hello'.length; // 5
```

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

```
'hello'.charAt(0); // "h"
'hello', world'.replace('world', 'mars'); // "hello, mars"
'hello'.toUpperCase(); // "HELLO"
```


# სხვა ტიპები

ჯავასკრიპტში არსებობს განსხვავება `null` (non-value) და `undefined` ტიპებს შორის, ეს უკანასკნელი აღნიშნავს - უმნიშვნელო ცვლადს. ანუ ცვლადი რომლისთვისაც მნიშვნელობა ჯერ არ მიგვინიჭებია. ცვლადებზე შემდგომში ვისაუბრებთ, მაგრამ ჯავასკრიპტში შესაძლებელია ისეთი ცვლადების დეკლარირება, რომლებსაც მნიშვნელობა არ გააჩნიათ.

ჯავასკრიტპში ასევე შევხვდებით ბულეან (boolean) ტიპის ცვლადებსაც რომლებსაც მხოლოდ ორი `true` და `false` მნიშვნელობები გააჩნიათ და ამავადროულად ნებისმიერი მონაცემის გარდაქმნა შეიძლება ბულეანში:

```
false, 0, ცარიელი სტრინგი(""), NaN, null და undefined, ყველა მიიღებს false მნიშვნელობას

ნებისმიერი სხვა მონაცემი კი გახდება true
```

ასეთი გარდაქმნის გაკეთება შეიძლება `` `Boolean(); `` ფუნქციით:

```
Boolean(''); // false
Boolean(234); // true
```

ასეთი ოპერაციის გაკეთება ძირითადად არ დაგჭირდებათ, რადგან როდესაც ბულეან მონაცემს ელოდებით, ჯავასკრიპტი მის კონვერსაციას ჩუმად მოახდენს. ამ მიზეზით, ხშირად მოისმენთ `true values, false values`, რაც ნიშნავს რომ მონაცემი ან `true` გახდება, ან `false` ბულეანში გარდაქმნის დროს.

ბულეანი ასევე მხარდაჭერას უწევს ლოგიკურ ოპერაციებსაც, მაგალითად: &&, ||, !, და ა.შ


# ცვლადები

ჯავასკრიპტში ახალი ცვლადების შექმნა შეიძლება `let`, `const`, და `var`, ქივორდებით.

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

```
// myLetVariable აქ არ არის ხელმისაწვდომი

for (let myLetvariable=0; myLetVariable<10; myLetVariable++){
// myLetVariable ხელმისაწვდომია
}

// myLetVariable არც აქ არის ხელმისაწვდომი
```

`const` ქივორდით ხდება ისეთო ცვლადების შექმნა, რომლებიც არ უნდა შეიცვალოს:

```
const Pi = 3.14 
Pi = 1; // ეს შეცდომას გამოიწვევს, იქიდან გამომდინარე რომ Pi const ქივორდით შეიქმნა, ანუ მისი შეცვლა შეუძლებელია.
```

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

```
// myVarVariable ხელმისაწვდომია

for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++){
  // აქაც
  }
// და აქაც.
```

როგორც წინა ნაწილში ვახსენე, ცვლადს რომელსაც არ აქვს მინიჭებული რაიმე მნიშვნელობა არის `undefined`.


# Git

სათარგმნი მასალა: https\://developer.mozilla.org/en-US/docs/Learn/Tools\_and\_testing/GitHub