اضافه کردن جاوااسکریپت به صحفه وب

با دوستان خود به اشتراک بگذارید

اشتراک گذاری در facebook
اشتراک گذاری در linkedin
اشتراک گذاری در twitter
اشتراک گذاری در email

جاوا اسکریپت به روشی مشابه CSS به صفحه HTML اضافه می‌شود. با این که CSS از عنصرهای <link> برای به‌کارگیری استایل‌شیت‌های خارجی و از عنصرهای <style> برای اعمال استایل‌شیت‌های داخلی روی کد HTML استفاده می‌کند؛ اما جاوا اسکریپت تنها به یک روش یعنی با استفاده از تگ <script> روی کد HTML پیاده‌سازی می‌شود. در ادامه در مورد روش کار آن صحبت خواهیم کرد.

جاوا اسکریپت داخلی:

پیش از هر چیز باید یک کپی محلی از فایل مثال به نام apply-javascript.html ایجاد کنید. آن را درون یک دایرکتوری مناسب در رایانه خود ذخیره کنید. فایل را در مرورگر وب خود و همچنین در یک ویرایشگر متنی باز کنید. می‌بینید که HTML یک صفحه وب ساده شامل یک دکمه قابل کلیک می‌سازد. سپس به نرم‌افزار ویرایشگر متنی خود رفته و کد زیر را در بخش head و درست پیش از تگ بستن وارد کنید:

اینک کد جاوا اسکریپت را درون عنصر اضافه می‌کنیم تا صفحه ما حالت جذاب‌تری بیابد. کد زیر را درست زیر خط «JavaScript goes here//» اضافه کنید:

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

اگر کد شما کار نکرد باید به ابتدای مراحل رفته و همه موارد را بررسی کنید. آیا یک کپی محلی از فایل html. ایجاد کرده‌اید؟ آیا عنصر را درست پیش از تگ <head/> وارد کرده‌اید؟ آیا کد جاوا اسکریپت را به درستی اضافه کرده‌اید؟ جاوا اسکریپت به حروف کوچک و بزرگ حساس است و باید ساختار کد را دقیقاً همان طور که آمده است وارد کنید، چون در غیر این صورت کار نمی‌کند.

جاوا اسکریپت خارجی:

مثال قبلی ما به خوبی کار می‌کند؛ اما اگر بخواهیم کد جاوا اسکریپت خود را در فایل جداگانه‌ای قرار دهیم چطور؟ این وضعیت را در ادامه بررسی می‌کنیم. ابتدا یک فایل جدید در همان دایرکتوری که فایل HTML مثالمان قرار دارد، ایجاد کنید. نام آن را script.js تعیین کنید و مطمئن شوید که دارای پسوند js. است تا سیستم بتواند آن را به عنوان یک فایل جاوا اسکریپت تشخیص دهد. عنصر کنونی را با عبارت زیر عوض کنید:

.درون فایل script.js، اسکریپت زیر را وارد کنید:

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

دستگیره‌های درون‌خطی (Inline Handlers) جاوا اسکریپت:

در برخی موارد با برخی کدهای جاوا اسکریپت مواجه می‌شوید که درون کدهای HTML قرار دارند. این کدها مانند زیر هستند:

این وضعیت نیز دقیقاً همان کارکردی که دو بخش قبلی ارائه می‌کردند، در اختیار ما قرار می‌دهد؛ به جز این که عنصر این بار شامل یک دستگیره (handler) درون‌خطی به نام onclick است که باعث می‌شود وقتی دکمه کلیک می‌شود ، تابع مربوط اجرا شود.

با این حال بهتر است از این رویه برنامه‌نویسی اجتناب کنید. این یک رویه نامناسب است و باعث آلودگی HTML به کدهای جاوا اسکریپت می‌شود و کارایی لازم را ندارد. شما باید خصوصیت “()onclick=”createParagraph را هر بار که می‌خواهید کد جاوا اسکریپت را روی دکمه‌ای اعمال کنید قید نمایید.

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

