Deep Devs | فرانت اند | بک اند | جاوااسکریپت | برنامه نویسی | برنامه نویسی وب – Telegram
Deep Devs | فرانت اند | بک اند | جاوااسکریپت | برنامه نویسی | برنامه نویسی وب
9.19K subscribers
657 photos
354 videos
90 files
813 links
اگر با جاوااسکریپت مشکل داری، این چنل مخصوص خودته 🤝

دوبله بهترین دوره های جاوااسکریپت و ریکت دنیا رایگان:
https://news.1rj.ru/str/DeepDevs/2166

تبلیغات و تبادل نداریم

گروه اصلی برای پرسش و پاسخ:
@DeepDevsGpOriginal

گروه چت:
@InstaDevsGp
Download Telegram
صبحتون بخیر رفقا❤️

دوستان ویدیو جدید یوتوبمون آپلود شد🔥

🔸توی این ویدیو خیلی ساده توضیح دادم که چطور تمام اعداد داخل استرینگ رو استخراج کنیم👌

🔸چالش هم داریم و علاوه بر اون از دوتا متد پرکاربردی جاوا اسکریپتم استفاده کردیم🫡

مثل همیشه به حمایتتون بیشتر از همیشه نیاز داریم رفقا❤️
اونور میبینمتون❤️

لینک ویدیو: https://youtu.be/9JtIajFCKVo

Channel: @js_challenges | Group: @js_masters_gp
🔥7
🔥در اینجا کد یک تابع ژنراتور (Generator Function) را مشاهده می‌کنیم. این نوع توابع در جاوااسکریپت قدرت خاصی دارند و امکان متوقف کردن و از سرگیری آن‌ها را در حین اجرا فراهم می‌کنند.
1️⃣عبارت yield:
از عبارت yield برای تولید و بازگرداندن یک مقدار از تابع استفاده می‌شود.
در اینجا، مقدار 1 تولید و بازگردانده شده است.
با فراخوانی تابع ژنراتور، یک شیء ژنراتور ایجاد می‌شود که می‌تواند برای کنترل اجرای تابع مورد استفاده قرار گیرد.
این شیء در متغیر generator ذخیره می‌شود.
2️⃣استفاده از متد next:
متد next() برای دریافت مقدار بعدی از تابع ژنراتور استفاده می‌شود.
این متد یک شیء با دو خصوصیت بازمی‌گرداند:
value: مقدار تولید شده توسط yield
done: نشانگر اتمام اجرای تابع ژنراتور
مقدار آخر (3) تولید می‌شود و در خروجی نمایش داده می‌شود.
تابع به اتمام می‌رسد زیرا دیگر yield ای وجود ندارد.
خصوصیت done روی true تنظیم می‌شود تا نشان دهد که تابع تکمیل شده است.
🥇کاربردهای توابع ژنراتور:
ایجاد حلقه‌های سفارشی
مدیریت جریان داده‌های بزرگ
نوشتن کد ناهمگام به صورت خواناتر
پیاده‌سازی الگوریتم‌های بازگشتی به صورت بهینه

Channel: @js_challenges | Group: @js_masters_gp
😎12👍8❤‍🔥1
#quick_challenge
خروجی کد پایین چیه؟
const arr = [1, 2, 3];
arr.unshift(0);
arr.push(4);
arr[1] = 'two';
console.log(arr.join(', '));


سوالی داشتید به گروه مراجعه کنید 🙏🙏

Channel: @js_challenges | Group: @js_masters_gp
❤‍🔥8
💎 مفهوم Deep Copy و Shallow Copy
Deep Copy :
یعنی کلون/کپی کردن یک آبجکت، با رفرنس متفاوت در حافظه

Shallow Copy :
یعنی کلون/کپی کردن یک آبجکت با رفرنس یکسان در حافظه

Channel:@js_challenges Group:@js_masters_gp
17👍5
const x = 10;
function foo() {
console.log(x);
const x = 20;
}
foo();

اگر سوالی داشتید در موردش داخل گروه بپرسید 👌

Channel: @js_challenges | Group: @js_masters_gp
👍9
دوستان در خصوص Not Coin یه سری توضیحات و نظر شخصی خودم رو داخل گروه چتمون دادم میفرستم اینجا شما هم بشنوید بد نیست
👍14🔥1
https://news.1rj.ru/str/js_challenges_chat/18619

