برای یادگیری و درک بهتر Best Practice مقاله را مطالعه کنید 💯

https://code.tutsplus.com/tutorials/24-javanoscript-best-practices-for-beginners--net-5399

برای یادگیری و درک بهتر Best Practice مقاله را مطالعه کنید 💯

https://medium.com/before-semicolon/50-javanoscript-best-practice-rules-to-write-better-code-86ce731311d7

برای یادگیری و درک بهتر Best Practice مقاله را مطالعه کنید 💯

https://www.educative.io/blog/javanoscript-tips-simplify-code

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

▎نحوه استفاده از eval()

ساختار کلی استفاده از eval() به شکل زیر است:

eval(string);

▎مثال ساده

let x = 10;
let y = 20;
let result = eval("x + y");
console.log(result); // خروجی: 30

در این مثال، eval() رشته "x + y" را تفسیر کرده و مقدار متغیرهای x و y را محاسبه می‌کند.

▎نکات مهم

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

2. عملکرد: eval() می‌تواند بر روی عملکرد برنامه تأثیر منفی بگذارد، زیرا موتور جاوااسکریپت نمی‌تواند بهینه‌سازی‌های لازم را برای کدی که با eval() اجرا می‌شود انجام دهد.

3. دامنه متغیرها: کدی که در eval() اجرا می‌شود می‌تواند به متغیرهای محلی و سراسری دسترسی داشته باشد، که می‌تواند باعث بروز مشکلاتی در مدیریت دامنه‌ها شود.

▎مثال پیشرفته‌تر

function calculate(expression) {
    return eval(expression);
}

console.log(calculate("3 * (4 + 5)")); // خروجی: 27

▎نتیجه‌گیری

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

برای یادگیری و درک بهتر متد eval مقاله را مطالعه کنید 💯

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

برای یادگیری و درک بهتر متد eval مقاله را مطالعه کنید 💯

https://www.w3schools.com/jsref/jsref_eval.asp

برای یادگیری و درک بهتر متد eval مقاله را مطالعه کنید 💯

https://dev.to/amitkhonde/eval-is-evil-why-we-should-not-use-eval-in-javanoscript-1lbh

تابع IIFE (Immediately Invoked Function Expression) یک الگوی طراحی در جاوااسکریپت است که به شما این امکان را می‌دهد که یک تابع را به محض تعریف آن، بلافاصله اجرا کنید. این الگو معمولاً برای ایجاد یک دامنه محلی (scope) جدید و جلوگیری از آلودگی فضای نام جهانی (global namespace) استفاده می‌شود.

▎ساختار IIFE

ساختار کلی IIFE به صورت زیر است:

(function() {
    // کد شما در اینجا
})();

یا می‌توانید از علامت + یا ! برای اطمینان از اینکه تابع به عنوان یک عبارت تابع تفسیر می‌شود، استفاده کنید:

!function() {
    // کد شما در اینجا
}();

▎مثال ساده

در این مثال، یک IIFE تعریف می‌کنیم که یک پیام را در کنسول چاپ می‌کند:

(function() {
    console.log("این یک IIFE است!");
})();

▎استفاده از پارامترها

تابع IIFE می‌تواند پارامترهایی نیز داشته باشد:

(function(name) {
    console.log("سلام " + name + "!");
})("علی");

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

▎ایجاد دامنه محلی

تابع IIFE معمولاً برای ایجاد یک دامنه محلی استفاده می‌شود. به عنوان مثال:

var globalVar = "این یک متغیر جهانی است";

(function() {
    var localVar = "این یک متغیر محلی است";
    console.log(localVar); // خروجی: این یک متغیر محلی است
})();

console.log(globalVar); // خروجی: این یک متغیر جهانی است
// console.log(localVar); // این خط خطا خواهد داد، زیرا localVar در دسترس نیست

▎نتیجه‌گیری

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

برای یادگیری و درک بهتر تابه IIFE مقاله را مطالعه کنید 💯

https://developer.mozilla.org/en-US/docs/Glossary/IIFE

متد setInterval در جاوااسکریپت برای اجرای یک تابع یا کد مشخص به صورت مکرر با یک فاصله زمانی معین استفاده می‌شود. این متد به شما این امکان را می‌دهد که یک تابع را در فواصل زمانی مشخص (به میلی‌ثانیه) اجرا کنید.

▎ساختار متد setInterval

let intervalID = setInterval(callback, delay[, ...args]);

• بخش callback: تابعی که قرار است به صورت مکرر اجرا شود.

• بخش delay: زمان تاخیر (در میلی‌ثانیه) بین هر بار اجرای تابع.

• بخش ...args (اختیاری): آرگومان‌هایی که به تابع callback ارسال می‌شوند.

