CHALLANGE 42
#quick_challenge

هر مشکلی داشتید داخل گروه بپرسید⁉️

@js_challenges
@js_masters_gp

🔥انواع متد های object ها در js

👨‍💻تو این پست براتون 8 متد فوق‌العاده کاربردی رو بصورت چیت شیت مانند همراه با مثالش براتون اوردم.

#Tips_N_Tricks

@js_challenges
@js_masters_gp

هشتگ های چنل که باهاشون میتونید راحت مطالب مورد نظرتون رو پیدا کنید:

چالش های چنل:
#js_challenge
#your_challenge
#quick_challenge

جواب چالش ها:
#answer

لینک ریپازیتوری ای که تمام چالش های اصلی اونجا جمع شده میتونید یه جا دسترسی داشته باشید:
https://github.com/MCKH03/JS_Challenges

آموزش های کوتاه (عموما کمتر از ده دقیقه):
#js_nuggets
مواردی که تاکنون داخل js_nuggets آموزش داده شده:
Intersection Observer API
Short Circuting
Object Destructuring
Array Destructuring
map filter reduce methods
clientX screenX pageX offsetX
clientY screenY pageY offsetY
Fetch
Try catch block
Map data structure

آموزش های طولانی (عموما بیشتر از ۱۵ دقیقه):
#js_amozsh

سطوح چالش های اصلی چنل:
#easy
#easy_to_medium
#medium
#medium_to_hard
#hard


تیپ و تیریک ها:
#Tips_N_Tricks
#VSCode_Extension
#Around_JS

موضوع های مختلف جاوااسکریپت (به این هشتگ ها به مرور اضافه میشه):
#arrays
#objects
#async_await
#loops
#parsing_data
#short_circuiting
#object_destructuring
#promises
#error_handling
#fetch
#api
#dates
#GitHub
#DOM

مطالب خارج از محیط IDE:
#Out_Of_IDE
#Music
#Fun
#Tech_Trends

مطالب خارج از محیط سیستم:
#Out_Of_Laptop

آیدی چنل:
@js_challenges
آیدی گروه چنل:
@js_masters_gp

راستی فکر میکنم خیلی از اعضای چنل از این موضوع خبر ندارن

این چنل یه گروه هم داره که بحث های خوبی اونجا رد و بدل میشه
@js_masters_gp

CHALLANGE 43
#quick_challenge

هر مشکلی داشتید داخل گروه بپرسید⁉️

@js_challenges
@js_masters_gp

CHALLANGE 44
#quick_challenge

هر مشکلی داشتید داخل گروه بپرسید⁉️

@js_challenges
@js_masters_gp

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

@js_challenges
@js_masters_gp

#js_challenge
#DOM
#no40
#hard


آقا یه چالش خفن و پر و پیمون آوردم براتون عشق کنید 🔥
عملکرد یک سبد خرید 👌
ولی چالش سختیه و نیاز داره به آزمون و خطای بسیار!

اگر کسی این رو با جاوااسکریپت خام بزنه، کارش واقعا درسته چون یه کد زدن همچین چیزی با ریکت بسیار ساده تر و شیرین تره 👌
ولی زدنش با جاوااسکریپت خام بسیار بسیار میتونه به حل مسئله و یادگیری جاوااسکریپتتون کمک کنه

اما نکته اینجاست که اگر تلاشی برای حل کردنش نکنید، هیچی یاد نمیگیرید!
پس هر چقدر هم که شده سعی بکنید کدش رو بزنید که بسیار بسیار وقتی ویدیوی جواب رو ببینید در یادگیری بهتون کمک میکنه ❤️

آدرس api ای که اطلاعات از اونجا گرفته شده:
https://fakestoreapi.com/products

آدرس بخشی از ریپازیتوری اصلی که فایل های HTML و CSS این چالش اونجا قرار گرفته:
https://github.com/MCKH03/JS_Challenges/tree/master/DOM/Cart%201


@js_challenges
@js_masters_gp

#Around_JS

⚠️بچه ها از اونجایی که هدف تیم js_challenges اینه که این چنل به بزرگترین کامیونیتی جاوا اسکریپت توی ایران تبدیل بشه,برای شما از آموزش تا سوالات استخدامی در مورد جاوا اسکریپت رو هر روز تهیه و انتشار میدیم.⚠️

💫امروز دوباره مخزن رو آپدیت کردم و 10 سوال دیگه همراه با جواب رو
گذاشتم💫

لینک مخزن گیتهاب :
https://github.com/amirnobari/Employment-Questions

💣و خبر مهم اینه که هر کدوم از شما که دوست دارین میتونین سوالاتی که در استخدام مطرح میشه رو یا روی گیتهاب پوش کنید و یا بصورت عکس داخل گروه @js_masters_gp بذارید تیم ما پس از بررسی اونو به عنوان سوال شما به اسم خودتون به مخزن اضافه میکنه💣

❌میتونید سورس سوالات رو به صورت Zip از اینجا دانلود کنید❌
https://github.com/amirnobari/Employment-Questions/releases/tag/v1.0.0

اگر دوس دارید سوالات بیشتری گذاشته بشه 👍 و انتشار بدید تا زود زود آپدیت بشه مخزن گیت هاب🏁

@js_challenges
@js_masters_gp

💎 تفاوت Shallow Copy و Deep Copy

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

فرض کنید یک آرایه داریم به نام myArray و قصد دارید ازش یه کپی بسازید به نام myArray2. معمولاً برای اینکه رفرنس کپی صورت نگیره، از Spread Operator استفاده می کنیم یعنی مینویسیم
myArray2 = [...myArray]

