توی این سایت میتونی به بیش از 100 پروژه که با جاوا اسکریپت پیاده شدن دسترسی داشته باشی🔥
کافیه روی هر پروژه که میخوای کلیک کنی و توضیحات مربوط به پروژه، دمو پروژه و حتی کد های پروژه رو استفاده کنی😃✅

https://100jsprojects.com

🛎 اگر سایت براتون باز نشد از VPN استفاده کنید.

حمایت و اشتراک گذاری فراموش نشه😉🧡

#js #javascript #projects #programming
☕️ Telegram | Website | Discord

با این یه خط کد داده تکراری آرایه در جاوااسکریپت رو حذف کن! 🔥

🔸️برای اینکار بیاید فرض کنیم یک آرایه داریم که این مقادیر رو داره:

const arr1=[1,1,1,2,2,3,3,3,3] ;

🔹️خب، حالا میخوایم مقادیری که تکراری نیستن رو بگیریم یعنی آرایه جدید ما باید شامل 1,2,3 باشه، بجای اینکه بریم از آرایه اضافه و حلقه فور استفاده کنیم و سرعت لود شدن سایت رو بیاریم پایین این یه خط رو مینویسیم:

const uniqeArr = [ ... new Set(arr1) ] ;

و تمام! اگر در مورد Set ها در جاوااسکریپت نمیدونید هم این پست حتما به کارتون میاد!

#javascript #trick
☕️Telegram | Website | Discord

میدونستین توی جاوااسکریپت میتونین صفحه های کاربر رو مدیریت کنین؟ ⚡️

🔹️ یعنی مثلا یک صفحه بره عقب،یک صفحه بره جلو یا ... به این شکل هستش...

🔸️ این برای وقتیه که کاربر یک صفحه برگشته عقب، با این میتونید بفرستیدش بره صفحه قبلی(یعنی صفحه جلویی!):

history.forward()

🔸️ این یکی هم برای وقتیه که میخواید کاربر رو یک صفحه ببرید عقب! به این شکل:

history.back()

#javascript #js #trick
☕️Telegram | Website | Discord

استخراج آرایه به روش Destructing در جاوااسکریپت 🔥

🔸️یه روش خفن توی جاوااسکریپت هست به اسم Destructuring که خیلی کارو راحت می‌کنه ⚡️

🔹️با این روش می‌تونی خیلی راحت مقدار‌ها رو از آبجکت یا آرایه بکشی بیرون، بدون نیاز به کلی کد اضافه.

مثلاً:

let user = { name: 'Ali', age: 25 }; 
let { name, age } = user;
 console.log(name, age); // خروجی: 'Ali', 25 

let numbers = [1, 2, 3];
let [first, second, third] = numbers;
console.log(first, second, third); // خروجی: 1, 2, 3 

#javascript #js #trick #destructuring
☕️Telegram | Website | Discord

میدونستین میتونین از لیست ها توی شرط در جاوااسکریپت استفاده کنین؟ 🔥

🔸️ مثلا میخوایم چک بکنیم یه مقداری برابر 1 یا one هستش یا نه(و میتونه این مقدار طولانی تر باشه،مثلا شامل 2,two,3,three هم باشه)

🔹️بجای اینکه بنویسین:

if(value == 1 || value == 'one'){
//کدی که میخواین
}

میتونید بنویسید:

if([1,'one'].includes(value)){
//کدی که میخواین
}

#javascript #js #trick
☕️Telegram | Website | Discord

برچسب گذاری شرط ها ( Labelled Statements ) در جاوااسکریپت ✅️

🔹️در جاوااسکریپت می‌تونید به هر statement یک برچسب (label) اختصاص بدید و بعد از اون برچسب برای کنترل جریان برنامه استفاده کنید. این ویژگی بیشتر برای کنترل جریان در حلقه‌ها (loops) به کار میره. این مثال رو ببینیم تا بهتر متوجه کاربردش بشیم:

outerLoop: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) {
            break outerLoop;
        }
        console.log(`i = ${i}, j = ${j}`);
    }
}

🔸️در واقع خروجی به این شکله:

i = 0, j = 0
i = 0, j = 1
i = 0, j = 2
i = 1, j = 0

⚡️و وقتی که i و j هر دو برابر 1 میشن، لوپ بزرگتر ما break میشه و میره خونشون.
و برنامه میره ادامه کارش(یا مثل این مثال، تموم میشه)

#javascript #js #trick
☕️Telegram | Website | Discord

💎با استفاده از animejs شما میتونید هر کامپوننت انیمیشنی رو پیدا کنید و از اون استفاده کنید.
از ویژگی های animejs به تبدیل های پیشرفته، SVG toolset، Responsive Animations و... میشه اشاره کرد.

