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

فانکشن‌ها به دو صورت کلی نوشته می‌شوند:

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

برای تعریف یک فانکشن دارای اسم از روش زیر استفاده می‌کنیم:

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

می‌خواهیم با زدن یک دکمه فانکشنی را که قبلا تعریف کردیم صدا بزنیم.

برای صدا زدن این فانکشن، کافی است نام آن را به همراه دو پرانتز در کنار آن بنویسیم.

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

روش دیگری نیز برای تعریف یک فانکشن دارای نام هست و آن ذخیره فانکشن در داخل یک متغیر است. روش صدا زدن چنین فانکشنی هیچ تفاوتی با حالت بالا ندارد.

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

مثال:

حالا اگر بخواهیم این فانکشن را صدا بزنیم باز هم می‌نویسیم:

همانند روالی که در جلسات گذشته داشتیم، این جلسه نیز کمی تمرین انجام می‌دهیم تا اطلاعاتمان کامل‌تر شود! فانکشن جزو موارد کلیدی جاوا اسکریپت است و به همین خاطر تمرین‌های جذاب‌تری در این جلسه منتظر شما است! آماده یادگیری موارد تازه باشید!

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

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

در همین جا که در حال نوشتن یک استرینگ در داخل یک اتریبیوت هستیم یک نکته کوچک جالب وجود دارد! وقتی می‌خواهیم به یک اتریبیوت اچ‌تی‌ام‌ال مقدار بدهیم بعد از مساوی و نام اتریبیوت، علامت سینگل کوتیشن ' '  یا دابل کوتیشن " "  قرار می‌دهیم. مثلا اتریبیوت کلاس‌های سی‌اس‌اس به‌ این صورت نوشته می‌شود: 

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

البته این موضوع در محیط‌های توسعه یا IDE-ها (مثل visual Studio) به‌صورت کامل توسط قابلیت هایلایت مشخص است و می‌توانید بروز خطا در کدهایتان را کاملا متوجه شوید! 

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

فایل HTML

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

ابتدای صفحه یک متغیر عمومی برای ذخیره تاریخ تعریف می‌کنیم؛ متغیری که با هر بار صدا کردن فانکشن مقدار آن با تاریخ روز عوض و برابر می‌شود.

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

اگر حالا کد خود را اجرا کنید، خواهید دید که با کلیک روی دکمه «امروز چندم است»، تگ اچ‌تی‌ام‌ال با آی‌دی showTime تغییر پیدا می‌کند و تاریخ روز را نمایش می‌دهد! به همین سادگی!

در این جلسه یک توضیح مختصر می‌دهیم؛ ولی توضیح تکمیلی را به جلسه مخصوص انتخاب تگ‌های ‌اچ‌تی‌ام ال در جاوا اسکریپت موکول می‌کنیم.

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

برای گرفتن یک شاخه از این درخت باید به نحوی آن را انتخاب کنیم. برای انتخاب چند راه پیش‌رو داریم. انتخاب توسط آی‌دی المان یکی از راه‌ها است و برای این کار از دستوراتی مثل getElementById استفاده می‌کنیم. این دستور دنبال یک المان اچ‌تی‌ام‌ال با id که به آن می‌دهیم می‌گردد و آن را برای تغییر توسط جاوا اسکریپت آماده می‌کند. بعد از انتخاب المان اچ‌تی‌ام‌ال می‌توانیم هر گونه تغییری که خواستیم روی آن اعمال کنیم. مثلا می‌توانیم محتوای اچ‌تی‌ام‌ال آن را با کمک دستور innerHTML تغییر بدهیم. در اینجا ما هم چنین کاری را انجام داده‌ایم.

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

برای دریافت خروجی از یک فانکشن دو کار انجام می‌دهیم! یا یک متغیر در بیرون فانکشن تعریف می‌کنیم و سپس این متغیر را درون فانکشن استفاده می‌کنیم و تغییر می‌دهیم! بدین ترتیب با اتمام فانکشن، متغیر ما نیز تغییر کرده است! ولی این روش همیشه جوابگو نیست! مثلا فرض کنید یک فانکشن ۵۰۰ خطی دارید. (البته هیچ وقت نگذارید یک فانکشن در کد شما انقدر زیاد شود و آن را به بخش‌ها و فانکشن‌های کوچکتر تقسیم کنید). در خط ۲۵۰ام شرطی وجود دارد که در صورت انجام شدن آن شرط، شما قصد دارید همانجا کار فانکشن را متوقف کنید و خروجی به‌دست‌آمده را برای ادامه کار تحویل بدهید!

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

برای درک بهتر مثال زیر را ببینید.

اگر به نتیجه پیغام الرت نگاه کنیم، متوجه می‌شویم که مقدار return شده از فانکشن را به ما نشان داد. در واقع هر جا این فانکشن صدا شود، مقداری که در آن جلوی return نوشته می‌شود بازگردانده خواهد شد! 

به مثال دیگری توجه کنید!

ما یک متغیر به‌عنوان سن خودمان در نظر گرفته‌ایم. بعد از آن یک متغیر بولین در نظر گرفته‌ایم که چک کنیم آیا این سن بیشتر از سی سال است یا خیر. در حالت پیش‌فرض ما مقدار false را به این متغیر داده‌ایم؛ چون فکر کرده‌ایم که سن و سال پیش‌فرض کاربر ما کمتر از ۴۰ است. 

سپس درون فانکشن با چک کردن سن و سال متغیر myAge گفته‌ایم که آیا وی سنش بیشتر از ۴۰ است یا کمتر!‌ اگر کمتر بود isOld با مقدار false و اگر بیشتر از ۴۰ بود متغیر isOld مقدارش به true تغییر پیدا خواهد کرد! در نهایت مقدار isOld را بازگردانده‌ایم. 

