| کانال توسعه‌دهندگان جاوااسکریپت |

🌐 تهران‌نت، پیشرو در سرعت و کیفیت!

همش با هزار تومن

- ارائه پنل نمایندگی فروش فیلترشکن بصورت عمده:

⭐️ تک پروتکل: امکان خرید سرویس تحت پروتکل های: v2ray-Cisco-OpenVpn
🔲 مولتی پروتکل: امکان خرید یک سرویس تحت تمامی پروتکل های موجود

😶 امکان ساخت ربات‌ و سایت فروشگاهی با برند اختصاصی شما
🚀 ارائه سرویس های حجمی و نامحدود با بالاترین کیفیت و سرعت ممکن
🔻 ارائه سرویس‌های لایف تایم و بدون انقضا
📱 امکان تسویه‌حساب بعد از فروش برای فروشندگان موبایل

💵شارژ هدیه کیف‌پول به محض ثبت نام

جهت ثبت نام و دریافت هدیه:
🔗https://tehrannet.org/landing/campaign/dvlp

آدرس کانال مجموع :‌
https://t.me/+gU6FrhevCQIyZmE0

پشتیبانی مجموعه : @tehrannetvpn

⚠️ ظرفیت جذب نمایندگی محدود میباشد!

Void(0) Company 😍
Next Generation Tooling


آقای Evan You خالق فریمورک vue.js و vite اومده یه کمپانی جدید زده به اسم Void-Zero و میخواد یه Tollchain برای JS بسازه و با کنار هم قراردادن بهترین ابزار ها یه چیز قوی بسازه.

برای بحث build از Vite برای بحث testing از Vitest و برای bundeler از Rolldown و برای langunage toolchain هم از Oxc بهره میبرند.

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

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

و چون جامعه ویو و ویت باهاش هست نیاز نیست از صفر بسازن.

برای اطلاعات بیشتر میتونید سایتشون رو بررسی کنید که اطلاعات دقیق تر و کامل تری داشته باشید:
🌐 سایت رسمی
⚜️ گیت هاب

🔖 #Javascript, #JS, #جاوااسکریپت

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

بوت‌کمپ آموزشی برنامه‌نویسی جاوا
آموزش برای اشتغال در حوزه اینشورتک

🔰 اگر به مسیر شغلی برنامه‌نویسی جاوا علاقه دارید و میخواید در بازار پر رونق فناوری بیمه (InsurTech) مشغول به کار شوید، این فرصت برای شماست!

👈کسب اطلاعات بیشتر و ثبت‌نام👉

___
کمپس آموزشی فناپ؛ رشد در بازار کار دیجیتال
@FanapCampus

🧩 بهترین منابع برای تمرین JavaScript

سایت W3Schools:
-منبع معتبر برای یادگیری زبان‌ها و فریمورک‌ها و تکنولوژی‌های مختلف مثل JavaScript و Node.js و Vue.js
-شامل ۶۷ تمرین کوتاه برای آموزش Syntax و کارکرد متدهای Vanilla JS
-یک آزمون‌ جامع ساده + کوییزهایی در سطوح مختلف برای مرور مبانی
-فصل JS Examples شامل مثال‌های واقعی(Real life)

سایت Exercism:
-۱۴۸ تمرین مفید JS با قابلیت آنالیز دقیق کدها
-کمک به نوشتن برنامه‌های اصولی و بهینه‌تر
-کامیونیتی غنی + پشتیبانی قوی برای دیدن راه‌حل دیگران و دریافت بازخورد
-نقشه راه استاندارد

سایت JS Hero:
-داکیومنت مختصر برای یادگیری مبانی جاواسکریپت به زبان ساده
-مسئله‌های ساده در انتهای هر مبحث برای تمرین و درک بهتر

سایت Edabit:
-از گسترده‌ترین منابع برای تقویت مهارت حل مسئله
-بیش از ۲۵۰۰ تمرین در ۶ سطح
-امکان مشاهده بهترین راه‌حل‌ها

سایت W3resources:
-۱۰۰۰ مسئله برای سطح Beginner تا Intermediate
-تحلیل دقیق، ارائه چندین راه‌حل بر اساس پارادایم‌های مختلف و انتشارهای JS به همراه فلوچارت

🔖 #Javascript, #JS, #جاوااسکریپت

👤 Soheil

💎 Channel: @DevelopixJavascript

💢 معرفی ابزار Gulp

ابزار Gulp یک ابزار متن‌باز و رایگان است که به زبان جاوا اسکریپت نوشته شده و بر پایه Node Stream است. این ابزار به برنامه‌نویسان اجازه می‌دهد تا یک سری وظایف (Task) در پروژه‌های خود تعریف کنند که کارهای تکراری را به صورت خودکار انجام دهد. این کار باعث می‌شود که کار برنامه‌نویس سبک‌تر شده و روند اجرای پروژه سریع‌تر پیش برود.

