تگ script در HTML

آموزش طراحی سایت

برای معرفی و نمایش کد‌های جاوا اسکریپت در 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

  1. خاصیت “type” در HTML 4 ضروری است در حالی که در نسخه 5 اختیاری می‌باشد.
  2. خاصیت “async” در نسخه HTML 5 وجود دارد.
  3. خاصیت “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
}
//]]&gt;
</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 می‌باشد.

اگر سوال، انتقاد و نظری در رابطه با این مقاله داشتید خیلی خوشحال میشیم که برام بنویسید.

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

4 نظر

4 پاسخ

  1. اگر ما از src در تگ script استفاده بکنیم باید محتوای تگ را خالی بزاریم

    1. سلام محمد چرا اطلاعات type رو داخل خاصیت src قرار دادی؟ یکبار دیگه مقاله رو لطفا مطالعه کن.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=