سود اصلی رو اینجا ربات فروشا و کسایی میبرن که طرف 10 میلیون جمع کرده بعد میاد به ما میگه بیا بهت بفروشم بعدا پولدار بشی 😂
👍28🔥2
💎 مختصری در مورد دام مجازی (Virtual DOM)

تمامی تگ های اچ تی ام ال یک صفحه در فضایی به عنوان دام (DOM) نگهداری می شود در واقع دام، یک شکل درختی از تگ های تو در تو HTML صفحه شما می باشد.
لایبری ریکت، از فضایی رو نمایی کرد به نام دام مجازی یا همان Virtual DOM، این دام وظیفه بروزرسانی صفحه شما را بدون رفرش اطلاعات اضافی را بر عهده دارد دقیقاً کاری که AJAX انجام میدهد اما با این تفاوت که ایجکس روی دام اصلی تغییرات را اعمال می کند (که به مراتب کند تره) اما ریکت، تغییرات را در دام مجازی انجام میدهد سپس جایگزین دام اصلی میکند (و بسیار سریع تره تا ایجکس).

فرایند بروزرسانی یک صفحه طراحی شده توسط ریکت :
- با لود صفحه شما یک DOM و یک Virtual DOM از صفحه شما ایجاد میشود که یوزر موارد درون دام را مشاهده می کند.
- فرض کنید یک تغییر را در صفحه ایجاد کرده اید به عنوان مثال با کلیک بر روی یک باتن، قرار است یک پاراگراف در صفحه نمایش داده شود.
- ریکت، یک دام مجازی دیگر از صفحه شما با احتساب تغییراتی که قرار اعمال بشود ایجاد می کند و با دام مجازی قبلی که ابتدای لود صفحه ایجاد کرده بود مقایسه می کند.
- پس از بررسی متوجه میشود که در دام مجازی جدید فقط یک پاراگراف جدید اضافه شده است و مابقی اجازی صفحه با دام قبلی مطابقت دارد.
- حال بدون دست زدن به سایر کد های صفحه DOM، فقط تغییرات جدید را در درون کد های DOM جایگذاری می کند.
- در این صورت مجدداً دو Virtual DOM که با هم مقایسه شدند حذف و مجدداً یک Virtual DOM جدید از دام فعلی ایجاد میشود.

Channel:@js_challenges
Group:@js_masters_gp
👍30🔥2
💎 مقادیر Truthy و Falsy

به مقادیری که به منزله ی FALSE ارزیابی میشه رو مقادیر Falsy میگیم.
🟡 در جاوااسکریپت 6 مقدار زیر رو به عنوان مقدار Falsy در نظر میگیره
undefined, null, NaN, 0, "" و false
به مقادیری که به منزله ی TRUE ارزیابی میشه رو مقادیر Truthy میگیم.
🟡 مقادیر غیر از مقادیر بالا Truthy تفسیر خواهد شد.

💬 نکته: مقدار 0 به عنوان Falsy شناخته میشود اما رشته ی "0" به عنوان Truthy تفیسر میشه.

💬 نکته 2: آرایه خالی یا آبجکت خالی به عنوان Truthy در نظر گرفته میشه.


Channel:@js_challenges Group:@js_masters_gp
👍30
یه ویدیوی کوتاه برای مرور انواع توابع یا function ها داخل جاوااسکریپت
بهره ببرید 👌

https://youtube.com/shorts/BurPPSbAlUI?feature=share

Channel: @js_challenges | Group: @js_masters_gp
🔥15👍3
💎 بررسی آنلاین بودن یوزر
با استفاده از این تیکه کد به سادگی می توانید بررسی کنید که آیا یوزرتون آنلاین هست یا خیر.

انتشار یادتون نره ❤️

Channel:@js_challenges Group:@js_masters_gp
👍15
#quick_challenge
خروجی کد پایین چیه؟

const array = [{ type: "array" }, 1, 2, 3, 4, 5, 6];
delete array[0];
console.log(typeof array[0]);
گیری،مشکلی،انتقادی،کمکی،هرچی بود تو گروه منتظرتونیم😎

@js_challenges
@js_masters_gp
🔥7
چی بگم والا،کدومه؟
Anonymous Quiz
37%
number
16%
null
13%
NaN
34%
undefined
😎22👍5
6 سوءتفاهم‌ در مورد جاوا اسکریپت!

پارت 1

1: جاوااسکریپت همان جاوا است

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

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

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

