تغییرات اخیر

در اینجا اطلاعیه‌ها، نسخه‌ها و تغییرات جدید لیارا فهرست می‌شوند.

۰۲۵ ۳۲۰۹۸۰۰۰

آنچه در این مقاله می‌خوانید

چگونه جاوا اسکریپت را به HTML اضافه کنیم (راهنمایی برای مبتدیان)


۳۰ مهر ۱۴۰۴

در این مطلب قصد خواهیم داشت تا به صورت کامل و حرفه‌ای به بررسی روش‌های افزودن کد جاوا اسکریپت به اسناد HTML بپردازیم و سه روش اصلی را تشریح کنیم. با استفاده از اسکریپت‌های داخلی در بخش <head>، اسکریپت‌های داخلی در بخش <body>، و ارجاع به فایل‌های خارجی با پسوند .js.

علاوه بر توضیح چگونگی پیاده‌سازی این روش‌ها، به تحلیل عمیق دلایل انتخاب هر روش و تأثیرات آن‌ها بر عملکرد وب‌سایت، از جمله مفاهیمی نظیر بلاک کردن رندرینگ، استفاده از کش مرورگر، و بهره‌گیری از ویژگی‌های مدرن مانند defer و async پرداخته شده است.

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

بدون هیچ‌گونه پیکربندی پیچیده، هاست NodeJS را در چند ثانیه راه‌اندازی کنید!
✅ عملکرد بالا ✅ بدون نیاز به پیکربندی ✅ راه‌اندازی سریع
خرید هاست ابری NodeJS

آنچه در ادامه خواهید خواند:

  • نکات مهم و حائز اهمیت
  • روش اول: افزودن اسکریپت داخلی در بخش <head>
  • روش دوم: افزودن اسکریپت داخلی در بخش <body>
  • روش سوم: کار با فایل جاوااسکریپت خارجی
  • مثال‌های کاربردی برای یادگیری
  • ملاحظات عملکردی که باید انجام دهید
  • بهترین روش ها
  • عیب‌یابی خطاهای رایج
  • سوالات متداول
  • جمع بندی

نکات مهم و حائز اهمیت

  • بهترین روش: استفاده از فایل‌های خارجی .js به دلیل سازمان‌دهی بهتر، قابلیت نگهداری، و امکان استفاده مجدد در چندین صفحه توصیه می‌شود.
  • عملکرد ضعیف: قرار دادن اسکریپت‌ها در <head> بدون ویژگی‌های خاص، باعث بلاک شدن رندرینگ می‌شود و کاربران با صفحه‌ای خالی مواجه خواهند شد.
  • رویکرد مدرن: استفاده از ویژگی defer برای اسکریپت‌های خارجی، بهترین عملکرد را با جلوگیری از بلاک شدن رندرینگ فراهم می‌کند.
  • مزیت کش مرورگر: فایل‌های خارجی جاوااسکریپت از کش مرورگر بهره می‌برند، برخلاف اسکریپت‌های داخلی که این امکان را ندارند.
  • مدیریت ساده‌تر: یک فایل .js می‌تواند در چندین صفحه استفاده شود و به‌روزرسانی آن در یک مکان، تمام صفحات را تحت تأثیر قرار می‌دهد.
  • ابزار عیب‌یابی: کنسول توسعه‌دهنده مرورگر (با کلید F12 قابل دسترسی) مهم‌ترین ابزار برای شناسایی و رفع خطاهای جاوااسکریپت است.
چگونه جاوا اسکریپت را به HTML اضافه کنیم (راهنمایی برای مبتدیان)

روش اول: افزودن اسکریپت داخلی در بخش <head>

برای افزودن جاوااسکریپت به یک سند HTML، می‌توان از تگ <script> استفاده کرد که کد جاوااسکریپت را در بر می‌گیرد. این تگ می‌تواند در بخش <head> یا <body> سند HTML قرار گیرد، بسته به زمانی که می‌خواهید کد اجرا شود.

قرار دادن اسکریپت در بخش <head> معمولاً برای نگه‌داری کد در خارج از محتوای اصلی سند استفاده می‌شود. به‌عنوان مثال، یک سند HTML ساده با عنوان “تاریخ امروز” را در نظر بگیرید:

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
</body>
 
</html>

