Биринчи кыла турган иштердин тизмесин колдонуу: 8 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:39

Эгерде сиз коддоону жаңы билсеңиз же фон кодуңуз болсо, анда кайдан үйрөнүүнү баштоо керек деп ойлонушуңуз мүмкүн. Сиз кантип, эмнени, кайда коддоону, анан код даяр болгондон кийин, аны кантип көрүү керек экенин үйрөнүшүңүз керек.

Ооба, жакшы кабар - коддоо кыйын эмес.

Максаттуу аудитория: Бул окуу куралы веб -иштеп чыгууда карьерасын баштоону каалагандар үчүн, жалпысынан веб -технологиялар жөнүндө түшүнүккө ээ.

Курулуш убактысы: 90 мүнөт.

Кыйынчылык: Оңой.

1 -кадам: Биз эмнени курабыз?

Бул окуу куралынын аягында биз:

• HTML5ти колдонуу менен жөнөкөй иштер тизмеси веб тиркемесин түзүңүз.
• Жакшы көрүнгөн жана тез стилдөө үчүн Bootstrapти биздин колдонмо менен бириктириңиз.
• JavaScript жана JQuery китепканасын колдонмобузга динамикалык жүрүм -турумду кошуу үчүн колдонуңуз.
• Биздин колдонмону Ziet/now аркылуу булутка жайгаштырыңыз.

Иш-аракетте:

2 -кадам: 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 менен биринчи баракчаңыз

STEP1: жаңы папканы түзүү:

mkdir жөнөкөй-todolist

2-КАДАМ: жөнөкөй-todolist папкасында жаңы файл түзүңүз жана ага index.html деп ат коюңуз.

cd жөнөкөй-todolist

индекс.html тийүү

STEP3: index.htmlге төмөнкү кодду кошуңуз.

Тизме

Менин Тизмем

4 -кадам: браузериңизде index.html ачыңыз.

Сиз Менин Тизмемдин көрсөтүлүшүн көрөсүз (жогорудагы сүрөттү караңыз).

4 -кадам: Bootstrap кошуу

Бул бөлүмдө биз эмне кылышыбыз керек тизмеси тиркемесине тез жана жакшы стилдөө үчүн index.html баракчабызга Bootstrap колдоосун кошобуз.

Эскертүү: Бул колдонмодо биз Bootstrap 3 колдонобуз, сиз Semantic UI сыяктуу башка CSS алкагын колдоносуз.

STEP1: баш тегине Bootstrap CSS файлын кошуңуз:

2 -КАДАМ: дене тегинин аягына Bootstrap жана JQuery CDN скрипттеринин файлдарын кошуңуз:

3 -КАДАМ: Браузериңизде index.html ачыңыз.

Куттуктайбыз, биз бир нече кадам менен баракчабызга Bootstrap колдоосун ийгиликтүү коштук.

5 -кадам: UIди толтуруңуз

Биз ийгиликтүү колдонмобузга Bootstrap колдоо кошкондон кийин. Эми колдонуучуга жаңы тапшырмаларды кошууга уруксат берүү үчүн UI (User Interface) менен таймашып көрөлү. Иштер тизмеси тизмеге жаңы нерселерди кошо алат, ошондой эле учурдагы нерселерди алып салат.

STEP1: index.htmlге төмөнкү кодду кошуңуз.

Жаңы тапшырма кошуу Баарын тазалоо!

Менин тапшырмалар тизмем

2 -кадам: браузериңизде index.html файлын ачыңыз.

6 -кадам: Колдонмого логиканы кошуу

Сиз тапшырманын атын киргизип, Кошуу баскычын чыкылдатыңыз, учурда эч нерсе болгон жок. Муну оңдойлу.

Бул кадамдын аягында биз index.html'ди динамикалык бетке айландырабыз, андыктан ал колдонуучунун өз ара аракеттенүүсүнө алып келет.

1-КАДАМ: жөнөкөй-todolist ичинде жаңы папка түзүңүз, аны js деп атаңыз жана ал файлдын ичине скрипт.js деп атаңыз:

mkdir js

cd js touch script.js

2 -КАДАМ: script.js файлын index.html менен байланыштырыңыз, баштын тегинин аягына төмөнкү кодду кошуңуз:

