اعمال استایل‌ها و اسکریپت‌ها روی صفحات وب

مقدمه

کار بررسی عناصر فرزند عنصر head را با دو عنصر style و script شروع می‌کنیم. عنصر style برای اعمال کدهای CSS روی صفحه‌ی جاری کاربرد دارد و script عنصری است که می‌تواند شامل کدهای جاوااسکریپت و یا ارجاعی به یک فایل خارجی جاوااسکریپت باشد.

اعمال کدهای CSS روی صفحه

برای اعمال کدهای CSS روی صفحات وب، سه روش مختلف وجود دارد. این روش‌ها عبارتند از:

• روش خارجی یا external: در این روش، کدهای CSS در فایلی مجزا با پسوند .css نوشته می‌شوند و سپس فایل CSS با استفاده از یک عنصر link به صفحه معرفی می‌شود. جزئیات این روش در درس بعد و هنگام بررسی عنصر link ارائه می‌شود.
• روش داخلی یا internal: در این روش، کدهای CSS درون یک عنصر با نام style قرار داده می‌شود تا مستقیماً و بدون نیاز به ارحاعات خارجی روی صفحه اعمال شوند.
• روش درون‌خطی یا inline: در این روش، از صفت style هر عنصر برای نوشتن استایل‌های مربوط به همان عنصر استفاده می‌شود. قبلاً هم گفتیم که بهتر است از این روش در پروژه‌های واقعی و با اهدافی جز آزمایش، استفاده نکنیم.

عنصر style که یکی دیگر از فرزندان head محسوب می‌شود، برای اعمال کدهای CSS روی صفحه به روش internal کاربرد دارد. محتوای این عنصر، استایل‌هایی است که با استفاده از گرامر CSS ایجاد می‌شوند. مثال زیر را ببینید.

HTML

<style>
  h1{
    background-color: lime;
  }

  p{
    color: brown;
  }
</style>

اعمال کدهای جاوااسکریپت روی صفحه

برای اعمال کدهای جاوااسکریپت روی صفحات وب، دو روش وجود دارد که هر دو با استفاده از عنصری به نام script انجام می‌شود. در روش اول که داخلی یا internal است، اسکریپت‌ها درون عنصری با نام script نوشته می‌شود. عنصر script می‌تواند درون عنصر head و یا درون عنصر body قرار داشته باشد. اما در روش خارجی یا external، اسکریپت‌ها درون فایلی با پسوند .js نوشته شده و سپس، با استفاده از یک عنصر script و یک صفت src به آن فایل خارجی ارجاع داده می‌شود.

در مثال زیر، از هر دو روش internal و external استفاده شده است.

HTML

<h1 id="heading">Welcome</h1>
<p>Hello, world!</p>
<script src="test.js"></script>
<script>
  const h1 = document.getElementById(heading);
  h1.textContent = "Hi";
</script>

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

به علاوه، برای کسانی که هیچ‌گونه آشنایی با جاوااسکریپت و نقش آن در سمت کاربر وب ندارند، عرض می‌کنم که: انجام کارهایی نظیر آنچه در مثال بالا می‌بینید، ارزش خاصی ندارد و چیزی که به جاوااسکریپت در وب قدرت می‌دهد، رویداد محور بودن آن است؛ یعنی اینکه می‌توان ترتیبی داد که تغییر در محتوا یا ظاهر صفحه در واکنش به یک رویداد مشخص (مثل کلیک روی یک عنصر) صورت گیرد.