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

🆔@IR_javascript
Download Telegram
مقایسه `parseInt` و `parseFloat`: وقتی «Infinity» به یک تله تبدیل می‌شود 🤨

اخیراً با یک مشکل غیرمنتظره برخورد کردم: در یکی از شبیه‌سازی‌هایم، نتیجه‌ی محاسبات به بی‌نهایت می‌رسید. همه‌ی داده‌ها را به‌صورت رشته در فایل CSV ذخیره می‌کردم و سپس آن‌ها را با استفاده از parseInt تجزیه می‌کردم. تنها یک مقدار "Infinity" باعث شد کل آمار من به‌هم بریزد — و مدت زیادی طول کشید تا بفهمم مشکل از کجاست. 😢

---

### نحوه‌ی عملکرد توابع تجزیه

✔️ `parseInt`

⏺️ نویسه‌ها را از چپ به راست می‌خواند، با یک علامت اختیاری (+ یا –) شروع می‌کند؛
⏺️ بعد از علامت، انتظار یک رقم (صفر تا نه) یا در صورت وجود مبنای عددی خاص، حروف مربوط به آن مبنا را دارد؛
⏺️ با رسیدن به اولین نویسه‌ی نامعتبر، فرایند تجزیه متوقف می‌شود.

مثال‌ها:

parseInt("42px", 10);     // خروجی: ۴۲  
parseInt("10.5", 10); // خروجی: ۱۰
parseInt("Infinity", 10); // خروجی: NaN — چون اولین نویسه حرف است نه رقم


---

✔️ `parseFloat`

⏺️ روندی مشابه دارد، اما علاوه بر آن، نقطه‌ی اعشار (.) و حروف e/E برای نمایی (exponent) را نیز شناسایی می‌کند؛
⏺️ در مشخصات این تابع، "Infinity" (و "-Infinity") به‌عنوان یک مقدار عددی معتبر تعریف شده است.

مثال‌ها:

parseFloat("3.14xyz");     // خروجی: ۳٫۱۴  
parseFloat("1e3"); // خروجی: ۱۰۰۰
parseFloat("Infinity"); // خروجی: Infinity
parseFloat("Infinityxyz"); // خروجی: Infinity — ادامه‌ی رشته نادیده گرفته می‌شود


---

### 👀 تله: "Infinity"

در کدی مانند زیر:

parseFloat("Infinity");    // → Infinity  
parseInt("Infinity", 10); // → NaN


✔️ parseFloat مقدار "Infinity" را به‌عنوان یک عدد خاص تشخیص داده و همان را برمی‌گرداند.
✔️ اما parseInt با مشاهده‌ی نویسه‌ی اول که حرف I است (و نه یک رقم یا علامت)، مستقیماً NaN برمی‌گرداند.

در نتیجه ممکن است هم Infinity دریافت کنید و هم NaN. نکته‌ی مهم این است که بررسی ساده‌ای مثل:

if (!isNaN(value)) { … }


مقدار Infinity را عبور می‌دهد (چون isNaN(Infinity) === false است)، ولی NaN را رد می‌کند.

---

### پس چه باید کرد؟

۱️⃣ بر اساس نوع داده، از تابع مناسب استفاده کنید:

✔️ parseInt → فقط برای اعداد صحیح، بدون حالت‌های خاص؛
✔️ parseFloat → برای اعداد اعشاری، نمایی و مقادیر Infinity یا -Infinity.

۲️⃣ بررسی کنید که مقدار نهایی، محدود و واقعی باشد:

const v = parseFloat(raw);
if (!Number.isFinite(v)) {
// اینجا هم NaN و هم ±Infinity شناسایی و فیلتر می‌شوند
}


در غیر این صورت، بدون بررسی مقدار نهایی و بدون مدیریت صریح "Infinity"، خطر از دست رفتن یا خراب شدن داده‌ها وجود دارد. 🤷🏻‍♀️

---