3 -КАДАМ: скрипт.js файлына төмөнкү кодду кошуңуз

$ (документ).ready (() => {

var task = 0 $ ("#removeAll"). hide (); / * жаңы тапшырма иштетүүчү кошуу */ $ ("#кошуу"). on ("чыкылдатуу", (окуя) => {event.preventDefault (); event.stopPropagation (); var val = $ ("киргизүү"). val (); if (val! == "") {милдеттери += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" input "). val (" "); / * unikal task handler * / $ (". text-right "). on () clikc ", милдети (окуя) {event.preventDefault (); event.stopPropagation (); милдеттери -= 1; $ (бул).parent.remove ();}); /* 3төн ашык болгондо removeAll баскычын көрсөтүү тапшырмалар */ эгер (тапшырмалар> 2) {$ ("#remveAll"). show ();}/ *removeAll иштетүүчү */ $ ("#removeAll"). боюнча ("чыкылдатуу", окуя => {event.preventDefault (); event.stopPropagation (); $ (". өчүрүлгөн"). бир туугандар (). алып салуу (); тапшырмалар = 0; $ ("#removeAll"). жашыруу ();});}});});

  Эскертүү: Сиз клонуңузду же GitHub репозиторийимден коддун ZIPин жүктөп алсаңыз болот, бул таптооңуздан сактайт.

  git clone github.com/ahmnouira/simple-todolist

  4 -КАДАМ: кодду текшериңиз

  Браузериңизди ачыңыз жана тапшырманы киргизиңиз, андан кийин Кошуу баскычын басыңыз, тизмеге жаңы тапшырма кошулганын көрөсүз, эгер сиз 3 тапшырманы кошсоңуз, clearAll баскычы пайда болгонун байкайсыз, бул баскыч бизге бардык кошулган тапшырмаларды алып салууга мүмкүндүк берет. анын кнопкасын басуу менен бир гана тапшырманы сатып ала алат.

  7 -кадам: (Милдеттүү эмес) Колдонмону жайылтуу

  

  Буга чейин биз жөнөкөй тизме тиркемесин түзгөнбүз, эми аны булутка жайып, жумушубузду дүйнө жүзү боюнча башкалар менен бөлүшүү убактысы келди.

  Бул үчүн биз ZEIT Now деп аталган булут платформасын колдонобуз.

  Азыр ZEIT деген эмне?

  ZEIt Now - бул статикалык сайттар жана Серверсиз функциялар үчүн булут платформа, ал иштеп чыгуучуларга веб -сайттарды жана веб -кызматтарды дароо жайгаштырууга мүмкүндүк берет, мунун баары нөл конфигурациясы менен.

  1. Азыр орнотуу CLI

  ZEIT Now менен жайылтуу үчүн, азыр CLI орнотушуңуз керек болот.

  маанилүү: npm орнотулганын текшериңиз.

  npm -v # npm орнотулганын текшериңиз

  npm install -g now@latest # Now CLI акыркы версиясын глобалдуу түрдө азыр -v # chech, эгер азыр CLI орнотулган болсо жана анын версиясын басып чыгарыңыз

  2. Орнотуу

  Болгону каталогго жылып, анан колдонмоңузду бир буйрук менен жайылтуу керек:

  азыр --prod # колдонмону жайылтуу

  Орнотулгандан кийин, сиз даректин астындагы акыркы өзгөртүүлөрдү бөлүшүү үчүн ар бир жайгаштырууга дайындалган алдын ала көрүү URLин аласыз.

  менин колдонмо:

  8 -кадам: Жыйынтык

  Мунун баары бар!

  Жаңы функцияларды орнотуу жана колдонмону кеңейтүү аркылуу кодду изилдеп, тажрыйба жана суроолор менен комментарийлерде бөлүшө аласыз.

  Дагы менин чыгармаларымды көрүү үчүн GitHubдагы ачык булагыма баш багыңыз.

  myYouTube.

  myLinkedIn

  Менин инструктивдүү окуума убакыт бөлгөнүңүз үчүн рахмат ^^.

  Куттуу күн өткөрүңүз.

  Ахмед Нуира