برای افزودن یک اسکریپت که یک اعلان (alert) نمایش دهد، می‌توان تگ <script> را زیر تگ <title> در بخش <head> قرار داد:

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>
 
<body>
</body>
 
</html>

توضیح عملکرد: قرار دادن اسکریپت در <head> به مرورگر دستور می‌دهد که جاوااسکریپت را قبل از رندر کردن محتوای <body> تجزیه و اجرا کند. این روش برای اسکریپت‌هایی مناسب است که نیازی به تعامل مستقیم با عناصر صفحه ندارند، زیرا در زمان اجرای اسکریپت در <head>، مدل شیء سند (DOM) برای <body> هنوز ساخته نشده است. بنابراین، دسترسی به عناصری مانند <div> یا <p> (مثلاً با استفاده از document.getElementById()) با خطا مواجه می‌شود. این روش برای تعریف توابع، متغیرها، یا بارگذاری اسکریپت‌های تحلیلگر شخص ثالث که نیاز به اجرای زودهنگام دارند، مناسب است.

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

روش دوم: افزودن اسکریپت داخلی در بخش <body>

تگ <script> می‌تواند در بخش <body> نیز قرار گیرد. در این حالت، تجزیه‌گر HTML در نقطه‌ای که تگ <script> ظاهر می‌شود، متوقف شده و اسکریپت را اجرا می‌کند. بهترین مکان برای قرار دادن اسکریپت، درست قبل از تگ بسته‌شونده </body> است. این کار تضمین می‌کند که تمام عناصر HTML در DOM بارگذاری شده‌اند و اسکریپت می‌تواند به آن‌ها دسترسی داشته باشد. همچنین، این روش باعث بهبود عملکرد ادراکی صفحه می‌شود، زیرا مرورگر ابتدا محتوای بصری را رندر می‌کند و سپس اسکریپت اجرا می‌شود.

مثال: نمایش تاریخ به‌صورت مستقیم در بدنه HTML:

<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
 
<body>
  <script>
      let d = new Date();
      document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
  </script>
</body>
 
</html>

نتیجه: با بارگذاری این صفحه در مرورگر، تاریخ جاری به‌صورت یک تیتر <h1> نمایش داده می‌شود.

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

روش سوم: کار با فایل جاوااسکریپت خارجی

برای اسکریپت‌های بزرگ‌تر یا کدهایی که در چندین صفحه استفاده می‌شوند، بهترین و حرفه‌ای‌ترین روش، قرار دادن جاوااسکریپت در یک فایل جداگانه با پسوند .js و ارجاع به آن از طریق تگ <script> با ویژگی src است.

مزایا:

  • جداسازی مسئولیت‌ها: HTML برای ساختار، CSS برای استایل، و جاوااسکریپت برای تعامل در فایل‌های جداگانه نگه‌داری می‌شوند، که پروژه را منظم‌تر و قابل‌نگهداری‌تر می‌کند.
  • قابلیت استفاده مجدد: یک فایل .js می‌تواند در چندین صفحه استفاده شود و به‌روزرسانی آن در یک مکان، تمام صفحات را تحت تأثیر قرار می‌دهد.
  • کش مرورگر: فایل‌های خارجی توسط مرورگر کش می‌شوند، که باعث کاهش زمان بارگذاری در بازدیدهای بعدی می‌شود.

مثال پروژه کوچک:
ساختار پروژه:

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html
  1. فایل جاوااسکریپت (script.js):
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
  1. فایل CSS (style.css):
body {
    background-color: #0080ff;
}
 
h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}
  1. فایل HTML (index.html):
<!DOCTYPE html>
<html lang="en-US">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
    <script src="js/script.js"></script>
</body>
 
</html>

نتیجه: با بارگذاری index.html، صفحه‌ای با پس‌زمینه آبی و تیتر سفید حاوی تاریخ جاری نمایش داده می‌شود. این ساختار منظم، امکان استفاده از فایل جاوااسکریپت در صفحات دیگر و به‌روزرسانی آسان را فراهم می‌کند.

مثال‌های کاربردی برای یادگیری

1. سوئیچ حالت تاریک

بسیاری از وب‌سایت‌های مدرن امکان تغییر به حالت تاریک را ارائه می‌دهند. این قابلیت با استفاده از جاوااسکریپت و تغییر کلاس CSS قابل پیاده‌سازی است.

