معرفی جاوا اسکریپت

جاوااسکریپت یک زبان برنامه‌نویسی است که برای وب استفاده می‌شود. با کمک جاوااسکریپت، می‌توانیم:

محتویات صفحات وب (HTML) و ظاهر آنها (CSS) را تغییر دهیم.
داده‌ها را محاسبه، تغییر و اعتبارسنجی کنیم.

چرا باید جاوااسکریپت را یاد بگیریم؟ 💡

جاوااسکریپت یکی از سه زبان اصلی است که هر توسعه‌دهنده وب باید یاد بگیرد:

HTML برای تعریف محتویات صفحات وب
CSS برای مشخص کردن ظاهر و طراحی صفحات وب
JavaScript برای برنامه‌نویسی رفتار و عملکرد صفحات وب

مثال: وقتی یک دکمه در صفحه وب فشار داده می‌شود و پیامی نمایش داده می‌شود، این کار معمولاً توسط جاوااسکریپت انجام می‌شود.

جاوااسکریپت می‌تواند محتویات HTML را تغییر دهد 📄

یکی از ویژگی‌های جالب جاوااسکریپت، توانایی تغییر محتویات HTML است. یکی از روش‌های جاوااسکریپت برای این کار، getElementById() است.

مثال: فرض کنید در HTML یک المان داریم با id=”demo”. با استفاده از جاوااسکریپت می‌توانیم محتویات این المان را تغییر دهیم.

document.getElementById("demo").innerHTML = "سلام جاوااسکریپت!";

اگر بخواهیم از کوتیشن‌های تک‌گانه استفاده کنیم هم مشکلی ندارد:

document.getElementById('demo').innerHTML = 'سلام جاوااسکریپت!';

جاوااسکریپت می‌تواند مقادیر ویژگی‌های HTML را تغییر دهد ⚙️

جاوااسکریپت می‌تواند ویژگی‌های خاصی مثل src تصاویر را تغییر دهد.

مثال: فرض کنید یک تصویر داریم و می‌خواهیم منبع آن را با جاوااسکریپت تغییر دهیم:

document.getElementById("myImage").src = "new-image.jpg";

جاوااسکریپت می‌تواند استایل‌های HTML را تغییر دهد 🎨

شما می‌توانید با استفاده از جاوااسکریپت، استایل‌های یک عنصر HTML را تغییر دهید. این تغییرات مشابه تغییر ویژگی‌های HTML است، اما در اینجا ما استایل‌ها را تغییر می‌دهیم.

مثال: فرض کنید می‌خواهیم اندازه فونت یک متن را با جاوااسکریپت تغییر دهیم:

document.getElementById("demo").style.fontSize = "35px";

جاوااسکریپت می‌تواند عناصر HTML را پنهان کند 👻

گاهی نیاز داریم که یک عنصر HTML را پنهان کنیم. این کار را می‌توان با تغییر ویژگی display انجام داد.

مثال: برای پنهان کردن یک عنصر:

document.getElementById("demo").style.display = "none";

جاوااسکریپت می‌تواند عناصر HTML را نشان دهد 👀

و برعکس، برای نمایش دادن یک عنصر که قبلاً پنهان کرده‌ایم، دوباره باید ویژگی display را تغییر دهیم.

مثال: برای نمایش یک عنصر پنهان:

document.getElementById("demo").style.display = "block";

نکته جالب! 🤓

جاوااسکریپت و جاوا دو زبان کاملاً متفاوت هستند، هم از نظر مفهومی و هم طراحی.
جاوااسکریپت توسط برندن آیک در سال 1995 اختراع شد و در سال 1997 به استاندارد ECMA تبدیل شد.
نام رسمی این زبان ECMAScript است.

چالش برای شما 💪

حالا که با جاوااسکریپت آشنا شدید، یک دکمه بسازید که وقتی کلیک می‌شود، پیام “Hello, World!” را در یک بخش از صفحه نمایش دهد. از getElementById() برای این کار استفاده کنید!