حالا در یک متغیر جدید به نام isHeOld این فانکشن را صدا کرده‌ایم. نتیجه این کار این می‌شود که مقدار نهایی فانکشن isOld درون متغیر isHeOld ذخیره می‌شود! یعنی اگر isHeOld را صدا بزنیم عبارت true یا false به ما برگردانده خواهد شد!

حالا یک مثال دیگر خواهیم زد. در این مثال بعد از return، فانکشن ما کارهای دیگری نیز انجام می‌دهد! نکته مهم این تمرین این است که هر کدی که بعد از return در فانکشن نوشته می‌شود اجرا نخواهد شد و انگار نادیده گرفته می‌شود؛ چون فانکشن ما کار خود را انجام داده و مقدار لازم را به ما برگردانده است. 

اگر در فانکشن اگر یک if یا else داشته باشیم که در آن return کنیم باز هم همین اتفاق می‌افتد.

در این جلسه با مفهوم توابع یا فانکشن‌ها آشنا شدیم. ولی در آخر این جلسه می‌خواهیم به یک سؤال مهم برای افرادی که در ابتدای راه هستند، پاسخ دهیم.

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

تمامی صفحات وب از کدهای اچ‌تی‌ام‌ال تشکیل شده‌اند. با کمک CSS و استایل‌های آن، این کدها ظاهر مرتب‌تر و زیباتری به خود می‌گیرند. جاوا اسکریپت نیز به شما کمک می‌کند این المان‌های زیبا را تغییر دهید. مثلا محتوای اچ‌تی‌ام‌ال‌ها را تغییر دهید، آن‌ را حذف کنید یا متنی به آن اضافه کنید و ...! در این جلسه با نحوه انتخاب المان‌های اچ‌تی‌ام‌ال آشنا خواهیم شد. 

اگر با زبان سی‌اس‌اس آشنا باشید، می‌دانید که به‌صورت کلی چند روش برای انتخاب المان‌ها وجود دارد! انتخاب بر اساس id، انتخاب بر اساس نام class یا انتخاب بر اساس نوع تگ (مثلا کل تگ‌های p یا h2 صفحه).

در جاوا اسکریپت نیز همین قانون برقرار است. یعنی شما می‌توانید المان‌های صفحه را بر اساس نام id، نام کلاس (Class) یا نوع تگ انتخاب کنید. در تمامی این حالت ما از آبجکتی به نام document کمک می‌گیریم!‌ آبجکت داکیمونت را مانند یک ظرف خیلی بزرگ در نظر بگیرید که کل اطلاعات صفحه در آن ذخیره شده است. پس وقتی می‌خواهیم به صفحه اچ‌تی‌ام‌ال در جاوا اسکریپت دسترسی داشته باشیم، می‌رویم و داخل این جعبه document را نگاه می‌کنیم و با جستجو در آن المان‌ مورد نظرمان را انتخاب (select) می‌کنیم. 

برای انتخاب المان‌های اچ‌تی‌ام‌ال از جعبه document روش‌های زیر را یاد خواهیم گرفت:

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

دستور کلی جاوااسکریپت برای انتخاب المان بر اساس شناسه یا آی‌دی به‌صورت زیر است:

این کار توسط دستور  ()getElementById  انجام می‌شود. در این دستور (یا همان متد خودمان) ما یک پرانتز داریم که داخل این پرانتز باید دو تا  “”  بگذاریم. سپس داخل این کوتیشن‌ها نام آی‌دی المان تعریف‌شده در اچ‌تی‌ام‌ال را قرار می‌دهیم.

مثلا یک المان با ID دمو داریم:

حالا می‌خواهیم آن را توسط جاوا اسکریپت انتخاب کنیم.

در این مثال ما المان HTML با آی‌دی select-by-id را انتخاب کرده‌ایم و می‌توانیم روی آن تغییر ایجاد کنیم.

انتخاب بر اساس نام تگ:
گاهی می‌خواهیم تمامی تگ‌های اچ‌تی‌ام‌ال را به‌صورت یکجا انتخاب کنیم! مثلا می‌خواهیم هر چه تگ P یا H1 در صفحه است، یکجا انتخاب کنیم و یکجا آن‌ها را تغییر دهیم. در این حالت جاوااسکریپت روش مخصوص خودش را به ما می‌دهد. این روش که با نام selectByTagName شناخته می‌شود. دستور نوشتن انتخاب بر اساس نام تگ نیز به شکل زیر است:

در این مثال ما کل المان‌های پاراگراف را که با تگ p در صفحه شناخته می‌شوند، انتخاب کرده‌ایم. دقت کنید که در اینجا ما مجموعه‌ای از المنت‌ها را با هم انتخاب می‌کنیم، پس در دستور خود کلمه Elements را به‌جای Element در دستور قبلی می‌نویسیم. 

انتخاب المان بر اساس نام کلاس:

گاهی می‌خواهیم همه المان‌هایی را که دارای یک کلاس مشخص هستند، انتخاب کنیم. در این حالت می‌توانیم از دستور  document.getElementsByClassName  استفاده کنیم و نام کلاس را همراه با “”  درون پرانتز بگذاریم.

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

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

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

در ادامه لیست تغییراتی را که به‌طور کلی روی المان‌های اچ‌تی‌ام‌ال بعد از انتخاب توسط جاوا اسکریپت انجام می‌دهیم، مرور می‌کنیم:

تغییر در متن:
فرض کنید می‌خواهید متن یک تگ p را بعد از کلیک روی یک دکمه تغییر دهید. نه سی‌اس‌اس نه اچ‌تی‌ام‌ال هیچکدام امکان تغییر در متن را بعد از رندر شدن توسط مرورگر نمی‌دهند؛ ولی جاوا اسکریپت این امکان را در اختیار شما قرار می‌دهد. برای تغییر متن از دستور innerHTML بعد از نام المان استفاده می‌شود.

در زیر مرحله به مرحله این کار را انجام داده‌ایم:

