اولین برنامه فهرست کارهای خود را به کار بگیرید: 8 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:54

اگر کاملاً با کد نویسی آشنا هستید یا دارای کد نویسی پس زمینه هستید ، ممکن است این سوال برایتان پیش آمده باشد که یادگیری را از کجا شروع کنید. شما باید بیاموزید که چگونه ، چه چیزی ، کجا باید کدگذاری شود و پس از آماده شدن کد ، چگونه آن را برای مشاهده کل برنامه ریزی کنید.

خوب ، خبر خوب این است که برنامه نویسی دشوار نیست.

مخاطبان هدف: این آموزش برای مبتدیانی است که می خواهند در توسعه وب شروع به کار کنند ، به طور کلی از فناوری های وب مطلع باشند.

زمان ساخت: 90 دقیقه

دشواری: آسان.

مرحله 1: چه چیزی خواهیم ساخت؟

در پایان این آموزش ما:

• با استفاده از HTML5 یک برنامه وب لیست ساده برای انجام کارهای خود ایجاد کنید.
• Bootstrap را با برنامه ما ادغام کنید تا ظاهر زیبا و سریع ایجاد کنید.
• برای افزودن برخی رفتارهای پویا به برنامه ما ، از کتابخانه JavaScript و JQuery استفاده کنید.
• برنامه ما را با استفاده از Ziet در حال حاضر در ابر مستقر کنید.

در عمل:

مرحله 2: آشنایی با HTML ، Bootstrap ، JavaScript و JQuery

HTML چیست؟

Hyper Text Markup Language (HTML) را می توان "زبان اینترنت" در نظر گرفت. HTML زبان نشانه گذاری استاندارد است که برای ایجاد صفحات وب استفاده می شود. در اصل برای به اشتراک گذاری اسناد علمی طراحی شده بود. سازگاری با HTML در طول سالها توصیف انواع دیگری از اسناد را که می توانند به عنوان صفحات وب در اینترنت نمایش داده شوند مناسب کرده است.

تنها موردی که برای نمایش صفحه HTML لازم است مرورگر وب است ، مانند Microsoft Internet Explorer (IE) ، Mozilla Firefox ، Google Chrome یا Apple Safari.

بوت استرپ چیست؟

بوت استرپ محبوب ترین چارچوب HTML ، CSS و جاوا اسکریپت برای ایجاد وب سایت های پاسخگو و همراه اول است. Bootstrap یک پروژه منبع باز است که توسط توییتر توسعه یافته است. این شامل کلاس های CSS است که می تواند روی عناصر به منظور مرتب کردن آنها و کد جاوا اسکریپت که پیشرفت های بیشتری را انجام می دهد ، اعمال شود.

جاوا اسکریپت چیست؟

جاوا اسکریپت یک زبان برنامه نویسی است که برای برنامه نویسی سمت کلاینت در برنامه های وب استفاده می شود. کد جاوا اسکریپت توسط مرورگر اجرا می شود و به برنامه نویسان برنامه های وب اجازه می دهد تا محتوای وب پویایی مانند اجزایی که به صورت پویا نمایش داده می شوند یا پنهان شده اند ، ظاهر را تغییر داده و ورودی کاربر را تأیید می کنند ، بسازند.

JQuery چیست؟

JQuery کتابخانه جاوا اسکریپت سریع ، کوچک و غنی از ویژگی است ، مواردی مانند پیمایش سند HTML و دستکاری ، مدیریت رویداد ، انیمیشن را بسیار ساده تر می کند.

تمام قدرت JQuery از طریق جاوا اسکریپت قابل دسترسی است ، بنابراین داشتن درک قوی از جاوا اسکریپت ، برای درک ، ساختاربندی و اشکال زدایی کد شما ضروری است.

برای جزئیات بیشتر:

HTML

جاوا اسکریپت

JQuery

بوت استرپ

مرحله 3: اولین صفحه شما با HTML

STEP1: ایجاد یک پوشه جدید:

mkdir simple-todolist

STEP2: ایجاد یک فایل جدید در داخل پوشه simple-todolist و نامگذاری آن index.html.

سی دی ساده-تودولیست

touch index.html

STEP3: کد زیر را به index.html اضافه کنید.

لیست برای انجام کار

لیست کارهای من

مرحله 4: index.html را در مرورگر خود باز کنید.

خواهید دید که لیست کارهای من نمایش داده می شود (عکس بالا را ببینید).

مرحله 4: افزودن Bootstrap

در این بخش ما پشتیبانی Bootstrap را به صفحه index.html خود اضافه می کنیم تا یک ظاهر سریع و خوب به برنامه لیست کارها اضافه کنیم.

توجه: در این برنامه ما از Bootstrap 3 استفاده می کنیم ، شما از هر چارچوب CSS دیگری ، مانند UI معنایی استفاده می کنید.

STEP1: فایل CSS Bootstrap را در تگ head اضافه کنید:

مرحله 2: فایل های اسکریپت Bootstrap و JQuery CDN را در انتهای تگ بدن اضافه کنید:

STEP3: index.html را در مرورگر خود باز کنید.

تبریک می گوییم ، ما با موفقیت پشتیبانی Bootstrap را در چند مرحله به صفحه خود اضافه کردیم.

مرحله 5: UI را تکمیل کنید