امیدوارم تجزیه‌گرهای شما همیشه درست و بی‌دردسر کار کنند. 🤝



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
محاسبات اعشاری در رایانه‌ها
زبان برنامه‌نویسی شما مشکلی ندارد؛ این چیزی است که به آن محاسبات با ممیز شناور (Floating Point Math) گفته می‌شود. رایانه‌ها به‌صورت ذاتی تنها می‌توانند اعداد صحیح را ذخیره کنند، بنابراین برای نمایش اعداد اعشاری به روشی خاص نیاز دارند — و این روش همیشه کاملاً دقیق نیست. به همین دلیل است که اغلب مواقع، حاصل جمع صفر ممیز یک (۰٫۱) و صفر ممیز دو (۰٫۲) دقیقاً برابر با صفر ممیز سه (۰٫۳) نخواهد بود.

### چرا چنین اتفاقی می‌افتد؟

این موضوع در واقع پدیده‌ای جالب است. در سیستم عددی مبنای ده (یعنی همان سیستمی که ما انسان‌ها استفاده می‌کنیم)، تنها می‌توان کسرهایی را به‌صورت دقیق نمایش داد که مخرج آن‌ها دارای فاکتورهای اولِ ده باشند. عدد ده تنها دو فاکتور اول دارد: دو و پنج. بنابراین کسری مانند یک دوم (۱/۲)**، **یک چهارم (۱/۴)**، **یک پنجم (۱/۵)**، **یک هشتم (۱/۸) و یک دهم (۱/۱۰) را می‌توان به‌راحتی در این سیستم نمایش داد، زیرا مخرج آن‌ها از همین فاکتورهای اول ساخته شده‌اند.

در مقابل، کسرهایی مانند یک سوم (۱/۳)**، **یک ششم (۱/۶)**، **یک هفتم (۱/۷) و یک نهم (۱/۹) در مبنای ده به‌صورت اعشارهای تکرارشونده نمایش داده می‌شوند، چرا که مخرج آن‌ها شامل فاکتورهای اولی هستند که در ترکیب ده قرار ندارند (مانند سه یا هفت).

### اما در مبنای دودویی (مبنای دو) چطور؟

در سیستم باینری (مبنای دو)، تنها فاکتور اول موجود عدد دو است. بنابراین فقط می‌توان کسرهایی را دقیق نمایش داد که مخرج آن‌ها از فاکتور دو تشکیل شده باشد. در این سیستم، کسری مانند یک دوم (۱/۲)**، **یک چهارم (۱/۴) و یک هشتم (۱/۸) بدون خطا نمایش داده می‌شوند، اما کسرهایی مانند یک پنجم (۱/۵) یا یک دهم (۱/۱۰) به‌صورت اعشار تکرارشونده در می‌آیند.

از آنجا که ۰٫۱ و ۰٫۲ در مبنای ده کسرهایی تمیز و واضح هستند (به ترتیب معادل با ۱/۱۰ و ۱/۵)، اما در مبنای دو که رایانه استفاده می‌کند، به شکل اعشارهای تکرارشونده درمی‌آیند. بنابراین وقتی رایانه عملیات ریاضی بر روی این مقادیر انجام می‌دهد، مقداری خطا و باقی‌مانده ایجاد می‌شود که در هنگام تبدیل به نمایش ده‌دهی (مبنای ده، برای انسان) دیده می‌شود.

### برای نمونه:

وقتی در چند زبان برنامه‌نویسی مختلف حاصل یک بعلاوه دو (۱ + ۲) را به خروجی استاندارد می‌فرستیم، نتیجه همیشه دقیق است — زیرا با اعداد صحیح سروکار داریم. اما وقتی پای اعداد اعشاری مانند ۰٫۱ و ۰٫۲ وسط باشد، این خطاها به چشم می‌آیند.

