آموزش برنامه نویسی

جاوا اسکریپت چیست؟

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

20 دقیقه مطالعه ۳۱ خرداد ۱۴۰۲ 501 بازدید مرتضی رستمیان
تصویر مقاله جاوا اسکریپت چیست؟
برنامه‌نویسی فرانت‌اند و توسعه وب

جاوا اسکریپت چیست؟ از اولین تعامل در صفحه تا ساخت پروژه‌های واقعی وب

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

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

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

برنامه نویسی وب و کدنویسی با لپ تاپ
Wikimedia Commons — CC0

جاوا اسکریپت چیست؟

JavaScript یک زبان برنامه‌نویسی است که یکی از مهم‌ترین کاربردهای آن، اضافه کردن رفتار و منطق به صفحات وب است. یعنی صفحه فقط چیزی برای تماشا کردن نیست و می‌تواند به کاری که کاربر انجام می‌دهد واکنش نشان دهد.

یک نمونه خیلی ساده را تصور کنید: کاربر روی دکمه «نمایش بیشتر» کلیک می‌کند و بخشی از متن باز می‌شود. یا هنگام وارد کردن رمز عبور، سایت همان لحظه اعلام می‌کند که رمز انتخاب‌شده ضعیف است. پشت چنین رفتارهایی معمولاً JavaScript حضور دارد.

البته هرچه پروژه بزرگ‌تر شود، کار JavaScript هم فراتر از چند کلیک و تغییر ساده می‌رود. مدیریت اطلاعات، ارتباط با API، کنترل State و ساخت رابط‌های پیچیده‌تر همگی می‌توانند بخشی از کار روزمره یک توسعه‌دهنده JavaScript باشند.

HTML، CSS و JavaScript چه فرقی با هم دارند؟

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

HTML

ساختار صفحه

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

CSS

ظاهر و چیدمان

CSS تعیین می‌کند همان اجزای HTML چه ظاهری داشته باشند. رنگ، فاصله، اندازه، چیدمان و رفتار صفحه روی اندازه‌های مختلف نمایشگر معمولاً در این بخش کنترل می‌شوند.

JavaScript

رفتار و منطق

JavaScript باعث می‌شود صفحه بتواند به کاربر واکنش نشان دهد، داده دریافت کند، محتوا را تغییر دهد و رفتارهایی فراتر از یک صفحه ثابت داشته باشد.

یک مثال ساده از کاری که JavaScript انجام می‌دهد

فرض کنید در یک فروشگاه اینترنتی دکمه‌ای برای اضافه کردن محصول به سبد خرید دارید. کاربر روی دکمه کلیک می‌کند و بدون اینکه کل صفحه دوباره بارگذاری شود، تعداد محصولات سبد خرید تغییر می‌کند.

ظاهر دکمه با CSS ساخته شده و خود دکمه داخل HTML قرار دارد، اما اینکه بعد از کلیک چه اتفاقی بیفتد، بخشی از منطقی است که JavaScript می‌تواند مدیریت کند.

همین مثال ساده کمک می‌کند بفهمیم چرا یادگیری JavaScript بعد از HTML و CSS مرحله مهمی در مسیر فرانت‌اند است.

نمونه کد JavaScript
JavaScript Code — Wikimedia Commons — CC0

با JavaScript در یک سایت چه کارهایی می‌توان انجام داد؟

وقتی تازه JavaScript را شروع می‌کنید، بهتر است آن را با مثال‌های قابل لمس ببینید. بیشتر سایت‌هایی که هر روز استفاده می‌کنیم، در بخش‌های مختلف از منطق JavaScript استفاده می‌کنند.

منوهای تعاملی

باز و بسته شدن منوی موبایل، منوهای چندمرحله‌ای یا بخش‌هایی که با کلیک نمایش داده می‌شوند.

اعتبارسنجی فرم

بررسی ورودی‌هایی مثل ایمیل، شماره تماس یا رمز عبور قبل از اینکه اطلاعات برای سرور ارسال شوند.

تغییر محتوا

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

ارتباط با API

دریافت داده از Backend و نمایش آن در رابط کاربری؛ چیزی که در پروژه‌های واقعی بارها با آن روبه‌رو خواهید شد.

چرا یادگیری JavaScript برای مسیر فرانت‌اند مهم است؟

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

مهم‌تر اینکه ابزارهایی مثل React و Next.js نیز به دانش JavaScript وابسته‌اند. اگر قبل از رفتن سراغ آن‌ها پایه JavaScript را جدی نگرفته باشید، ممکن است بتوانید یک نمونه را اجرا کنید اما در پروژه متفاوت متوجه نشوید چرا کد به شکل خاصی نوشته شده است.

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

مسیر پیشنهادی یادگیری

JavaScript را از کجا شروع کنیم؟

یکی از دلایلی که بعضی افراد در شروع JavaScript سردرگم می‌شوند، این است که خیلی زود سراغ Framework یا پروژه‌های پیچیده می‌روند. مسیر ساده‌تر این است که هر مرحله را کمی تمرین کنید و بعد سراغ موضوع بعدی بروید.

01

اول HTML و CSS را بشناسید

لازم نیست قبل از JavaScript متخصص CSS باشید، اما باید بتوانید ساختار یک صفحه و عناصر اصلی آن را بشناسید.

02

مفاهیم اصلی زبان را تمرین کنید