مرحله اول: انتخاب المان HTML  در صفحه
با توجه به نکاتی که بالاتر گفتیم‌ می‌توانیم یک المان اچ‌تی‌ام‌ال را بر اساس id یا class یا تگ آن انتخاب کنیم. برای مثال برای تغییر محتوای متن المان p با نام irani مراحل زیر را طی ‌می‌کنیم:

فایل html

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

نکته مهم: می‌توانیم المان اچ‌تی‌ام‌ال را  بعد از انتخاب در یک متغیر ذخیره کنیم. این کار چه فایده‌ای دارد؟ مهم‌ترین فایده آن است که اگر بخواهیم بعدا تغییر دیگری روی این المان اعمال کنیم مجبور نیستیم باز هم دستور  document.getElementById('irani') را بنویسیم و این کارها را تکرار کنیم! چون تمامی اطلاعات المان در یک متغیر ذخیره شده و کافی است نام متغیر را به همراه دستور دلخواه کنار آن بنویسیم!

برای مثال محتوای المان اچ‌تی‌ام‌ال با id با نام irani را در یک متغیر به نام  elem ذخیره می‌کنیم:

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

مثال‌های دیگر:

مثال اول:

مثال دوم: در این مثال می‌خواهیم کمی متفاوت عمل کنیم! مثلا محتوای ذخیره‌شده در یک متغیر را روی یک المان بنویسیم. 

همانطور که دیدید، یک استرینگ را که در یک متغیر ذخیره شده است، به‌عنوان متن جدید به تگ span با آی‌دی change-me داده‌ایم.

مثال سوم: در این مثال قصد داریم کمی خلاقانه‌تر از این موضوع استفاده کنیم.

در جاوا اسکریپت دستوری به نام prompt وجود دارد. این دستور یک پنجره مشابه الرت باز می‌کند؛ با این تفاوت که کاربر می‌تواند در این پنجره متن هم تایپ کند. 
برای ساخت یک پنجره prompt، یک متغیر با نام دلخواه می‌سازیم و دستور window.prompt را به عنوان مقدار به آن می‌دهیم. در نتیجه این متغیر یک پنجره propmt ٰرا در مرورگر باز می‌کند.

همچنین دقت کنید دستور innerHTML تنها متن را تغییر نمی‌دهد! در واقع تمامی HTML را که داخل آن تگ وجود دارد تغییر می‌دهد. برای مثال اگر المان اچ‌تی‌ام‌ال شما دارای بچه‌های دیگری مثل تگ‌های‌ پاراگراف‌ یا span یا هر چیز دیگری باشد، بعد از این کار حذف و محتوای جدید جایگزین آن می‌شود!

نکته بعدی آن است که شما می‌توانید یک اچ‌تی‌ام‌ال جدید را به جای استرینگ بنویسید. مثلا:

تغییر attributeهای اچ‌تی‌ام‌ال: 
یکی دیگر از مواردی که می‌توانید روی المان‌های اچ‌تی‌ام‌ال انجام دهید، تغییر attribute-های آن‌ها است. برای این کار کافی است نام attribute را بعد از المان اچ‌تی‌ام‌ال بنویسید و مقدار جدید را بدان اختصاص دهید. 

مثال: برای مثال در زیر می‌خواهیم اتریبیوت src در تصویر دارای ID با نام change-me را تغییر دهیم! برای این کار به‌راحتی دستور زیر می‌نویسیم:

در مثال بعدی می‌خواهیم مقدار یک اینپوت متنی در اچ‌تی‌ام‌ال را در صفحه چاپ کنیم! برای این کار ابتدا باید مقدار اینپوت را توسط جاوا اسکریپت ذخیره کنیم:

HTML

مثال سوم: در سومین مثال می‌خواهیم یک دکمه را به کمک جاوا اسکریپت Disable کنیم. این کار نیز به‌سادگی هر چه تمام‌تر قابل اجرا است:

HTML

فایل JS

با تغییر اتریبیوت disabled در تگ Button و true یا false کردن آن می‌توانیم دکمه‌ها را فعال یا غیر فعال کنیم. 

نکته پایانی:
همانطور که گفتیم هر اتریبیوتی در هر المان اچ‌تی‌ام‌الی قابل دسترسی است. کافی است نام آن اتریبیوت را بنویسید تا مقدار آن را بگیرید. مثلا برای دریافت نام یک فرم:

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

استفاده از HTML5 Data Attributes در جاوا اسکریپت:
یکی از قابلیت‌های HTML 5 امکان اضافه کردن اتریبیوت‌های جدید به تگ‌های HTML است. مثلا فرض کنید می‌خواهید به یک المان p علاوه بر اتربیوت id و class که به‌صورت پیش‌فرض در همه المان‌های p وجود دارند یک اتریبیوت دلخواه اضافه کنید که محتوای دلخواهتان را در خودش ذخیره می‌کند. مثلا می‌خواهیم همه المان‌های p ما دارای یک متن پیش‌فرض باشند که در صورت خالی بودن متنشان، این متن در آن‌ها نمایش داده شود.

برای این کار یک راه حل این است که یک اتریبیوت Data به اچ‌تی‌ام‌ال تگمان اضافه کنیم. قاعده کلی اضافه کردن اتریبیوت به اچ‌تی‌ام‌ال به‌صورت زیر است:

بدین ترتیب که همیشه کلمه data-  و بعد از آن‌، نام اتریبیوت دلخواهمان را می‌نویسیم. مثلا

در این مثال ما یک تگ p با اتریبیوت دلخواه customer ساخته‌ایم. اگر کلمه اتریبیوت ما چندبخشی باشد (مانند customer name) برای جدا کردن هر کلمه از علامت - استفاده می‌کنیم و نام هر اتریبیوت را می‌نویسیم. مثلا:

همچنین شما می‌توانید بی‌نهایت اتریبیوت دلخواه به المان‌های اچ‌تی‌ام‌ال خود اضافه کنید و هیچ محدودیتی در این زمینه برای شما اعمال نشده است. برای مثال:

