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

جاوا اسکریپت یکی از مهم‌ترین زبان‌های برنامه‌نویسی حوزه‌ی وب محسوب می‌شود. جاوا اسکریپت اولین بار با اسم LiveScript و توسط شرکت نت اسکیپ معرفی شد و بعدها به جاوا اسکریپت تغییر نام داد. البته جالب است بدانید جاوا اسکریپت نه از نظر ساختار و نه از نظر مفاهیم، شباهتی به زبان جاوا ندارد و این تشابه اسمی، در حد همان کلمات و نام و نشان باقی مانده است. 

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

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

اگر نمی‌دانید فرانت‌اند و بَکِند چیست در ادامه مطلب ما را دنبال کنید. به‌طور کلی برنامه نویسی وب به دو بخش کلی تقسیم می‌شود. فرانت اند (FrontEnd) و بکند (Backend). فرانت‌اند به هر آن چیزی گفته می‌شود که توسط کاربر دیده و در مرورگر رندر می‌شود. بکند نیز به هر آن چیزی که در سمت سرور (که بار پردازش منطق و هسته هر سایت را بر عهده دارد) است گفته می‌شود. جاوا اسکریپت اصولا یک زبان سمت کاربر یا فرانت‌اند است که بار منطقی فرآیندهای سمت وب را بر عهده می‌گیرد. البته با به وجود آمدن زبان NodeJS امکان نوشتن سرویس‌های وب سمت سرور با جاوا اسکریپت نیز وجود دارد.

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

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

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

• کتابخانه‌ی ReactJS که بسیاری از سایت‌ها و سرویس‌های بزرگ بر پایه‌ی این فریم‌ورک توسعه داده‌ شده‌اند.
• React Native محصول دیگری از شرکت فیس‌بوک که امکان تولید اپلیکیشن‌های موبایل بر پایه زبان جاوا اسکریپت را فراهم می‌کند. نمونه بارز آن اپلیکیشن موبایل اینستاگرام است.
• فریم ورک AngularJs گوگل که آخرین نسخه آن angular 4 است و بسیاری از ابزارها و سرویس‌های بزرگ بر پایه‌‌ی آن توسعه داده‌ شده‌اند.
• زبان اپن سورس NodeJS که  امکان برنامه‌نویسی با زبان جاوا اسکریپت را در سمت سرور فراهم می‌کند. 

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

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

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

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

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

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

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

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

۶. EventListener و Event-ها

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

به‌صورت کلی برای اجرای کدهای جاوا اسکریپت، هیچ ابزار خاصی نیاز نیست. در واقع بر خلاف زبان‌های دیگر که نیاز به یک کامپایلر برای اجرای کدها دارند، جاوا اسکریپت روی مرورگرهای اینترنت اجرا می‌شود. برای نوشتن کدها نیز یک ادیتور متن ساده مانند نوت پد پیش‌فرض ویندوز کار شما را راه می‌اندازد؛ اما برای راحتی کار و بهتر یاد گرفتن توصیه می‌کنیم از IDE (محیط‌ها و نرم‌افزارهای کدنویسی و توسعه) مناسب استفاده کنید. پیشنهاد ما به شما، Visual Studio Code مایکروسافت یا نرم افزار ++NotePad است.

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

برای یادگیری جاوا اسکریپت نیاز نیست حتما برنامه‌نویس کارکشته‌ای باشید؛ اما باید با زبان‌های طراحی وب پایه همچون HTML و CSS آشنایی اندکی داشته باشید. این را هم به خاطر داشته باشید که جاوا اسکریپت زبان برنامه نویسی است و بر خلاف اچ‌تی‌ام‌ال و سی‌اس‌اس که زبان نشانه‌گذاری هستند، کمی بیشتر شما را درگیر «برنامه نویسی» می‌کند، به همین خاطر ممکن است برای یادگیری آن کمی به صبر و حوصله و تمرین بیشتری نیاز داشته باشید. 

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

دوره رایگان آموزش HTML و CSS

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

<!DOCTYPE html>

<html>

   <body>

     <h2>اولین جلسه جاوا اسکریپت با زومیتh2>

     <p id="zoomit">p>

   body>

html>

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

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

<!DOCTYPE html>

<html>

   <body>

      <h2>اولین جلسه جاوا اسکریپت با زومیتh2>

       <p id="zoomit">p>

       <script>

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

       script>

   body>

html>

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

<!DOCTYPE html>

<html>

<body>

  <h2>اولین جلسه جاوا اسکریپت با زومیتh2>

   <p id="zoomit">p>

   <script>

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

        alert("سلام به اولین جلسه از آموزش جاوا اسکریپت خوش آمدید")

   script>

  body>

html>

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

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

کپی رایت تصویر کاور: وب‌سایت طراحان freepik.com