پ.ن.پ:دوستان این پست 6 پارت داره که ترجمه میکنیم و براتون قرار میدیم❤️

Channel:@js_challenges Group:@js_masters_gp
👍21❤‍🔥3
اپراتور void چیست؟

🔸اپراتور void یک مقدار undefined را از یک عبارت ارزیابی شده بازمی‌گرداند. به عبارت دیگر؛ اپراتور void یک عبارت را مشخص می‌کند تا بدون بازگشت مقدار ارزیابی شود. این اپراتور معمولاً در جاوااسکریپت مشتری (Client-side JavaScript) استفاده می‌شود که مرورگر مقدار را نمایش ندهد.
function getYear() {
return 2020;
};

console.log(getYear());
// خروجی: 2020

console.log(void getYear());
// خروجی: undefined

// مورد کاربرد مفید
button.onclick = () => void getYear();

#Tips_N_Tricks

Channel:@js_challenges Group:@js_masters_gp
👍19🔥3
سوال: promise executor چیست؟

🔸تمام نمونه‌های Promise یک متد به عنوان آرگومان می‌پذیرند که executor نام دارد. این executor دو متد به عنوان آرگومان می‌پذیرد: resolve و reject. درون executor، اگر متد resolve فراخوانی شود، نمونه Promise برآورده می‌شود. اگر یک استثنا پرتاب شود، به‌جای آن متد reject فراخوانی می‌شود و نمونه Promise رد می‌شود.

const executor = (resolve, reject) => {
setTimeout(() => resolve("I'm done"), 1000);
};

new Promise(executor).then(result => {
console.log(result);
// خروجی پس از 1000 میلی‌ثانیه: I'm done
});

#Tips_N_Tricks

Channel:@js_challenges Group:@js_masters_gp
🔥15
6 سوءتفاهم‌ در مورد جاوا اسکریپت!

پارت ۲

2: جاوااسکریپت تنها برای توسعه فرانت اند است.

اگرچه جاوااسکریپت واقعاً زبان اصلی برای توسعه فرانت اند است، اما دامنه تأثیرش به فراتر از مرورگر گسترش یافته است. با ظهور تکنولوژی‌هایی مانند Node.js، اکنون جاوااسکریپت قابلیت اجرا شدن در سمت سرور را نیز دارد. این به این معنی است که می‌توانید از جاوااسکریپت برای توسعه بک اند نیز استفاده نمایید و هم سمت فرانت و هم سمت بک اند از برنامه‌های وب را ایجاد کنید.

و در حقیقت Node.js به توسعه‌دهندگان این امکان را می‌دهد که برنامه‌های سروری با کارایی بالا، پرقدرت و موثر را با استفاده از جاوااسکریپت بسازند و این،جاوااسکریپت را که صرفاً یک زبان برای توسعه فرانت اند است را رد میکند!

Channel: @js_challenges | Group: @js_masters_gp
👍17
💎 نمایش تمامی خطا های برگشتی توسط Yup

شاید متوجه شده باشید زمانی که پکیج Yup داره فرمی رو اعتبار سنجی می کنه و به ارور میخوره فقط یک ارور رو برگشت میده در صورتی که فرم شما ممکنه شامل ارور های بیشتری باشه (مثلا ایمیل، سن و... نا معتبر باشه یا یوزر وارد نکرده باشه yup فقط میگه ایمیل نامعتبر است دیگه نمی نویسد که سن رو وارد نکردید و دیگر ارور ها).

🔸 برای حل این مسئله، مهم است بدونید که متد validate دو تا ورودی میگیره (که عموماً برخی از همکاران فقط یک ورودی بهش میدن) ورودی اول، مقادیر فرم هست که معمولاً به صورت آبجکت بهش میدیم و ورودی دوم، options هست که باید به صورت آبجکت داده شود. حالا اگه میخواید که تمامی ارور ها برگشت داده شود، به آپشن، ابجکت abortEarly: false رو بدید و در این صورت تمامی ارور ها برگشت داده میشود

💬 نکته مهم تر: از انجایی که ارور ها در (err)catch برگشت داده میشه، در این قسمت میتونید err.inner رو لاگ بگیرید و لیست ارور ها رو مشاهده کنید که متاسفانه به آبجکت inner خیلی کم پرداخته شده است.


Channel:@js_challenges
Group:@js_masters_gp
🔥15👍2