Տեղադրեք ձեր առաջին անելիքների ցուցակը: 8 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:47

Եթե դուք ամբողջովին նոր եք ծածկագրում կամ նախնական կոդավորում ունեք, գուցե ձեզ հետաքրքրում է, թե որտեղից սկսել սովորել: Դուք պետք է սովորեք, թե ինչպես, ինչ, որտեղ ծածկագրել և այնուհետև, երբ ծածկագիրը պատրաստ լինի, ինչպես տեղադրել այն ամբողջությամբ տեսնելու համար:

Դե, լավ նորությունն այն է, որ կոդավորումը դժվար չէ:

Թիրախային լսարան. Այս ձեռնարկը նախատեսված է սկսնակների համար, ովքեր ցանկանում են կարիերա սկսել վեբ զարգացման ոլորտում, ընդհանրապես հասկանալով վեբ տեխնոլոգիաները:

Կառուցման ժամանակը `90 րոպե:

Դժվարություն: Հեշտ:

Քայլ 1: Ի՞նչ ենք կառուցելու:

Այս ձեռնարկի ավարտին մենք.

• Ստեղծեք անելիքների ցուցակի պարզ վեբ ծրագիր ՝ օգտագործելով HTML5:
• Ինտեգրեք Bootstrap- ը մեր ծրագրի հետ `գեղեցիկ տեսք և արագ ոճավորում ավելացնելու համար:
• Օգտագործեք JavaScript և JQuery գրադարանը `մեր ծրագրին դինամիկ պահվածք ավելացնելու համար:
• Տեղադրեք մեր ծրագիրը ամպի մեջ ՝ օգտագործելով Ziet/այժմ:

Գործողության մեջ ՝

Քայլ 2: HTMLանոթացում HTML- ին, Bootstrap- ին, JavaScript- ին և JQuery- ին

Ի՞նչ է HTML- ը:

Hyper Text Markup Language (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- ով

ՔԱՅԼ 1: ստեղծել նոր թղթապանակ.

mkdir պարզ-տոդոլիստ

ՔԱՅԼ 2. Ստեղծեք նոր ֆայլ պարզ-տոդոլիստ թղթապանակի ներսում և անվանեք այն index.html:

cd պարզ-տոդոլիստ

touch index.html

ՔԱՅԼ 3. Ավելացրեք հետևյալ ծածկագիրը index.html- ին:

Անելիքների ցանկ

Իմ անելիքների ցանկը

ՔԱՅԼ 4. Բացեք index.html ձեր դիտարկիչում:

Դուք կտեսնեք, որ ցուցադրվում է «Իմ անելիքների ցուցակը» (տես վերևի լուսանկարը):

Քայլ 4: Bootstrap- ի ավելացում

Այս բաժնում մենք Bootstrap- ի աջակցություն կավելացնենք մեր index.html էջին ՝ Անելիքների ցանկի հավելվածին արագ և լավ ձևավորում ավելացնելու համար:

Iceանուցում. Այս հավելվածում մենք կօգտագործենք Bootstrap 3 -ը, դուք օգտագործում եք ցանկացած այլ CSS շրջանակ, ինչպիսին է Semantic UI- ը:

ՔԱՅԼ 1. Ավելացնել Bootstrap CSS ֆայլը գլխի պիտակում.

ՔԱՅԼ 2. Ավելացրեք Bootstrap և JQuery CDN սցենարների ֆայլեր մարմնի պիտակի վերջում.

ՔԱՅԼ 3. Բացեք index.html ձեր դիտարկիչում:

Շնորհավորում ենք, մենք հաջողությամբ մի քանի քայլով մեր էջին ավելացնում ենք Bootstrap- ի աջակցությունը:

Քայլ 5: Լրացրեք UI- ն

Այն բանից հետո, երբ մենք հաջողությամբ Bootstrap աջակցություն ավելացնենք մեր ծրագրին: Այժմ եկեք շարունակենք և մրցենք UI- ի (User Interface) միջոցով, որը թույլ կտա օգտվողին ավելացնել նոր առաջադրանքներ: Անելիքների ցանկը կկարողանա ցուցակում ավելացնել նոր տարրեր, ինչպես նաև հեռացնել առկա իրերը:

ՔԱՅԼ 1. Ավելացնել հետևյալ կոդը index.html- ին:

Ավելացնել նոր առաջադրանք Ավելացնել ջնջել բոլորը:

Իմ առաջադրանքների ցուցակը

ՔԱՅԼ 2. Բացեք index.html ֆայլը ձեր դիտարկիչում:

Քայլ 6: Տրամաբանության ավելացում հավելվածում

Երբ դուք մուտքագրում եք առաջադրանքի անուն և սեղմում եք Ավելացնել կոճակին, այս պահին ոչինչ չի կատարվում: Եկեք դա շտկենք:

Այս քայլի վերջում մենք մեր index.html- ը կդարձնենք դինամիկ էջ, ուստի այն կպահի օգտագործողների փոխազդեցությունը:

ՔԱՅԼ 1. Ստեղծեք նոր թղթապանակ պարզ- todolist- ի ներսում, անվանեք js և նոր ֆայլի անուն ՝ script.js այդ թղթապանակի ներսում.

mkdir js

cd js touch script.js

ՔԱՅԼ 2. Կապել script.js- ը index.html- ին ՝ գլխի պիտակի վերջում ավելացնելով հետևյալ ծածկագիրը.

STEP3. Ավելացնել հետևյալ կոդը script.js ֆայլին

$ (փաստաթուղթ). արդեն (() => {

var խնդիրները = 0 $ ("#removeAll"): թաքցնել (); / * ավելացնել նոր առաջադրանքների կառավարիչ */ $ («#ավելացնել») val (); if (val! == "") {առաջադրանքներ += 1; var elm = $ ("

• "); $ ("#mylist "). կցել (elem); $ (" մուտքագրում "). val (" "); / * հեռացնել առաջադրանքների եզակի մշակողը * / $ (". տեքստ-աջ "). վրա (" clikc ", գործառույթը (իրադարձություն) {event.preventDefault (); event.stopPropagation (); առաջադրանքներ -= 1; $ (սա).parent.remove ();}); /* ցուցադրել removeAll կոճակը, երբ մենք ունենք 3 -ից ավելի առաջադրանքներ */ եթե (առաջադրանքներ> 2) {$ ("#remveAll"). ցույց տալ ();}/ *removeAll handler */ $ ("#removeAll"). վրա ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". անջատված է"). եղբայրներ և եղբայրներ (). հեռացնել (); առաջադրանքներ = 0; $ ("#removeAll"). թաքցնել ();});}});});

  Նշում. Դուք կարող եք կամ կլոնավորել կամ ներբեռնել ծածկագրի ZIP- ն իմ GitHub պահոցից, սա ձեզ կփրկի թակելուց:

  git clone github.com/ahmnouira/simple-todolist

  ՔԱՅԼ 4. Ստուգեք ծածկագիրը

  Բացեք ձեր դիտարկիչը և մուտքագրեք առաջադրանք, այնուհետև կտտացրեք Ավելացնել, կտեսնեք, որ ցուցակում ավելացվում է նոր առաջադրանք, եթե 3 առաջադրանք ավելացնեք, կնկատեք, որ հայտնվում է clearAll կոճակը, որը թույլ է տալիս հեռացնել բոլոր ավելացված առաջադրանքները, կարող է նաև հեռացնել միայն մեկ առաջադրանք `կտտացնելով դրա կոճակին:

  Քայլ 7: (Լրացուցիչ) Տեղադրեք ծրագիրը

  

  Մինչ այժմ մենք կառուցել ենք todo ցուցակի մի պարզ ծրագիր, այժմ ժամանակն է այն տեղակայել ամպի մեջ և կիսվել մեր աշխատանքով աշխարհի այլ մարդկանց հետ:

  Դրան հասնելու համար մենք կօգտագործենք ZEIT Now կոչվող ամպային հարթակը:

  Ի՞նչ է այժմ ZEIT- ը:

  ZEIt Now- ը ամպային հարթակ է ստատիկ կայքերի և առանց սերվերի գործառույթների համար, այն ծրագրավորողներին հնարավորություն է տալիս հյուրընկալել վեբ կայքեր և վեբ ծառայություններ, որոնք տեղակայվում են ակնթարթորեն, այս ամենը զրոյական կազմաձևով:

  1. Տեղադրեք հիմա CLI

  ZEIT Now- ի հետ տեղակայվելու համար ձեզ հարկավոր է տեղադրել Now CLI:

  կարևոր. Համոզվեք, որ տեղադրված եք npm:

  npm -v # ստուգեք, եթե npm- ը տեղադրվի

  npm install -g now@latest # տեղադրել գլոբալ Now CLI- ի վերջին տարբերակը այժմ գլոբալ առումով -v # ստուգեք, եթե Now CLI- ն տեղադրված է և տպեք դրա տարբերակը

  2. Տեղակայել

  Մնում է միայն տեղափոխվել գրացուցակ, այնուհետև տեղադրել ձեր ծրագիրը մեկ հրամանով.

  այժմ --prod # տեղակայել ծրագիրը

  Տեղակայվելուց հետո դուք կստանաք նախադիտման URL, որը նշանակված է յուրաքանչյուր տեղակայման վրա ՝ հասցեի տակ վերջին փոփոխությունները կիսելու համար:

  իմ ծրագիրը ՝

  Քայլ 8: Եզրակացություն

  Ահա այսքանը:

  Ազատորեն ուսումնասիրեք ծածկագիրը ՝ նոր գործառույթներ սահմանելով և ընդլայնելով ծրագիրը, և կիսվեք ձեր փորձով և հարցերով մեկնաբանությունների դաշտում:

  Իմ աշխատանքները ավելի շատ տեսնելու համար այցելեք իմ բաց աղբյուրը GitHub- ում:

  myYouTube.

  myLinkedIn

  Շնորհակալություն ժամանակս կարդալու համար իմ ուսանելի ուսուցումը ^^:

  Հաճելի օր.

  Ահմեդ Նուիրա