جاوااسکریپت | JavaScript
507 subscribers
654 photos
139 videos
3 files
512 links
کانال @IR_javascript حاوی اطلاعات مفید در حوزه برنامه نویس فرانت که بصورت روزانه بروز می‌شود.
در این کانال شما به:
[1] مطالب تازه
[2] تحلیل‌های عمیق
[3] نکات آموزشی
[4] چالش
[5] ابزار و راهنمایی‌های کاربردی
دسترسی خواهید داشت.

🆔@IR_javascript
Download Telegram
مفهوم "بستن" (Closure) در JavaScript
در JavaScript، بستن (Closure) ترکیبی از یک تابع و محیط واژه‌شناختی (Lexical Environment) است که در آن تابع تعریف شده است. بستن به تابع اجازه می‌دهد تا به متغیرهای موجود در محیط واژه‌شناختی بیرونی خود، حتی پس از حذف شدن آن محیط، دسترسی داشته باشد.

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

function outerFunction() {
var outerVariable = 'Hello';

function innerFunction() {
console.log(outerVariable);
}

return innerFunction;
}

var closure = outerFunction();
closure(); // Output: Hello

در این مثال، innerFunction به outerVariable که در outerFunction تعریف شده است، دسترسی دارد. حتی زمانی که outerFunction اجرا می‌شود و از دامنه آن خارج می‌شویم، innerFunction همچنان می‌تواند به outerVariable به دلیل بستن دسترسی داشته باشد.

#️⃣#tip
🆔@IR_javascript
👍1
هدف از دستور @property
دستور @property به توسعه‌دهندگان این امکان را می‌دهد که به صورت صریح، «خصوصیات سفارشی CSS» را تعریف کنند. این کار مزایای متعددی به همراه دارد:

بررسی و محدود کردن نوع داده‌: ما می‌توانیم نوع داده‌ی یک خصوصیت سفارشی را مشخص کنیم، مانند <number> (عدد)، <color> (رنگ)، یا <length> (طول). این کار به جلوگیری از خطا کمک می‌کند و اطمینان می‌دهد که خصوصیات سفارشی به درستی استفاده می‌شوند.

تنظیم مقادیر پیش‌فرض: می‌توانیم با استفاده از خاصیت initial-value، یک مقدار پیش‌فرض برای خصوصیت سفارشی که به این روش تعریف شده است، تعیین کنیم. این کار باعث می‌شود که اگر در قسمت‌های دیگر استایل‌شیت مقدار دیگری برای این خصوصیت تنظیم نشده باشد، یک مقدار پیش‌فرض داشته باشیم.

تعریف رفتار ارث‌بری: می‌توانیم انتخاب کنیم که یک خصوصیت سفارشی، قابلیت ارث‌بری مقادیر از عناصر والد خود را داشته باشد یا خیر.
html {
--stop: 50%;
}


@property --stop {
syntax: "<percentage>";
initial-value: 50%;
inherits: false;
}


در جاوااسکریپت، می‌توانیم متغیرهای CSS @property را کنترل کنیم:
//ثبت مقدار متغیر
window.CSS.registerProperty({
name: '--foo',
syntax: '<color>',
initialValue: '#c0ffee',
inherits: true,
});

//تنظیم مقدار متغیر
document.documentElement.style.setProperty("--foo", "pink");
document.querySelector(".element").style.setProperty("--foo", "red");

//دریافت مقدار متغیر
document.querySelector(".element").style.getPropertyValue("--foo");
👍1
انتخاب دقیق عناصر با استفاده از ساختار of S در CSS
یکی از مفیدترین نوآوری‌های CSS، ساختار of S است که به شما امکان می‌دهد عناصر خاصی را از یک لیست انتخابگرها انتخاب کنید.

نحوه عملکرد:

ساختار of S به دنبال عناصری می‌گردد که با همه انتخابگرهای لیست مطابقت داشته باشند و سپس فقط آنهایی را که با اولین انتخابگر لیست نیز مطابقت دارند، انتخاب می‌کند.

مثال:

فرض کنید کد HTML زیر را دارید:
<body>
<div class="container">
<span>1</span>
<span class="highlight">2</span>
<span>3</span>
<span>4</span>
<span class="highlight">5</span>
<span class="highlight">6</span>
</div>
</body>


.container :nth-child(2 of .highlight) {
color: red;
}



در این مثال، CSS عنصری را که با همه انتخابگرهای لیست (container, :nth-child(2), و .highlight) مطابقت دارند، انتخاب می‌کند.

تنها عنصری که با همه این معیارها مطابقت دارد، span با متن "5" است، زیرا:

داخل یک div با کلاس container قرار دارد.
فرزند دوم div با کلاس container است.
دارای کلاس highlight است.
بنابراین، فقط span با متن "5" به رنگ قرمز در می‌آید.

