آموزش جاوا اسکریپت - مقدمه ای بر Javascript

javascript-introduction

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

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

جاوا اسکریپت زبان برنامه نویسی وب و برای تکمیل HTML است، البته در سمت کاربر (Client)!

آیا می دانید سمت کاربر چیست؟

ما در دنیای توسعه دهندگان وب دو قسمت بسیار مهم داریم. تمام دنیای توسعه ی وب عبارت است از برقراری ارتباط و این مسئله از یک نظر می تواند به همان دو قسمت تقسیم بندی شود؛ server side (یا سمتِ سرور) و client side (یا سمت کاربر).

آیا می دانید فرق این دو چیست؟

به طور خلاصه می توان گفت زبان هایی که در دسته ی server side قرار دارند مربوط به سرور هستند و زبان هایی که در دسته ی client side قرار دارند مربوط به سمت کاربر (یعنی مرورگر و کامپیوتر کاربر) هستند.

نمود این دسته بندی در دنیای برنامه نویسی به شکل زیر می باشد:

server side vs client side programming languages
server side vs client side programming languages

سوال: اگر من نخواهم جاوا اسکریپت یاد بگیرم چه؟

پاسخ: این مسئله بستگی به هدف شما دارد. آیا میخواهید front-end developer (به معنی توسعه دهنده ی سمت کاربر) بشوید و یا back-end developer (به معنی توسعه دهنده ی سمت سرور)؟ شما می توانید یکی از این دو مورد را به طور تخصصی انتخاب کنید.

اما باید تذکر بدهم که حتی اگر به مباحث سمت سرور علاقه دارید باید حداقل آشنایی پایه ای با اکثر مباحث جاوا اسکریپت داشته باشید چرا که جدا کردن این موارد تنها روی کاغذ به این آسانی است.

برخی مباحث جاوا اسکریپت مانند AJAX به طور مستقیم با سرور ارتباط دارند (ارسال درخواست به سرور و نه پردازش آن). همچنین صفحه ی وبی که تنها با HTML و CSS ساخته شود به شدت خشک و غیر قابل انعطاف می باشد.

برای اطلاعات عمومی خوب است که بدانید به کسی که هم به سمت سرور مسلط است و هم به سمت کاربر می گویند Full stack developer.

توجه: نکته ای که همه ی تازه کاران در جاوا اسکریپت آن را اشتباه میگیرند این است که زبان های جاوا و جاوا اسکریپت هیچ ربطی به یکدیگر ندارند، به غیر از اینکه هر دو زبان برنامه نویسی هستند.

نقل قول معروفی بین برنامه نویسان جاوا اسکریپت مشهور است:

Java is to JavaScript as ham is to hamster.

ترجمه ی این نقل قول این است: جاوا اسکریپت در مقابل جاوا مانند هَم (نوعی گوشت) مقابل همستر (نوعی حیوان) است.

نکته: اگر جایی نام ECMAScript به گوشتان خورد، جا نخورید. ECMAScript یک استاندارد برنامه نویسی است که زبان هایی مانند جاوا اسکریپت از آن پیروی می کنند.

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

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

روش غیر فعال کردن جاوا اسکریپت به شکل زیر است.

آموزش جاوا اسکریپت (غیر فعال کردن جاوا اسکریپت در مرورگر)

مانند تصویر بالا (مرورگر کروم) در تنظیمات مرورگر خود میتوانید گزینه ای با نام JavaScript پیدا کنید. آن را غیر فعال کنید و به چند سایت سر بزنید! ما سایت گوگل را انتخاب می کنیم و بعد از غیر فعال کردن جاوا اسکریپت صفحه را refresh میکنیم. نتایج را ببینید:

نمایش سایت با جاوا اسکریپت در جیمیل

JavaScript enabled vs JavaScript disabled
JavaScript enabled vs JavaScript disabled

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

اگر دوست دارید یک استفاده ی ساده و عملی از جاوا اسکریپت را ببینید روی این لینک کلیک کنید. ما هنوز کدنویسی را شروع نکرده ایم بنابراین از کد ها صحبتی نمیکنیم اما مکانیسم کار این مثال را برای شما توضیح میدهم:

  • ابتدا عکس دو لامپ داریم. یکی روشن و دیگری خاموش.
  • سپس عکس لامپ خاموش را در سورسِ HTML خود، قرار میدهیم
  • حالا با استفاده از کد های جاوا اسکریپت میگوییم اگر کاربر روی فلان دکمه کلیک کرد، عکس لامپ خاموش را بردار و به جایش لامپ روشن را قرار بده.

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

در قسمت های بعدی سراغ کد نویسی خواهیم رفت.

یا حق.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش جاوا اسکریپت | Javascript توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (6 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

مانی منجی پور
26 آذر 1399
عالی !!!! من هر سایتی رفتم هی درباره تابع مابع و ازین چیزا حرف میزدن که من اصلا نمیدونم چیه!! اما شما به من فهموندید که جاوا اسکریپ سخت نیست!!!! اگه روش آموزش خوب ابشه واقعا ممنونم!!!!

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

| اسحاق |
09 آذر 1399
سلام خسته نباشید. واقعا عالی فقط یه سوال مقاله 43 اینجا اشتباه بارگذاری نشده احتمالا؟؟ ترکیب Express و Typescript: شروع یک پروژه ساده

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

محمد امیری
20 تیر 1399
برادر عزیز تشکر از زحماتتان . بسیار توضیحات به جا.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

محمد
19 اسفند 1398
یه سوال شما کتابخونه ای چیزی ندارید کع تمام کد ها و دستورات درونش ذخیره شده باشه؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

مینا
08 مرداد 1398
با سلام و خسته نباشید آموزشتون عالی هست. با زبان ساده و روان خدا خیرتون بده

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
13 مرداد 1398
سلام دوست عزیز خوشحالم که مورد توجه شما بوده

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

سید محمد
11 خرداد 1398
مرسی ❤

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
13 مرداد 1398
سلام دوست عزیز خواهش میکنم. امیدوارم که استفاده کرده باشید.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.