• بخش intervalID: شناسه‌ای که برای متوقف کردن اجرای مکرر تابع استفاده می‌شود.

▎مثال ساده

در اینجا یک مثال ساده از استفاده از setInterval آورده شده است:

let count = 0;

const intervalID = setInterval(function() {
    count++;
    console.log(count);
    
    // اگر شمارش به 5 رسید، متوقف کن
    if (count === 5) {
        clearInterval(intervalID);
    }
}, 1000); // هر یک ثانیه (1000 میلی‌ثانیه)

در این مثال، تابع هر یک ثانیه یک بار اجرا می‌شود و مقدار count را افزایش می‌دهد. وقتی که count به ۵ رسید، با استفاده از clearInterval اجرای مکرر متوقف می‌شود.

▎استفاده از Arrow Function

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

let count = 0;

const intervalID = setInterval(() => {
    count++;
    console.log(count);
    
    if (count === 5) {
        clearInterval(intervalID);
    }
}, 1000);

▎متوقف کردن setInterval

برای متوقف کردن setInterval، باید از تابع clearInterval استفاده کنید و شناسه‌ای که setInterval برمی‌گرداند را به آن پاس دهید:

clearInterval(intervalID);

▎نتیجه‌گیری

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

برای یادگیری و درک بهتر متد setInterval مقاله را مطالعه کنید 💯

https://www.w3schools.com/jsref/met_win_setinterval.asp

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

▎ساختار متد setTimeout

let timeoutID = setTimeout(callback, delay[, ...args]);

• callback: تابعی که قرار است پس از تأخیر اجرا شود.

• delay: زمان تأخیر (در میلی‌ثانیه) قبل از اجرای تابع.

• ...args (اختیاری): آرگومان‌هایی که به تابع callback ارسال می‌شوند.

• timeoutID: شناسه‌ای که برای متوقف کردن اجرای تابع استفاده می‌شود.

▎مثال ساده

در اینجا یک مثال ساده از استفاده از setTimeout آورده شده است:

console.log("شروع");

setTimeout(function() {
    console.log("این پیام پس از 3 ثانیه ظاهر می‌شود");
}, 3000); // تأخیر 3000 میلی‌ثانیه (3 ثانیه)

console.log("پایان");

در این مثال، ابتدا "شروع" و سپس "پایان" چاپ می‌شود. بعد از 3 ثانیه، پیام "این پیام پس از 3 ثانیه ظاهر می‌شود" چاپ خواهد شد.

▎استفاده از Arrow Function

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

console.log("شروع");

setTimeout(() => {
    console.log("این پیام پس از 3 ثانیه ظاهر می‌شود");
}, 3000);

console.log("پایان");

▎متوقف کردن setTimeout

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

let timeoutID = setTimeout(() => {
    console.log("این پیام هرگز چاپ نخواهد شد");
}, 3000);

// متوقف کردن اجرای تابع
clearTimeout(timeoutID);

در این مثال، با استفاده از clearTimeout، تابعی که قرار بود پس از 3 ثانیه اجرا شود، متوقف می‌شود و هیچ پیامی چاپ نخواهد شد.

▎نتیجه‌گیری

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

برای یادگیری و درک بهتر متد setTimeout مقاله را مطالعه کنید 💯

https://www.w3schools.com/jsref/met_win_settimeout.asp

در برنامه‌نویسی، مفهوم "flag" (پرچم) به یک متغیر گفته می‌شود که برای نشان دادن وضعیت یا حالت خاصی استفاده می‌شود. در جاوااسکریپت و دیگر زبان‌های برنامه‌نویسی، پرچم‌ها معمولاً به صورت boolean (true/false) تعریف می‌شوند و برای کنترل جریان برنامه یا تصمیم‌گیری در مورد انجام عملیات خاص به کار می‌روند.

▎کاربردهای پرچم‌ها

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

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

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

▎مثال

در زیر مثالی از استفاده از پرچم در جاوااسکریپت آورده شده است:

let isLoading = false;

function fetchData() {
    if (isLoading) {
        console.log("در حال حاضر داده‌ها بارگذاری می‌شوند.");
        return; // اگر در حال بارگذاری هستیم، تابع را متوقف می‌کنیم
    }

    isLoading = true; // پرچم را به true تغییر می‌دهیم
    console.log("بارگذاری داده‌ها...");

    // شبیه‌سازی عملیات بارگذاری با setTimeout
    setTimeout(() => {
        console.log("داده‌ها با موفقیت بارگذاری شدند.");
        isLoading = false; // پرچم را به false تغییر می‌دهیم
    }, 2000);
}