#️⃣#tip #css
🆔@IR_javascript
انتخاب سریع عناصر با $ و $$
می‌توانیم از $ و $$ برای انتخاب سریع عناصر به ترتیب تک عنصری و چند عنصری استفاده کنیم.

$ و $$ از عبارات انتخاب‌گر استاندارد CSS به عنوان ورودی استفاده می‌کنند.

$(selector) → اولین عنصری که با selector مطابقت دارد را انتخاب می‌کند.

$$(selector) → تمام عناصر را که با selector مطابقت دارند، انتخاب می‌کند.


#️⃣#tip
🆔@IR_javascript
🔥1
‏Tidy.js یک کتابخانه برای کار با داده‌ها در JavaScript است که برای ساده‌سازی دستکاری داده‌ها در برنامه‌های JavaScript شما طراحی شده است.
مزایای استفاده از Tidy.js:
سادگی: Tidy.js برای استفاده آسان طراحی شده است و دارای یک رابط کاربری ساده و قابل فهم است.
قدرت: Tidy.js طیف گسترده‌ای از ابزارها را برای دستکاری داده‌ها ارائه می‌دهد که می‌تواند نیازهای مختلف برنامه‌های شما را برآورده کند.
خوانایی: Tidy.js از یک API واضح و خوانا استفاده می‌کند که کد شما را تمیز و قابل نگهداری نگه می‌دارد.

🔗https://github.com/pbeshai/tidy
#️⃣#npm_module
🆔@IR_javascript
نحوه تشخیص وضعیت اتصال به شبکه در JavaScript

می‌توانیم از رویدادهای online و offline برای دریافت اطلاعیه‌ها در مورد تغییرات وضعیت اتصال به شبکه استفاده کنیم.

window.addEventListener('offline', (event) => {
console.log('User is offline');
});

window.addEventListener('online', (event) => {
console.log('User is online');
});



#️⃣#tip
🆔@IR_javascript
👍3
شبه‌کلاس ::firstletter

این شبه‌کلاس به شما امکان می‌دهد اولین حرف یک عنصر متنی را به صورت جداگانه استایل‌دهی کنید. این کار اغلب برای ایجاد حروف درشت در ابتدای پاراگراف یا سایر افکت‌های تایپوگرافی استفاده می‌شود.


#️⃣#tip #css
🆔@IR_javascript
👍3
نحوه انتخاب عنصری در CSS که دقیقاً 5 فرزند مستقیم دارد
در CSS، می‌توانید از ترکیب شبه‌کلاس‌ها و انتخابگرها برای انتخاب عناصر با ویژگی‌های خاص استفاده کنید. در این مورد، می‌خواهیم عنصری را انتخاب کنیم که دقیقاً 5 فرزند مستقیم داشته باشد.

راه حل:

می‌توانید از کد زیر استفاده کنید:

.box:has(> :nth-child(5):last-child) {
background-color: green;
}


#️⃣#tip #css
🆔@IR_javascript
👍1
‏Codeium یک ابزار هوش مصنوعی قدرتمند است که به برنامه‌نویسان در انجام وظایف مختلف، از جمله نوشتن کد، رفع اشکال و تست، کمک می‌کند. این ابزار با استفاده از یادگیری ماشین و پردازش زبان طبیعی، می‌تواند کد را به طور خودکار تکمیل کند، اشکالات را شناسایی کند و راه حل‌های خلاقانه ارائه دهد.
در نظرسنجی اخیر Stack Overflow، Codeium به عنوان پربازده‌ترین و کاربرپسندترین دستیار هوش مصنوعی برای برنامه‌نویسی انتخاب شد. این نظرسنجی از بیش از 10000 توسعه‌دهنده در سراسر جهان نظرسنجی کرد و نشان داد که Codeium به طور قابل توجهی به برنامه‌نویسان در انجام وظایف خود کمک می‌کند.

🔗https://stackoverflow.blog/2024/05/29/developers-get-by-with-a-little-help-from-ai-stack-overflow-knows-code-assistant-pulse-survey-results/
#️⃣#tool
🆔@IR_javascript
👍1
شبه عنصر ::first-line
این شبه عنصر به شما امکان می دهد اولین خط عنصر متنی را به صورت جداگانه استایل دهید. این عنصر اغلب برای ایجاد جلوه های تایپوگرافی مانند افزایش اندازه فونت یا تغییر رنگ اولین خط استفاده می شود.

خواص قابل قبول:

color: رنگ اولین خط
background-color: رنگ پس زمینه
font-family: قلم اولین خط
font-size: اندازه فونت
font-weight: ضخامت فونت
line-height: ارتفاع خط
text-decoration: تزیین متن (زیرخط، خط خطی)
text-transform: تبدیل متن (حروف بزرگ، حروف کوچک)
word-spacing: فاصله بین کلمات
letter-spacing: فاصله بین حروف
text-indent: فرورفتگی اولین خط
در عمل، این شبه عنصر اغلب برای عناوین مقالات و پست ها استفاده می شود.
#️⃣#tip #css
🆔@IR_javascript
فشرده سازی کد
افزونه Better Minify در vs_code به شما امکان می دهد کدهای HTML، CSS، JS و بسیاری از زبان های دیگر را فشرده کنید.