این وضعت ممکن است کمی طولانی‌تر از خصوصیت onclick باشد؛ اما روی همه دکمه‌ها کار می‌کند و مهم نیست که چند دکمه روی صفحه وجود داشته باشد و یا چه تعداد حذف یا اضافه شوند. در هر صورت نیازی به تغییر دادن کد جاوا اسکریپت وجود ندارد.

تلاش کنید کد نسخه apply-javascript.html را ویرایش کرده و چند دکمه به فایل اضافه کنید. وقتی که صفحه را مجدداً بارگذاری می‌کنید، خواهید دید که همه دکمه‌ها در هنگام کلیک شدن یک پاراگراف ایجاد می‌کنند.

راهبردهای بارگذاری اسکریپت:

چند مشکل در زمینه بارگذاری به‌هنگام اسکریپت‌ها وجود دارند و مصداق این ضرب‌المثل است که هیچ چیز به آن سادگی که به نظر می‌رسد نیست. یک مشکل رایج زمانی است که همه کد HTML روی یک صفحه به ترتیبی که به نظر می‌رسد، بارگذاری می‌شود. اگر از کد جاوا اسکریپت برای دستکاری عناصر روی صفحه (یا به عبارت دقیق‌تر مدل شیء سند) استفاده کنید، در صورتی که جاوا اسکریپت پیش از HTML که قرار است روی آن کار کند، بارگذاری شده باشد، کد جاوا اسکریپت عمل نخواهد کرد.

در مثال‌های فوق در نمونه کدهای داخلی و خارجی، جاوا اسکریپت در بخش head سند یعنی پیش از آن که متن (body) صفحه بارگذاری و تحلیل شود، بارگذاری و اجرا می‌شود. این وضعیت موجب بروز یک خطا می‌شود و از این رو باید از برخی سازه‌ها برای رفع آن بهره بگیریم. در مثال کد داخلی می‌توانید این ساختار را پیرامون کد مشاهده کنید:

این یک «شنونده رویداد» (event listener) است که منتظر شنیدن رویداد «DOMContentLoaded» است. رویداد فوق نشان می‌دهد که متن HTML صفحه بارگذاری و تحلیل شده است. کد جاوا اسکریپت درون این بلوک تا زمانی که این رویداد رخ ندهد، اجرا نخواهد شد و به این ترتیب از بروز خطا جلوگیری می‌شود.

در مثال خارجی صفحه وب از یک ویژگی مدرن‌تر جاوا اسکریپت برای حل مسئله استفاده کرده‌ایم که خصوصیت async است و به مرورگر می‌گوید که هنگامی که به تگ رسید، اقدام به دانلود کردن محتوای HTML بکند.

در این حالت هم اسکریپت و هم HTML به طور همزمان بارگذاری می‌شوند و کد کار می‌کند.

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

یک راه‌حل به سبک قدیمی برای این مسئله که پیش‌تر غالباً استفاده می‌شد، این است که عنصر script در بخش انتهایی body یعنی پیش از تگ بسته شدن قرار می‌گیرد. بدین ترتیب پس از این که همه کد HTML تحلیل شود بارگذاری خواهد شد. مشکل این راه‌حل آن است که بارگذاری/تحلیل اسکریپت تا زمانی که HTML DOM به طور کامل بارگذاری نشده است، متوقف خواهد شد. در سایت‌های بزرگ‌تر که کدهای جاوا اسکریپت زیادی دارند، این امر موجب می‌شود که مشکلات جدی عملکردی بروز یابند و سایت کُند شود. به همین دلیل خصوصیت async به مرورگرها اضافه شده است.

async و defer:

دو روش برای دور زدن مشکل مسدود شدن اسکریپت وجود دارد که async و defer نام دارند. در ادامه تفاوت‌های این دو روش را بررسی می‌کنیم.

