ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript
توصیه میکند:
بارگذاری جاوا اسکریپت در قالب HTML
21 دی 1397
درس 2 از سری آموزش جاوا اسکریپت | Javascript
با سلام و عرض ادب، در قسمت قبلی از این سری آموزشی آشنایی کلی با زبان جاوا اسکریپت پیدا کردیم و در این قسمت میخواهیم کد نویسی را شروع کنیم. اولین سوالی که برای ما پیش می آید این است: کد ها را کجا بنویسیم؟ در این قسمت میخواهیم مباحث مربوط به کدنویسی را پوشش دهیم.
این دوره برای افراد مبتدی نیز مناسب است و در آن از پایه شروع کرده و تا پیشرفته جلو خواهیم رفت. اگرچه دانش قبلی به درک مطالب توسط شما کمک میکند اما نیازی به هیچ پیش زمینه ای به جز دانستن پایه ی 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 بارگذاری کنید. مراحل این کار به شرح زیر است:
- ابتدا یک فایل خالی متنی ایجاد کنید.
- برای فایل متنی خود نامی انتخاب کنید و پسوند آن را js. قرار دهید.
- کد های خود را در آن بنویسید
می توانید این مراحل را در تصویر زیر مشاهده کنید.
در مرحله ی آخر، در ویژگیِ src تگ های <script> آدرس فایل خود را قرار دهید:
<script src="myCode.js"></script>
این اسکریپت، دقیقا مانند نوشتن مستقیم کد در HTML، میتواند در تگ های <head> و <body> استفاده شود.
نباید در کد هایِ داخلِ فایل از تگ <script> استفاده کنید. ما هنگام بارگذاری این کار را انجام داده ایم. تگ های <script> تنها زمانی استفاده می شوند که قرار باشد جاوا اسکریپت داخل HTML قرار بگیرد.
فواید استفاده از اسکریپت های external (نوشتن کد ها در یک فایل جداگانه):
- جدا نگه داشتن HTML و JavaScript
- ساده تر بودن ویرایش و مدیریت کد ها
- فایل های کش شده ی جاوا اسکریپت می توانند سرعت وب سایت شما را افزایش دهند.
یادتان باشد که با این روش می توانید هر تعداد فایل جاوا اسکریپت که دوست داشتید به سند HTML خود اضافه کنید.
سوال بسیار مهم و نتیجه گیری این جلسه:
با همه ی این اوصاف، آیا تفاوتی دارد که فایل ها یا کد های جاوا اسکریپت خود را در کدام تگ قرار دهیم؟
پاسخ بله است! محل بارگذاری کد های جاوا اسکریپت اهمیت بسیار بالایی دارد! توضیح این مسئله در مقاله ای که قبلا نوشته ام موجود است. این مقاله را از لینک زیر حتما مطالعه کنید چرا که قسمت مهمی از درس ما در این جلسه مربوط به همین است:
این مقاله به شما کمک میکند تا نحوه ی اجرای فایل های مختلف در سند HTML را درک کنید. در قسمت های بعدی توضیحات بیشتری ارائه خواهم داد.
ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript
توصیه میکند:
دوره‌های آموزشی مرتبط
مقالات مرتبط
22 اردیبهشت 1401
16 اردیبهشت 1401
21 اسفند 1400
17 اسفند 1400
16 اسفند 1400
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.
در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.