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

جاوا اسكريپت يكي از مهم‌ترين زبان‌هاي برنامه‌نويسي حوزه‌ي وب محسوب مي‌شود. جاوا اسكريپت اولين بار با اسم 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