اگه قصد دارید که از یک آرایه تو در تو کپی بگیرید باید Deep Copy انجام بدید و این عمل رو با سریالایز کردن آرایه (تبدیل داده های پیچیده مثل آرایه یا آبجکت به رشته) صورت میگیره به عبارتی باید از متد های JSON استفاده کنید و ابتدا آرایه رو به رشته سپس مجدداً parseش کنید. (در تصویر بالا نمونشو گذاشتم)

مشکلی داشتید تو گروه بپرسید❗

#Tips_N_Tricks
#arrays

@js_challenges
@js_masters_gp

🔥جاوا اسکریپت اینجا
جاوا اسکریپت اونجا
جاوا اسکریپت همه جا😎
#Out_Of_IDE
#Fun

@js_challenges
@js_masters_gp

CHALLANGE 45
#quick_challenge

هر مشکلی داشتید داخل گروه بپرسید⁉️

@js_challenges
@js_masters_gp

#Tech_Trends

https://www.developer-tech.com/news/2021/aug/03/2021-stack-overflow-survey-react-js-takes-the-web-framework-crown-python-is-in-demand-and-devs-still-love-rust/

حدس میزنید این تاج بزرگ متعلق به کیه؟
درست حدس زدید React.js بزرگ 🔥

طبق این مقاله در نظرسنجی ای که توسط Stack Overflow در سال 2021 انجام شده این فریمورک به عنوان پر استفاده ترین فریمورک وب شناخته شده و با %40.14 درصد پیشتازه 👌

نکته بعدی اینه که درخواست های بسیار زیادی برای این فریمورک وجود داره و با %25.12 درصد همچنان پیشتازه 💣

خلاصه که کشش ندم، جایگاه پادشاهی متعلق به ریکته 🕶

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

1️⃣ استفاده از حلقه ی for:
📝روش سنتی کنترل کامل بر رفتار حلقه

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let i = 0; i < fruits.length; i++) {
 console.log(fruits[i]);
}

2️⃣ استفاده از متود forEach:
📝 یک built-in متود در JS که فرآیند حلقه زدن هر عنصر را ساده می کند.

let fruits = ['apple', 'banana', 'cherry', 'date'];

fruits.forEach(function (fruit) {
 console.log(fruit);
});

3️⃣ استفاده از حلقه for...of:
📝 جایگزینی مدرن و مختصر برای حلقه for سنتی.

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let fruit of fruits) {
 console.log(fruit);
}

4️⃣ استفاده از یک for...in (برای آرایه ها توصیه نمیشود):
📝 به دلیل رفتار غیرمنتظره احتمالی برای آرایه ها توصیه نمی شود. مناسب برای تکرار بروی object ها

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let index in fruits) {
 console.log(fruits[index]);
}

5️⃣ استفاده از متود map:
📝 یک آرایه جدید با اعمال یک تابع داده شده برای هر عنصر ایجاد می کند که برای تبدیل عناصر آرایه مفید است.

let fruits = ['apple', 'banana', 'cherry', 'date'];

let capitalizedFruits = fruits.map(function (fruit) {
 return fruit.toUpperCase();
});

console.log(capitalizedFruits);

6️⃣ استفاده از متود filter:
📝 یک آرایه جدید با عناصری ایجاد می کند که یک تست مشخص را پشت سر می گذارند، برای انتخاب عناصر بر اساس معیارهای خاص

let numbers = [1, 2, 3, 4, 5, 6];

let evenNumbers = numbers.filter(function (number) {
 return number % 2 === 0;
});

console.log(evenNumbers);

console.log(sum);

7️⃣ استفاده از متود reduce:
📝 مقادیر آرایه را در یک مقدار ترکیب می کند که برای انجام محاسبات مفید است مانند یافتن مجموع همه اعداد.

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce(function (total, currentNumber) {
 return total + currentNumber;
}, 0);

console.log(sum);

8️⃣ استفاده از متود some و every :
📝 متود some بررسی می کنند که آیا حداقل یک عنصر یک شرط را برآورده می کند، در حالی که every بررسی می کند که آیا همه عناصر دارای شرط x هستند یا خیر

let numbers = [1, 2, 3, 4, 5];

let isGreaterThanThree = numbers.some(function (number) {
 return number > 3;
});

let allGreaterThanZero = numbers.every(function (number) {
 return number > 0;
});

console.log(isGreaterThanThree); // true
console.log(allGreaterThanZero); // true

#Tips_N_Tricks
#arrays

@js_challenges
@js_masters_gp

💎 معرفی نرم افزار یا ابزار RunJS

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

💬 نکته مهم: کد های شما با موتور v8 ران خواهد شد.

💡 پیشنهاد: اگه از کد ادیتور VSCode یا IDE پی اچ پی استورم استفاده می کنید پیشنهاد می کنم از اکستنشن Quokka استفاده کنید این اکستنشن همانند RunJS عمل میکنه با این تفاوت که روی خود IDE شما نصب میشه.

#Tips_N_Tricks

@js_challenges
@js_masters_gp

😎تریک designMode جاوا اسکریپت

👨‍💻با وارد کردن این دستور تو کنسول هر وبسایت موجود تو دنیا میتونین بصورت live تغییرات ظاهری دلخواهتون رو اعمال کنین!

پ.ن.پ: کد وارد شده تو ویدئو که تو حالت دیفالت غیر فعاله اینه👇

document.designMode = 'on'

#Tips_N_Tricks

@js_challenges
@js_masters_gp

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

حداکثر تا پس فردا تموم میشه کارش آپلود میکنم براتون

اگر بازخوردش خوب باشه انشالا اگه خدا بخواد خیلی قوی از اول شروع میکنم دوبله کردن و خورده خورده براتون میزارم ❤️🔥

گفتم بگم اطلاع داشته باشید که قراره دوباره گرد و خاک به پا بشه 💥

@js_challenges
@js_masters_gp