متغیر، انواع داده، شرط، حلقه، تابع و آرایه موضوعاتی هستند که باید با نوشتن کد و نه فقط خواندن تعریف‌ها یاد گرفته شوند.

03

سراغ DOM بروید

در این مرحله ارتباط JavaScript با خود صفحه وب روشن‌تر می‌شود. می‌توانید عناصر صفحه را پیدا کنید، تغییر دهید و به رویدادهایی مثل Click واکنش نشان دهید.

04

پروژه‌های کوچک بسازید

To-do List، فرم اعتبارسنجی، ماشین‌حساب ساده یا دریافت اطلاعات از یک API تمرین‌هایی هستند که چند مفهوم را کنار هم قرار می‌دهند.

05

بعد از پایه، React و Next.js

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

JavaScript بیشتر با تمرین جا می‌افتد تا با حفظ کردن

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

به همین خاطر بهتر است بعد از هر موضوع، خودتان چند تغییر در مثال ایجاد کنید. مثلاً اگر یک دکمه نمایش متن ساخته‌اید، سعی کنید نسخه‌ای بسازید که چند بخش مختلف را کنترل کند.

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

تمرین برنامه نویسی و توسعه وب
Wikimedia Commons — CC0

JavaScript همان Java است؟

خیر. شباهت اسم این دو زبان باعث شده این سؤال هنوز برای خیلی از افراد در شروع برنامه‌نویسی پیش بیاید، اما Java و JavaScript دو زبان جدا هستند.

JavaScript ارتباط بسیار نزدیکی با توسعه وب دارد و به‌صورت مستقیم داخل مرورگرهای وب اجرا می‌شود. Java زبان دیگری با اکوسیستم و کاربردهای خودش است.

بنابراین اگر هدف شما ورود به فرانت‌اند است، چیزی که در این مسیر باید یاد بگیرید JavaScript است، نه Java.

آیا یادگیری JavaScript سخت است؟

بعضی قسمت‌های JavaScript در شروع خیلی ساده به نظر می‌رسند و بعضی مفاهیم نیاز دارند چند بار با آن‌ها کار کنید تا واقعاً جا بیفتند. این موضوع طبیعی است و فقط مخصوص JavaScript نیست.

چیزی که معمولاً کار را سخت می‌کند، رفتن سریع از یک مبحث به مبحث دیگر بدون تمرین است. ممکن است ده‌ها ویدئو ببینید اما وقتی بخواهید یک پروژه ساده را از صفر شروع کنید، ندانید اولین خط را چگونه بنویسید.

روش بهتر این است که حجم آموزش را کمتر کنید و زمان بیشتری برای نوشتن کد بگذارید. حتی پروژه‌های کوچک هم برای شروع ارزش بیشتری از حفظ کردن تعداد زیادی دستور دارند.

برای شروع JavaScript به چه چیزهایی نیاز دارید؟

مرورگر

مرورگرهای امروزی ابزارهای مناسبی برای اجرای JavaScript و بررسی خطاهای کد در اختیار توسعه‌دهنده قرار می‌دهند.

ویرایشگر کد

یک Code Editor مناسب نوشتن و مدیریت فایل‌ها را راحت‌تر می‌کند. برای شروع لازم نیست ابزار پیچیده‌ای داشته باشید.

زمان برای تمرین

مهم‌ترین ابزار همین است. برنامه‌نویسی با نوشتن کد، بررسی خطا و حل مسئله کم‌کم تبدیل به مهارت می‌شود.

آموزش حضوری در کاشان

آموزش JavaScript و فرانت‌اند در کاشان

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

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

اگر هدفتان ورود به مسیر فرانت‌اند است، بهتر است قبل از انتخاب دوره، سرفصل‌ها را ببینید و مطمئن شوید JavaScript در کنار تمرین و پروژه آموزش داده می‌شود.

مشاهده دوره فرانت‌اند وارناپاد

سوالات متداول درباره JavaScript

آیا برای یادگیری JavaScript باید HTML و CSS بلد باشیم؟

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

آیا JavaScript فقط برای Frontend است؟

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

چه زمانی سراغ React برویم؟

بهتر است ابتدا مفاهیم اصلی JavaScript، کار با Array و Object، Functionها، DOM و بخش‌هایی از JavaScript مدرن را تمرین کنید. بعد از آن React قابل فهم‌تر خواهد بود.

JavaScript چقدر زمان می‌برد؟

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

برای یادگیری JavaScript باید ریاضیات قوی داشته باشیم؟

برای شروع توسعه وب نیازی به ریاضیات پیشرفته ندارید. توانایی فکر کردن مرحله‌ای، درک منطق و تمرین حل مسئله در شروع اهمیت بیشتری دارد.

جمع‌بندی

JavaScript زمانی جذاب می‌شود که نتیجه کدی را که نوشته‌اید مستقیماً در صفحه ببینید. از یک کلیک ساده شروع می‌کنید و کم‌کم می‌توانید رفتار بخش‌های پیچیده‌تری از یک سایت را کنترل کنید.

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

اگر JavaScript را با همین روش جلو ببرید، رفتن به سمت React، Next.js و پروژه‌های جدی‌تر فرانت‌اند دیگر صرفاً حفظ کردن ابزارهای جدید نخواهد بود؛ چون پایه‌ای دارید که می‌توانید روی آن ادامه مسیر را بسازید.