آموزش جاوا اسکریپت – قسمت پنجم: نمایش خروجی کد ها

توسط با بدون دیدگاه آموزش JavaScript

نمایش خروجی کد های جاوا اسکریپت

در این قسمت از آموزش جاوا اسکریپت با پردیس وردپرس به چند روش ساده برای نمایش خروجی کد های جاوا اسکریپت خود می پردازیم.

روش اول – پنجره 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 که در این جلسه یاد گرفته‌ایم آن را در صفحه چاپ کنید.

آموزش جاوا اسکریپت – قسمت دوم: افزودن کد جاوا اسکریپت به صفحه

توسط با بدون دیدگاه آموزش JavaScript

در قسمت قبل به طور کلی با جاوا اسکریپت و کار برد های آن آشنا شدیم. در این جلسه با نحوه نوشتن و افزودن کد های جاوا اسکریپت در صفحه وب خود آشنا می شویم.

کدهای جاوا اسکریپت منطق را به دنیای اچ‌تی‌ام‌ال آورده است. HTML و CSS زبان‌های نشانه‌گذاری هستند و قابلیت کافی برای محاسبات منطقی ندارند؛ به‌عنوان مثال نمی‌توان از این دو انتظار داشت تا دو عدد را با هم جمع کنند و نتیجه را به کاربر نمایش دهند. نمی‌توان از آن‌ها انتظار داشت که ورودی‌های کاربر در یک فرم ثبت‌نام را چک کنند و درست یا غلط بودن اطلاعات وارد شده را مورد بررسی کنند؛ اما جاوا اسکریپت می‌تواند تمام این کارها و کارهای بسیار پیچیده‌تر را انجام دهد.

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

برای نوشتن کدهای جاوا اسکریپت نیاز به هیچ ابزار خاصی نیست. تنها یک صفحه‌ی اچ‌تی‌ام‌ال و یک تگ مخصوص کدهای جاوا اسکریپت به نام <script> لازم داریم. در واقع کدهای جاوا اسکریپت در داخل این تگ به صورت زیر نوشته می‌شوند. فقط کافی است تا این تگ را بین تگ های html باز کنیم.

<script> کد جاوا اسکریپت </script>

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

درست است که ما می توانیم کد های جاوا اسکریپت را در هر جای صفحه خواستیم با استفاده از تگ مخصوص اسکریپت بنویسیم، اما این امر یکی باعث به ریختگی کدها و شلوغ شدن صفحه می شود و دیگر این که خطایابی آن کاری پیچیده و خسته کننده است.

برای نوشتن کد های جاوا اسکریپت دو راه وجود دارد:

  1. باز کردن تگ <script></script> در داخل صفحه‌ی اچ‌تی‌ام‌ال و نوشتن کدهای جای جاوا اسکریپت درون این آن
  2. نوشتن کدهای جاوا اسکریپت در یک فایل مجزا با فرمت 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) بنویسید. ولی چرا این کار روش بهتری محسوب می‌شود؟

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

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

روش دوم در قسمت بعدی آموزش …

آموزش جاوا اسکریپت – قسمت اول: آشنایی

توسط با بدون دیدگاه آموزش JavaScript

بعد از یادگیری HTML و CSS نوبت به یادگیری جاوا اسکریپت می‌رسد.

آشنایی با جاوا اسکریپت

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

جاوا اسکریپت اصولا یک زبان سمت کاربر یا فرانت‌اند است. البته با به وجود آمدن زبان NodeJS امکان نوشتن سرویس‌های سمت سرور با جاوا اسکریپت نیز وجود دارد. یکی از مزایای جاوا اسکریپت، فریم‌ورک‌ها و کتابخانه‌هایی است که بر پایه این زبان شکل گرفته‌اند. مشهورترین و نام‌آشناترین کتابخانه‌ جاوا اسکریپت، Jquery است.

جاوا اسکریپت، تنها یک زبان برنامه نویسی برای طراحی سایت و افزودن مقداری انیمیشن و حرکت و منطق به وب‌سایت‌ها نیست. فریم‌ورک‌ها و ابزارهای بسیار زیادی با کمک این زبان توسعه داده شده‌اند که با کمک آن‌ها می‌توان از اپلیکیشن‌های موبایل گرفته تا سیستم‌های پیچیده را پیاده‌سازی کرد. ابزارهایی مثل ReactJS شرکت فیس‌بوک یا Angular JS شرکت گوگل از جمله‌ی این ابزارها هستند. همچنین با روی کار آمدن NodeJS، امکان اجرای کدهای جاوا اسکریپت به‌عنوان زبان سمت سرور نیز فراهم شده است.