فقط کافیه به داکیومنتش سر بزنید نحوه نصب و استفاده از انیمیشن های مختلفش رو ببینید و به کد های جاوا اسکریپت و HTML انیمیشن ها دسترسی داشته باشید.

🔗 https://animejs.com

#animejs #javascript #animations
☕️Telegram | Website | Discord

چجوری توی جاوااسکریپت بفهمیم کاربر مقداری وارد کرده یا نه؟ ⚡️

🔸️ خب احتمالا در حالت عادی میرفتید با if طول دیتا رو بدست میاوردید و true یا false رو برمیگردوندید، اما نیازی به این کار نیست.

const v1 = "CodeExplore"
const v2 = ""
console.log(!!v1)
// true
console.log(!!v2)
// false

#javascript #js #trick
☕️Telegram | Website | Discord

‏Flat کردن array در جاوااسکریپت 🔥

🔹️دیدین بعضی وقتا آرایه رو میدن این شکلیه:

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

و شما میخواین به صورت 1,2,3,4,5,6 باشه!

🔸️اینجور وقتا به جای اینکه کفرتون در بیاد میتونین این کد رو بنویسید و به آرامش درونتون برگردید:

let array = [1, [2, 3], [4, [5, 6]]];
let flatArray = array.flat(2);  
// [1, 2, 3, 4, 5, 6]

✅️اینجور وقتا اصطلاحا یک آرایه پیچ در پیچ یا تو در تو رو، flat کردیم

#javascript #js #trick #flatArray
☕️Telegram | Website | Discord

🎓 دوره جدید مایکروسافت Generative AI با JavaScript

مایکروسافت یک دوره رایگان و پروژه‌محور روی GitHub منتشر کرده که به شما یاد میده چطور با JavaScript اپلیکیشن‌های مبتنی بر Generative AI بسازید. این دوره ادامه دوره قبلی Generative AI for Beginners محسوب میشه، اما این‌ بار با تمرکز کامل روی JavaScript و در قالب یک ماجراجویی داستانی طراحی شده.

در طول مسیر، با شخصیت‌های تاریخی مثل داوینچی و آدا لاولیس همکاری می‌کنید، با مفاهیم LLM، مهندسی پرامپت، RAG و ساختاردهی خروجی‌ها آشنا میشین و یاد میگیرید چطور اپ‌ هایی بسازید که از مدل‌های زبانی استفاده کنن. همه‌ چیز به‌ صورت Interactive یا تعاملی، همراه با ویدیو، تمرین، آزمون و اپ قابل اجرا روی GitHub Spaces ارائه شده.

🔗 لینک های رسمی دوره: گیت هاب - داکیومنت

#microsoft #ai #generative #course #javascript
☕️Telegram | Website | Discord

تا حالا به فرق var، let و const فکر کردین؟

🔹‏var همه جا کار میکنه ولی یه سری دردسرا داره، مثلاً متغیر قبل از تعریف هم قابل استفاده هست (به خاطر hoisting)، که گاهی اوقات خیلی گمراه‌کننده میشه.
🔹‏let نسخه‌ پیشرفته تره؛ فقط توی همون بلاکی که تعریفش کردی در دسترسه، و می‌تونی بعداً مقدارش رو عوض کنی.
🔹‏const هم مثل let رفتار میکنه، فقط فرقش اینه که دیگه نمیتونی مقدارش رو عوض کنی! البته اگه یه آرایه یا آبجکت باشه، میتونی داخلش رو دستکاری کنی!

این مورد هایی که گفتیم، فرق های جزئی هستن، میتونید مقاله کامل راجب این موارد رو توی سایتمون بخونید:
🔗 تفاوت var و let و const در JavaScript

#javascript #js #const #let #var
☕️Telegram | Website | Discord

تو دنیای جاوااسکریپت برای مدیریت کدهای بزرگ و پیچیده، ماژول‌بندی حیاتی هست. دو سیستم معروف CommonJS و ESM هر کدوم ویژگی‌ها و کاربردهای خاص خودشون رو دارن. CommonJS که از Node.js اومده و از روش همزمان (sync) بارگذاری استفاده می‌کنه، تو محیط سرور حسابی جا افتاده، ولی تو مرورگر به‌صورت مستقیم کار نمی‌کنه و نیاز به ابزارهای bundler مثل Webpack داره. از طرف دیگه، ESM که استاندارد جدید ECMAScript هست، با بارگذاری غیرهمزمان (async) و قابلیت tree-shaking (حذف کدهای بلااستفاده) بهینه‌تره و هم تو مرورگر های مدرن و هم تو Node.js نسخه‌های جدید پشتیبانی میشه.

برای مطالعه دقیق راجب تفاوت CommonJS و ESM این مقاله رو میتونید بخونید:

🔗 تفاوت های CommonJs و ESM

#Javascript #JS #CommonJS #ESM
☕️Telegram | Website | Discord