در روش Async اسکریپت بدون مسدودسازی رندر شدن صفحه بارگذاری می‌شود و به محض این که دانلود اسکریپت پایان یابد اجرا خواهد شد. در این روش تضمینی نیست که اسکریپت با ترتیب خاصی اجرا شود و تنها مطمئن هستیم که موجب متوقف شدن نمایش بخش‌های دیگر صفحه نمی‌شود. بهتر است زمانی از async استفاده شود که اسکریپت‌های یک صفحه به طور مستقل از هم اجرا می‌شوند و هیچ وابستگی به هم ندارند.

برای نمونه اگر عناصر اسکریپت زیر را در یک صفحه داشته باشیم:

نمی‌توانیم روی ترتیب بارگذاری اسکریپت‌ها تکیه کنیم. jquery.js ممکن است پیش یا پس از script2.js و script3.js بارگذاری شود و در این صوت هر تابعی که در آن اسکریپت‌ها به jquery وابسته باشد، خطایی ایجاد خواهد کرد، زیرا jquery در زمان اجرای اسکریپت هنوز تعریف نشده است.

Defer باعث می‌شود که اسکریپت‌ها به همان ترتیبی که در صفحه ظاهر می‌شوند اجرا شوند و به محض این که اسکریپت و محتوا دانلود شوند، شروع به اجرای آن می‌کند.

همه اسکریپت‌های دارای خصوصیت defer به همان ترتیبی که روی صفحه ظاهر شده‌اند، بارگذاری می‌شوند. بدین ترتیب در مثال دوم می‌توانیم مطمئن باشیم که jquery.js پیش از script2.js و script3.js و script2.js پیش از script3.js بارگذاری خواهد شد.

اگر بخواهیم جمع‌بندی بکنیم:

  • اگر اسکریپت‌ها به همدیگر وابسته هستند آن‌ها را با استفاده از defer بارگذاری کنید و عنصر پیرامون آن‌ها را به همان ترتیبی که می‌خواهید مرورگر اجرا کند، در صفحه وب درج کنید.
  • اگر اسکریپت‌ها مستقل از هم اجرا می‌شوند و هیچ وابستگی به هم ندارند، می‌توان از async استفاده کرد.

توضیحات کد (Comments):

برای کدهای جاوا اسکریپت نیز همانند HTML و CSS می‌توان توضیح یا کامنت نوشت که مرورگر آن‌ها را اجرا نمی‌کند و صرفاً به منظور توضیح کارکرد دستورها برای توسعه‌دهندگان (و همچنین خودتان در صورتی که پس از چند ماه به کد مراجعه کردید و به خاطر نیاوردید که متدها چه کار می‌کنند) کاربرد دارد. کامنت ها بسیار مفید هستند و باید از آن‌ها همیشه و به طور خاص در اپلیکیشن‌های بزرگ استفاده کرد. دو نوع کامنت وجود دارد:

کامنت در یک خط منفرد که پس از دو علامت ممیز (//) به صورت زیر درج می‌شود:

یک کامنت چند خطی که بین دو رشته /* و */ مانند زیر درج می‌شود:

برای نمونه آخرین دموی کد جاوا اسکریپت ما با درج کامنت به شکل زیر درمی‌آید:

ایمیل خود را وارد کنید

نظر خود را با ما به اشتراک بگذارید

مطالب بیشتر

JavaScript

جاوا اسکریپت

تعریف: جاوا اسکریپت یک زبان اسکریپت‌نویسی یا برنامه‌نویسی است که امکان پیاده‌سازی چیزهای پیچیده را روی صفحات وب ممکن ساخته است. درواقع هر بار که

Flutter

ری اکت نیتیو یا فلاتر؟

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

Code dev

برنامه‌نویسی این امکان رو به شما می‌دهد تا در مورد خودِ «فکر کردن» فکر کنید و وقتی‌ هم که دیباگ می‌کنید، در مورد خودِ «یادگیری» یاد می‌گیرید.

Created by AmirHossein Torabi