هنگام استفاده از دستور "minify files" بر روی یک فایل انتخابی، فایلی با نام "نام فایل.min.ext" در دایرکتوری فعلی ایجاد می شود.

#️⃣#tool
🆔@IR_javascript
‏Draggabilly
‌‏Draggabilly یک کتابخانه JavaScript سبک وزن است که به شما امکان می دهد عناصر HTML را در صفحات وب قابل کشیدن و رها کردن کنید. این کتابخانه از انواع مختلف ورودی، از جمله صفحه نمایش های لمسی پشتیبانی می کند، که آن را برای استفاده در همه دستگاه های مدرن مناسب می کند.


🔗https://draggabilly.desandro.com/

#️⃣#npm_module
🆔@IR_javascript
👍2
هر آنچه برای ساخت آسان وب‌سایت‌های ریسپانسیو و بی‌نقص نیاز دارید، در این نرم افزار وجود دارد

تمامی دستگاه‌ها به طور همزمان
تمامی دستگاه‌ها را به صورت همزمان و در کنار هم مشاهده کنید. دیگر نیازی به کلنجار رفتن با ابزار تغییر سایز مرورگر نیست. همه چیز به طور همزمان در یک نگاه قابل مشاهده است.

تعاملات آینه شده
هر کلیک، اسکرول یا ناوبری که در یک دستگاه انجام می‌دهید، به صورت لحظه‌ای در تمام دستگاه‌ها تکرار می‌شود.

تعویض سریع بین محیط‌های مختلف
ترکیب‌های دستگاهی مورد علاقه خود را به عنوان «مجموعه پیش‌نمایش» ذخیره کنید و هنگام تست به سرعت بین آن‌ها جابجا شوید.

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

🔗https://responsively.app/
#️⃣#tool
🆔@IR_javascript
👍1🔥1
‏API تمام صفحه—یک رابط کاربری است که به شما امکان می دهد عناصر صفحه HTML را در حالت تمام صفحه نمایش دهید. این رابط کاربری توسط مرورگرهای وب پشتیبانی می شود و می تواند برای ایجاد تجربیات کاربری جذاب و فراگیر مورد استفاده قرار گیرد.

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

نمایش تصاویر: می توانید از API تمام صفحه برای نمایش تصاویر در اندازه بزرگتر و با جزئیات بیشتر استفاده کنید. این می تواند برای عکاسان، هنرمندان یا هر کسی که بخواهد تصاویر خود را به روشی فراگیر به اشتراک بگذارد مفید باشد.

نمایش اسلایدها: API تمام صفحه برای نمایش اسلایدها نیز ایده آل است. این می تواند برای ارائه ها، سخنرانی ها یا هر موقعیتی که بخواهید محتوای خود را به روشی بصری و جذاب ارائه دهید، مفید باشد.

نمایش بازی ها: برخی از بازی های وب از API تمام صفحه برای ایجاد تجربه ای فراگیرتر برای بازیکنان استفاده می کنند.


نحوه استفاده از API تمام صفحه:
استفاده از API تمام صفحه نسبتاً ساده است. برای نمایش یک عنصر در حالت تمام صفحه، می توانید از روش requestFullscreen() در آن عنصر استفاده کنید. به عنوان مثال، کد زیر عنصر با شناسه target را در حالت تمام صفحه نمایش می دهد:
const element = document.getElementById('target');
element.requestFullscreen();

برای خروج از حالت تمام صفحه، می توانید از روش exitFullscreen() در شیء Document استفاده کنید. به عنوان مثال، کد زیر از حالت تمام صفحه خارج می شود:
document.exitFullscreen();


🔗https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_requestfullscreen
#️⃣#tip
🆔@IR_javascript
👍2
آیا از این قابلیت‌های پنهان جاوا اسکریپت که همین حالا می‌توانید استفاده کنید، خبر داشتید؟
جاوا اسکریپت به عنوان یک زبان برنامه‌نویسی به طور مداوم در حال پیشرفت است و ویژگی‌های جدیدی به آن اضافه می‌شود که باعث قدرتمندتر شدن آن شده‌اند. کارهایی که قبلا نیازمند خطوط کد زیادی بودند، حالا تنها با فراخوانی یک متد قابل انجام هستند.

در اینجا به ۵ مورد از این ویژگی‌ها که شاید از وجود آن‌ها بی‌خبر باشید اشاره می‌کنیم

#️⃣#tip
🆔@IR_javascript
🔥1