اینجا کمی کار ما دچار تغییر می‌شود! برای این کار مراحل زیر را طی می‌کنیم:

مرحله اول: انتخاب المان بر اساس id یا هر انتخاب‌گر دیگری که یاد گرفته‌ایم:

همانطور که گفتیم می‌توانیم هر المان اچ‌تی‌ام‌ال را در یک متغیر ذخیره کنیم تا هر زمان خواستیم روی آن تغییر دهیم مجبور نباشیم کدها را از نو بنویسیم. بدین ترتیب کد بالا به‌صورت زیر می‌شود:

مرحله دوم: برای دریافت مقدار custom attribute هایی که خودمان به تگ اچ‌تی‌ام‌ال اضافه کرده‌ایم از قاعده کلی زیر استفاده می‌کنیم:

elementName.dataset.attributeName

این بدین مفهوم است که ما تمامی اتریبیوت‌های جدیدمان را در یک جا به نام dataset ذخیره داریم و از داخل این آبجکت می‌توانیم هر یک را جدا‌گانه داشته باشیم. برای مثال در المنت اچ‌تی‌ام‌ال زیر خواهیم داشت:

مثلا data-custom-name می‌شود customerName

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

قبل از شروع آموزش باید با اهمیت و نیازی که به مقایسه‌گرها داریم، آشنا شویم. همان‌طور که از نام مقایسه‌گر پیداست، وظیفه‌ی آن، مقایسه‌ی بین متغیرها است؛ به‌عنوان مثال، در متغیرهای عددی ببینید کدام عدد از کدام عدد بزرگتر یا کوچکتر است. همین که بدانید عدد ۲ از ۳ در جاوا اسکریپت کوچکتر است، در بسیاری از موارد کمک شایانی به شما خواهد کرد!

مقایسه در جاوا اسکریپت انواع بسیاری دارد. نه تنها مقدار متغیرها، بلکه نوع متغیرها نیز قابل مقایسه است؛ به‌عنوان مثال، شما می‌توانید علاوه‌بر مقدار (مثلا ۲ بزرگتر است یا ۴)، نوع متغیرها (استرینگ یا عدد) را نیز مقایسه کنید یا متغیر دلخواهی را از نظر نوع و میزان با متغیر دیگر یکی است یا نه کلی به کمکتان می‌آید.

درباره‌ی علامت =  قبلا هم صحبت کرده‌ایم و یاد گرفته‌ایم! از مساوی تنها برای اختصاص دادن یک مقدار به یک متغیر استفاده می‌شود و به هیچ‌وجه قدرت مقایسه ندارد.

وقتی دو مساوی قرار بدهیم، جاوا اسکریپت این‌طور برداشت می‌کند که باید دو متغیر را از نظر میزان با هم مقایسه کند. مثلا متغیر x=5 را در نظر بگیرید. در نتیجه این مقایسه دو حالت پیش می‌آید. یا مقدار دو طرف مساوی برابر است و مرورگر true بر می‌گرداند یا این تساوی اشتباه است و مرورگر false بر می‌گرداند.

برای مثال فرض کنید یک متغیر با نام x داریم! وقتی x == 5 بنویسیم یعنی چک‌ می‌کنیم که آیا ایکس با ۵ برابر است یا نه! اگر جواب صحیح باشد، مرورگر true بر می‌گرداند و اگر متغیر با مقدار آن سمت مساوی برابر نباشد مرورگر false بر می‌گرداند. 

مثال:

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

مثال: 

دو عبارت اول صحیح بود چرا که هم از نظر مقدار و هم از نظر نوع با هم برابر بودند (هر دو عدد هستند) ولی عبارت سوم اشتباه از آب در آمد. چرا؟ چون هر چند مقدار هر دو تای آن‌ها ۴ است ولی از نظر نوع با یکدیگر یکسان نیستند و هر کدام یک مدل داده هستند! یکی عدد و یکی استرینگ (به کوتیشن دور عدد ۴ در متغیر y دقت کنید تا متوجه شوید که ۴ استرینگ است!) پس مرورگر false بر می‌گرداند.

 

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

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

منظور از اپراتورهای منطقی همان علامت‌های بزرگتر و کوچکتر است که از دوران مدرسه و ریاضیات ابتدایی با آن آشنا هستیم. 

وقتی علامت بزرگتر قرار دهیم یعنی می‌خواهیم ببینیم عبارت سمت چپ از عبارت سمت راست بزرگتر است یا خیر. مثلا:

همچنین باید بدانید که این گونه مقایسه‌ها فقط برای اعداد قابل استفاده هستند و دو رشته متنی را نمی‌توانیم اینگونه مقایسه کنیم.

وقتی علامت کوچکتر > قرار دهیم یعنی می‌خواهیم ببینیم عبارت سمت چپ از عبارت سمت راست کوچکتر است یا خیر. مثلا:

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

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

حالا که با متغیرهای عددی، اعمال روی آن‌ها و نحوه مقایسه آن‌ها آشنا شده‌ایم وقت آن رسیده تا چند تمرین ساده برای آشنایی بیشتر انجام دهیم:

تمرین شماره ۱: دو متغیر استرینگی بسازید! سپس با کمک دستور length تعداد کاراکترهای آن‌ها را پیدا کرده و مقایسه کنید که کدام یک از این جملات طولانی‌تر هستند! 

تمرین شماره ۲:‌ با کمک دستور ساخت عدد رندوم، دو عدد به صورت رندوم و تصادفی بسازید و با کمک مقایسه‌گرها آن‌ها را مقایسه کنید.

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

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

در همین مثال، می‌توانستیم از همان ابتدا نیز نوع متغیرها را مشخص کنیم:

وقتی علامت سینگل  ' '  یا دابل کوتیشن  ""   را در روبه‌روی متغیرها می‌نویسیم در واقع به جاوا اسکریپت می‌گوییم که نوع متغیر ما استرینگ بوده و ما یک استرینگ خالی تعریف کرده‌ایم!

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

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

برای مثال طول متغیر stringOne را این‌گونه می‌سنجیم: 

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

حالا برای اتمام این تمرین آن‌ها را توسط مقایسه‌گر کوچک‌تر می‌سنجیم:

یکی از بنیان‌های هر زبان برنامه‌نویسی استفاده از شرط‌ها است. در واقع منطق بسیاری از اعمال ما را if و  else تشکیل می‌دهد. مثلا وقتی می‌خواهیم برای رفتن به یک سفر برنامه‌ریزی کنیم، می‌گوییم اگر فلان روز تعطیل شد فلان کار را می‌کنم و اگر تعطیل نشد آن یکی کار را انجام می‌دهم و اگر هیچکدام نشد کار دیگری می‌کنم و الی آخر. این موضوع عینا در دنیای برنامه نویسی نیز صدق می‌کند.

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

فرض کنید متغیری به نام specialCustomer داریم. این متغیر وقتی true باشد یعنی مشتری ما مشتری ویژه است و زمانی که false باشد یعنی مشتری ما ویژه نیست. برای چک کردن این موضوع سراغ if و else ساده می‌رویم:

همانطور که در بالا مشاهده می‌کنید ما چک کرده‌ایم که اگر مشتری ما ویژه بود، ۱۰۰ تومان از مبلغ کل سفارش وی کسر شود. یعنی (totalPrice -= 100).

می‌توانید به if خود یک else نیز اضافه کنید. else زمانی اتفاق می‌افتد که شرایط مد نظر شما در شرط if به هر دلیلی مورد قبول واقع نشود. بدین ترتیب شما وارد else می‌شود و کد else شما اجرا خواهد شد.

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

گاهی پیش می‌آید شما می‌خواهید حالت‌های بیشتری را نیز چک کنید. مثلا می‌خواهید بدانید اگر عدد مورد نظر ۰ بود فلان کار را انجام بده، اگر عدد ۱ بود، فلان کار و اگر ۲ بود کار دیگر و الی آخر... برای این کار دو روش پیش روی داریم که با هم مرور می‌کنیم.

در این حالت جاوا اسکریپت از بالا به پایین حرکت می‌کند.

مثال:

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

مثال زیر را ببینید:

یکی دیگر از ابزارهای مهم در شرط‌گذاری جاوا اسکریپت &&  و  ||  هستند. کاربرد این دو چیست؟‌ یک مثال می‌زنیم! فرض کنید می‌خواهید چک کنید آیا عدد ۴ بین ۵ و ۶ هست یا خیر. برای این کار به سادگی می‌توانیم از && استفاده کنیم. دو علامت & در کنار هم در شرط‌های ما به معنای آن است که بگوییم هم شرط اول برقرار باشد هم شرط دوم! 

مثلا: 

مثال دیگری را در مورد همان پروژه مدیریت رستوران با هم مرور می‌کنیم. فرض کنید سه نوع کاربر دارید!‌ کاربری که بالای هزار تومان خرید دارد. کاربری که ویژه است و کاربری که دارای امتیاز بالای ۱۰۰ است! (یا هر نوع دیگری!) می‌خواهید در صورتی که کاربری وجود داشته باشد که هر سه نوع این امتیازها را همزمان دارد و شما بخواهید برای وی کاری کنید چه کار می‌کنید؟ مطمئنا یک شرط با استفاده از && می‌گذارید و برای وی هر کاری خواستید انجام می‌دهید.

مثال:

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

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

در این حالت چون x با یکی از حالت‌های if ما برابری می‌کند، بلاک کد if ما اجرا خواهد شد!‌

حالا که هم با مقایسه‌گرها آشنا شده‌ایم و هم ساختار شرط‌ و شروط‌گذاری را می‌دانیم یک تمرین جالب‌تر انجام دهیم!

حالا می‌خواهیم یک تمرین ساده دیگر برای تکمیل این جلسه انجام دهیم. 

فرض کنید صاحب یک مغازه سوپرمارکت هستید و می‌خواهید یک سیستم مدیریت مشتریان ایجاد کنید که افرادی که خرید بالای دو هزار تومان انجام دهند یک تخفیف ویژه ۱۰۰ تومانی بگیرند و افرادی که بیشتر از ۲۵۰۰ تومان خرید کنند ۲۰۰ تومان تخفیف بگیرند! 

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

برای این کار ابتدا یک متغیر به نام سبد خرید ایجاد می‌کنیم. 

سپس تعدادی محصول را به صورت دلخواه و با متغیرهای مختلف اضافه می‌کنیم:

حالا فرض می‌کنیم که مشتری ما سه آیتم به سبد خرید خود اضافه کرده باشد. در این صورت قیمت نهایی سبد خرید وی مجموع قیمت محصولات انتخابی است.

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

یک راه همانطور که گفتیم استفاده از چند if پشت سر هم است: 

یک تمرین دیگر نیز با هم مرور می‌کنیم. فرض کنید یک متغیر با نام x داریم! 

وقتی این فایل را اجرا کنیم هم بلاک اول و هم بلاک دوم اجرا می‌شود! چرا که مرورگر با وجود رسیدن به شرط درست در بلاک اول باز هم به جستجو در ifهای دیگر ادامه می‌دهد و همه آن‌ها را اجرا می‌کند. از آنجا که ما در بلاک اول مقدار متغیر ایکس را تغییر داده‌ایم پس ساختار شرط‌هایمان نیز تغییر کرده است!

حالا همین مثال را با کمک else if اجرا می کنیم: 

اگر این کد را اجرا کنید خواهید دید که تنها یک بار و در بلاک اول کد ما اجرا شد! در واقع  else if  تنها یک بار اجرا می‌شود و مرورگر در صورت پیدا کردن شرایط درست دیگر سراغ دیگر شرط و شروط نخواهد رفت!

