بارگذاری جاوا اسکریپت در قالب HTML

javascript-use-html

با سلام و عرض ادب، در قسمت قبلی از این سری آموزشی آشنایی کلی با زبان جاوا اسکریپت پیدا کردیم و در این قسمت میخواهیم کد نویسی را شروع کنیم. اولین سوالی که برای ما پیش می آید این است: کد ها را کجا بنویسیم؟ در این قسمت میخواهیم مباحث مربوط به کدنویسی را پوشش دهیم.

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

اولین نکته ای که باید از جلسه ی قبل به خاطر داشته باشید این است که گفتیم جاوا اسکریپت دوست خوب HTML و CSS است و همیشه همراه آن هاست و از همین طریق به صفحات وب پویایی کم نظیری می بخشد. بنابراین جاوا اسکریپت باید کنار HTML و CSS باشد؛ این مطلب یعنی باید یا آن را مستقیما داخل سند HTML بنویسیم و یا آن را مانند فایل های CSS وارد HTML کنیم. برای این کار روش های مختلفی وجود دارد که به بررسی آن ها و توضیح خوبی ها و بدی های هر یک میپردازیم.

نکته ی مهم: تصور نکنید جاوا اسکریپت فقط برای کار با HTML و CSS است. این زبان بسیار قدرتمند بوده و حتی امروزه می توان از آن در سمت سرور و برای پردازش نیز استفاده کرد! از جمله پیاده سازی های موجود در این زمینه، بسیار مشهور Node.js است. برای اطلاعات بیشتر روی این لینک از ویکی‌پدیا کلیک کرده و یا در اینترنت سرچ کنید.

استفاده مستقیم جاوا اسکریپت در HTML

اگر بخواهید به طور مستقیم کد های جاوا اسکریپت خود را در سند HTML بیاورید باید آن ها را بین تگ های <script></script> قرار دهید. مثال زیر یک نمونه کد جاوا اسکریپت است:

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

فعلا به محتوای کد ها کاری نداشته باشید، در آینده به توضیح کد ها هم خواهیم رسید. چیزی که از شما می خواهم توجه به روش پیاده سازی کد ها در HTML است. مثلا کد زیر نشان دهنده ی یک سند HTML ساده + تگ های <script></script> داخل آن است.

<!DOCTYPE html>
<html>
<body>

<p id="demo">Hi.</p>

<script>
// کد جاوا اسکریپت در این قسمت قرار خواهد گرفت.
</script> 

</body>
</html>

این روش برای کد های کوتاه جواب گو و مناسب است اما اگر کد های شما آشفته شوند و یا حجم آن ها زیاد شود (که در 90 درصد مواقع این طور خواهد شد) این روش اصلا روش خوبی نیست چرا که کد های جاوا اسکریپت زیر کد های HTML دفن می شوند و ویرایش آن ها برای خود آشفته بازاری است.

نکته: ممکن است در نسخه های قدیمی جاوا اسکریپت تگ ها را به شکل <script type="text/javascript"> دیده باشید. امروزه نیازی به اضافه کردن ویژگی type نیست چرا که جاوا اسکریپت زبان اسکریپت نویسی پیش فرض برای HTML است.

قبل از ادامه ی مطلب بهتر است دو نکته را بدانید:

تعریف توابع و رویداد ها در جاوا اسکریپت: توابع و رویداد ها (به ترتیب Function و Event) در جاوا اسکریپت مجموعه کد هایی هستند که در هنگام صدا زده شدن (call) اجرا می شوند و کار خاصی انجام می دهند. برای شما مثالی میزنم؛ یک رویداد مانند کلیک کردن روی فلان دکمه را در نظر بگیرید. ما می توانیم با جاوا اسکریپت به مرورگر بگوییم اگر کاربر روی فلان دکمه کلیک کرد، پنجره را بچرخان، پیام تبریک نمایش بده، صفحه را ببند و ... . در قسمت های بعدی به طور مفصل به سراغ توابع و رویداد ها خواهیم رفت.

منظور از اسکریپت: در زمینه های مختلف می تواند معانی متفاوتی داشته باشد اما در این دوره ی آموزشی زمانی که می گوییم اسکریپت، منظور ما فایل جاوا اسکریپت شماست که دارای کد های جاوا اسکریپت است.

