جاوااسکریپت (JavaScript)
جاوااسکریپت (JavaScript) صفحات HTML را زنده می کند. یعنی صفحه واکنش گرا و تعاملی می شود؛ مثل کلاس شادی که معلم سؤال می پرسد و تو جواب می دهی.
تگ <script> در HTML
تگ <script> کُد سمت کاربر را نگه می دارد. می تواند کُد داخلی داشته باشد یا با ویژگی src فایل بیرونی را لود کند.
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
<\/script>
نمونه سریع جاوااسکریپت
می توانی با کلیک، زمان را نشان دهی. این یک نمونه ساده است.
<h2>My First JavaScript</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date();">
Click me to display Date and Time
</button>
<p id="demo"></p>
تغییر محتوا با جاوااسکریپت
محتوای یک المان را با getElementById() عوض کن. این متد یک المان با شناسه خاص را برمی گرداند.
document.getElementById("demo").innerHTML = "Hello JavaScript!";
تغییر استایل با جاوااسکریپت
می توانی اندازه، رنگ، و پس زمینه را زود عوض کنی. مثل عوض کردن تم گوشی.
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
تغییر ویژگی ها با جاوااسکریپت
می توانی ویژگی یک المان را تغییر دهی. مثل عوض کردن عکس داخل <img>.
document.getElementById("image").src = "picture.gif";
تگ <noscript> برای کاربران بدون جاوااسکریپت
اگر جاوااسکریپت خاموش باشد، <noscript> پیام جایگزین نشان می دهد.
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
<\/script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
سه گام تمرینی
- یک المان با id بساز.
- با getElementById آن را بگیر.
- innerHTML یا style را تغییر بده.
نکته: id باید یکتا باشد. نام ها حساس به حروف هستند.
مسیر ادامه یادگیری
برای جاسازی صفحه ها، صفحه فریم ها (Iframes) را ببین. برای مسیر فایل ها نیز به مسیر فایل ها (File Paths) برو.
جمع بندی سریع
- جاوااسکریپت صفحه را تعاملی می کند.
- <script> کُد یا فایل بیرونی را لود می کند.
- با id المان را هدف بگیر.
- محتوا، استایل، و ویژگی را تغییر بده.
- <noscript> پیام جایگزین نشان می دهد.