0

بلاگ

خدمات شبکه فراز نتورک > دانلود رایگان > وب مستر > آموزش HTML & CSS > کار با جاوا اسکریپت در HTML

کار با جاوا اسکریپت در HTML

2021/01/18
ارسال شده توسط
آموزش HTML & CSS
989 بازدید

کار با جاوا اسکریپت در HTML

تگ script در HTML

برای معرفی و نمایش کد‌های جاوا اسکریپت در HTML از چه تگی استفاده می‌کنیم؟ منظور از تگ Script چیست؟ آیا میتوانیم در HTML به صورت مستقیم از جاوا اسکریپت استفاده کنیم؟ در این مقاله با تگ script آشنا می‌شویم.

  • 0.1 تگ <script>
  • 0.2 نکات و یادداشت ها
  • 0.3 تفاوت های تگ <script> در نسخه HTML 4.01 و HTML5
  • 0.4 تفاوت تگ <script> بین HTML و XHTML
  • 0.5 خاصیت‌ها

کار با جاوا اسکریپت در HTML

تگ <script>

در فصل قبل در رابطه کار با فریم ها صحبت کردیم و با تگ‌ frame و تگ iframe آشنا شدیم. در این جلسه می‌خواهیم در رابطه با تگ Script صحبت کنیم.

این تگ برای تعریف یک اسکریپت سمت کلاینت مورد استفاده قرار می‌گیرد.

محتوای تگ <script> یا شامل دستورات جاوا اسکریپت است و یا شامل یک خاصیت src که به فایل جاوا اسکریپت اشاره دارد.

استفاده های رایج این تگ معمولا در نگهداری از تصاویر، تعیین اعتبار فرم ها و تغییرات پویا در محتوای صفحه می‌باشد.

برای انتخاب یک عنصر جاوا اسکریپت معمولا از تابع document.getElementById() استفاده می‌شود.

مثال زیر یک عبارت “سلام جاوا اسکریپت” را با پیدا کردن عنصر جاوا اسکریپت می‌نویسد.

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
کار با جاوا اسکریپت در HTML

نکات و یادداشت ها

اگر در تگ <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>
کار با جاوا اسکریپت در HTML

خاصیت‌ها

خاصیت مقدار توضیح
Async Async تعیین می کند اسکریپت به صورت ناهمگام اجرا شود (فقط برای اسکریپت های بیرونی)
Charset Charset تعیین کننده نوع encoding کاراکتر های اسکریپت بیرونی
Defer Defer تعیین کننده اجرای اسکریپت پس از بارگیری صفحه(فقط برای اسکریپت های بیرونی)
Src url تعیین کننده آدرس اسکریپت بیرونی
Type Media_type تعیین کننده نوع رسانه اسکریپت
Xml:space Preserve تعیین کننده حفظ فاصله در کد(در نسخه 5 پشتیانی نمی شود)

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

کار با جاوا اسکریپت در HTML

تگ noscript در HTML

تگ noscript چیست؟ چگونه زمانی که مرورگرمان از جاوا اسکریپت پشتیبانی نمی‌کند این مورد را به کاربران اطلاع دهیم؟ چگونه وقتی ویژگی اسکریپت در مرورگر کاربران غیر فعال است آن‌ها را با خبر سازیم؟ در این اینجا با تگ noscript آشنا می‌شویم و نحوه کار با آن را بررسی می‌کنیم.

1 تگ <noscript>

  • 1.1 نکات و یادداشت ها
  • 1.2 تفاوت تگ <noscript> در نسخه HTML 4.01 و HTML 5
  • 1.3 تفاوت تگ <noscript> در XHTML
  • 1.4 خاصیت‌های تگ noscript

تگ <noscript>

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

این تگ یک جایگزین نمایش محتوا برای کاربرانی است که ویژگی اسکریپت را در مرورگر خود غیر فعال کرده اند و یا مرورگر آن ها اسکریپت را پشتیبانی نمی‌کند.

تگ <noscript> را می‌توان هم در <head> و <body> استفاده کرد.

هنگامی که این تگ در بخش head استفاده شود، تگ <noscript> فقط می تواند شامل تگ های زیر مجموعه <link> , <style> و <meta> باشد.

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

<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

نکات و یادداشت ها

یک راه دیگر برای پنهان کردن اسکریپت ها از دید مرورگر هایی که آن ها را پشتیبانی نمی کنند این است که آن ها با استفاده از کامنت HTML کامنت کنید. در این حالت مرورگر آن ها را به عنوان یک متن ساده نمایش نخواهد داد.

<script>
<!--
function displayMsg() {
  alert("Hello World!")
}
//-->
</script>
کار با جاوا اسکریپت در HTML

تفاوت تگ <noscript> در نسخه  HTML  4.01 وHTML  5

در نسخه 4، این تگ فقط باید در داخل بخش body صفحه استفاده شود و استفاده در بخش های دیگر هیچ کاربردی ندارد.

در نسخه 5، این تگ می‌تواند در بخش head و body استفاده شود.

تفاوت تگ <noscript> درXHTML  

در  XHTML ، تگ <noscript>پشتیبانی نمی‌شود.

خاصیت‌های تگ noscript

تگ noscript به صورت کلی از تمام خاصیت‌های عمومی  HTML پشتیبانی می‌کند ولی هیچ خاصیت مخصوصی تا HTML5 برایش تعریف نشده است.

همانطور که گفتیم این تگ برای استفاده در زمانیست که مرورگر ها از جاوا اسکریپت پشتیبانی نمی‌کنند، در این زمان ها از این تگ یعنی noscript استفاده میکنیم.

 

 

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده:راحله تبریزی

 

اشتراک گذاری:
برچسب ها:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

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