آموزش جاوا اسکریپت (JavaScript)
جاوااسکریپت به عنوان یکی از سه ستون اصلی توسعه وب، در کنار HTML و CSS، نقش بسیار مهمی در ایجاد وبسایتهای تعاملی و پویا دارد. با یادگیری این زبان، شما قادر خواهید بود تا: وبسایتها و اپلیکیشنهای پویا و تعاملی بسازید. با استفاده از فریمورکها و کتابخانههای معروف مانند React، Angular و Vue پروژههای حرفهای ایجاد کنید. به عنوان یک توسعهدهنده فول استک فعالیت کنید و در بخشهای مختلف توسعه وب نقش ایفا کنید. در این دوره، ما از اصول اولیه جاوااسکریپت شروع میکنیم و به مرور به مباحث پیشرفتهتری میپردازیم.
سرفصل های دوره
برای مشاهده ویدیوها ابتدا دکمه شرکت در دوره را بزنید
فصل اول: مبانی جاوا اسکریپت
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در اینجا، به معرفی چندین کلید میانبر و تکنیکهای مفید برای نوشتن سریعتر و کارآمدتر کدهای جاوااسکریپت میپردازیم. این کلیدهای میانبر و تکنیکها به شما کمک میکنند تا بهرهوری خود را در هنگام کدنویسی افزایش دهید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این بخش، نحوه قرار دادن جاوااسکریپت در صفحات وب و تاثیر آن بر سرعت لود سایت را بررسی میکنیم. روشهای مختلفی برای اضافه کردن جاوااسکریپت به صفحات HTML وجود دارد که هر یک تاثیرات خاص خود را بر سرعت بارگذاری صفحات دارند.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
نظرات (کامنتها) در جاوااسکریپت برای توضیح کد، یادداشتهای توسعهدهنده، و افزایش خوانایی کد استفاده میشوند. کامنتها توسط مفسر جاوااسکریپت نادیده گرفته میشوند و در نتیجه اجرا نمیشوند. در جاوااسکریپت، دو نوع کامنت وجود دارد: کامنتهای تکخطی و کامنتهای چندخطی.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
متغیرها در جاوااسکریپت برای ذخیره مقادیر و اطلاعات استفاده میشوند. جاوااسکریپت از سه نوع متغیر اصلی برای تعریف متغیرها استفاده میکند: var، let، و const.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در این بخش، یک مثال ساده از تعریف و استفاده از متغیرها در جاوااسکریپت برای انجام عمل ضرب ارائه میدهیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
متغیرهای ثابت با استفاده از کلمه کلیدی const تعریف میشوند و پس از مقداردهی اولیه نمیتوانند تغییر کنند. این ویژگی باعث میشود که const برای تعریف مقادیری که قرار نیست تغییر کنند، مانند ثابتها، مناسب باشد.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
عملگرهای حسابی برای انجام عملیات ریاضی بر روی مقادیر عددی استفاده میشوند. در جاوااسکریپت، چندین عملگر حسابی وجود دارد که هر یک عملکرد خاصی دارند. در این بخش، با این عملگرها آشنا میشویم و مثالهایی برای هر یک ارائه میدهیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
عملگرهای رابطهای برای مقایسه مقادیر استفاده میشوند و نتیجه آنها یک مقدار بولین (true یا false) است. این عملگرها معمولاً در ساختارهای کنترلی مانند شرطها (if statements) و حلقهها (loops) استفاده میشوند.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
عملگرهای منطقی برای انجام عملیات منطقی بر روی مقادیر بولین استفاده میشوند و نتیجه آنها یک مقدار بولین (true یا false) است. این عملگرها معمولاً در ساختارهای کنترلی مانند شرطها (if statements) و حلقهها (loops) استفاده میشوند.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ساختارهای شرطی برای اجرای کد بر اساس شرایط مشخص استفاده میشوند. این ساختارها به شما اجازه میدهند تا تصمیم بگیرید کدام بخش از کد اجرا شود و کدام بخش اجرا نشود. در جاوااسکریپت، چندین نوع ساختار شرطی وجود دارد.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
عملگر شرطی که به عنوان ternary operator نیز شناخته میشود، یک روش کوتاهتر و سادهتر برای نوشتن ساختارهای شرطی if...else است. این عملگر به شما اجازه میدهد تا یک شرط را در یک خط بررسی کنید و بر اساس نتیجه آن، یکی از دو مقدار را برگردانید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
دستور switch برای بررسی مقادیر مختلف یک متغیر و اجرای کد مربوط به آن مقدار استفاده میشود. این دستور زمانی مفید است که بخواهید چندین شرط را با مقادیر مختلف یک متغیر بررسی کنید و کد مربوط به هر مقدار را جداگانه اجرا کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
توابع یکی از اجزای اساسی و پرکاربرد در جاوااسکریپت هستند که به شما امکان میدهند تا بلوکهای کدی را تعریف کنید که میتوانند در جاهای مختلف برنامه فراخوانی شوند. توابع به شما کمک میکنند تا کدهای خود را سازماندهی و باز استفاده کنید.
فصل دوم: کار با اشیا و آرایه ها
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
اشیا یکی از مهمترین اجزای جاوااسکریپت هستند که به شما امکان میدهند مجموعهای از دادهها و توابع مرتبط را با هم نگهداری کنید. اشیا میتوانند خواص (properties) و متدها (methods) داشته باشند.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
توابع سازنده در جاوااسکریپت برای ایجاد و مقداردهی اشیا استفاده میشوند. این توابع مانند قالبهایی برای اشیا عمل میکنند و به شما امکان میدهند تا اشیای مشابهی با خواص و متدهای مشخص ایجاد کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
آرایهها در جاوااسکریپت به شما امکان میدهند تا مجموعهای از دادهها را در یک ساختار سازماندهی شده ذخیره و مدیریت کنید. آرایهها میتوانند شامل انواع دادههای مختلف باشند و به شما این امکان را میدهند که به راحتی با مجموعهای از مقادیر کار کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
آرایهها در جاوااسکریپت دارای مجموعهای از متدهای داخلی هستند که به شما کمک میکنند تا عملیات مختلفی را بر روی آرایهها انجام دهید. این متدها میتوانند برای افزودن، حذف، جستجو، مرتبسازی، و دستکاری آرایهها استفاده شوند.
فصل سوم: حلقهها و کنترل جریان
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
حلقهها به شما امکان میدهند تا مجموعهای از دستورات را تا زمانی که یک شرط مشخص برقرار است، تکرار کنید. در جاوااسکریپت، دو نوع حلقه وجود دارد که به شما اجازه میدهند تا این کار را انجام دهید: while و do...while.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
حلقه for یکی از پرکاربردترین حلقهها در جاوااسکریپت است که به شما امکان میدهد تا یک بلوک کد را چندین بار تکرار کنید. این حلقه دارای سه بخش اصلی است: مقداردهی اولیه، شرط پایان و بهروزرسانی. این سه بخش به شما اجازه میدهند تا کنترل دقیقی بر تعداد تکرارهای حلقه داشته باشید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
دستورات break و continue در جاوااسکریپت برای کنترل جریان اجرای حلقهها استفاده میشوند. این دستورات به شما امکان میدهند تا به صورت موثرتر و انعطافپذیرتری از حلقهها استفاده کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
حلقه for...in در جاوااسکریپت برای پیمایش خواص یک شیء استفاده میشود. این حلقه به شما امکان میدهد تا به راحتی تمامی خواص قابل شمارش (enumerable properties) یک شیء را مرور کنید. اگرچه for...in میتواند برای آرایهها نیز استفاده شود، اما معمولاً برای پیمایش اشیا به کار میرود.
فصل چهارم: کار با DOM
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
مدل شیءگرای سند (Document Object Model یا DOM) یک رابط برنامهنویسی برای اسناد HTML و XML است. DOM نمایشی شیءگرا از ساختار یک سند را فراهم میکند که به برنامههای جاوااسکریپت امکان دسترسی و تغییر محتوای سند را میدهد.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
متدهای querySelector و querySelectorAll در جاوااسکریپت ابزارهای قدرتمندی برای انتخاب عناصر DOM با استفاده از سلکتورهای CSS هستند. این متدها به شما امکان میدهند تا به سادگی و با استفاده از سلکتورهای پیچیده، به عناصر مختلف در صفحه وب دسترسی پیدا کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
یکی از قابلیتهای قدرتمند جاوااسکریپت این است که میتوانید استایلهای CSS عناصر HTML را به صورت پویا تغییر دهید. این به شما امکان میدهد تا تجربه کاربری تعاملی و جذابتری ایجاد کنید. میتوانید استایلها را به روشهای مختلف تغییر دهید: از طریق خاصیت style، کلاسها، و یا با استفاده از کتابخانههای جاوااسکریپت.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
جاوااسکریپت به شما امکان میدهد تا به صورت پویا عناصر جدید به سند اضافه کرده و عناصر موجود را حذف کنید. این قابلیت به شما اجازه میدهد تا صفحات وب تعاملی و داینامیکی ایجاد کنید.
فصل پنجم: رویدادها
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
رویدادها (Events) در جاوااسکریپت بخش اساسی تعاملات کاربران با صفحات وب هستند. هر زمان که کاربری عملی مانند کلیک، تایپ، یا حرکت ماوس را انجام میدهد، یک رویداد رخ میدهد. شما میتوانید با استفاده از جاوااسکریپت به این رویدادها گوش دهید و بر اساس آنها عمل کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
رویداد onload یکی از رویدادهای مهم در جاوااسکریپت است که زمانی رخ میدهد که یک صفحه وب یا یک عنصر خاص به طور کامل بارگذاری شده است. این رویداد به شما امکان میدهد تا کدی را اجرا کنید که باید پس از بارگذاری کامل صفحه یا عناصر خاص انجام شود.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
متدهای addEventListener و removeEventListener به شما امکان میدهند تا به صورت انعطافپذیر و بدون تداخل، رویدادها را به عناصر HTML اضافه یا از آنها حذف کنید. این متدها به شما اجازه میدهند تا چندین شنونده رویداد را به یک عنصر اضافه کنید و مدیریت بهتری بر رویدادها داشته باشید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در برخی مواقع، ممکن است بخواهید از رفتار پیشفرض مرورگر هنگام وقوع یک رویداد خاص جلوگیری کنید. برای مثال، ممکن است بخواهید از ارسال فرم یا دنبال کردن لینک جلوگیری کنید تا بتوانید عملیات سفارشی خود را انجام دهید. برای این کار، میتوانید از متد preventDefault استفاده کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
رویداد onscroll زمانی رخ میدهد که کاربر در صفحه وب اسکرول میکند. با استفاده از این رویداد، میتوانید دکمهای ایجاد کنید که وقتی کاربر در صفحه پایین میرود، ظاهر شود و با کلیک بر روی آن، کاربر به بالای صفحه برگردد.
فصل ششم: اعتبارسنجی و کار با دادهها
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
اعتبارسنجی فرمها یکی از اصول اساسی در توسعه وب است که به شما کمک میکند تا از صحت دادههای ورودی کاربران اطمینان حاصل کنید. اعتبارسنجی میتواند هم در سمت کاربر (Client-Side) و هم در سمت سرور (Server-Side) انجام شود. در این بخش، ما به اعتبارسنجی سمت کاربر با استفاده از جاوااسکریپت میپردازیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
عبارات با قاعده (Regular Expressions یا Regex) ابزارهای قدرتمندی برای انجام تطبیق الگوها در رشتهها هستند. میتوانید از Regex برای اعتبارسنجی ورودیهای فرم، از جمله اعتبارسنجی قالب ایمیل، استفاده کنید. ساختار عبارات با قاعده (Regex): عبارات با قاعده یک الگو (pattern) را تعریف میکنند که میتواند برای تطبیق و یافتن متن در رشتهها استفاده شود. در جاوااسکریپت، عبارات با قاعده با استفاده از سازنده RegExp یا به صورت مستقیم با استفاده از نمادهای / ایجاد میشوند.
فصل هفتم: کار با تاریخ و ساعت
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
کار با تاریخ و زمان در جاوااسکریپت از طریق شیء Date انجام میشود. این شیء قابلیتهای متعددی برای ایجاد، مدیریت، و دستکاری تاریخ و زمان ارائه میدهد.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
شیء Date در جاوااسکریپت متدهای متعددی برای دریافت (get) و تنظیم (set) اجزای مختلف تاریخ و ساعت ارائه میدهد. این متدها به شما امکان میدهند تا به سادگی با تاریخ و زمان کار کنید و مقادیر آن را بخوانید یا تغییر دهید.
فصل هشتم: کوکیها
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
کوکیها (Cookies) یکی از روشهای اصلی ذخیرهسازی دادهها در مرورگرهای وب هستند. کوکیها به شما امکان میدهند که اطلاعات کوچکی را در سمت کاربر ذخیره کنید و این اطلاعات را بین درخواستهای مختلف مرورگر حفظ کنید. جاوااسکریپت امکاناتی برای ایجاد، خواندن و حذف کوکیها فراهم میکند.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای مدیریت سادهتر کوکیها، میتوانیم یک تابع عمومی برای ایجاد کوکیها بنویسیم. این تابع میتواند نام، مقدار، تعداد روزهای انقضا، مسیر، دامنه و گزینههای امنیتی را دریافت کرده و کوکی را ایجاد کند.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای حذف یک کوکی، باید تاریخ انقضای آن را به یک تاریخ گذشته تنظیم کنید. این کار باعث میشود مرورگر کوکی را حذف کند. میتوانیم یک تابع عمومی برای حذف کوکیها ایجاد کنیم.
فصل نهم: نمایش پیامها
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
این توابع برای نمایش پیامهای تعاملی به کاربر استفاده میشوند. این توابع برای اهداف مختلفی مانند نمایش هشدار، درخواست تأیید، یا دریافت ورودی از کاربر استفاده میشوند. alert: این تابع یک پنجره پیام ساده (popup) نمایش میدهد که فقط یک دکمه OK دارد. از این تابع برای نمایش پیامهای اطلاعاتی به کاربر استفاده میشود. confirm: این تابع یک پنجره پیام با دو دکمه OK و Cancel نمایش میدهد. از این تابع برای درخواست تأیید از کاربر استفاده میشود. نتیجه این تابع یک مقدار بولی است: true اگر کاربر دکمه OK را فشار دهد و false اگر کاربر دکمه Cancel را فشار دهد. prompt: این تابع یک پنجره پیام با یک فیلد ورودی و دو دکمه OK و Cancel نمایش میدهد. از این تابع برای دریافت ورودی از کاربر استفاده میشود. نتیجه این تابع مقدار متنی است که کاربر وارد کرده است (به عنوان یک رشته). اگر کاربر دکمه Cancel را فشار دهد، نتیجه null خواهد بود.
فصل دهم : مباحث پیشرفته
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در جاوااسکریپت، شیء Math شامل متدها و ثوابت مختلفی است که برای انجام عملیات ریاضی استفاده میشوند. در این بخش به بررسی برخی از متدهای مفید Math میپردازیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
تولید اعداد تصادفی در جاوااسکریپت معمولاً با استفاده از متد Math.random() انجام میشود. این متد یک عدد اعشاری تصادفی بین 0 (شامل) و 1 (غیرشامل) تولید میکند. در ادامه به بررسی روش تولید اعداد تصادفی در بازهها و کاربردهای مختلف میپردازیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
برای نمایش متن تصادفی در جاوااسکریپت، میتوانید از ترکیبی از متد Math.random() و Math.floor() استفاده کنید تا به طور تصادفی یکی از عناصر یک آرایه را انتخاب کنید. در اینجا مثالی ساده و کاربردی برای نمایش متن تصادفی با استفاده از جاوااسکریپت و HTML آورده شده است.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در جاوااسکریپت، میتوانیم آدرس فعلی صفحه وب را دریافت کرده و آن را تغییر دهیم. این عملیات با استفاده از window.location انجام میشود. در ادامه نحوه دریافت و تغییر آدرس URL کاربر توضیح داده شده است.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ایجاد یک اسلایدشو با استفاده از HTML، CSS، و جاوااسکریپت به شما امکان میدهد تصاویر یا محتواهای مختلفی را به صورت متوالی نمایش دهید. در اینجا یک مثال ساده از ایجاد یک اسلایدشو آورده شده است.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
میتوان انتقال تصاویر در یک اسلایدشو را به کمک CSS استایل دهی کرد که در این بخش به آن میپردازیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در اینجا مثالی از یک گالری تصاویر با تصاویر کوچک آورده شده است. با کلیک بر روی هر تصویر کوچک، تصویر بزرگتر مربوطه نمایش داده میشود.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
در جاوااسکریپت، setInterval و setTimeout دو تابع بسیار کاربردی برای اجرای کد در فواصل زمانی معین هستند. این دو تابع به شما امکان میدهند تا کدی را بعد از یک مدت زمان مشخص اجرا کنید یا به صورت مکرر آن را تکرار کنید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
عملگر همگذاری نال (??) در جاوااسکریپت به شما امکان میدهد تا یک مقدار پیشفرض برای متغیرهایی که مقدار آنها null یا undefined است، تعریف کنید. این عملگر زمانی مفید است که بخواهید از مقادیر نال یا تعریف نشده جلوگیری کنید و به جای آنها مقدار معقولی داشته باشید.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
توابع پیکانی (Arrow Functions) در ES6 معرفی شدند و یک نحو کوتاهتر و تمیزتر برای تعریف توابع ارائه میدهند. علاوه بر این، توابع map و filter ابزارهای قدرتمندی برای کار با آرایهها هستند.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
بهبود عملکرد کد یکی از جنبههای مهم در توسعه نرمافزار است که میتواند تجربه کاربری بهتری را فراهم کند. در اینجا به بررسی روشهای مختلف برای بهینهسازی عملکرد کد در جاوااسکریپت میپردازیم.
برای مشاهده ویدیوی مورد نظر ابتدا وارد سایت شوید و دکمه شرکت در دوره را بزنید.
ایجاد یک ادیتور متن ساده با استفاده از HTML، CSS، و جاوااسکریپت به شما امکان میدهد تا کاربران بتوانند متنی را ویرایش و قالببندی کنند. در اینجا، مثالی از یک ادیتور متن با ویژگیهای پایهای آورده شده است.
