بعد از یادگیری 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» نمایش داده خواهد شد.