![[-]](https://forum.romaak.ir/images/first18/collapse.png "[-]")
۹۶/۸/۲۷، ۱۰:۳۲ عصر
در سومین جلسه از دوره آموزشی جاوا اسکریپت، به سراغ بنیادی‌ترین ابزارهایی که برای شروع جاوا اسکریپت بدان نیاز دارید خواهیم رفت.
برای دیباگ کردن و فهمیدن اینکه کجای کدهایمان ایراد دارد، به ابزارهایی نیاز داریم که به ما بگوید کجای کد ما اشتباه بوده است؛ این ابزار خوشبختانه به‌صورت پیش‌فرض در مرورگرهای امروزی وجود دارد. در واقع همه مرورگرها به‌صورت پیش‌فرض سیستم‌هایی برای توسعه وب‌سایت دارند. این ابزارها که در حالت از دید کاربران مخفی هستند، Developer Tools نام دارند. برای نمایش ابزار مخصوص توسعه‌دهندگان در مرورگر کروم مراحل زیر را طی کنید:
نمایش ابزار توسعه‌دهندگان در مرورگر کروم
آشنایی با بخش Elements
این بخش از Developer Tools کدهای اچ‌تی‌ام‌ال و سی‌اس‌اس نهایی را نمایش می‌دهد. شما می‌توانید از طریق این بخش تمامی تگ‌های اچ‌تی‌ام‌ال صفحه را مشاهده کنید. همچنین در سمت راست این پنجره، یک بخش مخصوص نمایش CSS-ها وجود دارد که با رفتن روی هر المان، می‌توانید دستورات CSS اعمال‌شده روی آن را در سمت راست صفحه و در بخش سی‌اس‌اس‌ها، مشاهده کنید.
جالب است بدانید تمامی CSS-ها و HTML-های صفحه قابل تغییر هستند و شما می‌توانید همانجا در تب Elements، آن‌ها را به دلخواه خود تغییر دهید و تغییرات خود را به‌صورت زنده و لحظه‌ای مشاهده کنید. البته این تغییرات تنها در مرورگر شما اجرا میشود و در سایت اصلی به هیچ عنوان تغییری ایجاد نمی‌شود. همچنین با هر بار Refresh و بارگذاری مجدد صفحه، تمام تغییرات شما نیز از بین خواهد رفت و همه چیز به حالت ابتدایی خود برخواهد گشت.
همچنین شما می‌توانید با کلیک روی المنت‌های اچ‌تی‌ام‌ال صفحه در صورت لزوم آن‌ها را تغییر دهید یا کپی یا حذف کنید.
آشنایی با بخش Console
اینجا همانجایی است که ما با آن بسیار سر و کار خواهیم داشت. کنسول مرورگر یکی از پرکاربردترین بخش‌هایی است که در جاوا اسکریپت بدان نیاز خواهید داشت. این کنسول شما را از خطاها و مشکلات کدهای جاوا اسکریپت آگاه می‌کند و اطلاعات دقیق ارورها و خطاهای جاوا اسکریپتی در کد شما را اعلام می‌کند.
همچنین شما می‌توانید پیغام‌های دلخواه را در جاوا اسکریپت بنویسید و این پیغام‌ها را در کنسول مرورگر نمایش دهید (اصطلاحا چاپ کنید). این کار توسط دستور console.log انجام میشود. بعدا این دستور را با هم استفاده خواهیم کرد.
همچنین شما می‌توانید در محیط کنسول، به‌صورت ریل تایم کد جاوا اسکریپت بنویسید و این کدها را همان جا اجرا کنید. برای مثال ما می‌توانیم از دستور alert جاوا اسکریپت به‌صورت مستقیم در کنسول استفاده کنیم. برای این کار دستور زیر را در کنسول مرورگر کپی کنید و اینتر بزنید.
همانطور که مشاهده میکنید، دستور alert در صفحه فعلی اجرا میشود.
آشنایی با بخش Network
این تب در واقع نمایش‌دهنده وضعیت تعامل شما با سرورهای سایت است. در واقع تمامی درخواست‌های ارسال‌شده به سرور و وضعیت و پاسخ آن‌ها در این تب قابل مشاهده است. به علت اینکه در این آموزش ما به سرور وصل نخواهیم شد، وارد جزئیات این تب نخواهیم شد.
شبیه‌سازی موبایل
یکی دیگر از ابزارهای کاربردی که در بخش توسعه‌دهندگان مرورگر قرار دارد، امکان شبیه‌سازی موبایل برای چک کردن سایت روی آن است. برای این کار، کافی است روی آیکون موبایل کلیک کنید و از آنجا سایزهای مختلف را انتخاب کنید. همچنین می‌توانید از لیست دستگاه‌های موجود پیش‌فرض، یک دستگاه را انتخاب کنید و سایت را در ابعاد صفحه نمایش همان دستگاه ببینید.
روش‌هایی ساده برای نمایش خروجی کدهای جاوا اسکریپت
روش اول - پنجره alert یا پنجره اخطار:
پنجره alert یک پنجره ساده است و برای استفاده از آن، کافی است دستور alert() را بنویسید و پیامتان را بین پرانتز وارد کنید. همچنین باید پیام‌های خود را بین دو "" قرار دهید. علت این موضوع به نوع داده‌ها در جاوا اسکریپت بر می‌گردد که در جلسات بعدی مفصلا به آن‌ها خواهیم پرداخت. ولی برای آگاهی اولیه، علت این موضوع به اینجا ختم میشود که مقداری که ما در این جلسه در پنجره آلرت قرار است نمایش دهیم یک داده از نوع متنی است و داده‌ها متنی را باید درون علامت "" قرار دهیم تا از متغیرها و اعداد متمایز شوند.
راه حل دوم - استفاده از کنسول مرورگر:
همانطور که گفتیم، کنسول مرورگر محلی است که می‌توانید در حین نوشتن کدهای جاوا اسکریپت داده‌های دلخواه را در آن چاپ کنید. همچنین گفتیم که این کار برای رصد کردن کدها بسیار مناسب است. مثلا فرض کنید در بین خط‌های کد خود می‌خواهید بدانید که در چه وضعیتی قرار دارید. یک مقدار در کنسول چاپ میکنید که دقیقا به شما می‌گوید در آن لحظه در چه وضعیتی هستید.
برای اضافه کردن یک مقدار به کنسول یا پنجره آلرت، روش زیر را دنبال می‌کنیم:
مرحله اول: در ابتدا یک صفحه اچ‌تی‌ام‌ال ساده و یک فایل جاوا اسکریپت خالی می‌سازیم.
مرحله دوم: درون فایل جاوا اسکریپت به ترتیب زیر می‌نویسم.
مرحله سوم: فایل جاوا اسکریپت را مطابق آموزش جلسه قبل در صفحه بارگذاری می‌کنیم. سپس صفحه اچ‌تی‌ام‌ال خود را ذخیره می‌کنیم .
مرحله چهارم: حالا فایل اچ‌تی‌ام‌ال خود را در مرورگر باز کنید.
همانطور که دیدید، به محض باز شدن صفحه با پیغام "سلام من پنجره alert هستم" که در یک پنجره کوچک باز شده است مواجه خواهیم شد. این پنجره همان پنجره alert است.
همچنین اگر کلیک راست کنید و روی inspect element بزنید و وارد تب console شوید، مشاهده میکنید که پیغام «سلام من کنسول مرورگر هستم» در بخش کنسول چاپ شده است.
فایل نهایی
فایل HTML:
فایل app.js:
کنسول و آلرت کجا مورد استفاده قرار می‌گیرند؟
فرض کنید یک فایل جاوا اسکریپت هزار خطی دارید! هر چند توصیه می‌کنیم تا حد امکان نگذارید فایل‌هایتان انقدر زیاد شوند و هر کدام را به بخش‌های کوچک‌تر و فایل‌های بیشتر تقسیم کنید (بدین ترتیب نگهداری و تغییر آن‌ها ساده‌تر میشود).
در این فایل هزار خطی اگر زمانی چیزی درست کار نکند، باید ابزاری وجود داشته باشد که به شما در پیدا کردن نقطه کور کد کمک کند! مثلا ممکن است در جایی یک عدد یا متغیر را به اشتباه وارد کرده باشید و این خودش باعث بروز اشتباه در محاسبات شما شود. منظورمان از اشتباه فقط خطاهای سینتکس و قواعدی نیست! آن‌ها در کنسول مرورگر با ذکر شماره خط و محل دقیق پیدا می‌شوند. منظورمان خطاهای دیگری است که در منطق کد وجود دارد و باعث میشود خروجی مورد نظر دست پیدا نکنید. برای پیدا کردن محل چنین خطاها یا اشتباه‌هایی است که با کار بسیار سخت و حتی شاید ناممکنی روبرو هستید و آلرت و کنسول دوای درد شما است! شما به کمک این نمایشگرها می‌توانید در نقطه نقطه کد نشانه‌گذاری کنید و با هر بار اجرا، مقدار متغیرها و تغییرات در کد را در کنسول یا پنجره آلرت مشاهده کنید و متوجه شوید کجای کارتان خطا داشته است. این بزرگ‌ترین موهبتی است که بعدها به شدت از استفاده از آن خوشحال خواهید شد! پس منتظر باشید که در جلسات آینده بیشتر از این ابزارها استفاده کنیم.
نمایش کدها در المنت‌های HTML
هر چند کنسول و آلرت راه‌حل‌های سریع و دم دستی برای نمایش اطلاعات در مرورگر هستند؛ ولی بعید است که کسی پروژه‌اش را بر پایه این دو بنا کند! در واقع پروژه‌ها اصولا برای کاربران نوشته می‌شوند و از این رو باید خروجی مناسب در قالب مناسب داشته باشند. بنابراین راه درست‌تری که در دنیای واقعی و کدهای واقعی از آن استفاده خواهید کرد، نمایش نتیجه کدهای جاوا اسکریپت در صفحه اچ‌تی‌ام‌ال است!
برای نمایش کدهای جاوا اسکریپت در تگ‌های اچ‌تی‌ام‌ال روش‌های بسیاری وجود دارد که دو مورد از آن‌ها را در جلسه اول مرور می‌کنیم:
راه اول: استفاده از دستور document.write()
ساده‌ترین راه برای نمایش خروجی در اچ‌تی‌ام‌ال دستور write است. فایل اچ‌تی‌ام‌ال زیر را برای خود بسازید و آن را در مرورگر اجرا کنید.
این دستور چیست و چگونه کار می‌کند؟
کلمه اول document همان کل مجموعه اچ‌تی‌ام‌ال صفحه است. در واقع کل یک صفحه اچ‌تی‌ام‌ال در کد جاوا اسکریپت در داخل یک مجموعه به نام document ذخیره میشود. این مجموعه و هر مجموعه دیگری را می‌توان به کمک دستوراتی که به آن‌ها متد می‌گوییم، رویشان تغییر ایجاد کرد. مثلا هر صفحه اچ‌تی‌ام‌ال در کد جاوا اسکریپت به‌عنوان یک آبجکت به نام document شناخته میشود.
در واقع تمامی المنت‌های اچ‌تی‌ام‌ال در داخل جاوا اسکریپت در یک مجموعه جدا ذخیره می‌شوند. وقتی می‌خواهیم روی هر یک تغییری ایجاد کنیم، آن مجموعه را انتخاب و روی آن تغییر ایجاد می‌کنیم.
حالا به بحث قبل بر می‌گردیم. با متد write می‌توانیم هر چه می‌خواهیم در داخل این مجموعه نمایش دهیم. کافی است نام متد write را به همراه یک پرانتز که حاوی متن مورد نظر است، بنویسیم و در اینجا چاپ کنیم. همین حالا خودتان هم می‌توانید این کار را انجام دهید و متن‌های متفاوتی را چاپ کنید.
نکته قابل توجه در این بخش همان خط به خط اجرا شدن کدهای جاوا اسکریپت در مرورگر است. اگر هر کجای صفحه دستور document.write را بنویسید، همانجا دستور شما چاپ خواهد شد. برای مثال اگر سه دستور document.write را در مابین تگ‌های اچ‌تی‌ام‌ال خود بنویسید، این کدها دقیقا در همانجایی که نوشته شده‌اند چاپ خواهند شد.
کجا می‌توانیم از این دستور استفاده کنیم؟
خب حالا که با دستور document.write آشنا شده‌اید بیایید یکی از نکات کاربردی آن را که در دنیای واقعی ممکن است به کارمان بیاید استفاده کنیم! یک مثال ساده وقتی است که ما می‌خواهیم یک سی‌اس‌اس، اچ‌تی‌ام‌ال یا حتی یک فایل جاوا اسکریپت خارجی را بعد از لود شدن صفحه یا تحت شرایط خاصی به صفحه وارد کنیم! در حالت عادی ما ناچاریم تمامی فایل‌های اچ‌تی‌ام‌ال و سی‌اس‌اس را که صفحه برای نمایش صحیحی بدان نیاز دارد، از قبل در آن گنجانده باشیم؛ ولی با کمک جاوا اسکریپت حتی می‌توانیم بعد از اتمام لود صفحه این فایل‌ها را بدان اضافه کنیم.
مثلا همین حالا یک فایل اچ‌تی‌ام‌ال ساده بسازید. سپس فایل سی‌اس‌اس دلخواه خود را بسازید ولی آن را در صفحه قرار ندهید. حالا در داخل فایل اچ‌تی‌ام‌ال و در بین تگ
، دستور document.write بنویسید و فایل سی‌اس‌اس را به‌عنوان متن داخل این بخش در صفحه چاپ کنید (همانطور که گفتیم، دستور document.write را می‌توانیم در هر جای صفحه که خواستیم بنویسیم).برای دیباگ کردن و فهمیدن اینکه کجای کدهایمان ایراد دارد، به ابزارهایی نیاز داریم که به ما بگوید کجای کد ما اشتباه بوده است؛ این ابزار خوشبختانه به‌صورت پیش‌فرض در مرورگرهای امروزی وجود دارد. در واقع همه مرورگرها به‌صورت پیش‌فرض سیستم‌هایی برای توسعه وب‌سایت دارند. این ابزارها که در حالت از دید کاربران مخفی هستند، Developer Tools نام دارند. برای نمایش ابزار مخصوص توسعه‌دهندگان در مرورگر کروم مراحل زیر را طی کنید:
نمایش ابزار توسعه‌دهندگان در مرورگر کروم
- روی صفحه در مرورگر راست کلیک کنید و گزینه Inspect را انتخاب کنید. (همچنین می‌توانید از شورت‌کات f12 در ویندوز استفاده کنید).
- روی صفحه در مرورگر راست کلیک کنید و گزینه Inspect را انتخاب کنید. (همچنین می‌توانید از شورت‌کات f12 در ویندوز استفاده کنید).
- پنجره بازشده همانند ابزار توسعه‌دهندگان کروم است و همانطور که در تصویر می‌بینید، تفاوت چندانی با آن ندارد.
آشنایی با بخش Elements
این بخش از Developer Tools کدهای اچ‌تی‌ام‌ال و سی‌اس‌اس نهایی را نمایش می‌دهد. شما می‌توانید از طریق این بخش تمامی تگ‌های اچ‌تی‌ام‌ال صفحه را مشاهده کنید. همچنین در سمت راست این پنجره، یک بخش مخصوص نمایش CSS-ها وجود دارد که با رفتن روی هر المان، می‌توانید دستورات CSS اعمال‌شده روی آن را در سمت راست صفحه و در بخش سی‌اس‌اس‌ها، مشاهده کنید.
جالب است بدانید تمامی CSS-ها و HTML-های صفحه قابل تغییر هستند و شما می‌توانید همانجا در تب Elements، آن‌ها را به دلخواه خود تغییر دهید و تغییرات خود را به‌صورت زنده و لحظه‌ای مشاهده کنید. البته این تغییرات تنها در مرورگر شما اجرا میشود و در سایت اصلی به هیچ عنوان تغییری ایجاد نمی‌شود. همچنین با هر بار Refresh و بارگذاری مجدد صفحه، تمام تغییرات شما نیز از بین خواهد رفت و همه چیز به حالت ابتدایی خود برخواهد گشت.
همچنین شما می‌توانید با کلیک روی المنت‌های اچ‌تی‌ام‌ال صفحه در صورت لزوم آن‌ها را تغییر دهید یا کپی یا حذف کنید.
آشنایی با بخش Console
اینجا همانجایی است که ما با آن بسیار سر و کار خواهیم داشت. کنسول مرورگر یکی از پرکاربردترین بخش‌هایی است که در جاوا اسکریپت بدان نیاز خواهید داشت. این کنسول شما را از خطاها و مشکلات کدهای جاوا اسکریپت آگاه می‌کند و اطلاعات دقیق ارورها و خطاهای جاوا اسکریپتی در کد شما را اعلام می‌کند.
همچنین شما می‌توانید پیغام‌های دلخواه را در جاوا اسکریپت بنویسید و این پیغام‌ها را در کنسول مرورگر نمایش دهید (اصطلاحا چاپ کنید). این کار توسط دستور console.log انجام میشود. بعدا این دستور را با هم استفاده خواهیم کرد.
همچنین شما می‌توانید در محیط کنسول، به‌صورت ریل تایم کد جاوا اسکریپت بنویسید و این کدها را همان جا اجرا کنید. برای مثال ما می‌توانیم از دستور alert جاوا اسکریپت به‌صورت مستقیم در کنسول استفاده کنیم. برای این کار دستور زیر را در کنسول مرورگر کپی کنید و اینتر بزنید.
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
همانطور که مشاهده میکنید، دستور alert در صفحه فعلی اجرا میشود.
آشنایی با بخش Network
این تب در واقع نمایش‌دهنده وضعیت تعامل شما با سرورهای سایت است. در واقع تمامی درخواست‌های ارسال‌شده به سرور و وضعیت و پاسخ آن‌ها در این تب قابل مشاهده است. به علت اینکه در این آموزش ما به سرور وصل نخواهیم شد، وارد جزئیات این تب نخواهیم شد.
شبیه‌سازی موبایل
یکی دیگر از ابزارهای کاربردی که در بخش توسعه‌دهندگان مرورگر قرار دارد، امکان شبیه‌سازی موبایل برای چک کردن سایت روی آن است. برای این کار، کافی است روی آیکون موبایل کلیک کنید و از آنجا سایزهای مختلف را انتخاب کنید. همچنین می‌توانید از لیست دستگاه‌های موجود پیش‌فرض، یک دستگاه را انتخاب کنید و سایت را در ابعاد صفحه نمایش همان دستگاه ببینید.
روش‌هایی ساده برای نمایش خروجی کدهای جاوا اسکریپت
روش اول - پنجره alert یا پنجره اخطار:
پنجره alert یک پنجره ساده است و برای استفاده از آن، کافی است دستور alert() را بنویسید و پیامتان را بین پرانتز وارد کنید. همچنین باید پیام‌های خود را بین دو "" قرار دهید. علت این موضوع به نوع داده‌ها در جاوا اسکریپت بر می‌گردد که در جلسات بعدی مفصلا به آن‌ها خواهیم پرداخت. ولی برای آگاهی اولیه، علت این موضوع به اینجا ختم میشود که مقداری که ما در این جلسه در پنجره آلرت قرار است نمایش دهیم یک داده از نوع متنی است و داده‌ها متنی را باید درون علامت "" قرار دهیم تا از متغیرها و اعداد متمایز شوند.
راه حل دوم - استفاده از کنسول مرورگر:
همانطور که گفتیم، کنسول مرورگر محلی است که می‌توانید در حین نوشتن کدهای جاوا اسکریپت داده‌های دلخواه را در آن چاپ کنید. همچنین گفتیم که این کار برای رصد کردن کدها بسیار مناسب است. مثلا فرض کنید در بین خط‌های کد خود می‌خواهید بدانید که در چه وضعیتی قرار دارید. یک مقدار در کنسول چاپ میکنید که دقیقا به شما می‌گوید در آن لحظه در چه وضعیتی هستید.
برای اضافه کردن یک مقدار به کنسول یا پنجره آلرت، روش زیر را دنبال می‌کنیم:
مرحله اول: در ابتدا یک صفحه اچ‌تی‌ام‌ال ساده و یک فایل جاوا اسکریپت خالی می‌سازیم.
مرحله دوم: درون فایل جاوا اسکریپت به ترتیب زیر می‌نویسم.
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
مرحله سوم: فایل جاوا اسکریپت را مطابق آموزش جلسه قبل در صفحه بارگذاری می‌کنیم. سپس صفحه اچ‌تی‌ام‌ال خود را ذخیره می‌کنیم .
مرحله چهارم: حالا فایل اچ‌تی‌ام‌ال خود را در مرورگر باز کنید.
همانطور که دیدید، به محض باز شدن صفحه با پیغام "سلام من پنجره alert هستم" که در یک پنجره کوچک باز شده است مواجه خواهیم شد. این پنجره همان پنجره alert است.
همچنین اگر کلیک راست کنید و روی inspect element بزنید و وارد تب console شوید، مشاهده میکنید که پیغام «سلام من کنسول مرورگر هستم» در بخش کنسول چاپ شده است.
فایل نهایی
فایل HTML:
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
فایل app.js:
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
کنسول و آلرت کجا مورد استفاده قرار می‌گیرند؟
فرض کنید یک فایل جاوا اسکریپت هزار خطی دارید! هر چند توصیه می‌کنیم تا حد امکان نگذارید فایل‌هایتان انقدر زیاد شوند و هر کدام را به بخش‌های کوچک‌تر و فایل‌های بیشتر تقسیم کنید (بدین ترتیب نگهداری و تغییر آن‌ها ساده‌تر میشود).
در این فایل هزار خطی اگر زمانی چیزی درست کار نکند، باید ابزاری وجود داشته باشد که به شما در پیدا کردن نقطه کور کد کمک کند! مثلا ممکن است در جایی یک عدد یا متغیر را به اشتباه وارد کرده باشید و این خودش باعث بروز اشتباه در محاسبات شما شود. منظورمان از اشتباه فقط خطاهای سینتکس و قواعدی نیست! آن‌ها در کنسول مرورگر با ذکر شماره خط و محل دقیق پیدا می‌شوند. منظورمان خطاهای دیگری است که در منطق کد وجود دارد و باعث میشود خروجی مورد نظر دست پیدا نکنید. برای پیدا کردن محل چنین خطاها یا اشتباه‌هایی است که با کار بسیار سخت و حتی شاید ناممکنی روبرو هستید و آلرت و کنسول دوای درد شما است! شما به کمک این نمایشگرها می‌توانید در نقطه نقطه کد نشانه‌گذاری کنید و با هر بار اجرا، مقدار متغیرها و تغییرات در کد را در کنسول یا پنجره آلرت مشاهده کنید و متوجه شوید کجای کارتان خطا داشته است. این بزرگ‌ترین موهبتی است که بعدها به شدت از استفاده از آن خوشحال خواهید شد! پس منتظر باشید که در جلسات آینده بیشتر از این ابزارها استفاده کنیم.
نمایش کدها در المنت‌های HTML
هر چند کنسول و آلرت راه‌حل‌های سریع و دم دستی برای نمایش اطلاعات در مرورگر هستند؛ ولی بعید است که کسی پروژه‌اش را بر پایه این دو بنا کند! در واقع پروژه‌ها اصولا برای کاربران نوشته می‌شوند و از این رو باید خروجی مناسب در قالب مناسب داشته باشند. بنابراین راه درست‌تری که در دنیای واقعی و کدهای واقعی از آن استفاده خواهید کرد، نمایش نتیجه کدهای جاوا اسکریپت در صفحه اچ‌تی‌ام‌ال است!
برای نمایش کدهای جاوا اسکریپت در تگ‌های اچ‌تی‌ام‌ال روش‌های بسیاری وجود دارد که دو مورد از آن‌ها را در جلسه اول مرور می‌کنیم:
راه اول: استفاده از دستور document.write()
ساده‌ترین راه برای نمایش خروجی در اچ‌تی‌ام‌ال دستور write است. فایل اچ‌تی‌ام‌ال زیر را برای خود بسازید و آن را در مرورگر اجرا کنید.
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
این دستور چیست و چگونه کار می‌کند؟
کلمه اول document همان کل مجموعه اچ‌تی‌ام‌ال صفحه است. در واقع کل یک صفحه اچ‌تی‌ام‌ال در کد جاوا اسکریپت در داخل یک مجموعه به نام document ذخیره میشود. این مجموعه و هر مجموعه دیگری را می‌توان به کمک دستوراتی که به آن‌ها متد می‌گوییم، رویشان تغییر ایجاد کرد. مثلا هر صفحه اچ‌تی‌ام‌ال در کد جاوا اسکریپت به‌عنوان یک آبجکت به نام document شناخته میشود.
در واقع تمامی المنت‌های اچ‌تی‌ام‌ال در داخل جاوا اسکریپت در یک مجموعه جدا ذخیره می‌شوند. وقتی می‌خواهیم روی هر یک تغییری ایجاد کنیم، آن مجموعه را انتخاب و روی آن تغییر ایجاد می‌کنیم.
حالا به بحث قبل بر می‌گردیم. با متد write می‌توانیم هر چه می‌خواهیم در داخل این مجموعه نمایش دهیم. کافی است نام متد write را به همراه یک پرانتز که حاوی متن مورد نظر است، بنویسیم و در اینجا چاپ کنیم. همین حالا خودتان هم می‌توانید این کار را انجام دهید و متن‌های متفاوتی را چاپ کنید.
نکته قابل توجه در این بخش همان خط به خط اجرا شدن کدهای جاوا اسکریپت در مرورگر است. اگر هر کجای صفحه دستور document.write را بنویسید، همانجا دستور شما چاپ خواهد شد. برای مثال اگر سه دستور document.write را در مابین تگ‌های اچ‌تی‌ام‌ال خود بنویسید، این کدها دقیقا در همانجایی که نوشته شده‌اند چاپ خواهند شد.
کجا می‌توانیم از این دستور استفاده کنیم؟
خب حالا که با دستور document.write آشنا شده‌اید بیایید یکی از نکات کاربردی آن را که در دنیای واقعی ممکن است به کارمان بیاید استفاده کنیم! یک مثال ساده وقتی است که ما می‌خواهیم یک سی‌اس‌اس، اچ‌تی‌ام‌ال یا حتی یک فایل جاوا اسکریپت خارجی را بعد از لود شدن صفحه یا تحت شرایط خاصی به صفحه وارد کنیم! در حالت عادی ما ناچاریم تمامی فایل‌های اچ‌تی‌ام‌ال و سی‌اس‌اس را که صفحه برای نمایش صحیحی بدان نیاز دارد، از قبل در آن گنجانده باشیم؛ ولی با کمک جاوا اسکریپت حتی می‌توانیم بعد از اتمام لود صفحه این فایل‌ها را بدان اضافه کنیم.
مثلا همین حالا یک فایل اچ‌تی‌ام‌ال ساده بسازید. سپس فایل سی‌اس‌اس دلخواه خود را بسازید ولی آن را در صفحه قرار ندهید. حالا در داخل فایل اچ‌تی‌ام‌ال و در بین تگ
مثال بالا به‌صورت زیر میشود:
*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *
بعد از اجرای دوباره صفحه مشاهده میکنید که فایل سی‌اس‌اس روی صفحه اعمال شده است! یعنی فایل سی‌اس‌اس شما حتی بعد از لود صفحه به صفحه اضافه و اجرا شده است! از این مدل کار چه استفاده‌های خلاقانه‌تری می‌توانیم بکنیم؟ بگذارید چند تا مثال ساده و کاربردی بزنیم:
مثلا می‌توانید با محاسبه ساعت سیستم کاربر (با کمک جاوا اسکریپت) و محاسبه اینکه شب، روز یا بعدازظهر است فایل‌های CSS مناسب آن زمان از روز را لود کنید! مثلا یک فایل CSS برای صبح! یک فایل CSS برای شب و یک فایل CSS برای غروب!
مثلا می‌توانید با گذشت یک مدت زمان مشخص (مثلا دو دقیقه) از حضور کاربر در سایت، ویسی‌اس‌اس بخش‌هایی از سایت را به دلخواه تغییر دهید! شما چه پیشنهاد خلاقانه‌ای برای این بخش به ذهنتان می‌رسد! با ما در میان بگذارید.
حالا که اندکی با ابزارهای اولیه جاوا اسکریپت آشنا شده‌اید، وقت آن رسیده است تا یک پروژه ساده و اولیه را استارت بزنیم! این پروژه قرار است در هر جلسه تکمیل و تکمیل‌تر شود و در نهایت به یک پروژه واقعی ولی کوچک تبدیل شود.
این پروژه قرار است یک سرویس سفارش غذا به‌صورت آنلاین باشد! برای انجام این پروژه تنها می‌توانیم یک کار ساده انجام دهیم و آن هم انتخاب نام آن است! یک نام دلخواه برای این رستوران آنلاین انتخاب کنید و سپس با کمک دستور document.write که در این جلسه یاد گرفته‌ایم آن را در صفحه چاپ کنید.
سخن پایانی:
در سومین جلسه از آموزش جاوا اسکریپت با ابزار توسعه‌دهندگان که یکی از واجب‌ترین ابزارهای هر برنامه‌نویس و طراح وبی است آشنا شدیم. از جلسات آینده به‌طور عمیق‌تری وارد دنیای جاوا اسکریپت خواهیم شد و مفاهیم بیشتری از جمله متغیرها را برای نوشتن کدهای جاوا اسکریپتی با هم مرور خواهیم کرد.