// فراخوانی تابع
fetchData();
fetchData(); // این بار پیغام "در حال حاضر داده‌ها بارگذاری می‌شوند." چاپ خواهد شد

▎توضیح مثال

1. در این مثال، یک متغیر isLoading به عنوان پرچم تعریف شده است که نشان‌دهنده وضعیت بارگذاری داده‌ها است.

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

3. اگر isLoading برابر با true باشد، پیام مربوطه چاپ می‌شود و تابع متوقف می‌شود.

4. در غیر این صورت، پرچم به true تغییر می‌کند و عملیات بارگذاری شبیه‌سازی می‌شود.

5. پس از اتمام بارگذاری، پرچم دوباره به false تغییر می‌کند.

▎نتیجه‌گیری

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

📌افزونه‌ای برای ذخیره آسان نکات از وبسایت‌ها

❓تا حالا شده یه مطلب خیلی خوب تو یه سایت پیدا کنی و بعداً یادت بره کجا دیدیش؟ یا مثلاً لازم باشه بری تو تاریخچه گوگل هی بگردی تا اون سایت رو پیدا کنی؟ خب، دیگه نگران نباش!

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

• فقط کافیه نصبش کنی و هر مطلب یا نکته‌ای که دوست داری رو ذخیره کنی. دیگه لازم نیست وقتت رو صرف پیدا کردن دوباره سایت‌ها کنی.

💠برای دانلود ضربه بزنید

همین الان یه سایت خیییلی خفن و عجیب پیدا کردم که منو نداره، فرم نداره و حتی دکمه هم نداره!
https://bruno-simon.com/

تو این سایت پورتفولیو، فقط یه ماشین هست!
یه جاده.
و یه دنیای سه بعدی عجیب !!

پروژه‌ها؟ کنار جاده پارکن.
دکمه‌ها؟ تابلوهای راهنما شدن.
و توی کل سایت؟ فقط با ماشین گاز میدی و کشف میکنی...

این یه سایت و پورتفولیو نیست.
یه بازیه.
یه تجربست.
یه یادآوریه که UX میتونه خنده بیاره، تعامل ایجاد کنه، و بره تو حافظه بلندمدت مغز.

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

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

ابزار TestCraft، یه extension کروم هست که با استفاده از هوش مصنوعی، کار تست نویسی فرانت رو برای ما انجام میده.
خروجی که به ما میده کد تسته که در یکی از قالب های playwright ، cypress و selenium خواهیم داشت.
حتی زبان کد خروجی(مثلا js, ts, java, c sharp و...) و مدل هوش مصنوعی موردنظرمون رو هم می تونیم انتخاب کنیم.
به این صورت که(همونطور که تو این ویدیو می تونیم ببینیم) ما فقط یک قسمت از صفحه رو انتخاب می کنیم. بعد خودش می فهمه اون قسمت چیه و یکسری ایده ی تست به ما میده.
ما می تونیم چندتا از ایده هایی که به ما داده رو انتخاب کنیم و در انتها، کدش رو تو قالبی که انتخاب کردیم دریافت کنیم.
برای بررسی بیشتر هم می تونیم به آدرس زیر مراجعه کنیم:
https://home.testcraft.app/

👨‍💻 شورت‌کات‌های DevTools برای فرانت‌اندکارهای حرفه‌ای

🚀باز کردن سریع DevTools
F12 یا Ctrl + Shift + I

🗂 رفتن به تب Elements
Ctrl + Shift + C (همراه با فعال شدن ابزار Inspect)

🚛 ری‌لود صفحه با پاکسازی Cache
Ctrl + Shift + R

❓ سوییچ سریع بین تب‌های Elements، Console، Network و Sources
Ctrl + [ یا Ctrl + ]

◀️ رفتن به تب Console
Ctrl + Shift + J (در Mac: Cmd + Option + J`)

🗑 پاک کردن سریع Console
Ctrl + L

📸 اگه می‌خوای از کل یه سایت اسکرین‌شات بگیری، راهش اینجاست!

⬅️معمولا توی مرورگر فقط یه قسمت از صفحه رو می‌بینیم و برای دیدن بقیه مطالب باید اسکرول کنیم. ولی بعضی وقتا لازمه از کل صفحه یه عکس بگیری.

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

⬅️وقتی شروع به گرفتن اسکرین‌شات می‌کنی، صفحه به‌صورت خودکار اسکرول می‌شه و یه نوار پیشرفت با تم Pac-Man ظاهر می‌شه که داره مربعا رو می‌خوره!

🌐برای دانلودش اینجارو کلیک کن

طرح داشبورد (40$) - دانلود رایگان از پیکسل پروگرمر!
💻 دوست دارید UI بعدی در رابطه با چه چیزی باشه؟