خوبی بولین‌ این است که می‌توانید مقدار آن‌ها را به دلخواه تغییر دهید. یعنی یک‌ مقدار پیش‌فرض مثلا false برای آن‌ها تعریف کنید و بعد مثلا با یک دکمه مقدار آن را به true تغییر دهید. 


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

مثال:

از اینجا به بعد مقدار متغیر true برابر با booleanVariable خواهد بود.

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

ابتدا یک متغیر به نام clicked می‌سازیم. 

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

برای مثال روی یک دکمه به شکل زیر اتریبیوت آن کلیک تعریف می کنیم:

در این اتریبیوت ما باید یک فانکشن به عنوان مقدار به اتریبیوت اضافه کنیم که در اینجا ما فانکشن clickHandler را بدان وصل کرده‌ایم. فانکشن‌ها یک جلسه کاملا اختصاصی دارند ولی برای آشنایی فعلی شما آن را مختصرا توضیح می‌دهیم. فانکشن یک سری تکه کد است که در صورت نیاز و خواسته ما در کد تکرار می‌شود. فانکشن‌ها عملکرد مخصوص خودشان را دارند و معمولا دارای نام مشخص هستند(مثلا نام فانکشن ما در اینجا clickHandler است). 

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

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

در همین مثال ما یک فانکشن به اسم کلیک هندلر داریم. کار این فانکشن این است که چک کند ما کلیک اول هستیم یا خیر. 

مثال‌های بسیار دیگری از کاربرد بولین‌ها در جاوا اسکریپت وجود دارند. مثلا شما میتوانید یک متغیر در ابتدای کد تعریف کنید به عنوان userStayLongTime  و مقدار آن را مساوی false قرار دهید. سپس با گذشت زمان مشخصی این متغیر را true کنید و بدین ترتیب متوجه شوید که یوزر زمان زیادی را در صفحه شما گذرانده است. سپس هر جا که خواستید می‌توانید با چک کردن این متغیر متوجه شوید که آیا یوزر مورد نظر شما زمان کافی در سایت گذرانده یا خیر و بر این اساس عملکرد متفاوتی نمایش دهید! استفاده‌های خلاقانه‌تر و جالب‌تری نیز از این موضوع وجود دارند ولی نیازمند یادگیری بخش‌های بیشتری از جاوا اسکریپت هستند!

در جلسات آینده و به مرور با تکمیل شدن دانش شما روش‌های خلاقانه‌تری برای استفاده از بولین‌ها خواهیم آموخت.

انواع دیگر متغیرها:
در کنار این‌ها، دو نوع داده دیگر نیز داریم که احتمالا در حین کد زدن خیلی با آن‌ها مواجه خواهید شد: null و  undefined که در واقع هر کدام یک مقدار مشخص دارند. نال به معنای خالی است و وقتی که مقدار متغیر شما خالی باشد، استفاده می‌شود. undefined به معنای تعریف‌نشده است و وقتی متغیری مقدار نامشخصی داشته یا تعریف نشده باشد، به ما نمایش داده خواهد شد. مثلا وقتی یک متغیر هنوز تعریف نشده باشد و شما آن را در قالب پنجره alert صدا بزنید با ارور مقدار undefined مواجه خواهید شد. این موضوع را حتما به‌عنوان یک تمرین ساده امتحان کنید.

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

در این جلسه قصد داریم با نحوه‌ی جمع و تفریق و ضرب و تقسیم متغیرها آشنا شویم. این اعمال تنها روی متغیرهای عددی قابل اجرا هستند. همچنین در ادامه با اپراتورهایی مثل += آشنا خواهیم شد.

علامت = به معنای دادن یک مقدار به یک متغیر است! نه متغیر بیشتر می‌شود و نه کمتر و همان چیزی است که در آن‌طرف مساوی بدان داده شده است!

مثال:

در این حالت مقدار سمت چپ به اندازه‌ای که در سمت راست نوشته شده است، افزوده می‌شود. مثلا اگر یک متغیر مثل var X = 10 داشته باشیم، با این کار خواهیم داشت:

در نهایت مقدار X = 15 خواهد بود! یعنی ۱۰ (مقدار اولیه)‌ به علاوه مقداری که بدان اضافه شده است (5).

برای کم کردن دو متغیر، کافی است بین آن‌ها علامت - قرار دهیم. مثال:

در این حالت باز هم از مقدار اولیه متغیر، مقداری که در سمت راست آن نوشته شده است، کم می‌شود. مثلا اگر یک متغیر مثل var X = 10 داشته باشیم، با این کار خواهیم داشت:

در این حالت مقدار ایکس برابر با 8 خواهد بود! یعنی همان مقدار اولیه (10) منهای مقداری که در آن‌طرف مساوی قرار داده‌ایم (2).

برای ضرب کردن دو متغیر, کافی است بین آن‌ها علامت * قرار دهیم. مثال:

در این حالت باز هم مقدار اولیه متغیر سرجایش باقی است!‌ فقط به اندازه‌ای که در سمت راست می‌نویسیم، در مقدار قبلی ضرب می‌شود. مثلا اگر یک متغیر مثل var X = 10 داشته باشیم، با این کار خواهیم داشت:

مقدار نهایی آن برابر خواهد بود با ۵۰ .

برای تقسیم کردن دو متغیر, کافی است بین آن‌ها علامت / قرار دهیم. مثال:

در این حالت باز هم مقدار اولیه متغیر سرجایش باقی است!‌ فقط به اندازه‌ای که می‌گوییم، بر مقدار قبلی آن تقسیم می‌شود. مثلا اگر یک متغیر مثل var X = 10 داشته باشیم، با این کار خواهیم داشت:

مقدار نهایی آن برابر خواهد بود با 2.

