نمایش خروجی کد های جاوا اسکریپت
در این قسمت از آموزش جاوا اسکریپت با پردیس وردپرس به چند روش ساده برای نمایش خروجی کد های جاوا اسکریپت خود می پردازیم.
روش اول – پنجره alert یا پنجره اخطار:
پنجره alert یک پنجره ساده است و برای استفاده از آن، کافی است دستور ()alert را بنویسید و پیامتان را بین پرانتز وارد کنید. همچنین باید پیام‌های خود را بین دو “” قرار دهید. علت این موضوع به نوع داده‌ها در جاوا اسکریپت بر می‌گردد که در جلسات بعدی مفصلا به آن‌ها خواهیم پرداخت. برای آشنایی اولیه بدانید که مقداری که در پنجره alert قرار است نمایش دهیم یک داده از نوع متنی است و داده‌ها متنی را باید درون علامت “” قرار دهیم تا از متغیرها و اعداد متمایز شوند.
روش دوم – استفاده از کنسول مرورگر:
همانطور که گفتیم، کنسول مرورگر محلی است که می‌توانید در حین نوشتن کدهای جاوا اسکریپت داده‌های دلخواه را در آن چاپ کنید. همچنین گفتیم که این کار برای رصد کردن کدها بسیار مناسب است. مثلا فرض کنید در بین خط های کد خود می‌خواهید بدانید که در چه وضعیتی قرار دارید؛ یک مقدار در کنسول چاپ میکنید که دقیقا به شما می‌گوید در آن لحظه در چه وضعیتی هستید.
برای اضافه کردن یک مقدار به کنسول یا پنجره alert، به روش زیر عمل می کنیم:
مرحله اول: در ابتدا یک صفحه اچ‌تی‌ام‌ال ساده و یک فایل جاوا اسکریپت خالی می‌سازیم.
مرحله دوم: درون فایل جاوا اسکریپت به ترتیب زیر می‌نویسم.
alert(“سلام من پنجره alert هستم”)
console.log(“سلام من کنسول مرورگر هستم”)
مرحله سوم: فایل جاوا اسکریپت را مطابق آموزش های قبلی در صفحه بارگذاری می‌کنیم. سپس صفحه اچ‌تی‌ام‌ال خود را ذخیره می‌کنیم.
مرحله چهارم: حالا فایل اچ‌تی‌ام‌ال خود را در مرورگر باز کنید.
همانطور که دیدید، به محض باز شدن صفحه با پیغام “سلام من پنجره alert هستم” که در یک پنجره کوچک باز شده است مواجه خواهیم شد. این پنجره همان پنجره alert است.
همچنین اگر کلیک راست کنید و روی inspect element بزنید و وارد تب console شوید، مشاهده میکنید که پیغام «سلام من کنسول مرورگر هستم» در بخش کنسول چاپ شده است.
فایل html نهایی به صورت زیر است:
<!DOCTYPE html>
<html>
<head>
<title> آموزش جاوا اسکریپت - پردیس وردپرس</title>
</head>
<body>
<p>قسمت پنجم</p>
<script type="javascript/text" src="app.js"></script>
</body>
</html>
فایل app.js:
alert(“سلام من پنجره alert هستم”) console.log(“سلام من کنسول مرورگر هستم”)
کنسول و alert کجا مورد استفاده قرار می‌گیرند؟
فرض کنید یک فایل جاوا اسکریپت هزار خطی دارید! هر چند توصیه می‌کنیم تا حد امکان نگذارید فایل‌هایتان انقدر زیاد شوند و هر کدام را به بخش‌های کوچک‌تر و فایل‌های بیشتر تقسیم کنید (بدین ترتیب نگهداری و تغییر آن‌ها ساده‌تر می‌شود).
در این فایل هزار خطی اگر زمانی چیزی درست کار نکند، باید ابزاری وجود داشته باشد که به شما در پیدا کردن نقطه کور کد کمک کند!
نمایش کدها در المنت‌های HTML
هر چند کنسول و alert راه‌حل‌های سریع و دم دستی برای نمایش اطلاعات در مرورگر هستند؛ ولی بعید است که کسی پروژه‌اش را بر پایه این دو بنا کند! در واقع پروژه‌ها اصولا برای کاربران نوشته می‌شوند و از این رو باید خروجی مناسب در قالب مناسب داشته باشند. بنابراین راه درست‌تری که در دنیای واقعی و کدهای واقعی از آن استفاده خواهید کرد، نمایش نتیجه کدهای جاوا اسکریپت در صفحه اچ‌تی‌ام‌ال است!
برای نمایش کدهای جاوا اسکریپت در تگ‌های اچ‌تی‌ام‌ال روش‌های بسیاری وجود دارد که دو مورد از آن‌ها را مرور می‌کنیم:
راه اول: استفاده از دستور ()document.write
ساده‌ترین راه برای نمایش خروجی در اچ‌تی‌ام‌ال دستور write است. فایل اچ‌تی‌ام‌ال زیر را برای خود بسازید و آن را در مرورگر اجرا کنید.
<html>
<head>
<title> آموزش جاوا اسکریپت - پردیس وردپرس</title>
</head>
<body>
<p>متن اول قبل از استفاده از جاوا اسکریپت</p>
<script>
document.write('نوشتن در صفحه اچ‌تی‌ام‌ال')
</script>
<p>متن اول قبل از استفاده از جاوا اسکریپت</p>
</body>
</html>
این دستور چیست و چگونه کار می‌کند؟ کلمه اول document همان کل مجموعه اچ‌تی‌ام‌ال صفحه است. در واقع کل یک صفحه اچ‌تی‌ام‌ال در کد جاوا اسکریپت در داخل یک مجموعه به نام document ذخیره می‌شود. این مجموعه و هر مجموعه دیگری را می‌توان به کمک دستوراتی که به آن‌ها متد می‌گوییم، تغییر دهیم. مثلا هر صفحه اچ‌تی‌ام‌ال در کد جاوا اسکریپت به‌عنوان یک آبجکت به نام document شناخته می‌شود.
در واقع تمامی المنت‌های اچ‌تی‌ام‌ال در داخل جاوا اسکریپت در یک مجموعه جدا ذخیره می‌شوند. وقتی می‌خواهیم روی هر یک تغییری ایجاد کنیم، آن مجموعه را انتخاب و روی آن تغییر ایجاد می‌کنیم.
حالا به بحث قبل بر می‌گردیم. با متد write می‌توانیم هر چه می‌خواهیم در داخل این مجموعه نمایش دهیم. کافی است نام متد write را به همراه یک پرانتز که حاوی متن مورد نظر است، بنویسیم و در اینجا چاپ کنیم. همین حالا خودتان هم می‌توانید این کار را انجام دهید و متن‌های متفاوتی را چاپ کنید.
نکته قابل توجه در این بخش همان خط به خط اجرا شدن کدهای جاوا اسکریپت در مرورگر است. اگر هر کجای صفحه دستور document.write را بنویسید، همانجا دستور شما چاپ خواهد شد. برای مثال اگر سه دستور document.write را در بین تگ‌های اچ‌تی‌ام‌ال خود بنویسید، این کدها دقیقا در همانجایی که نوشته شده‌اند چاپ خواهند شد.
کجا می‌توانیم از این دستور استفاده کنیم؟
خب حالا که با دستور document.write آشنا شده‌اید یکی از نکات کاربردی آن را که در دنیای واقعی کاربرد دارد، استفاده می کنیم! یک مثال ساده وقتی است که ما می‌خواهیم یک سی‌اس‌اس، اچ‌تی‌ام‌ال یا حتی یک فایل جاوا اسکریپت خارجی را بعد از لود شدن صفحه یا تحت شرایط خاصی به صفحه وارد کنیم! در حالت عادی ما ناچاریم تمامی فایل‌های اچ‌تی‌ام‌ال و سی‌اس‌اس را که صفحه برای نمایش صحیحی بدان نیاز دارد، از قبل در آن گنجانده باشیم؛ ولی با کمک جاوا اسکریپت حتی می‌توانیم بعد از اتمام لود صفحه این فایل‌ها را بدان اضافه کنیم.
مثلا همین حالا یک فایل اچ‌تی‌ام‌ال ساده بسازید. سپس فایل سی‌اس‌اس دلخواه خود را بسازید ولی آن را در صفحه قرار ندهید. حالا در داخل فایل اچ‌تی‌ام‌ال و در بین تگhead، دستور document.write بنویسید و فایل سی‌اس‌اس را به‌عنوان متن داخل این بخش در صفحه چاپ کنید (همانطور که گفتیم، دستور document.write را می‌توانیم در هر جای صفحه که خواستیم بنویسیم).
مثال فوق به‌صورت زیر می‌شود:
<!DOCTYPE html>
<html>
<head>
<title> آموزش جاوا اسکریپت - پردیس وردپرس</title>
<script>
document.write("<link rel='stylesheet' href='night.css' type='text/css'>")
</script>
</head>
<body>
<p>متن اول قبل از استفاده از جاوا اسکریپت</p>
<p>متن اول قبل از استفاده از جاوا اسکریپت</p>
</body>
</html>
بعد از اجرای دوباره صفحه مشاهده میکنید که فایل سی‌اس‌اس روی صفحه اعمال شده است! یعنی فایل سی‌اس‌اس شما حتی بعد از لود صفحه به صفحه اضافه و اجرا شده است! از این مدل کار استفاده‌های خلاقانه‌تری هم می‌توانیم بکنیم.
مثلا می‌توانید با محاسبه ساعت سیستم کاربر (با کمک جاوا اسکریپت) و محاسبه اینکه شب، روز یا بعدازظهر است فایل‌های CSS مناسب آن زمان از روز را لود کنید! مثلا یک فایل CSS برای صبح! یک فایل CSS برای شب و یک فایل CSS برای غروب!
مثلا می‌توانید با گذشت یک مدت زمان مشخص (مثلا دو دقیقه) از حضور کاربر در سایت، سی‌اس‌اس بخش‌هایی از سایت را به دلخواه تغییر دهید! شما چه پیشنهاد خلاقانه‌ای برای این بخش به ذهنتان می‌رسد!
حالا که اندکی با ابزارهای اولیه جاوا اسکریپت آشنا شده‌اید، وقت آن رسیده است تا یک پروژه ساده و اولیه را استارت بزنیم! این پروژه قرار است در هر جلسه تکمیل و تکمیل‌تر شود و در نهایت به یک پروژه واقعی ولی کوچک تبدیل شود.
این پروژه قرار است یک سرویس سفارش غذا به‌صورت آنلاین باشد! برای انجام این پروژه تنها می‌توانیم یک کار ساده انجام دهیم و آن هم انتخاب نام آن است! یک نام دلخواه برای این رستوران آنلاین انتخاب کنید و سپس با کمک دستور document.write که در این جلسه یاد گرفته‌ایم آن را در صفحه چاپ کنید.