---

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


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
1
⛽️ npmgraph: ابزاری برای نمایش گراف وابستگی‌های ماژول‌های npm
[مشاهده در وب‌سایت](https://npmgraph.js.org/)

این ابزار مبتنی بر وب، امکان مشاهده‌ی گراف وابستگی‌های ماژول‌های npm را به شکلی بصری فراهم می‌کند. تنها کافی‌ست نام یک یا چند بسته‌ی npm (یا حتی فایل package.json پروژه‌ی خود) را وارد کنید تا نمایی گرافیکی از وابستگی‌ها، از جمله نقاط تقاطع میان آن‌ها، در اختیارتان قرار گیرد.

شما می‌توانید بسته‌ها را بر اساس معیارهای گوناگون — مانند تعداد نگهدارندگان (maintainers) — رنگ‌بندی کنید. همچنین، امکان دانلود نسخه‌ی برداری (SVG) از نمودارها نیز فراهم است تا بتوانید از آن‌ها در مستندات یا ارائه‌های خود استفاده نمایید.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
بیشتر خطاهای نرم‌افزاری ناشی از فرضیاتی هستند که متوجه نبودیم آن‌ها را پذیرفته‌ایم.

من اغلب نیاز دارم به‌سرعت نسخهٔ ماژول‌های نصب‌شده در پوشهٔ node_modules را بررسی کنم. راهکارهای فعلی مانند اجرای دستور npm list هم کند هستند و هم خروجی پراکنده و غیرمتمرکزی ارائه می‌دهند. بررسی نسخهٔ ماژول در فایل package.json آن ماژول نیز وقت‌گیر است و اطلاعاتی دربارهٔ سایر نسخه‌های همان ماژول در پروژه نمی‌دهد.

ابزار qnm این مشکل را حل کرده است. این ابزار، اطلاعاتی سریع و دقیق دربارهٔ ماژول‌های نصب‌شده ارائه می‌دهد. qnm از هر دو ابزار npm و yarn پشتیبانی می‌کند و به شما امکان می‌دهد نسخه‌های ماژول‌های مورد نظر خود را به‌راحتی و با سرعت شناسایی کنید.

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
‏php-node یک ماژول بومی برای Node است که امکان اجرای برنامه‌های PHP را در محیط Node فراهم می‌کند.

چرا باید چنین کاری کرد؟
برای مهاجرت دادن برنامه‌های قدیمی، ساخت اپلیکیشن‌های ترکیبی PHP و JavaScript، یا حتی اپلیکیشن‌های Node‌ای که به هر دلیلی نیاز دارند بخش‌هایی از منطق خود را از طریق PHP اجرا کنند—مثلاً در ارتباط با وردپرس، همان‌طور که در این مطلب مشاهده می‌کنیم.php-node یک ماژول بومی برای Node است که امکان اجرای برنامه‌های PHP را در محیط Node فراهم می‌کند.

چرا باید چنین کاری کرد؟
برای مهاجرت دادن برنامه‌های قدیمی، ساخت اپلیکیشن‌های ترکیبی PHP و JavaScript، یا حتی اپلیکیشن‌های Node‌ای که به هر دلیلی نیاز دارند بخش‌هایی از منطق خود را از طریق PHP اجرا کنند—مثلاً در ارتباط با وردپرس، همان‌طور که در این مطلب مشاهده می‌کنیم.

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
2👍1
‌‏DevDocs.io وب‌سایتی است که دسترسی آسان و سریع به مستندات مربوط به فناوری‌ها و زبان‌های برنامه‌نویسی مختلف را فراهم می‌کند. در این سایت، مستندات مربوط به موضوعاتی مانند HTML، CSS، JavaScript، پایتون، روبی، پی‌اچ‌پی، ری‌اکت، ویو‌جی‌اس، نود‌جی‌اس و بسیاری فناوری دیگر گردآوری شده‌اند.

برتری اصلی DevDocs.io در این است که همه مستندات در یک پلتفرم یکپارچه گرد آمده‌اند و از طریق رابط کاربری ساده و کاربردی، به‌راحتی قابل جست‌وجو و مرور هستند. کاربران می‌توانند با استفاده از جست‌وجو یا دسته‌بندی‌ها، به سرعت به اطلاعات موردنیاز خود دست پیدا کنند.

خبر خوب اینکه این وب سایت امکان کش کردن مستندات را روی کش مرورگر میدهد و در زمان محدودیت اینترنت می توانید به راحتی به مستندات دسترسی داشته باشید

🔗 https://devdocs.io/offline
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
1
### تاب‌آوری توسعه‌دهندگان فرانت‌اند در شرایط جنگی و محدودیت اینترنت

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

۱. استفاده از مخازن داخلی (Mirror) برای نصب پکیج‌ها
در صورت قطع دسترسی به npm یا سایر ریجیستری‌های خارجی، از آینه‌های داخلی برای نصب پکیج‌ها بهره بگیرید.
🔗 [راهنمای دسترسی به مخزن داخلی npm در اینترنت ملی](https://roocket.ir/discuss/%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%DB%8C-%D8%A8%D9%87-%D9%85%D8%AE%D8%B1%D9%86-npm-%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86%D8%AA%D8%B1%D9%86%D8%AA-%D9%85%D9%84%DB%8C-%D8%B1%D8%A7%D9%87-%D8%AD%D9%84/)

۲. ورود به سرویس هوش مصنوعی «اول‌ای‌آی» از پیش انجام شود
در زمان‌های بحرانی، دسترسی به حساب ممکن است با مشکل مواجه شود. بهتر است از همین حالا وارد حساب خود شوید.
🔗 [ورود به avalAI](https://chat.avalai.ir/chat)

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

۴. مستندات و پکیج‌های پراستفاده را از قبل دانلود و ذخیره کنید
کتابخانه‌ها و ابزارهایی مانند React، Vue، Next.js، Tailwind و همچنین مستندات مربوط به APIها و ابزارهای توسعه را آفلاین نگهداری کنید. استفاده از ابزارهایی مانند DevDocs [+پست قبلی ]می‌تواند مفید باشد.

۵. استفاده از پیام‌رسان «سروش پلاس» برای ارتباط با خارج از کشور
بر اساس گزارش‌ها، پیام‌رسان سروش امکان ارتباط کاربران خارج از کشور را فراهم کرده است. این گزینه در شرایط خاص می‌تواند جایگزینی موقت باشد.
🔗 [جزئیات بیشتر در زومیت](https://www.zoomit.ir/tech-iran/442373-soroush-plus-confirms-users-outside-of-iran/)

اگر تجربه و یا موضوع دیگری را سراغ دارید در بخش نظرات بیان کنید



#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript
👎1
جاوااسکریپت | JavaScript pinned «### تاب‌آوری توسعه‌دهندگان فرانت‌اند در شرایط جنگی و محدودیت اینترنت در شرایطی مانند قطعی اینترنت جهانی یا اینترنت ملی، داشتن آمادگی از پیش می‌تواند مانع از توقف کامل روند توسعه شود. توصیه‌های زیر برای حفظ کارایی و ارتباط در این شرایط پیشنهاد می‌شود: ۱.…»
This media is not supported in your browser
VIEW IN TELEGRAM
امام سجاد علیه‌السلام عموی خود #عباس علیه السلام را چنین توصیف می‌فرماید:
💠 خدا عمویم عباس را رحمت کند که ایثار کرد و خود را به سختی افکند و در راه برادرش جانبازی کرد، تا آن‌که دست‌هایش از پیکر جدا گردید.
⚡️آن‌گاه خداوند به جای آن‌ها دو بال به وی عنایت فرمود که در بهشت همراه فرشتگان پرواز کند؛ همان‌سان که برای جعفر طیار قرار داد.
⚜️ عباس نزد خداوند مقامی دارد که همه شهدا در قیامت بدان غبطه می‌خورند.

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
10👎6😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Slideout.js

یک کتابخانهٔ سبک برای ایجاد منوهای کشویی جانبی است. این ابزار از حرکات لمسی (سوايپ) پشتیبانی می‌کند، به هیچ‌گونه چارچوب خارجی وابسته نیست و برای طراحی رابط‌های کاربری واکنش‌گرا در دستگاه‌های موبایل و دسکتاپ کاملاً مناسب است.

🔗https://slideout.js.org/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
‏**PDFSlick نسخهٔ سه: مشاهده و تعامل با اسناد PDF در اپلیکیشن‌های JavaScript**

یک نمایشگر کامل و قدرتمند PDF برای اپلیکیشن‌های React، Solid، Svelte و JavaScript خالص است. این ابزار که بر پایهٔ PDF.js توسعه یافته، مجموعه‌ای گسترده از قابلیت‌ها را ارائه می‌دهد—از مشاهدهٔ سادهٔ فایل‌های PDF گرفته تا کار با اسناد متعدد و حجیم همراه با امکان افزودن یادداشت.

نسخهٔ سه این ابزار به PDF.js نسخهٔ پنج ارتقا یافته و اکنون از پروفایل‌های ICC پشتیبانی می‌کند، عملکرد بهتری در نمایش فرمت JPEG 2000 دارد و رندر صفحات بزرگ نیز به‌طور چشمگیری بهبود یافته است.

دمو:
https://pdfslick.dev/examples/pdf-viewer-app




#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript
1
This media is not supported in your browser
VIEW IN TELEGRAM
هیهات منا الذله
🖤 سالروز شهادت حضرت اباعبدالله(ع)

🔗 https://t.me/motahari_ir/4452
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
12👎2
در نسخه‌ی اخیر مرورگر کروم، سرانجام مدل زبانی بزرگ «جِمینای نانو» همراه با رابط برنامه‌نویسی خلاصه‌ساز (Summarizer API) معرفی شده است.

[لینک توضیحات رسمی](https://developer.chrome.com/docs/ai/summarizer-api?hl=fa)

این مدل در صورت نیاز، بر روی رایانه‌ی کاربر دانلود می‌شود، حجمی در حدود چند گیگابایت دارد، به چهار گیگابایت حافظه‌ی گرافیکی نیاز دارد و صرفاً بر روی دستگاه‌های دسکتاپ قابل اجراست.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
This media is not supported in your browser
VIEW IN TELEGRAM
امام سجاد عليه السلام فرمود:
⬅️«شكيبائى» نسبت به «ايمان» چـون سـر نسبت به پـيكر اسـت. و كسى كه «صبر» ندارد «ايمان» ندارد.

🖤 سالروز شهادت زین‌العابدین حضرت امام سجاد(ع) تسلیت باد.

🔗 https://t.me/raefipourfans/125912
#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript
10👎3
نسخه‌ی صد و سی و هشتم مرورگر کروم منتشر شد.

### قابلیت‌های جدید:

#### • رابط برنامه‌نویسی هوش مصنوعی (AI API) در مرورگر

اکنون می‌توان برخی از قابلیت‌های هوش مصنوعی را به‌صورت مستقیم در مرورگر و روی دستگاه کاربر استفاده کرد:

* Translator API – افزودن ترجمه‌ی هم‌زمان به اپلیکیشن‌های وب
* Language Detector API – شناسایی زبان متن
* Summarizer API – تولید خلاصه برای مقاله‌ها، گفتگوها و نظرات کاربران

#### • ویژگی‌های جدید در CSS

* progress() – محاسبه‌ی میزان پیشرفت یک مقدار میان دو مقدار دیگر و بازگرداندن عددی بدون واحد
* sibling-index() و sibling-count() – استایل‌دهی به عناصر بر اساس موقعیت آن‌ها در میان عناصر هم‌سطح؛ دیگر نیازی به استفاده از :nth-child(۱)`، :nth-child(۲)` و غیره نیست
* abs() و sign() – محاسبه‌ی قدر مطلق و علامت عدد

#### • پشتیبانی از دستگاه‌های تاشو

به کمک Viewport Segments API می‌توان طرح‌بندی صفحات را با صفحه‌نمایش‌های تاشو سازگار کرد.

برای اطلاعات بیشتر به لینک زیر مراجعه کنید:
[chrome.com/blog/new-in-chrome-138](https://developer.chrome.com/blog/new-in-chrome-138)

// Traduce textos en JavaScript con IA
const translator = await Translator.create({
sourceLanguage: "es", // Español
targetLanguage: "en", // English
})
const translation =
await translator.translate("Hola, mundo")
console.log(translation) // "Hello, world"



#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript
👍2
Media is too big
VIEW IN TELEGRAM
HelloCSV: یک راهکار آماده برای وارد کردن فایل‌های CSV در اپلیکیشن‌های JavaScript


اگر شما یا کاربران‌تان فایل‌های CSV برای وارد کردن دارید، این ابزار یک جریان کاری کامل برای واردسازی فایل‌های CSV در سمت کاربر ارائه می‌دهد که به‌راحتی می‌توانید آن را در اپلیکیشن خود جای دهید.

مستندات پایه در دسترس هستند:
https://hellocsv.mintlify.app/common/get-started/introduction


#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript