دومین برنامه شما با جاوا اسکریپت
قصد داریم این فصل را با یک برنامه‌ی جاوا اسکریپت که در مرورگر اجرا می‌شود به پایان برسانیم. این برنامه کمی پیچیده‌تر از برنامه‌ای است که پیش از این در این فصل دیدیم و شامل تعداد زیادی از مفاهیمی است که در فصول بعدی این کتاب با آنها آشنا خواهید شد. در نتیجه اگر در حال حاضر متوجه قسمت‌هایی از این برنامه نمی‌شوید، نگران نباشید. در فصل‌های بعدی این کتاب به تفصیل در رابطه با این مفاهیم صحبت خواهیم کرد. هدف از این برنامه صرفاً نشان دادن برخی قابلیت‌های جاوا اسکریپت و برخی مفاهیم پایه‌ای جاوا اسکریپت است که در فصول بعدی کتاب به آنها خواهیم پرداخت.
ما از تکنیک جاوا اسکریپت تفکیک شده که پیشتر در مورد آن صحبت شد استفاده خواهیم کرد. برای شروع یک فولدر با نام rainbow بسازید.
داخل فولدر ساخته شده، یک فایل با نام rainbow.html و یک فایل با نام main.js بسازید. سپس کدهای زیر را داخل فایل rainbow.html قرار دهید.
<html>
<head>
<meta charset="utf-8" />
<title>I Can Click A Rainbow</title>
</head>
<body>
<button id="button">Click me</button>
<script src="main.js"></script>
</body>
</html>
در این سند HTML یک دکمه با تگ <button> ایجاد شده است که مقدار خاصیت id آن نیز برابر با button است. خاصیت id برای برنامه‌نویسان جاوا اسکریپت از اهمیت بالایی برخوردار است. چرا که جهت انتخاب عناصر سند HTML بسیار کاربرد دارد. همچنین بعد از تگ <button>، با استفاده از یک تگ <script> فایل جاوا اسکریپت این مثال نیز به سند HTML ضمیمه شده است.
حال فایل main.js را باز کنید و کدهای زیر را داخل آن قرار دهید.
let btn = document.getElementById('button');
let rainbow = ['red', 'orange', 'yellow', 'green', 'blue', 'rebeccapurple', 'violet'];
function change() {
document.body.style.background = rainbow[Math.floor(7 * Math.random())];
}
btn.addEventListener('click', change);
اولین کار انجام شده در کد فوق تعریف یک متغیر به نام btn است. (در مورد متغیرها در فصل ۲ صحبت خواهیم کرد.)
سپس با استفاده از متد document.getElementById عنصری که مقدار خاصیت id آن در سند HTML برابر با button است انتخاب شده و در متغیر btn قرار گرفته است. (در مورد انتخاب عناصر سند HTML در فصل ۶ صحبت خواهیم کرد.)
سپس متغیر دیگری با نام rainbow ایجاد کرده و آرایه‌ای از مقادیر رشته‌ای را در آن قرار داده‌ایم. که مقدار هر یک از رشته‌ها، نام یک رنگ در CSS می‌باشد. (در مورد رشته‌ها در فصل ۲ و در مورد آرایه‌ها در فصل ۳ صحبت خواهیم کرد.)
در خط بعدی تابعی به نام change ایجاد کرده‌ایم که رنگ پس‌زمینه‌ی تگ <body> را به یکی از رنگ‌های موجود در آرایه‌ی rainbow تغییر می‌دهد. (در مورد توابع در فصل ۴ و در مورد تغییر سبک‌های عناصر صفحه در فصل ۶ صحبت خواهیم کرد.)
در این تابع با استفاده از شئ Math (که در فصل ۵ پوشش داده می‌شود)، یکی از رنگ‌های آرایه‌ی rainbow به صورت تصادفی انتخاب شده و به عنوان رنگ پس‌زمینه‌ی تگ <body> تنظیم می‌شود.
در انتها نیز یک Event Handler برای دکمه‌ی موجود در صفحه‌ی وب تعریف کرده‌ایم (در مورد Event Handler ها در فصل ۷ صحبت خواهیم کرد). این Event Handler در صورت وقوع رویداد کلیک بر روی این دکمه اجرا خواهد شد و با اجرا شدن آن، تابع change فراخوانی می‌شود که موجب تغییر رنگ پس‌زمینه‌ی صفحه‌ی وب خواهد شد.
اکنون فایل rainbow.html را با استفاده از مرورگر خود باز کنید و چند بار روی دکمه‌ی داخل صفحه کلیک کنید. اگر همه‌ی مراحل را به درستی انجام داده باشید، با هر بار کلیک کردن روی این دکمه، رنگ پس‌زمینه، به یکی از رنگ‌های تعیین شده در آرایه‌ی rainbow تغییر خواهد کرد.
اگر می‌خواهید این مثال را خیلی سریع اجرا کنید، می‌توانید اینجا در CodePen به صورت آنلاین آن را اجرا کنید. دقت کنید که در CodePen نیازی به وارد کردن بخش <head> از سند HTML نیست و فقط محتویات <body> در CodePen نوشته می‌شوند. همچنین نیازی به استفاده از تگ <script> برای ضمیمه کردن فایل جاوا اسکریپت نیست. چرا که این کار به صورت خودکار انجام می‌شود.
هرچند امکان اجرای این مثال به صورت آنلاین در CodePen وجود دارد. اما توصیه می‌کنم به عنوان اولین تمرین برنامه‌نویسی، این مثال را با تمام کدهای آن داخل یک ویرایشگر تایپ کرده و سپس اجرا کنید.