HTML:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <button id="theme-toggle"></button>
    <h1 id="title"></h1>
    <p>.</p>
    <script src="js/script.js"></script>
</body>
</html>
.dark-mode {
    background-color: #222;
    color: #eee;
}
const toggleButton = document.getElementById('theme-toggle');
toggleButton.addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
});

JavaScript:

const contactForm = document.getElementById('contact-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');

contactForm.addEventListener('submit', function(event) {
    if (!emailInput.value.includes('@')) {
        event.preventDefault(); 
        
        errorMessage.textContent = 'Please enter a valid email address.';
    } else {
        errorMessage.textContent = '';
    }
});

توضیح: جاوااسکریپت ابتدا دکمه را با استفاده از شناسه آن پیدا می‌کند. سپس، یک شنونده رویداد (event listener) برای کلیک تعریف می‌کند که با هر کلیک، کلاس dark-mode را به <body> اضافه یا حذف می‌کند. مرورگر به‌صورت آنی استایل‌های مرتبط با این کلاس را اعمال می‌کند.

2. اعتبارسنجی فرم

اعتبارسنجی فرم‌ها برای اطمینان از صحت داده‌های ورودی کاربران ضروری است. این کار با جاوااسکریپت به‌صورت آنی و بدون نیاز به بارگذاری مجدد صفحه انجام می‌شود.



Form Validator Email: Subscribe

توضیح: این اسکریپت به رویداد ارسال فرم گوش می‌دهد. اگر ورودی ایمیل شامل کاراکتر @ نباشد، با استفاده از event.preventDefault() از ارسال فرم جلوگیری کرده و پیام خطا نمایش می‌دهد. در غیر این صورت، فرم به‌طور عادی ارسال می‌شود.

ملاحظات عملکردی که باید انجام دهید

1. اسکریپت داخلی در <head>

  • مشکل اصلی: بلاک کردن رندرینگ. مرورگر باید اسکریپت را دانلود، تجزیه، و اجرا کند قبل از اینکه محتوای <body> را رندر کند. این باعث تأخیر در زمان اولین رندر محتوایی (First Contentful Paint) می‌شود و تجربه کاربری را تضعیف می‌کند.
  • کش: اسکریپت‌های داخلی بخشی از HTML هستند و امکان کش جداگانه ندارند. هر بار که صفحه بارگذاری می‌شود، اسکریپت دوباره دانلود و تجزیه می‌شود.
  • توصیه: از این روش فقط برای اسکریپت‌های کوچک و ضروری که باید قبل از رندرینگ اجرا شوند، استفاده کنید.

2. اسکریپت داخلی در <body>

  • مزیت: با قرار دادن اسکریپت در انتهای <body>، مرورگر ابتدا محتوای صفحه را رندر می‌کند، که باعث بهبود ادراک سرعت بارگذاری می‌شود.
  • مشکل: همچنان بلاک کردن جزئی رندرینگ وجود دارد، زیرا مرورگر هنگام رسیدن به تگ <script> متوقف می‌شود.
  • کش: مانند اسکریپت‌های <head>، امکان کش جداگانه وجود ندارد.

3. فایل جاوااسکریپت خارجی

  • مزایا:
  • کش مرورگر: فایل‌های .js یک‌بار دانلود شده و در کش مرورگر ذخیره می‌شوند، که زمان بارگذاری را در بازدیدهای بعدی کاهش می‌دهد.
  • ویژگی‌های defer و async:
    • defer: اسکریپت در پس‌زمینه دانلود شده و پس از تکمیل تجزیه DOM اجرا می‌شود. این روش غیربلاک‌کننده است و ترتیب اجرای اسکریپت‌ها را حفظ می‌کند.
    • async: اسکریپت به‌صورت غیرهمزمان دانلود و به‌محض اتمام دانلود اجرا می‌شود، که ممکن است ترتیب اجرا را به‌هم بزند. این برای اسکریپت‌های مستقل مانند تبلیغات مناسب است.
  • توصیه: استفاده از فایل خارجی با ویژگی defer بهترین روش برای عملکرد بهینه است.