در این حالت باز هم مقدار اولیه متغیر سرجایش باقی است!‌ فقط به اندازه‌ای که می‌گوییم، بر مقدار قبلی آن تقسیم می‌شود و باقیمانده این تقسیم نوشته می‌شود. مثلا اگر یک متغیر مثل var X = 10 داشته باشیم، با این کار خواهیم داشت:

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

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

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

در این حالت پرانتز را خالی گذاشته‌ایم پس عدد بدون اعشار رند می‌شود و عدد ما یک عدد صحیح خواهد شد.

در این حالت عدد ما تا شش رقم رند می‌شود.

در این حالت نیز عدد ما تا یک رقم ممیز اعشار یعنی ۱۷۷.۱ رند شده است.

خصوصا در هنگام محاسبه کردن‌، نیاز داریم که متعیرهای ما از جنس عدد باشند نه استرینگ! اینجا است که متدهایی وسط می‌آیند که کارشان تبدیل متغیرهای دیگر به متغیرهای عددی است. برای تبدیل یک متغیر از جنس استرینگ به یک متغیر عددی می‌توانیم از متد parseInt() استفاده کنیم. هر چه درون پرانتز این متد بنویسیم به عدد تبدیل خواهد شد. مثال‌های زیر گویای این موضوع هستند. در این مثال‌ها ابتدا یک متغیر با نام x تعریف کرده‌ایم. 

حالا می‌خواهیم این متغیر را با متغیر دیگری به نام y جمع کنیم.

حالا متغیر z حاصل جمع این دو عبارت را نمایش می‌دهد.

همانطور که می‌بینید حاصل جمع این دو عبارت به جای عدد ۳ عبارت ۱۲ می‌شود. چرا؟ چون یک طرف این جمع استرینگ و متن است و یک طرف عدد و یک عدد و یک استرینگ با هم جمع نمی‌شوند. بلکه در کنار هم قرار می‌گیرند و حاصل آن‌ها به جای جمع شدن، به هم چسبیدن است. راه حل این مشکل تبدیل عبارت y به یک عدد است! اینجا است که متد parseInt()  به کمک شما می‌آيد. برای این کار کافی است عبارت را مطابق مثال بنویسید.

ولی یک نکته مهم در این قسمت وجود دارد که در کل نوشتن جاوا اسکریپت باید آن را فرا بگیرید. در واقع درست است که ما متغیر y را تغییر داده‌ایم ولی باید مقدار جدیدش را در جایی ذخیره کنیم! چه جایی بهتر از خود y! پس به جای عبارت بالا اینگونه می‌نویسیم:

بدین ترتیب مقدار جدید y (‌که همان عددی شدن آن است) مجددا در y ذخیره می‌شود.

این متد همانند متد parseInt() است با این تفاوت که شما هر چیزی را از این طریق می‌توانید به عدد تبدیل کنید! هر چیزی حتی تاریخ!‌ به مثال‌های زیر می‌کنیم:

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

یک برنامه بنویسید که بتواند درصد تخفیف اعمال‌شده روی محصولات یک فروشگاه و قیمت نهایی را محاسبه کند. از آنجا که هنوز نحوه‌ی دریافت متغیرها از طریق فرم در اچ‌تی‌ام‌ال را یاد نگرفته‌ایم ،می‌توانید درصد تخفیف را به‌صورت پیش‌فرض در یک متغیر مثل (var off = 10) ذخیره کنید.

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

مرحله اول: تمامی متغیرهای لازم برای برنامه را در شروع آن تعریف می‌کنیم. مطمئنا یکی از متغیرهای اصلی ما در این بخش، درصد تخفیف است. پس یک متغیر به نام var off = 10 تعریف می‌کنیم.

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

مثلا برای یک محصول دو هزار تومانی یک متغیر عددی تعریف می‌کنیم و مقدار قیمت دلخواه بدان می‌دهیم:

حالا برای محاسبه درصد تخفیف، کافی‌ است متغیر off را بر ۱۰۰ تقسیم کنیم تا به‌صورت درصد در بیاید. سپس مقدار نهایی این متغیر را در مقدار قیمت محصول ضرب کنیم. به همین سادگی!

برای تقسیم off بر ۱۰۰ دو راه پیش رو داریم! 

دقت کنید که چون متغیر off یک‌ بار تعریف شده است، نیازی به تعریف مجدد آن نیست و کافی است در زمانی که بدان نیاز داریم نام آن را بنویسیم و مقدار جدیدی بدان اختصاص دهیم.

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

در آخرین مرحله بعد از تعریف متغیرهای مربوط به تخفیف، کافی است مقدار قیمت را در مقدار تخفیف ضرب کنیم:

از متغیرهای عددی در کارهای بسیاری می‌توان بهره برد. از محاسبات ریاضی ساده در بخش‌های محاسباتی گرفته تا محاسبات پیچیده در برنامه‌های پیچیده‌تر... ما در دوره فعلی تمرکز خود را روی ساده‌ترین متدها و امکانات متغیرهای عددی قرار داده‌ایم؛ ولی در صورت علاقه می‌توانید نکات پیشرفته‌تر و کامل‌تر از این موضوع را در وب‌سایت w3schools مطالعه کنید.

اگر با زبان برنامه‌نویسی «جاوا اسکریپت» (JavaScript) آشنایی نداشته باشید، نمی‌توان شما را به طور جدی به عنوان یک توسعه‌دهنده در نظر گرفت. امروزه جاوا اسکریپت به عنوان محبوب‌ترین زبان برنامه‌نویسی تحت وب شناخته می‌شود. وب‌سایت‌هایی که اغلب بازدید می‌کنید، بازی‌هایی که در reg انجام می‌دهید، برنامه‌هایی که به آن‌ها تکیه می‌کنید، همگی بر پایه‌ی جاوا اسکریپت هستند. بنابراین اگر در حال فکر کردن به یادگیری برنامه‌نویسی هستید و قصد دارید تا اولین زبان برنامه‌نویسی را امتحان کنید؛ جاوا اسکریپت همان چیزی است که نیاز دارید یاد بگیرید.

