جاوا اسکریپت (Java Script) یا به اختصار JS یک زبان برنامهنویسی در وب است که میتواند کدهای HTML و CSS را تغییر دهد. در مقالات قبلی گفتم به راحتی میتوان به کمک HTML و CSS یک صفحهی وب را به صورت استاتیک طراحی کرد. اما در این صفحه هیچ عملکرد پویایی دیده نمیشود.
در واقع برای افزودن هرگونه انیمیشن و تحرک به عناصر صفحه، به زبان جاوا اسکریپت نیاز خواهیم داشت.
برای درک بیشتر مطلب به یک مثال توجه کنید:
در یک صفحهی وب میتوان به کمک تگها HTML تعدادی تصویر قرار داد و به کمک CSS به آنها سبک متفاوت بخشید و چیدمان را تغییر داد. اما اگر بخواهیم این تصاویر به صورت یک اسلایدر همراه با افکتهای مختلف در صفحه نمایش داده شوند چه باید کرد؟ اینجاست که باید به سراغ زبان جاوا اسکریپت رفت و آلبوم تصاویر را به یک اسلایدر پویا و جذاب تبدیل کرد.
زبان جاوا اسکریپت چیست؟
اگر بخواهیم کمی حرفهایتر به این زبان نگاه کنیم، جاوا اسکریپت یک زبان محبوب مبتنی بر شیگرایی ، داینامیک و مفسری است. این زبان برای برنامه نویسی سمت سرور و سمت کاربر استفاده میشود.
اگر با این مفاهیم آشنایی ندارید نگران نباشید در ادامه مختصراً به آنها میپردازیم.
شیگرایی یک تفکر و شیوه در برنامهنویسی است. در برنامه نویسی شیگرا کدها در واحدهای کوچکتری تقسیمبندی میشوند و در طی برنامه این واحدها باهم پیوند میخورند تا برنامهی نهایی ایجاد شود.
زبان مفسری (Interpreter) زبانی است که کدهای آن به صورت خط به خط ترجمه و اجرا میشوند! این زبان مقابل زبانهای کامپایلری (Compiled) قرار میگیرد که یکباره کل کدها ترجمه و اجرا میشوند. بنابراین سرعت اجرای زبانهای مفسری نسبت به زبانهای کامپایلری کمتر است.
نحوهی اجرای جاوا اسکریپت
کدهای جاوا اسکریپت در سمت کاربر و به وسیلهی مرورگرها اجرا میشوند. مرورگرها دارای موتورهای پردازشی هستند که میتوانند کدهای جاوا اسکریپت را ترجمه و سپس اجرا نمایند و در آخر نتیجه را به کاربر نمایش دهند.
کاربرد زبان جاوا اسکریپت چیست؟
زبان جاوا اسکریپت بخاطر انعطافی که دارد بسیار مورد توجه برنامهنویسان قرار گرفته است. این زبان برای برنامه نویسی سمت کاربر و سمت سرور، کاربرد دارد.
جاوا اسکریپت علاوه بر طراحی سایت، در برنامهنویسی موبایل و دسکتاپ نیز استفاده میشود.
از کاربردهای دیگر این زبان توسعهی بازیهای تحت وب، ایجاد گرافیکهای دو و سه بعدی است.
همچنین یادگیری این زبان نسبت به بسیاری از زبانهای دیگر سادهتر است. پس به راحتی با یادگیری آن میتوانید یک روح تازه به وبسایت خود ببخشید و با ایجاد انواع انیمیشن و تحرکات مختلف به عناصر صفحه، رابط کاربری بهتری داشته باشید.
نمونهای از کاربرد JavaScript
در مقالهی معرفی HTML گفتیم که به کمک آن میتوانیم اسکلتبندی عناصر وب را ایجاد کنیم. در کد زیر ما به کمک HTML یک دکمهی ساده ایجاد کردیم که خروجی آن را در پایین کد میبینید.
۱
|
|
حالا به کمک CSS که قبلاً در مقالهی CSS چیست؟ آن را معرفی کردیم، به این دکمه ظاهر بهتری میبخشیم.
۱
۲
۳
۴
۵
|
button {
color: #fff;
background–color: #۱۷a2b8;
border–color: #۱۷a2b8;
}
|
حالا اگر روی دکمه کلیک کنید هیچ اتفاقی نمیافتد! برای این که برای کلیک، یک عکسالعمل ایجاد کنیم باید به سراغ زبان JavaScript برویم. کد زیر نمونهای از یک کد جاوا اسکریپت است که در آن برای دکمهی بالا یک عمل تعریف شده است.
۱
۲
۳
|
document.getElementById(“myBtn”).onclick = function(){
document.getElementById(“myBtn”).style.display = “none”;
};
|
زمانی که روی این دکمه با آیدی myBtn کلیک میشود، نمایش این دکمه به حالت مخفی تغییر میکند. در واقع این کد، استایل CSS را تغییر میدهد. display یکی از استایلهای CSS است که نحوهی نمایش عناصر را تعیین میکند. ما به کمک جاوا اسکریپت این استایل را تغییر دادیم.
این یک نمونه ساده از اجرای کد جاوا اسکریپت بود تا با مفهوم آن بیشتر آشنا شوید.