بهترین روش

  1. استفاده از فایل‌های خارجی: همیشه جاوااسکریپت را در فایل‌های .js جداگانه نگه دارید تا کد منظم و قابل‌نگهداری باشد.
  2. قرار دادن اسکریپت در انتهای <body> با defer: این روش تضمین می‌کند که صفحه ابتدا رندر شده و سپس اسکریپت اجرا می‌شود.
  3. نگارش کد خوانا: از نام‌های توصیفی برای متغیرها و توابع استفاده کنید (مانند calculateTotalPrice به‌جای calc). از کامنت‌ها برای توضیح هدف کد استفاده کنید.
  4. اصل DRY (تکرار نکنید): کدهای تکراری را در توابع بسته‌بندی کنید تا به‌روزرسانی و نگهداری آسان‌تر شود.

عیب‌یابی خطاهای رایج

وقتی اسکریپت شما کار نمی‌کند، کنسول توسعه‌دهنده مرورگر (F12) بهترین ابزار برای عیب‌یابی است. در زبانه “Console” خطاها به‌صورت قرمز نمایش داده می‌شوند.

  1. خطا: “Cannot read properties of null” یا “is not defined”
  • معنی: تلاش برای دسترسی به عنصری که هنوز در DOM بارگذاری نشده است.
  • راه‌حل: اسکریپت را به انتهای <body> منتقل کنید یا از defer استفاده کنید.
  1. خطا: “Uncaught SyntaxError”
  • معنی: وجود خطای نگارشی مانند پرانتز یا آکولاد گم‌شده.
  • راه‌حل: شماره خط مشخص‌شده در کنسول را بررسی کنید و اشکالات نگارشی را اصلاح کنید.
  1. مشکل: اسکریپت اجرا نمی‌شود، اما خطایی در کنسول نیست
  • معنی: احتمالاً مسیر فایل .js در ویژگی src اشتباه است.
  • راه‌حل: در زبانه “Network” کنسول، خطای 404 را بررسی کنید و مسیر فایل را اصلاح کنید.
  1. مشکل: کد اجرا می‌شود، اما نتیجه مورد انتظار را ندارد
  • معنی: خطای منطقی در کد وجود دارد.
  • راه‌حل: از console.log() برای چاپ مقادیر متغیرها در مراحل مختلف استفاده کنید تا منطق کد را ردیابی کنید.

مثال:

<body>
    <script src="library.js"></script> 
    
    <script src="my-app.js"></script> 
</body>

سوالات متداول

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

بهترین روش افزودن جاوااسکریپت به HTML چیست؟

استفاده از فایل خارجی .js با ویژگی defer و قرار دادن تگ <script> قبل از </body>.

اسکریپت را در <head> قرار دهیم یا <body>؟

بهتر است اسکریپت‌ها را در انتهای <body> قرار دهید تا از بلاک شدن رندرینگ جلوگیری شود.

آیا می‌توان چند تگ <script> در یک فایل HTML استفاده کرد؟

بله، می‌توانید چندین تگ <script> اضافه کنید. مرورگر آن‌ها را به ترتیب ظاهرشدن در سند اجرا می‌کند.

تفاوت async و defer چیست؟

defer اسکریپت‌ها را پس از تجزیه کامل DOM و به ترتیب اجرا می‌کند، در حالی که async اسکریپت را به‌محض دانلود اجرا می‌کند، بدون تضمین ترتیب.

چگونه خطاهای جاوااسکریپت را عیب‌یابی کنیم؟

از کنسول توسعه‌دهنده (F12) برای بررسی خطاها، زبانه “Network” برای مشکلات بارگذاری فایل، و console.log() برای ردیابی منطق کد استفاده کنید.

جمع بندی

این مقاله روش‌های مختلف افزودن جاوااسکریپت به فایل‌های HTML را بررسی کرد و نشان داد که استفاده از فایل‌های خارجی .js با ویژگی defer بهترین رویکرد از نظر عملکرد، قابلیت نگهداری، و سازمان‌دهی است. با مثال‌های کاربردی مانند سوئیچ حالت تاریک و اعتبارسنجی فرم، و همچنین راهنمای عیب‌یابی خطاها، اکنون باید بتوانید پروژه‌های وب تعاملی و حرفه‌ای را با اطمینان توسعه دهید.

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

به اشتراک بگذارید

برچسب‌ها: