განათავსეთ თქვენი პირველი დავალებების სია განაცხადი: 8 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:17

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

კარგი ამბავი ის არის, რომ კოდირება არ არის რთული.

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

მშენებლობის დრო: 90 წუთი.

სირთულე: ადვილი.

ნაბიჯი 1: რას ავაშენებთ?

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

• შექმენით მარტივი დავალებების სია ვებ პროგრამა HTML5 გამოყენებით.
• ინტეგრირება Bootstrap ჩვენს აპლიკაციას დაამატოთ კარგი გარეგნობა და სწრაფი სტილისტიკა.
• გამოიყენეთ JavaScript და JQuery ბიბლიოთეკა, რომ დაამატოთ დინამიური ქცევა ჩვენს აპლიკაციას.
• განათავსეთ ჩვენი პროგრამა ღრუბელში Ziet– ის გამოყენებით.

მოქმედებაში:

ნაბიჯი 2: HTML, Bootstrap, JavaScript და JQuery გაცნობა

რა არის HTML?

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

ერთადერთი მოთხოვნა, რაც საჭიროა HTML გვერდის საჩვენებლად არის ვებ ბრაუზერი, როგორიცაა Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome ან Apple Safari.

რა არის Bootstrap?

Bootstrap არის ყველაზე პოპულარული HTML, CSS და JavaScript ჩარჩო საპასუხო, მობილური პირველი ვებსაიტების შესაქმნელად. Bootstrap არის ღია კოდის პროექტი, რომელიც შემუშავებულია Twitter– ის მიერ. იგი შედგება CSS კლასებისგან, რომლებიც შეიძლება გამოყენებულ იქნას ელემენტებზე, მათი თანმიმდევრული სტილის შესაქმნელად და JavaScript კოდი, რომელიც ახორციელებს დამატებით გაუმჯობესებას.

რა არის JavaScript?

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

რა არის JQuery?

JQuery არის სწრაფი, პატარა და მდიდარი JavaScript ბიბლიოთეკა, ის ამარტივებს ისეთ რაღაცეებს, როგორიცაა HTML დოკუმენტის გავლა და მანიპულირება, მოვლენების მართვა, ანიმაცია.

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

დამატებითი დეტალებისთვის:

HTML

JavaScript

JQuery

Bootstrap

ნაბიჯი 3: თქვენი პირველი გვერდი HTML– ით

STEP1: შექმენით ახალი საქაღალდე:

mkdir მარტივი- todolist

ნაბიჯი 2: შექმენით ახალი ფაილი მარტივი todolist საქაღალდეში და დაასახელეთ index.html.

cd მარტივი- todolist

შეხების ინდექსი. html

STEP3: დაამატეთ შემდეგი კოდი index.html.

გასაკეთებელი სია

ჩემი გასაკეთებელი სია

ნაბიჯი 4: გახსენით index.html თქვენს ბრაუზერში.

თქვენ ნახავთ, რომ ნაჩვენებია ჩემი დავალებების სია (იხილეთ ფოტო ზემოთ).

ნაბიჯი 4: ჩატვირთვის სამაგრის დამატება

ამ განყოფილებაში ჩვენ დავამატებთ Bootstrap მხარდაჭერას ჩვენს index.html გვერდზე, რათა დავამატოთ სწრაფი და კარგი სტილი სამუშაოების ჩამონათვალში.

შენიშვნა: ამ აპლიკაციაში ჩვენ გამოვიყენებთ Bootstrap 3 -ს, თქვენ იყენებთ ნებისმიერ სხვა CSS ჩარჩოს, როგორიცაა სემანტიკური ინტერფეისი.

STEP1: დაამატეთ Bootstrap CSS ფაილი სათაურში:

ნაბიჯი 2: დაამატეთ Bootstrap და JQuery CDN სკრიპტების ფაილები ტეგის ბოლოს:

ნაბიჯი 3: გახსენით index.html თქვენს ბრაუზერში.

გილოცავთ, ჩვენ წარმატებით ვამატებთ ჩატვირთვის მხარდაჭერას ჩვენს გვერდს რამდენიმე ნაბიჯში.