پس از موفقیت پشتیبانی Bootstrap به برنامه خود. حالا بیایید ادامه دهیم و با UI (رابط کاربری) رقابت کنیم تا به کاربر اجازه دهیم کارهای جدیدی اضافه کند. لیست کارهای انجام شده قادر خواهد بود موارد جدیدی را به لیست اضافه کرده و موارد موجود را حذف کند.

STEP1: کد زیر را به index.html اضافه کنید.

افزودن وظیفه جدید افزودن پاک کردن همه!

لیست وظایف من

مرحله 2: فایل index.html را در مرورگر خود باز کنید.

مرحله 6: افزودن منطق به برنامه

وقتی نام یک کار را وارد می کنید و روی دکمه افزودن کلیک می کنید ، در حال حاضر هیچ اتفاقی نمی افتد. بیایید آن را برطرف کنیم.

در پایان این مرحله ما index.html خود را به یک صفحه پویا تبدیل می کنیم ، بنابراین به تعامل کاربر رفتار می کند.

STEP1: ایجاد یک پوشه جدید در simple-todolist ، نام آن js و نام فایل جدید آن script.js درون آن پوشه:

mkdir js

cd js touch.js

STEP2: با افزودن کد زیر در انتهای تگ head ، script.js را به index.html پیوند دهید:

STEP3: کد زیر را به فایل script.js اضافه کنید

$ (سند). آماده (() => {

وظایف var = 0 $ ("#removeAll"). hide ()؛ / * اضافه کردن کنترل کننده جدید وظیفه */ $ ("#add"). در ("کلیک" ، (رویداد) => {event.preventDefault ()؛ event.stopPropagation () ؛ var val = $ ("ورودی"). val ()؛ if (val! == "") {task += 1؛ var elm = $ ("

• ")؛ $ ("#mylist "). append (elem)؛ $ (" input "). val (" ")؛ / * حذف کنترل کننده منحصر به فرد وظیفه * / $ (". text-right "). on (" clikc "، تابع (رویداد) {event.preventDefault () ؛ event.stopPropagation () ؛ وظایف -= 1؛ $ (این).parent.remove ()؛})؛ /* در صورت داشتن بیش از 3 دکمه removeAll وظایف */ if (وظایف> 2) {$ ("#remveAll"). show ()؛}/ *removeAll handler */ $ ("#removeAll"). روی ("کلیک" ، رویداد => {event.preventDefault ()؛ event.stopPropagation ()؛ $ (". غیرفعال"). خواهر و برادر (). حذف ()؛ وظایف = 0؛ $ ("#removeAll"). پنهان کردن ()؛})؛}})}}) ؛

  توجه: می توانید کد را از مخزن GitHub من دریافت یا بارگیری کنید ، این امر شما را از ضربه زدن نجات می دهد.

  git clone github.com/ahmnouira/sodple-todolist

  STEP4: کد را آزمایش کنید

  مرورگر خود را باز کنید و یک کار را وارد کنید سپس روی افزودن کلیک کنید ، خواهید دید که یک کار جدید به لیست اضافه شده است ، اگر 3 کار را اضافه کنید متوجه خواهید شد که یک دکمه clearAll ظاهر شده است ، این دکمه به ما اجازه می دهد تا همه کارهای اضافه شده را حذف کنیم ، شما همچنین می تواند تنها یک کار خرید را با کلیک روی دکمه آن حذف کند.

  مرحله 7: (اختیاری) برنامه را مستقر کنید

  

  تا کنون ما یک برنامه لیست ساده todo ایجاد کرده ایم ، اکنون وقت آن است که آن را در ابر مستقر کنیم و کار خود را با دیگران در سراسر جهان به اشتراک بگذاریم.

  برای دستیابی به این هدف از پلتفرم ابری به نام ZEIT Now استفاده خواهیم کرد.

  حالا ZEIT چیست؟

  ZEIt Now یک پلتفرم ابری برای سایتهای ایستا و عملکردهای بدون سرور است ، توسعه دهندگان را قادر می سازد وب سایت ها و سرویس های وب را که فوراً مستقر می شوند ، میزبانی کنند ، همه اینها بدون پیکربندی صفر.

  1. Now CLI را نصب کنید

  برای استقرار در ZEIT Now ، باید Now CLI را نصب کنید.

  مهم: مطمئن شوید که npm را نصب کرده اید.

  npm -v # بررسی کنید npm نصب شود

  npm install -g now@latest # آخرین نسخه Now CLI را در سطح جهانی در حال حاضر نصب کنید -v # chech در صورت نصب CLI Now و چاپ نسخه آن

  2. استقرار

  تنها کاری که باید انجام دهید این است که به دایرکتوری بروید و سپس برنامه خود را با یک دستور واحد مستقر کنید:

  در حال حاضر --prod # برنامه را مستقر کنید

  پس از استقرار ، یک URL پیش نمایش دریافت خواهید کرد که در هر استقرار اختصاص داده شده است تا آخرین تغییرات را زیر آدرس به اشتراک بگذارد.

  برنامه من:

  مرحله 8: نتیجه گیری

  این همه چیز است!

  با تنظیم ویژگی های جدید و گسترش برنامه ، می توانید کد را کشف کنید و تجربه و سوالات خود را در قسمت نظرات به اشتراک بگذارید.

  برای دیدن آثار بیشتر لطفاً از منبع باز من در GitHub دیدن کنید.

  myYouTube

  myLinkedIn

  ممنون که وقت گذاشتید و مطالب آموزنده من را مطالعه کردید ^^.

  روز خوبی داشته باشید.

  احمد نویرا