آموزش HTML – تگ script

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/14 | بخش : آموزش HTML

تعریف و کاربرد تگ script در HTML

تگ <script> تگی است که با استفاده از آن می توان دستورات جاوا اسکرپیت را در یک صفحه وب وارد کرد. (دستوراتی که می توانند در سمت کاربر یا Client-Side اجرا شوند)

دستورات جاوا اسکریپت هم می تواند بصورت داخلی (یعنی درون همان صفحه وب) و هم بصورت خارجی (یعنی در یک فایل مجزا خارج از آن صفحه) مورد استفاده قرار بگیرند.

با استفاده از جاوا اسکریپت می توان به راحتی محتوا،عناصر و … را در یک صفحه وب تغییر داد و یا می توان آنها را ایجاد نمود.

  • تگ <script> برای برنامه نویسی سمت کاربر استفاده می شود، مثل JavaScript
  • عنصر <script> به دو صورت استفاده می شود یا با نوشتن دستورات درون تگ <script> یا به صورت یک فایل <script> خارجی که با خصوصیت src مشخص می شود.
  • کاربردهای رایج برای JavaScript: دستکاری تصویر، اعتبار سنجی فرم و تغییرات محتوا بصورت پویا می باشد.

 

نکته ها و ترفندها

  • اگر از خصوصیت “src” استفاده کنیم , عنصر <script> باید خالی باشد.
  • همچنین عنصر <noscript> زمانی استفاده می شود که script ها در مرورگر غیر فعال شده یا مرورگری است که script سمت کاربر را پشتیبانی نمی کنند.
  • استفاده از صفت type در HTML4 یک صفت ضروری می باشد ولی در HTML5 استفاده از این صفت اختیاری می باشد.
  • صفت async یک صفت جدید/اضافه شده در HTML5 می باشد.
  • صفت xml:space در HTML5 منسوخ شده و بکل دیگه استفاده نمیشه.
  • اگر از صفت src درون این تگ استفاده نماییم می توان آن را بصورت تگ تنها نیز نوشت. (یعنی تگی که تگ پایان نداشته باشد) (همانند دستور زیر)
<script src="test.js">

 

 

راه های مختلف برای اجرا شدن script خارجی:
  • اگر خصوصیت “async=”async باشد: اسکریپت غیر همزمان با بقیه از صفحه اجرا می شود (زمانی کی که اسکریپت شما به سایر اسکریپت ها وابستگی نداشته باشد).
  • اگر خصوصیت async ارائه نشود و خصوصیت “defer=”defer باشد: اسکریپت پس از بازگذاری کامل صفحه اجرا می شود و تمام دستورات نیز در آخرین مرحله اجرا می شوند.
  • اگر async یا defer هیچکدام ارائه نشوند: اسکریپت بلافاصله اجرا می شود قبل از اینکه مرورگر به بارگذاری آن صفحه ادامه دهد.

 

تفاوت بین HTML 4.01 و HTML5

  • خصوصیت “type” در HTML 4 الزامی است، اما در HTML5 اختیاری است.
  • خصوصیت “async” در HTML5 جدید است.
  • خصوصیت “xml:space” موجود در HTML 4.01، در HTML5 پشتیبانی نمی شود.

 

تفاوت بین HTMLوXHTML

در XHTML، محتویات درون اسکریپت به عنوان PCDATA# (به جای CDATA) اعلام می شود، بدان معنی است که موجودیت تجزیه خواهد شد.

این به این معنی است که در XHTML، تمام کاراکترهای خاص باید کد گذاری شود، یا تمام مطالب باید در داخل یک بخش CDATA پنهان شود:

<script type="text/javascript">
//<![CDATA[
var i = 10;
if (i < 5) {
// some code
}
//]]>
</script>

 

مثال از تگ script در HTML

مثال شماره ۱ : استفاده از جاوااسکرپیت در قسمت body صفحه وب

<p id="test"></p>
 
<script>
document.getElementById("test").innerHTML = "سایتکده ، آموزش آنلاین برنامه نویسی";
</script>

تمرین کنید !

 

مثال شماره ۲ : استفاده از جاوا اسکریپت در قسمت head صفحه وب

<head>
 
<script>
function myFunction() {
document.getElementById("test").innerHTML = "Free-Learn";
}
</script>
 
</head>

 

مثال شماره ۳ : استفاده از فایل جاوا اسکریپت خارجی (مجزا)

<head>
  <script src="test/test.js"></script>
</head>

 

 

پشتیبانی مرورگرها از تگ script در HTML

Element
<script> بله بله بله بله بله

 

جدول صفات تگ script در HTML

نام صفت  مقدار توضیح
async compact مشخص می کند که یک اسکریپت بصورت نامتقارن و یا غیر همزمان اجرا شود.
(برای فایل اسکریپت خارجی)
charset charset نحوه کدگذاری کاراکترها را برای نمایش هرچه بهتر مشخص کرد.
(برای فایل اسکریپت خارجی)
defer defer نحوه ی اجرای اسکریپت های موجود در یک صفحه را مشخص میکند.
(برای فایل اسکریپت خارجی)
src URL مسیر فایل جاوا اسکریپت خارجی را مشخص می کند.
type media_type نوع محتوایی یا نوع رسانه محتوایی را مشخص می کند.
xml:space preserve در HTML5 پشتیبانی نمی شود.

مشخص می کند که فضای خالی (سفید) بین کدها حفظ شود یا خیر.