برای معرفی و نمایش کد‌های جاوا اسکریپت در HTML از چه تگی استفاده می‌کنیم؟ منظور از تگ Script چیست؟ آیا میتوانیم در HTML به صورت مستقیم از جاوا اسکریپت استفاده کنیم؟ در این مقاله با تگ script آشنا می‌شویم.
سرفصل‌های پست
تگ <script>
در فصل قبل در رابطه کار با فریم ها صحبت کردیم و با تگ frame و تگ iframe آشنا شدیم. در این جلسه می‌خواهیم در رابطه با تگ Script صحبت کنیم.
این تگ برای تعریف یک اسکریپت سمت کلاینت مورد استفاده قرار می‌گیرد.
محتوای تگ <script> یا شامل دستورات جاوا اسکریپت است و یا شامل یک خاصیت src که به فایل جاوا اسکریپت اشاره دارد.
استفاده های رایج این تگ معمولا در نگهداری از تصاویر، تعیین اعتبار فرم ها و تغییرات پویا در محتوای صفحه می‌باشد.
برای انتخاب یک عنصر جاوا اسکریپت معمولا از تابع document.getElementById() استفاده می‌شود.
مثال زیر یک عبارت “سلام جاوا اسکریپت” را با پیدا کردن عنصر جاوا اسکریپت می‌نویسد.
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
نکات و یادداشت ها
اگر در تگ <script> از خاصیت “src” استفاده می کنید، محتوای تگ باید خالی باشد.
برای فراخوانی یک اسکریپت بیرونی چندین راه وجود دارد:
- اگر مقدار خاصیت async برابر با async باشد، در این حالت اسکریپت به صورت ناهمگام به همراه سایر اجزای صفحه بارگیری می‌شود(در حین بارگیری صفحه اسکریپت اجرا می‌شود)
- اگر مقدار async تعیین نشده باشد و مقدار defer برابر با defer باشد در این حالت، پس از بارگیری کامل صفحه اسکریپت اجرا می‌شود.
- اگر هیچ یک از خواص async و defer تعیین نشده باشند، در این حالت اسکریپت قبل از بارگیری کامل صفحه توسط مرورگر به سرعت بارگیری و فرخوانی خواهد شد.
تفاوت های تگ <script> در نسخه HTML 4.01 و HTML5
- خاصیت “type” در HTML 4 ضروری است در حالی که در نسخه 5 اختیاری می‌باشد.
- خاصیت “async” در نسخه HTML 5 وجود دارد.
- خاصیت “xml:space” موجود در نسخه 4 در نسخه HTML 5 پشتیبانی نمی‌شود.
تفاوت تگ <script> بین HTML و XHTML
در XHTML، محتوای اسکریپت به عنوان #PCDATA تعریف می شوند(به جای CDATA)، معنای آن این است که محتوای تگ تجزیه می‌شود.
در نتیجه در XHTML، همه کاراکتر های خاص باید encode شوند یا همه محتوا باید به بخش CDATA انتقال یابد.
<script type="text/javascript">
//<![CDATA[
var i = 10;
if (i < 5) {
// some code
}
//]]>
</script>
خاصیت‌ها
| خاصیت | مقدار | توضیح |
| Async | Async | تعیین می کند اسکریپت به صورت ناهمگام اجرا شود (فقط برای اسکریپت های بیرونی) |
| Charset | Charset | تعیین کننده نوع encoding کاراکتر های اسکریپت بیرونی |
| Defer | Defer | تعیین کننده اجرای اسکریپت پس از بارگیری صفحه(فقط برای اسکریپت های بیرونی) |
| Src | url | تعیین کننده آدرس اسکریپت بیرونی |
| Type | Media_type | تعیین کننده نوع رسانه اسکریپت |
| Xml:space | Preserve | تعیین کننده حفظ فاصله در کد(در نسخه 5 پشتیانی نمی شود) |
پایانترم
[box type=”info” class=”question-from-users” width=””]سوال:
یک نمونه استفاده از تگ script و خاصیت src را در بخش کامنت ها برایمان ارسال کنید.
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
در این مقاله با تگ script که یک تگ برای معرفی کد‌های جاوا اسکریپت در HTML می‌باشد آشنا شدیم. راه‌های دیگری نیز برای معرفی کد‌های جاوا اسکریپت به سند HTML وجود دارد، با اینحال یکی از روش‌های خوب استفاده از تگ Script می‌باشد.
اگر سوال، انتقاد و نظری در رابطه با این مقاله داشتید خیلی خوشحال میشیم که برام بنویسید.
4 پاسخ
اگر ما از src در تگ script استفاده بکنیم باید محتوای تگ را خالی بزاریم
ممنونم علی اکبر، پاسخت درسته ?
پاسخ سئال :
سلام محمد چرا اطلاعات type رو داخل خاصیت src قرار دادی؟ یکبار دیگه مقاله رو لطفا مطالعه کن.