🌐 جاوااسکریپت (JavaScript)، که به اختصار JS نیز شناخته می‌شود، یکی از زبان‌های برنامه‌نویسی حیاتی و پرکاربرد در توسعه وب است. همراه با HTML و CSS، جاوااسکریپت ستون‌های اصلی ساخت وب‌سایت‌ها و اپلیکیشن‌های وب داینامیک را تشکیل می‌دهد. این زبان به‌ویژه برای افزودن تعاملات و داینامیک بودن به صفحات وب طراحی شده است و به شما این امکان را می‌دهد که عناصر مختلف صفحه را در لحظه تغییر دهید، بدون نیاز به بارگذاری مجدد صفحه 🔄.
یکی از بزرگترین مزایای جاوااسکریپت این است که مرورگرهای مدرن وب 🌍، که به استانداردهای بین‌المللی پایبند هستند، به طور بومی از آن پشتیبانی می‌کنند. این ویژگی باعث می‌شود که جاوااسکریپت به ابزاری ضروری برای ساخت اپلیکیشن‌های وب پویا و تعامل‌پذیر تبدیل شود، بدون نیاز به نصب پلاگین‌های اضافی 🔧.
در این آموزش، به بررسی روش‌های مختلف استفاده از جاوااسکریپت در فایل‌های وب خواهیم پرداخت. این روش‌ها شامل استفاده از جاوااسکریپت به صورت درون‌خطی (inline) در داخل یک سند HTML و همچنین استفاده از فایل‌های جداگانه که توسط مرورگر دانلود می‌شوند، خواهد بود. با یادگیری این تکنیک‌ها، قادر خواهید بود تا جاوااسکریپت را به‌طور موثر و عملی در پروژه‌های وب خود پیاده‌سازی کنید 🚀.
🚀 اضافه کردن جاوااسکریپت به یک سند HTML
برای اضافه کردن جاوااسکریپت به یک سند HTML، از تگ <script> استفاده می‌شود. این تگ محل قرارگیری کد جاوااسکریپت شماست و می‌تواند در بخش‌های مختلف یک سند HTML قرار بگیرد:
📌 در <head> – مناسب برای اجرای اسکریپت‌ها قبل از بارگذاری محتوا
📌 در <body> – مناسب برای اجرای اسکریپت‌ها پس از بارگذاری محتوا
📢 نکته: جاوااسکریپت‌هایی که تعامل با محتوای صفحه دارند، بهتر است در انتهای <body> قرار گیرند تا بارگذاری صفحه سریع‌تر انجام شود.
📌 مثال: افزودن جاوااسکریپت به <head>
در این مثال، یک سند HTML ساده داریم که تاریخ روز جاری را هنگام بارگذاری صفحه نمایش می‌دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Today's Date</title> <script> let d = new Date(); alert("Today's date is " + d); </script> </head> <body> </body> </html> |
🛠️ نتیجه: هنگام بارگذاری صفحه، یک پیام هشدار (alert) با تاریخ روز جاری ظاهر می‌شود.
📌 مثال: افزودن جاوااسکریپت به <body>
در این روش، جاوااسکریپت در انتهای <body> قرار داده می‌شود تا ابتدا محتوای صفحه بارگذاری شده و سپس اسکریپت اجرا شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Today's Date</title> </head> <body> <h1>Welcome to My Website</h1> <script> let d = new Date(); alert("Today's date is " + d); </script> </body> </html> |
🎯 مزیت: این روش باعث می‌شود که ابتدا محتوای اصلی صفحه بارگذاری شده و سپس جاوااسکریپت اجرا شود.
📖 بیشتر بخوانید:چگونه با استفاده از HTML و CSS یک وب‌سایت ایجاد کنیم؟
🌟 اضافه کردن جاوااسکریپت به بدنه سند HTML
برای ایجاد تغییرات پویا در بدنه یک صفحه HTML، کافیست کد جاوااسکریپت را پس از بخش <head> وارد کنید. این کار باعث می‌شود که تغییرات سریعاً بر روی صفحه اعمال شود. به این ترتیب، مرورگر قادر خواهد بود که محتوای دلخواه شما را به شکل دینامیک نمایش دهد.
📄 مثال: اضافه کردن جاوااسکریپت به یک صفحه HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!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> |
🖥️ خروجی در مرورگر:
|
1 2 |
Today's date is (تاریخ امروز) |
کد بالا به‌راحتی یک تیتر <h1> حاوی تاریخ روز جاری را به شما نمایش می‌دهد. بدون هیچ پیچیدگی!
🔧 استفاده از فایل جداگانه برای جاوااسکریپت
اگر نیاز دارید که کدهای جاوااسکریپت شما دوره‌ای و یا در چندین صفحه مورد استفاده قرار گیرد، بهترین راه استفاده از فایل‌های جداگانه است. به همین صورت، شما می‌توانید کدهای خود را به راحتی مدیریت کنید.
✅ مزایای استفاده از فایل‌های جداگانه:
- خوانایی بیشتر: کدهای HTML و جاوااسکریپت از هم جدا می‌شوند.
- مدیریت آسان: کدهای شما در یک فایل واحد قرار می‌گیرند و قابلیت نگهداری ساده‌تری دارند.
- سرعت بارگذاری بالاتر: مرورگرها فایل‌های جاوااسکریپت را کش می‌کنند، پس برای بارگذاری صفحات بعدی سریع‌تر عمل می‌کنند.
🔥 ساخت پروژه با فایل‌های جداگانه
برای ساختاردهی بهتر پروژه، از فایل‌های مجزا برای HTML، CSS و جاوااسکریپت استفاده کنید. ساختار پروژه‌تان به این صورت خواهد بود:
|
1 2 3 4 5 6 7 |
project/ ├── css/ │ └── style.css ├── js/ │ └── script.js └── index.html |
1️⃣ تنظیم فایل index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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> |
- فایل CSS از طریق تگ
<link>در<head>فراخوانی شده است. - جاوااسکریپت در انتهای
<body>قرار دارد تا قبل از اجرا، صفحه کامل بارگذاری شود.
2️⃣ ایجاد فایل script.js در پوشه js/:
|
1 2 3 |
let d = new Date(); document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"; |
این کد به‌سادگی تاریخ روز جاری را در قالب یک تیتر <h1> به کاربر نمایش می‌دهد.
3️⃣ ایجاد فایل style.css در پوشه css/:
|
1 2 3 4 5 6 7 8 9 |
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; } |
- پس‌زمینه صفحه به رنگ آبی تغییر یافته است.
- رنگ متن تیتر سفید و فونت آن به Arial تنظیم شده است.
🚀 اجرای پروژه
با بارگذاری فایل index.html در مرورگر، شاهد صفحه‌ای خواهید بود که به‌طور خودکار تاریخ روز جاری را در قالب تیتر <h1> به رنگ سفید و پس‌زمینه آبی نمایش می‌دهد.
🏁 نتیجه‌گیری
- استفاده از فایل‌های جاوااسکریپت جداگانه به شما کمک می‌کند تا مدیریت بهتری روی کدهای خود داشته باشید.
- قرار دادن اسکریپت‌ها در انتهای
<body>باعث بهبود عملکرد و سرعت بارگذاری صفحه می‌شود. - با جداسازی کدهای استایل در فایل
style.css، ساختار صفحه شما واضح و منظم باقی می‌ماند.
💡 نکته کاربردی: این ساختار باعث می‌شود که از تکرار کد در صفحات مختلف جلوگیری کرده و کارایی پروژه‌های بزرگ شما به شدت افزایش یابد.
🎯 چالش برای شما:
آیا می‌توانید این کد را طوری تغییر دهید که تاریخ به‌طور خودکار بر اساس منطقه زمانی کاربر نمایش داده شود؟ 🕒
سعی کنید و نتیجه را با ما به اشتراک بگذارید! 👇
سوالات متداول درباره جاوا اسکریپت و HTML
چگونه کد جاوا اسکریپت را در HTML قرار دهم؟
برای قرار دادن کد جاوا اسکریپت در HTML، باید از تگ <script> استفاده کنید. کد جاوا اسکریپت می‌تواند در داخل تگ <script> درون فایل HTML نوشته شود.
|
1 2 3 4 5 6 |
<script> // کد جاوا اسکریپت در اینجا قرار می‌گیرد alert("سلام دنیا!"); </script> |
چگونه یک فایل جاوا اسکریپت را به HTML لینک کنم؟
برای لینک کردن یک فایل جاوا اسکریپت به HTML، از ویژگی src در تگ <script> استفاده کنید تا مسیر فایل جاوا اسکریپت را مشخص کنید.
|
1 2 3 |
<script src="path/to/yourfile.js"></script> |
چگونه یک اسکریپت جاوا اسکریپت را از HTML اجرا کنم؟
<script> را در بخش‌های مختلف صفحه HTML قرار دهید. کد جاوا اسکریپت در داخل تگ قرار می‌گیرد و به طور خودکار اجرا می‌شود.کجا باید تگ <script> را در HTML قرار دهم؟
تگ <script> می‌تواند در داخل بخش <head> یا <body> قرار گیرد. با این حال، معمولاً بهتر است اسکریپت‌ها را در انتهای <body> قرار دهید تا بارگذاری صفحه سریع‌تر باشد.
|
1 2 3 4 5 |
<body> <script src="script.js"></script> </body> |
چگونه کد اسکریپت را در HTML نمایش دهم؟
برای نمایش کد اسکریپت در HTML به‌صورت متن، باید از تگ <pre> یا <code> استفاده کنید و کد را درون آن قرار دهید تا به صورت منظم و متنی نمایش داده شود.
|
1 2 3 4 5 6 7 |
<pre> <code> alert("Hello World!"); </code> </pre> |
آیا می‌توانم یک اسکریپت را در هر جایی از HTML قرار دهم؟
<body> یا درون تگ <head> هستند.مکان درست قرار دادن جاوا اسکریپت کجاست؟
به‌طور معمول، برای اطمینان از بارگذاری سریع‌تر صفحه، جاوا اسکریپت‌ها باید در انتهای تگ <body> قرار گیرند. اگر از ویژگی async یا defer استفاده کنید، می‌توانید اسکریپت‌ها را در تگ <head> قرار دهید.
|
1 2 3 |
<script src="script.js" defer></script> |
چگونه یک اسکریپت را به‌عنوان متن در HTML نمایش دهم؟
برای نمایش یک کد جاوا اسکریپت به‌عنوان متن (برای مثال در آموزش‌ها یا نمایش کد)، از تگ <pre> و <code> استفاده کنید. این تگ‌ها کد را به‌صورت قالب‌بندی‌شده و متنی نمایش می‌دهند.
|
1 2 3 4 5 6 7 |
<pre> <code> alert("Hello World!"); </code> </pre> |
تفاوت بین link و script چیست؟
تگ <link> برای پیوند دادن منابع خارجی مانند فایل‌های CSS به صفحه HTML استفاده می‌شود، در حالی که تگ <script> برای گنجاندن یا لینک کردن فایل‌های جاوا اسکریپت به صفحه استفاده می‌شود.
|
1 2 3 4 |
<link rel="stylesheet" href="style.css"> <script src="script.js"></script> |