اگر به همین سادگی قانع نمی‌شوید در زیر دلایلی را برشمرده‌ایم که احتمالا شما را متقاعد خواهند کرد:

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

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

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

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

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

نقطه اشتراک پی‌پل، نتفلیکس، لینکداین و اوبر در چیست؟ همه آن‌ها بر اساس جاوا اسکریپت هستند – به طور خاص می‌توان به Node.js اشاره کرد. بیشتر وب‌سایت‌ها و برنامه‌های مهم جهان به نوعی از جاوا اسکریپت استفاده می‌کنند.

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

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

میانگین حقوق و دستمزد برنامه‌نویسان جاوا اسکریپت از ۷۴هزار تا ۱۳۰ هزار دلار در سال است.

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

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

کلمه type="text/javascript" به مرورگر ما می‌فهماند که در حال نوشتن چه نوع فایل جاوا اسکریپتی هستیم. کلمه src نیز آدرس فایل جاوا اسکریپت ما را بیان می‌کند.

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

برای آدرس دادن به فایل‌ها دو راه حل وجود دارد:

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

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

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

حالت اول: وقتی دو فایل در یک پوشه قرار بگیرند برای آدرس‌دهی به آن‌ها تنها کافیست تا اسم فایل را وارد کنید؛ مثلا فرض کنید ما یک فولدر به اسم sample1 داریم که در آن دو فایل با نام index.html و index.js وجود دارد. برای صدا زدن فایل جاوا اسکریپت در این صفحه HTML تنها کافیست تا به صورت زیر عمل کنیم:

حالت دوم: در حالتی که یک فایل در فولدری جداگانه مانند sample2 قرار دارد و فولدر دیگری با نام js-folder دارید که داخل این فولدر فایل جاوا اسکریپت ما قرار گرفته است صفحه html نیز در فولدر ریشه یا همان sample2 قرار دارد. برای اینکه به فایل HTML فایل جاوا اسکریپتی داخل JS Folder برسید تنها کافی است تا قبل از نام فایل، نام فولدر  را به همراه علامت / بنویسید.

در این حالت، نوشتن نام فولدر مانند این است که ما وارد آن فولدر شده باشیم. به مثال زیر توجه کنید:

مثال دیگر:


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


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


حالت سوم: فرض کنید فولدری به نام sample3 داریم که در آن یک فولدر به نام html، فولدری به نام js Folder و یک فولدر به اسم image وجود دارد. فرض کنید که فایل HTML ما در داخل فولدر html و فایل جاوا اسکریپت نیز در فولدر js-folder قرار دارد. برای اینکه از فایل HTML فایل جاوا اسکریپت را صدا بزنیم چه کار باید کنیم؟
در این حالت فایل مبدا ما (همان HTML) در فولدر اصلی نیست در نتیجه نمی‌توان تنها نام فولدرها را بنویسیم و وارد آن فولدر شویم. در این حالت با کمک یک / ساده در  ابتدای آدرس می‌توان آدرس‌دهی را از فولدر ریشه شروع کرد. با قرار دادن  علامت / در ابتدای مسیر  در حقیقت مسیر‌دهی را از فولدر ریشه شروع کرده‌ایم. در مثال زیر فایل HTML در پوشه اچ‌تی‌ام‌ال قرار دارد و در این پوشه هیچگونه فایل جاوا اسکریپتی وجود ندارد با این حال چون ما در ابتدای آدرس علامت / قرار داده‌ایم گویی که از فولدر ریشه ‌آدرس داده‌ایم.


حالت چهارم: فرض کنید یک فولدر با نام sample4 داریم که در این فولدر نیز فولدری به نام app وجود دارد؛ درون فولدر app یک فولدر  با نام index وجود دارد که درون آن نیز فولدری به نام HTML و یک فولدر به نام jsfolder وجود دارد. فرض کنید فایل html ما مثل همیشه در داخل فولدر html و فایل جاوا اسکریپت نیز در فولدر jsfolder قرار دارد در این صورت برای اینکه از فایل اچ‌تی‌ام‌ال، فایل جاوا اسکریپت را صدا بزنیم چه کار باید کرد؟

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

اما راه‌حل چیست؟ استفاده از /..

وقتی /.. قبل از آدرس یک فایل قرار می‌دهید بدین معنا است که قصد بازگشت از فولدر را داریم (مثل زدن دکمه back در ویندوز). در این حالت تنها کافی است تا به جای حرکت به سمت فولدرهای جلو به سمت عقب و فولدرهای پیشین حرکت کنید. 

اگر در همین مثال مسیر رسیدن به فایل‌ اچ‌تی‌ام‌ال به صورت زیر باشد:
 

و مسیر رسیدن به جاوا اسکریپت از ریشه به صورت زیر باشد:


دیگر نیازی نیست برای صدا زدن فایل جاوا اسکریپت در داخل فایل اچ‌تی‌ام‌ال کل مسیر از فولدر ریشه را طی کنیم؛ برای این کار کافی است تا یک بار به فولدر قبلی برگردیم (یعنی فولدر app در این مثال) و از آنجا وارد فولدر بعدی یعنی فولدر جاوا اسکریپت شویم (با زدن دو نقطه در اول آدرس در این حالت & از پوشه HTML به عقب برگشته‌ایم و بعد وارد پوشه Js شده و در آخر فایل index.js را انتخاب کرده‌ایم).


جهت درک بیشتر  و راحت‌تر این موضوع، می‌توانید به نمونه‌های ساخته شده در سایت w3schools مراجعه کنید.

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

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

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

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

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

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

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

• کتابخانه‌ی 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  را از طریق لینک‌های زیر دنبال کنید و خود را برای شروع دوره جاوا اسکریپت آماده کنید.

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


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

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

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

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

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

javascript



HTML