ابزار Gulp به عنوان یک Task Manager برای محیط NodeJS و پکیج منیجر NPM عمل می‌کند. بنابراین برای استفاده از Gulp باید پکیج منیجر NPM را نصب کنید. NPM به شما امکان می‌دهد تا پکیج‌های مختلفی را که برای پروژه نیاز دارید، مدیریت و نصب کنید.

⚙️ نصب و راه‌اندازی Gulp

برای شروع استفاده از Gulp، ابتدا باید Node.js و NPM را نصب کنید. سپس می‌توانید Gulp را به عنوان یک وابستگی در پروژه خود نصب کنید:

npm install --save-dev gulp

🔴تعریف وظایف با Gulp

پس از نصب Gulp، می‌توانید وظایف مختلفی را تعریف کنید. به عنوان مثال، فرض کنید می‌خواهید فایل‌های Sass خود را به CSS تبدیل کنید و سپس آنها را فشرده‌سازی کنید. ابتدا باید پلاگین‌های مورد نیاز را نصب کنید:

npm install --save-dev gulp-sass gulp-clean-css

سپس یک فایل به نام gulpfile.js در ریشه پروژه خود ایجاد کنید و وظایف خود را در آن تعریف کنید:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');

gulp.task('sass', function () {
    return gulp.src('src/scss/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('minify-css', () => {
    return gulp.src('dist/css/*.css')
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass', 'minify-css'));

🔴وظایف قابل انجام با Gulp

از جمله کارهایی که با Gulp می‌توانید به صورت خودکار انجام دهید، می‌توان به موارد زیر اشاره کرد:

- فشرده‌سازی کدها: کاهش حجم فایل‌های جاوا اسکریپت و CSS برای افزایش سرعت بارگذاری وبسایت.

- بهینه‌سازی: اعمال تغییراتی روی فایل‌ها برای بهبود عملکرد آن‌ها.

- اجرای Unit Testing: اجرای تست‌های واحد برای اطمینان از عملکرد صحیح کدها.

- تبدیل فایل‌های Sass به CSS: ترجمه فایل‌های پیش‌پردازنده‌های CSS مانند Sass به فایل‌های CSS قابل استفاده در مرورگر.

- ساخت تمپلیت HTML: ایجاد و مدیریت فایل‌های HTML به صورت خودکار.

- فشرده کردن تصاویر: کاهش حجم تصاویر بدون کاهش کیفیت آن‌ها.

- ساخت محیط لوکال هاست: ایجاد یک سرور محلی برای تست و توسعه پروژه‌ها.

🔘مثال کاربردی

فرض کنید شما یک پروژه وب دارید که شامل فایل‌های Sass، تصاویر و فایل‌های جاوا اسکریپت است. با استفاده از Gulp، می‌توانید تمام این وظایف را به صورت خودکار انجام دهید. به عنوان مثال، فایل‌های Sass را به CSS تبدیل کرده، فایل‌های CSS را فشرده کنید و تصاویر را بهینه‌سازی کنید. تمام این کارها تنها با اجرای یک دستور Gulp انجام می‌شود:

gulp

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

👤 Maryam

💎 Channel: @DevelopixWeb

💢 یک منبع پر از تم‌های VS Code

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

vscodethemes.com

#vscode

🔖 #Javascript, #JS, #جاوااسکریپت

👤 Maryam

💎 Channel: @DevelopixJavascript

چجوری میتونیم به پارامتر های ورودی مقدار دیفالت بدیم ؟

چون موضوع خیلی پیچیده ای نیست سعی میکنیم با یک مثال موضوع رو جمع کنیم

- ما یک تابع داریم که دوتا ورودی میگیره و ورودی اول به توان ورودی دوم رو به ما حروجی میده

function power(number , power)
{
  return number ** power;
}

- ما میخوایم به ورودی دوم (power) یک مقدار دیفالت بدیم اگر مقداری وارد نشده بود مقدار 2 لحاظ بشه این کار بسیار ساده هست کافیه فقط کد رو به این صورت تغییر بدیم :

function power(number , power = 2)
{
  return number ** power;
}

- در این حالت مقدار power در صورت عدم مقدار دهی برابر با 2 خواهد بود

🔖 #Javascript, #JS, #جاوااسکریپت

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

📌چطور با جاوااسکریپت توی سرچ باکس کلمات مرتبط با سرچ رو به کاربر پیشنهاد بدیم؟!

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


این دوره رو با ۴۰+ پروژه تخصصی جی اس میتونین از وبسایت سبزلرن مشاهده کنین.


📌ثبت نام رایگان دوره پیشرفته طراحی سایت با جاوااسکریپت و استفاده از سورس کد پروژه ها:
B2n.ir/jsp_sabzlearn
B2n.ir/jsp_sabzlearn

رایگان به تعداد محدود!⚠️

📌 معرفی سایت

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

#معرفی_سایت

👤 Maryam

💎 Channel: @DevelopixJavascript

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

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

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

https://discord.js.org

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

صد درصد پیش اومده توی سایتتون از قیمت استفاده کردید و دوست داشتید که سه تا سه تا با یک , یا چیزی مثل این جدا کنید و خب روش های مختلفی هست برای این کار ولی من امروز ساده ترین روشش رو میخوام بهتون بگم :)


✳️ ساده ترین روش برای انجام این کار یک خط کد جی اس هست به این صورت :

let price = 500000;
console.log(price.toLocaleString());

و بله به این سادگی میبینید که این قیمت سه رقم سه رقم جدا میشه و خوانایی بالایی بهش میده :)

👤 Matin Soleymani

💎 Channel: @DevelopixWeb

Bun 1.1 :)
و بلاخره ورژن 1.1 بان از ریلیز شد و الان میتونید در ویندوز هم از بان استفاده کنید :)

