جاوا اسکریپت یک زبان برنامه نویسی محبوب برای ساخت برنامه های وب، موبایل و دسکتاپ است.
فریمورک‌ها و کتابخانه‌های زیادی وجود دارند که بر اساس جاوا اسکریپت ساخته شده‌اند، که احتمالاً با خواندن این مقاله توسعه یافته‌اند. اگر قصد دارید یادگیری جاوا اسکریپت را شروع کنید، برخی از آنها ارزش یادگیری را نیز دارند.
مانند هر زبان برنامه نویسی، دستیابی به جاوا اسکریپت دارای دو بخش حیاتی است: درک مفاهیم کلیدی و تمرین آنچه آموخته اید. شما باید با مفاهیم اصلی زبان آشنا شوید و در عین حال باید پروژه های کدنویسی را با استفاده از مفاهیمی که یاد گرفته اید شروع کنید.
من اخیراً مقاله ای در مورد نحوه یادگیری مؤثر جاوا اسکریپت با نکات و استراتژی های یادگیری منتشر کرده ام. اگر قبلا این کار را نکرده اید، باید آن را تحلیل کنید.
در این مقاله به بخش تمرین عملی می پردازیم. ما یک برنامه کاربردی جاوا اسکریپت مبتدی خواهیم ساخت که اصول اولیه ایجاد ساختار HTML، کار با CSS و در نهایت گفت ن رفتار پویا با استفاده از جاوا اسکریپت را به شما آموزش می دهد.
همه چیز آماده است؟ بیا شروع کنیم.
اگر دوست دارید از محتوای ویدیویی نیز بیاموزید، این مقاله به عنوان آموزش ویدیویی نیز در اینجا موجود است: 🙂
ما امروز چه می سازیم؟
ما پروژه ای به نام Colorify خواهیم ساخت. این یک دایره رنگی را در صفحه وب نشان می دهد و دارای دکمه هایی است که به شما امکان می دهد با کلیک روی آنها رنگ ها را تغییر دهید.
تصویر زیر یک دایره قرمز رنگ با سه دکمه قرمز، سبز و زرد را نشان می دهد. وقتی روی قرمز کلیک می کنید، رنگ دایره قرمز می شود - به ترتیب برای سبز و زرد یکسان است.
هنگام ایجاد این برنامه از مفاهیم توسعه وب زیر استفاده خواهیم کرد:
یک ظاهر طراحی اولیه DIV با شعاع حاشیه و مرکز
چیدمان دکمه ها
استفاده از Template Literals
گفت ن کنترل کننده های کلیک
دستکاری DOM برای تنظیم مقادیر
نحوه ایجاد ساختار پروژه جاوا اسکریپت
اول از همه، اجازه دهید ساختار پروژه را ایجاد کنیم. یک پوشه به نام colorify ایجاد کنید و این فایل های خالی را داخل آن ایجاد کنید.
index.html : فایل HTML که شامل اسکلت و نشانه گذاری برنامه است.
index.css : تمام استایل ها و کدهای زیباسازی برنامه در این فایل CSS قرار می گیرد. ما فایل CSS را در فایل HTML ایجاد شده در بالا قرار خواهیم داد.
index.js : کد جاوا اسکریپت وارد این فایل می شود. ما توابعی را برای ارائه رفتار پویا به برنامه ایجاد خواهیم کرد. مانند فایل CSS، این فایل را نیز در فایل index.html قرار خواهیم داد. 
نحوه ساخت ساختار HTML
بیایید ساختار صفحه HTML را ایجاد کنیم. ما به یک دایره و سه دکمه به عنوان بخشی از الزامات پروژه نیاز داریم. کد زیر را کپی کرده و داخل فایل index.html قرار دهید:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colorify</title> <link rel="stylesheet" href="./index.css"> <script src="./index.js" defer></script> </head> <body> <div class="container"> <h1>Colorify</h1> <p class="subheading"> With colorify we want to start learning JavaScript. </p> <div class="circle" id="circleID"></div> <div class="action"> <button onclick="paint('red')">Red</button> <button onclick="paint('green')">Green</button> <button onclick="paint('yellow')">Yellow</button> </div> </div> </body> </html>فایل HTML دارای دو بخش اصلی است:
بخش <head>
بخش <head> شامل اطلاعات متا مانند مجموعه کاراکترهای پشتیبانی شده، نسخه ای از اینترنت اکسپلورر که صفحه باید با استفاده از مقدار X-UA-Compatible ارائه شود و اطلاعات درگاه نمایش است. ما همچنین عنوانی را برای صفحه وب ارائه کردیم.
ما فایل CSS را با استفاده از تگ پیوند اضافه کرده ایم. ما از ویژگی href برای اشاره به فایل index.css استفاده کردیم. در آخر، فایل اسکریپت index.js را با استفاده از تگ اسکریپت اضافه کردیم.
توجه داشته باشید که ما از ویژگی defer برای گفت ن اسکریپت به HTML استفاده کردیم. می‌توانید عملکرد بارگذاری اسکریپت را با آپشن های ی مانند defer و async مقابله کنید.
اگر در این زمینه تازه کار هستید، می توانید این مقاله را تحلیل کنید: عملکرد جاوا اسکریپت – چگونه سرعت صفحه را با async و به تعویق انداختن بهبود دهیم .
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Colorify</title> <link rel="stylesheet" href="./index.css"> <script src="./index.js" defer></script> </head> بخش <body>
بخش <body> آنچه را که از طریق فرآیند رندر مرورگر برای کاربران قابل مشاهده است تعریف می کند. در کد زیر، ابتدا یک Container div (یک تگ div ساده با کلاسی به نام container ) ایجاد کرده‌ایم که تمام عناصر HTML را که قصد داریم در صفحه وب نشان دهیم را می‌پیچد.
اول عنوانی است که نام برنامه ما را نشان می دهد. در مرحله بعد، یک پاراگراف متنی را در مورد برنامه نشان می دهد. سپس یک div با یک شناسه به نام circleID داریم. از این div برای رسم دایره استفاده می کنیم. در آخر، ما سه دکمه داریم که در یک div دیگری پیچیده شده است.
همچنین توجه داشته باشید که هر یک از دکمه ها دارای یک کنترل کننده کلیک با استفاده از onClick هستند.
بیشتر بخوانید
<div class="container"> <h1>Colorify</h1> <p class="subheading"> With colorify we want to start learning JavaScript. </p> <div class="circle" id="circleID"></div> <div class="action"> <button onclick="paint('red')">Red</button> <button onclick="paint('green')">Green</button> <button onclick="paint('yellow')">Yellow</button> </div> </div>بیایید برنامه را در این مرحله اجرا کنیم و خروجی را ببینیم.
توجه داشته باشید که راه های مختلفی برای اجرای برنامه وجود دارد. ساده ترین روش این است که به پوشه پروژه بروید و فایل index.html را در یک مرورگر وب باز کنید. اما این رویکرد ممکن است فقط برای برخی از اسکریپت ها کار کند.
روش توصیه شده اجرای پروژه به عنوان بخشی از web server است. برای این کار می توانید از پسوند Live Server در ویرایشگر Visual Studio Code استفاده کنید.
صبر کن! دایره کجاست؟ ما دایره را نمی‌بینیم زیرا به تازگی یک ظرف برای آن ایجاد کرده‌ایم اما عناصر سبک را برای اینکه آن را شبیه یک دایره کند ارائه نکرده‌ایم.
همچنین، می‌توانیم کار بسیار بهتری را در تراز کردن عناصر HTML در صفحه وب انجام دهیم. بیایید این مشکلات را با استفاده از CSS برطرف کنیم.
نحوه استفاده از CSS برای استایل کردن کد
فایل index.css را باز کنید و محتوای زیر را به آن اضافه کنید:
.container { display: flex; flex-direction: column; justify-content: center; align-items: center; } .circle { border: 1px solid #000000; width: 200px; height: 200px; border-radius: 50%; } .action { margin: 10px; } button { cursor: pointer; }ما یک طرح انعطاف‌پذیر برای div کانتینر بیرونی ارائه کرده‌ایم که تعیین می‌کند عناصر داخل آن را در یک ستون قرار دهد. ما ارتفاع و عرض یکسانی را برای دیوی دایره ارائه کرده ایم تا به شکل مربع درآید. اکنون تمام ضلع مرز را با خاصیت border-radius منحنی می کنیم تا مانند یک دایره به نظر برسد.
اکنون برنامه بسیار بهتر به نظر می رسد!
بیایید روی دکمه ها کلیک کنیم. اوه! می بینیم که یک خطا وارد پنل کنسول می شود. دلیل آن این است که ما کنترل کننده‌های کلیک را به دکمه‌ها اضافه کرده‌ایم اما تابع paint() را تعریف نکرده‌ایم تا وقتی کاربر روی این دکمه‌ها کلیک می‌کند اجرا شود.
وقت آن است که تابع paint() را تعریف کنیم و کارها را شروع کنیم.
نحوه اضافه کردن رفتار پویا با استفاده از جاوا اسکریپت
حالا فایل index.js را باز کنید و قطعه کد زیر را در آن کپی کنید:
function paint(color) { const circle = document.getElementById('circleID'); circle.style = `background-color:${color}`; } اکنون یک تابع paint() تعریف کرده‌ایم که آن را به کنترل‌کننده‌های onClick دکمه‌ها منتقل کرده‌ایم. ممکن است متوجه شده باشید (در فایل index.html)، هنگامی که کاربر روی دکمه ای کلیک می کند، رنگ های مربوطه را به تابع paint() منتقل کرده ایم.
بیایید به روش paint() شیرجه بزنیم و چیزها را بفهمیم.
ابتدا به عنصر div که دایره را نشان می دهد دسترسی پیدا می کنیم. ما می‌توانیم عنصر را با استفاده از مقدار مشخصه id که به آن ارائه شده است، شناسایی کنیم، یعنی circleID . برای دریافت آن از متد DOM به نام document.getElementById استفاده می کنیم.
هنگامی که عنصر را داشتیم، می توانیم یک سبک به آن اضافه کنیم. ما یک سبک رنگ پس زمینه را بر اساس نام رنگ ارسال شده به تابع اضافه می کنیم. توجه داشته باشید که ما در اینجا از عبارات تحت اللفظی الگو بر روی یک الحاق رشته منظم استفاده می کنیم. این مقاله به شما کمک می‌کند تا در صورت آشنایی با قالب‌ها، به آنها دسترسی پیدا کنید.
خودشه. اکنون هر بار که کاربر روی دکمه ای کلیک می کند، رنگ مربوطه به عنوان رنگ پس زمینه به دایره اضافه می شود. مانند مثال زیر عمل می کند:
وظیفه برای شما: امتحان را کامل کنید
خوب، پس شما یاد گرفته اید که چگونه با استفاده از HTML، CSS و جاوا اسکریپت ساده یک پروژه تغییر رنگ ایجاد کنید. بیایید آن را به یک سطح جلوتر ببریم. در اینجا یک کار برای شما وجود دارد که باید آن را تکمیل کنید.
دکمه دیگری به نام Random در کنار دکمه های موجود اضافه کنید.
هنگامی که کاربر بر روی دکمه Random کلیک می کند، باید یک رنگ پس زمینه تصادفی به دایره اضافه کنید.
شما باید از تابع random() موجود که در فایل index.js دیده‌ایم، دوباره استفاده کنید.
اگر این کار را انجام دادید و می‌خواهید کد شما را مرور کنم، با تگ کردن من، با استفاده از پیوند کد خود، یک پست توییت/لینکدین ایجاد کنید. حتما مرور میکنم و نظر میدم
قبل از پایان ما...
فعلاً همین است. امیدوارم این مقاله برای شما آموزنده و آموزنده بوده باشد. تمام کد منبع استفاده شده در این مقاله را می توان در این مخزن GitHub یافت.
بیایید وصل شویم.
اگر می خواهید جاوا اسکریپت، ReactJS، Node.js، Git و همه چیز در مورد توسعه وب را به صورت عملی یاد بگیرید، در کانال YouTube من مشترک شوید .
اگر نمی خواهید مقدار روزانه نکات توسعه وب و برنامه نویسی را از دست بدهید ، در توییتر یا لینکدین دنبال کنید.
کار منبع باز من را در GitHub تحلیل کنید.
برای یادگیری مبتنی بر جامعه ، Showwcase را دنبال کنید.
به زودی با مقاله بعدی من شما را می بینم. تا اون موقع مواظب خودت باش و شاد باش
