معرفی (Introduction)
اینجا «معرفی جاوااسکریپت» است. جاوااسکریپت (JavaScript) زبان وب است. با آن محتوا عوض می شود، ظاهر تغییر می کند، و داده ها بررسی می شوند. مثل مدرسه، قدم به قدم پیش می رویم. سپس با مثال ها تمرین می کنیم.
معرفی جاوااسکریپت: دقیقاً چه کار می کند؟
جاوااسکریپت می تواند HTML و CSS را تغییر دهد. «رویداد (Event)» یعنی اتفاقی مثل کلیک. سپس کد واکنش نشان می دهد. درست مثل دکمه ی زنگ مدرسه.
تغییر متن یک عنصر HTML
روش getElementById() یک عنصر را پیدا می کند. سپس innerHTML متن را عوض می کند.
document.getElementById("demo").innerHTML = "Hello JavaScript";
document.getElementById('demo').innerHTML = 'Hello JavaScript';
تغییر ویژگی های تگ ها
گاهی باید «ویژگی (Attribute)» را عوض کنیم. مثلاً src تصویر. بنابراین شکل لامپ روشن یا خاموش می شود.
document.getElementById('myImage').src = 'pic_bulbon.gif';
تغییر استایل ها (CSS) با جاوااسکریپت
«استایل (Style)» یعنی ظاهر عنصر. با دسترسی به style می توانیم اندازه یا رنگ را عوض کنیم.
document.getElementById("demo").style.fontSize = "35px";
مخفی و نمایان کردن عناصر
با ویژگی display می توانیم عنصر را مخفی یا نمایان کنیم. این مثل پنهان کردن برگه ی تقلب است!
document.getElementById("demo").style.display = "none";
document.getElementById("demo").style.display = "block";
سه رفیق وب: HTML، CSS، JavaScript
HTML محتوا را می سازد. CSS ظاهر را مرتب می کند. JavaScript رفتار را برنامه ریزی می کند. بنابراین این سه تا باهم کامل می شوند.
گام های عملیِ خیلی کوتاه
- یک فایل HTML باز کن.
- عنصری با id برابر demo بساز.
- کد تغییر متن را اضافه کن.
- دکمه بساز و روی کلیک، کد را اجرا کن.
جمع بندی سریع
- جاوااسکریپت زبان رفتار وب است.
- با id عنصر را پیدا کن.
- متن، استایل، و ویژگی ها را تغییر بده.
- نمایش را پنهان یا نمایان کن.
نکته: برای ادامه، صفحه ی خانه جاوااسکریپت را ببین. سپس به قرار دادن کد جاوااسکریپت برو. اگر خواستی، معرفی جاوااسکریپت را به دوستانت بده.