ნაბიჯი 5: შეავსეთ UI

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

STEP1: დაამატეთ შემდეგი კოდი index.html.

დაამატეთ ახალი ამოცანა დაამატეთ გასუფთავება ყველა!

ჩემი ამოცანების სია

ნაბიჯი 2: გახსენით index.html ფაილი თქვენს ბრაუზერში.

ნაბიჯი 6: ლოგიკის დამატება აპლიკაციაში

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

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

STEP1: შექმენით ახალი საქაღალდე მარტივი todolist– ში, დაასახელეთ js და ახალი ფაილის სახელი script.js ამ საქაღალდის შიგნით:

mkdir js

cd js touch script.js

ნაბიჯი 2: დაუკავშირეთ script.js ინდექსს. Html სათაურის ტეგის ბოლოს შემდეგი კოდის დამატებით:

STEP3: დაამატეთ შემდეგი კოდი script.js ფაილს

$ (დოკუმენტი). უკვე (() => {

var ამოცანები = 0 $ ("#removeAll"). დამალვა (); / * ახალი ამოცანის დამმუშავებლის დამატება */ $ ("#დამატება"). on ("click", (event) => {event.preventDefault (); event.stopPropagation (); var val = $ ("input"). val (); if (val! == "") {ამოცანები += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * ამოიღეთ უნიკალური დავალების დამმუშავებელი * / $ (". ტექსტი-მარჯვნივ "). on (" clikc ", ფუნქცია (მოვლენა) {event.preventDefault (); event.stopPropagation (); ამოცანები -= 1; $ (ეს).parent.remove ();}); /* აჩვენე removeAll ღილაკი, როდესაც გვაქვს 3 -ზე მეტი ამოცანები */ if (ამოცანები> 2) {$ ("#remveAll"). ჩვენება ();}/ *removeAll handler */ $ ("#removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". გამორთულია"). და -ძმები (). წაშლა (); ამოცანები = 0; $ ("#removeAll"). დამალვა ();});}});});

  შენიშვნა: შეგიძლიათ მიიღოთ კლონი ან გადმოწეროთ კოდის ZIP ჩემი GitHub საცავიდან, ეს კარგად დაგიცავთ შეხებისგან.

  git clone github.com/ahmnouira/simple-todolist

  ნაბიჯი 4: შეამოწმეთ კოდი

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

  ნაბიჯი 7: (სურვილისამებრ) განათავსეთ აპლიკაცია

  

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

  ამის მისაღწევად ჩვენ გამოვიყენებთ ღრუბლოვან პლატფორმას სახელწოდებით ZEIT Now.

  რა არის ZEIT ახლა?

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

  1. დააინსტალირეთ ახლა CLI

  ZEIT Now– ში განსახორციელებლად, თქვენ უნდა დააინსტალიროთ Now CLI.

  მნიშვნელოვანია: დარწმუნდით, რომ დაინსტალირებული გაქვთ npm.

  npm -v # შეამოწმეთ npm ინსტალაცია

  npm დააინსტალირეთ -g ახლა@უახლესი # დააინსტალირეთ Now CLI- ის ბოლო ვერსია გლობალურად ახლა -v # შეამოწმეთ თუ არის CLI დაინსტალირებული და დაბეჭდეთ მისი ვერსია

  2. განლაგება

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

  ახლა --prod # განათავსეთ აპლიკაცია

  განლაგების შემდეგ, თქვენ მიიღებთ გადახედვის URL- ს, რომელიც ენიჭება თითოეულ განლაგებას მისამართის ქვეშ უახლესი ცვლილებების გასაზიარებლად.

  ჩემი აპლიკაცია:

  ნაბიჯი 8: დასკვნა

  სულ ეს არის!

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

  მეტი ჩემი ნამუშევრების სანახავად ეწვიეთ ჩემს ღია კოდს GitHub– ში.

  myYouTube.

  myLinkedIn

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

  Კარგ დღეს გისურვებთ.

  აჰმედ ნუირა