فصل ۲۲ | تعامل و ساختار پیشرفته

افزودن رفتار پویا با عنصر script

اگر HTML اسکلت صفحه و CSS ظاهر آن باشد، جاوااسکریپت مسئول رفتار و تعامل صفحه با کاربر است؛ مثل واکنش به کلیک، اعتبارسنجی فرم یا تغییر محتوا بدون رفرش صفحه. کد جاوااسکریپت با عنصر <script> به HTML اضافه می‌شود.

نوشتن اسکریپت داخل صفحه

inline-script.html
<p id="demo">یک متن ساده</p>

<script>
    document.getElementById("demo").innerHTML = "متن با جاوااسکریپت تغییر کرد";
</script>

اتصال فایل جاوااسکریپت خارجی

درست مثل CSS، بهتر است کدهای جاوااسکریپت هم در یک فایل جداگانه با پسوند .js نوشته و با ویژگی src به صفحه متصل شوند.

index.html
<body>
    ...
    <script src="app.js"></script>
</body>
نکته: معمولاً بهتر است عنصر <script> درست قبل از بسته شدن </body> قرار بگیرد تا مرورگر ابتدا محتوای صفحه را نمایش دهد و سپس اسکریپت را اجرا کند.

یک عنصر مکمل: noscript

عنصر <noscript> محتوایی را نشان می‌دهد که فقط زمانی دیده می‌شود که جاوااسکریپت در مرورگر کاربر غیرفعال باشد.

noscript.html
<noscript>مرورگر شما جاوااسکریپت را پشتیبانی نمی‌کند یا آن غیرفعال است.</noscript>

یادگیری عمیق جاوااسکریپت خارج از محدوده‌ی این آموزش HTML است، اما دانستن این‌که این دو زبان چگونه در کنار هم کار می‌کنند، برای درک کامل ساخت یک صفحه‌ی وب مدرن ضروری است.