به‌طور کلی با زبان جاوا اسکریپت از سرورها تا اپلیکیشن‌های موبایل تا سیستم‌های وب قابل پیاده‌سازی هستند. ابزارهای زبان مورد بحث، این روزها به‌قدری گسترده شده‌اند که نمی‌توانیم بدون آن‌ها به دنیای وب فکر کنیم.

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

۱. آشنایی با مفاهیم اولیه‌ی ساخت فایل جاوا اسکریپت و استفاده از آن در صفحه‌ی اچ‌تی‌ام‌ال

۲. آشنایی با ابزارهای دیباگ جاوا اسکریپت (کنسول مرورگر)

۳. آشنایی با مفاهیم اولیه از جمله متغیرها و انواع آن

۴. آشنایی با فانکشن‌ها

۵. آشنایی با آبجکت‌ها

۶. آشنایی با آرایه‌ها

۷. شرط‌ها و if و else در برنامه نویسی

۶. EventListener و Event-ها

۷. تغییر DOM (المان‌های صفحه‌ی اچ‌تی‌ام‌ال) از طریق جاوا اسکریپت

برای اجرای کدهای جاوا اسکریپت به چه چیزی نیاز داریم؟

به‌صورت کلی برای اجرای کدهای جاوا اسکریپت، هیچ ابزار خاصی نیاز نیست. در واقع بر خلاف زبان‌های دیگر که نیاز به یک کامپایلر برای اجرای کدها دارند، جاوا اسکریپت روی مرورگرهای اینترنت اجرا می‌شود. برای نوشتن کدها نیز یک ادیتور متن ساده مانند نوت پد پیش‌فرض ویندوز کار شما را راه می‌اندازد.

پیشنهاد ما به شما، Visual Studio Code مایکروسافت یا نرم افزار ++NotePad است.

لینک دانلود Visual Studio Code – نسخه سبک محیط توسعه مایکروسافت (این نسخه با آن ابزار مشهور چند گیگابایتی مایکروسافت Visual Studio تفاوت دارد.)

برای یادگیری جاوا اسکریپت نیاز نیست حتما برنامه‌نویس کارکشته‌ای باشید؛ اما باید با زبان‌های طراحی وب پایه همچون HTML و CSS آشنایی اندکی داشته باشید.

شروع جاوا اسکریپت

برای شروع ابتدا یک صفحه اچ‌تی‌ام‌ال ساده ایجاد می‌کنیم.

<!DOCTYPE html>

<html>

   <body>

     <h2>آموزش جاوا اسکریپت با پردیس وردپرس</h2>

     <p id="pardiswp"></p>

   </body>

</html>

قبل از بسته شدن تگ body، یک تگ <script></script> باز می‌کنیم که امکان اجرای کدهای جاوا اسکریپت را برای ما فراهم می کند. این تگ به ما اجازه می‌دهد کدهای جاوا اسکریپت را در صفحه اچ‌تی‌ام‌ال بنویسیم.

حال می‌خواهیم به‌محض اینکه این صفحه‌ی خالی باز شد، یک پیغام هشدار  ()alert برای کاربر باز شود و به او جمله‌ی «خوش‌آمدید» را اعلام کند. برای این کار بین تگ script که پیش‌تر باز کردید، عبارت (“سلام خوش آمدید”)alert را بنویسید.

<!DOCTYPE html>

<html>

<body>

  <h2>آموزش جاوا اسکریپت با پردیس وردپرس</h2>

   <p id="pardiswp"></p>

   <script>

       /* کد جاوا اسکریپت شما اینجا نوشته خواهد شد */

        alert("سلام خوش آمدید")

   </script>

  </body>

</html>

حال صفحه‌ی اچ‌تی‌ام‌ال خود را ذخیره و آن را یک بار ریفرش کنید. خواهید دید که به محض بارگذاری صفحه، پیغام نوشته‌شده توسط شما در قالب یک پنجره‌ی «alert» نمایش داده خواهد شد.