میدانیم که اگر قصد استفاده ی مستقیم کد ها را در HTML داشته باشیم، باید آن ها را در تگ های <script> قرار دهیم اما خود تگ های <script> را کجا بگذاریم؟

اسکریپت های شما می توانند مانند فایل های CSS در HTML و در تگ <head> بارگذاری شوند، البته تنها به این محدود نیستند. شما همچنین می توانید اسکریپت های خود را در تگ <body> نیز قرار دهید.

مثال زیر یک سند HTML را نشان می دهد که یک تابع جاوا اسکریپت را در تگ <head> خود قرار داده است. این تابع زمانی صدا زده می شود که کاربر روی دکمه ی خاصی کلیک کند.

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

در مثال بعدی می بینیم که می توان این کد را داخل تگ <body> نیز قرار داد:

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>

استفاده غیر مستقیم (خارجی) در HTML

شما برای راحتی کار، مدیریت بهتر و مدیریت آسان تر کد های جاوا اسکریپت خود می توانید آن را در یک فایل جداگانه قرار بدهید و سپس آن فایل را در HTML بارگذاری کنید. مراحل این کار به شرح زیر است:

  1. ابتدا یک فایل خالی متنی ایجاد کنید.
  2. برای فایل متنی خود نامی انتخاب کنید و پسوند آن را js. قرار دهید.
  3. کد های خود را در آن بنویسید

می توانید این مراحل را در تصویر زیر مشاهده کنید.

txt to JS

در مرحله ی آخر، در ویژگیِ src تگ های <script> آدرس فایل خود را قرار دهید:

<script src="myCode.js"></script>

این اسکریپت، دقیقا مانند نوشتن مستقیم کد در HTML، میتواند در تگ های <head> و <body> استفاده شود.

نباید در کد هایِ داخلِ فایل از تگ <script> استفاده کنید. ما هنگام بارگذاری این کار را انجام داده ایم. تگ های <script> تنها زمانی استفاده می شوند که قرار باشد جاوا اسکریپت داخل HTML قرار بگیرد.

فواید استفاده از اسکریپت های external (نوشتن کد ها در یک فایل جداگانه):

  • جدا نگه داشتن HTML و JavaScript
  • ساده تر بودن ویرایش و مدیریت کد ها
  • فایل های کش شده ی جاوا اسکریپت می توانند سرعت وب سایت شما را افزایش دهند.

یادتان باشد که با این روش می توانید هر تعداد فایل جاوا اسکریپت که دوست داشتید به سند HTML خود اضافه کنید.

سوال بسیار مهم و نتیجه گیری این جلسه:

با همه ی این اوصاف، آیا تفاوتی دارد که فایل ها یا کد های جاوا اسکریپت خود را در کدام تگ قرار دهیم؟

پاسخ بله است! محل بارگذاری کد های جاوا اسکریپت اهمیت بسیار بالایی دارد! توضیح این مسئله در مقاله ای که قبلا نوشته ام موجود است. این مقاله را از لینک زیر حتما مطالعه کنید چرا که قسمت مهمی از درس ما در این جلسه مربوط به همین است:

این مقاله به شما کمک میکند تا نحوه ی اجرای فایل های مختلف در سند HTML را درک کنید. در قسمت های بعدی توضیحات بیشتری ارائه خواهم داد.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (4 دیدگاه)

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

محمد
01 مرداد 1399
همه جا آدمو جر میدم موقع آموزش برنامه نویسی اینجا ولی خیلی خوب و را حتی آموزش میده دمتون گرم

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

محسن آستانه
11 اسفند 1398
سلام امیر جان خسته نباشی مطالبی که قرار میدی نور علی نور هست فقط یک مشکلی داره و اون این که تراز افقی جاستیفای نداره! اگه تراز بندیشو همسان بکنی از دو طرف آدم کیف میکنه مطالبو بخونه! دمت گرم

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

سید محمد
11 خرداد 1398
مرسی دوست خوبم ❤

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

سعید
04 خرداد 1398
مطالب جاوا اسکریپت به این سادگی و روشنی جایی ندیده بودم ممنون

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

امیر زوارمی
09 خرداد 1398
سلام دوست عزیز، خیلی خوشحالم که مورد توجه شما قرار گرفته!

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