در قسمت قبل به طور کلی با جاوا اسکریپت و کار برد های آن آشنا شدیم. در این جلسه با نحوه نوشتن و افزودن کد های جاوا اسکریپت در صفحه وب خود آشنا می شویم.
کدهای جاوا اسکریپت منطق را به دنیای اچ‌تی‌ام‌ال آورده است. HTML و CSS زبان‌های نشانه‌گذاری هستند و قابلیت کافی برای محاسبات منطقی ندارند؛ به‌عنوان مثال نمی‌توان از این دو انتظار داشت تا دو عدد را با هم جمع کنند و نتیجه را به کاربر نمایش دهند. نمی‌توان از آن‌ها انتظار داشت که ورودی‌های کاربر در یک فرم ثبت‌نام را چک کنند و درست یا غلط بودن اطلاعات وارد شده را مورد بررسی کنند؛ اما جاوا اسکریپت می‌تواند تمام این کارها و کارهای بسیار پیچیده‌تر را انجام دهد.
چگونه می‌توانیم از جاوا اسکریپت در صفحه وب خود استفاده کنیم
برای نوشتن کدهای جاوا اسکریپت نیاز به هیچ ابزار خاصی نیست. تنها یک صفحه‌ی اچ‌تی‌ام‌ال و یک تگ مخصوص کدهای جاوا اسکریپت به نام <script> لازم داریم. در واقع کدهای جاوا اسکریپت در داخل این تگ به صورت زیر نوشته می‌شوند. فقط کافی است تا این تگ را بین تگ های html باز کنیم.
<script> کد جاوا اسکریپت </script>
مرورگر، در هنگام باز شدن صفحه، تمامی کدهای نوشته شده در این تگ‌ها را به عنوان کد جاوا اسکریپت شناسایی کرده و آن‌ها را خط به خط اجرا خواهد کرد.
درست است که ما می توانیم کد های جاوا اسکریپت را در هر جای صفحه خواستیم با استفاده از تگ مخصوص اسکریپت بنویسیم، اما این امر یکی باعث به ریختگی کدها و شلوغ شدن صفحه می شود و دیگر این که خطایابی آن کاری پیچیده و خسته کننده است.
برای نوشتن کد های جاوا اسکریپت دو راه وجود دارد:
- باز کردن تگ <script></script> در داخل صفحه‌ی اچ‌تی‌ام‌ال و نوشتن کدهای جای جاوا اسکریپت درون این آن
- نوشتن کدهای جاوا اسکریپت در یک فایل مجزا با فرمت js و سپس صدا زدن این فایل توسط یک تگ script در صفحه‌ی اچ‌تی‌ام‌ال
روش اول
هنگامی که حالت اول را انتخاب کرده باشید و بخواهید کدهای جاوا اسکریپت را درون همان صفحه‌ی اچ‌تی‌ام‌ال بنویسید، باید دقت کنید که این کدها در کجای صفحه قرار دارند. به‌طور کلی دو حالت عمومی برای این وضعیت وجود دارد:
حالت اول: بالای صفحه و در بین تگ <head></head> :
جاوا اسکریپت را می‌توان در بین تگ <head></head> نوشت. چون مرورگر کدهای صفحه را خط به‌خط و از بالای صفحه شروع می‌کند؛ بنابراین قبل از اینکه هیچ چیزی در صفحه‌ی شما بارگذاری شود، ابتدا کدها خوانده و اجرا می‌شوند.
در صورتی که کدهای ما هیچ کاری با المان‌های HTML درون صفحه نداشته باشند، این موضوع ایراد خاصی ایجاد نمی‌کند. هر چند در صورت طولانی وسنگین بودن حجم محاسبات یا خواندن فایل از سایت‌های دیگر در این بخش، ممکن است با کاهش نامحسوسی در سرعت لود صفحه مواجه شویم؛ اما به‌طور کلی می‌توانیم کدهای جاوا اسکریپت را در بالای صفحه بنویسیم. اگر به هر دلیلی بخواهید از المان‌های اچ‌تی‌ام‌ال در جاوا اسکریپت استفاده کنید و روی آن‌ها تغییر ایجاد کنید، شک نکنید که آن موقع با یک ارور نامشخص روبه‌رو می‌شوید؛ ایرادی که شاید ساعت‌ها شما را مشغول خود کند. اما این ایراد چیست؟
همان‌طور که گفته شد، مرورگر کدها را از بالا به پایین می‌خواند. پس اگر شما در بالای صفحه کدی را بنویسید که در آن از المان‌های پایین صفحه به هر شکلی استفاده شده (مثلا یک تگ اچ‌تی‌ام‌ال انتخاب شده) چون مرورگر به آن تگ هنوز نرسیده است، آن را نمی‌شناسد و برای شما خطا بر می‌گرداند. مثال را ببینید:
<!DOCTYPE html>
<html>
<head>
<title> آموزش جاوا اسکریپت با پردیس وردپرس</title>
<script>
document.getElementById("after-head-element").style.color = "red"
</script>
</head>
<body>
<p id="after-head-element">این پاراگراف، بعد از اسکریپت ما توسط مرورگر خوانده می‌شود
بنابراین در بالای صفحه که کد اسکریپت نوشته‌ایم این المان هنوز توسط مرورگر به وجود نیامده
و در نتیجه تغییرات ما اعمال نخواهد شد
و جاوا اسکریپت ارور نامشخص بودن المان را برمی گرداند</p>
<p>آموزش جاوا اسکریپت </p>
</body>
</html>
در مثال بالا ما در جاوا اسکریپت بالای صفحه، المان اچ‌تی‌ام‌ال با آی‌دی after-head-element را انتخاب کرده‌ایم. سپس به کمک جاوا اسکریپت دستور سی‌اس‌اس رنگ را روی این المان اِعمال کرده‌ایم؛ البته توضیح جامع و کامل و نحوه‌ی اعمال تمام این تغییرات و انتخاب المان‌ها توسط جاوا اسکریپت را جلسات آینده خواهیم گفت، پس می‌خواهیم که شما تنها به اصل موضوع این جلسه توجه کنید.
جاوا اسکریپت، توسط مرورگر نمایش (رندر) داده می‌شود. پس وقتی در حال نوشتن کد هستیم، این المان وجود ندارد که بخواهیم آن را انتخاب کنیم؛ بنابراین در این حالت با یک خطا با مقدار undefined بودن المان روبه‌رو خواهیم شد که ما را از قافله عقب خواهد انداخت. برای عدم بروز این مشکل دو راه پیش رو داریم. راه ساده‌تر این است که زمانی که کدهایمان قرار است با اچ‌تی‌ام‌ال درگیر باشند، آن‌ها را در تگ head بالای صفحه ننویسیم. راه‌حل دیگر نیز استفاده از دستورات جاوا اسکریپت برای اطمینان از لود شدن کامل اچ‌تی‌ام‌ال در صفحه است. از آنجایی که این راه‌حل، پیش‌نیازهای بسیاری نظیر eventListener-ها دارد ناچاریم تا آن را به جلسات بعدی موکول کنیم.
حالت دوم: بین تگ Body:
شما می‌توانید اسکریپت‌هایتان را در هر کجایی از تگ <body></body> نیز بنویسید. در واقع می‌توانید هر وقت که لازم شد یک تگ script در وسط اچ‌تی‌ام‌ال صفحه باز کنید و کدهایتان را درون آن بنویسید. ولی بهترین کار این است که تگ اسکریپت و کدهای جاوا اسکریپت خود را دقیقا بعد از تمامی تگ‌های اچ‌تی‌ام‌ال (قبل از بسته‌شدن تگ body) بنویسید. ولی چرا این کار روش بهتری محسوب می‌شود؟
منظم شدن کدها یکی دیگر از مزایای به‌کارگیری جاوا اسکریپت در پایین صفحه است. شما می‌توانید بی‌نهایت تگ اسکریپت در هر جای صفحه که خواستید و در بین اچ‌تی‌ام‌ال خود باز کنید؛ ولی این موضوع تنها سبب شلوغ شدن صفحه و ناخوانا شدن کدهایتان می‌شود.
جلوگیری از مشکل عدم شناخت تگ‌های استفاده شده: همان‌طور که گفتیم مرورگر از بالا به پایین صفحه حرکت می‌کند. پس تگ‌هایی که در بالا هستند، در ابتدا و سپس تگ‌های پایین‌تر خوانده می‌شوند. پس بدین ترتیب مشکلی که در حالت اول در مورد ناشناخته بودن اچ‌تی‌ام‌ال صفحه داشتیم در این حالت به وجود نمی‌آید.
روش دوم در قسمت بعدی آموزش …