معرفی جاوا اسکریپت
جاوااسکریپت یک زبان برنامهنویسی است که برای وب استفاده میشود. با کمک جاوااسکریپت، میتوانیم:
- محتویات صفحات وب (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()برای این کار استفاده کنید!