⭕️ اگر نمیدونید بان چیه:
❇️ بان یک پکیج منیجر ، تست رانر ، باندلر و ران تایم هست ( درواقع انگار node js و npm و ابزار های دیگه در یک جا )
و اپشنی که ارائه میده سرعت و بهینه بودن بیشتره این ابزاره :)

در ورژن 1 روی لینوکس و مک قابل اجرا بود و که در ورژن 1.1 در ویندوز هم قابل استفاده هست

✅ برای نصب بان روی ویندوز :
کافیه دستور زیر رو توی cmd بزنید و نصب میشه خودش :)

powershell -c "irm bun.sh/install.ps1 | iex"

و برای نصب در لینوکس و مک :

curl -fsSL https://bun.sh/install | bash

پس درواقع بان یک ابزار جامع هست که سرعت بسیار بیشتری داره :) کلی اپشن دیگه داره که ما اینجا بهش نمیپردازیم و شما رو ارجاع میدم به داکیومنت خود بان که ازش استفاده کنید مطالعه کنید و یاد بگیرید

https://bun.sh/

امار رو ببینید متوجه میشید که باید نصب کنید و تستش کنید مخصوصا اگر node کار کرده باشید

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

💢 سایت‌مپ (Sitemap) چیست؟

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

🔺اهمیت سایت‌مپ:

1. ارائه ساختار بهتر برای موتورهای جستجو: سایت‌مپ به موتورهای جستجو کمک می‌کند تا ساختار و محتوای وب‌سایت را بهتر درک کنند.

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

3. تشویق به شناسایی صفحات جدید: موتورهای جستجو به وسیله سایت‌مپ راهنمایی می‌شوند تا صفحات جدید را سریعاً شناسایی کنند و به فهرست خود اضافه کنند.

🔺تاثیر سایت‌مپ بر سئو:
۱. ارتقاء فهرست‌بندی: با ارسال سایت‌مپ به موتورهای جستجو، زمان فهرست‌بندی صفحات وب‌سایت توسط موتورها بهبود می‌یابد.

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

۳. بهبود رتبه‌بندی: سایت‌مپ می‌تواند بهبود رتبه‌بندی صفحات وب‌سایت در نتایج جستجو کمک کند.

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

😀نکات کلیدی:
- همیشه از سایت‌مپ به روز استفاده کنید و در صورت اضافه یا حذف صفحات، آن را به‌روز کنید.

- سایت‌مپ باید به صورت مستمر به موتورهای جستجو ارسال شود.

- اطمینان حاصل کنید که سایت‌مپ شما دارای لینک‌های صحیح و قابل دسترس است.

🔔در پست‌های بعدی به نحوه ایجاد سایت‌مپ می‌پردازیم.

👤 Maryam

💎 Channel: @DevelopixWeb

شاید توی پروژه ای براتون پیش اومده باشه که بخواید رنگ های رندوم بسازید برای کارای مختلف

خیلی ساده میتونید با یه فانکشن بیاید و این مورد رو پیاده سازی کنید

function getRandomColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r}, ${g}, ${b})`;
}

کدش بسیار سادس و تمیز و قابل درک هست بازم هر سوالی داشتید توی کامنت های این پست پرسید :)

👤 Matin Soleymani

💎 Channel: @DevelopixJavascript

🔴 شتابان هاست 🔴

🔰 تخفیف ویژه 12 درصدی برای
خرید انواع🔹هاست🔹سرور
در شتابان هاست به مناسبت فرا رسیدن عید نوروز 🥳:

✅ https://shetabanhost.com/
🌟 کد تخفیف اختصاصی:

shetabanhost

🔗 https://shetabanhost.com/

🌐 پشتیبانی ۲۴ ساعته شتابان هاست👇👇

☎️ 024-91311031
💎 Channel: @shetabanhostcom

❓ مفاهیم Scope و Hoisting

🟢 مفهوم Scope (دامنه)

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

🟢 مفهوم Hoisting (انداختن به بالا)

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

مثال:

// مثال از Hoisting در تعریف تابع
hello(); // خروجی: "Hello, World!"

function hello() {
  console.log("Hello, World!");
}

// مثال از Hoisting در تعریف متغیر
console.log(x); // خروجی: undefined
var x = 5;

// مثال از Scope
function exampleScope() {
  var localVar = "I am a local variable";
  console.log(localVar); // خروجی: "I am a local variable"
}

// console.log(localVar); // این خطا می‌دهد چرا که localVar در دامنه تابع تعریف شده است

در این مثال، تابع hello و متغیر x قبل از تعریف آن‌ها فراخوانی و استفاده شده‌اند که این به عنوان Hoisting شناخته می‌شود. همچنین، متغیر localVar در تابع exampleScope تعریف شده است و فقط در دامنه این تابع دسترسی دارد.

💎 Channel: @DevelopixJavascript

🔴 دوره آموزشی-استخدامی جاوا اسکریپت/ری‌اکت

⚛ از هر رشته‌ای که هستی، صفر تا صد ری‌اکت رو یاد بگیر، پروژه واقعی بزن و استخدام شو.

▫️۲۰۰ ساعت آموزش و پروژه
▫️دارای منتورینگ و پشتیبانی
▫️مدرک معتبر از دانشگاه علم و صنعت
▫️کمک به استخدام در صورت اتمام دوره

🌟 ۲۰ درصد تخفیف ثبت‌نام نقدی!

🔗 برای ثبت‌نام روی این لینک کلیک کنید.

❓ توابع و توابع ناشناخته (anonymous functions)

در جاوااسکریپت، توابع (functions) یک بخش اساسی از زبان هستند و می‌توانند به عنوان مجموعه‌ای از دستورات باشند که یک وظیفه خاص را انجام می‌دهند. توابع می‌توانند به صورت ناشناخته (anonymous) یا با نام (named) تعریف شوند.

توابع ناشناخته (anonymous functions) بدون نام هستند و معمولاً به عنوان آرگومان یا مقدار یک متغیر استفاده می‌شوند. این توابع معمولاً در مواقعی که نیاز به یک وظیفه یا پاسخگویی خاص دارید، به کار می‌روند.

مثال:

// تعریف یک تابع ناشناخته (anonymous function)
var addNumbers = function(x, y) {
  return x + y;
};

// فراخوانی تابع ناشناخته
var result = addNumbers(5, 10);

console.log(result); // خروجی: 15

مثال ES6:

const addNumbers = (x , y)=>{
    return x + y
}

console.log(addNumbers(11 , 24))

در این مثال، تابع addNumbers به صورت ناشناخته تعریف شده است. این تابع دو عدد را به عنوان ورودی دریافت کرده و جمع آن‌ها را باز می‌گرداند. سپس با فراخوانی این تابع با مقادیر 5 و 10، نتیجه جمع به عنوان result ذخیره شده و در نهایت در کنسول چاپ می‌شود.

💎 Channel: @DevelopixJavascript

🍉 یلدای امسال رو کُدیلویی بگذرونید!

🍓 تا پایان روز جمعه با دعوت دو کاربر جدید به کدیلو، فایل های کدیلو رو رایگان دریافت کنید

🥝 یلدای خوبی داشته باشید (:

💎 @Codilo

فرض کنید چند آبجکت به این صورت دارید

const foo = { name: 'tom', age: 30, nervous: false }
const bar = { name: 'ahmad', age: 18, nervous: true }
const baz = { name: 'reza', age: 50, nervous: false }

اگه بخواید این‌ها رو به صورت عادی توی کنسول نمایش بدید از console.log()‎ استفاده می‌کنید. ولی برای قشنگ‌تر نشون دادن‌این آبجکت‌ها توی کنسول می‌تونید از متد console.table()‎ استفاده کنید. برای مثال بیاید این آبجکت‌های بالا رو با این متد نمایش بدیم.

console.table([foo, bar, baz]);

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

👤 MHReza

💎 Channel: @DevelopixJavascript