#javascript #website

●● معرفی وبسایت javscript.info ●●

اگر با زبان برنامه نویسی JavaScript کار میکنید احتمالا اسم این سایت رو زیاد شنیده باشید. javscript.info یک منبع آنلاینِ رایگان، جامع و تعاملی برای یادگیری زبان برنامه‌نویسی جاوااسکریپت است. این وب‌سایت به شما کمک می‌کند تا مفاهیم جاوااسکریپت را به صورت ساده و روان یاد بگیرید.

ویژگی‌های کلیدی این وب‌سایت‌ 🚀

➊ محتوای باکیفیت: مطالب این وب‌سایت به‌روز هستند و با استانداردهای جدید جاوااسکریپت مطابقت دارند. 💯

➋ زبان ساده: مفاهیم به زبانی ساده و قابل فهم توضیح داده شده‌اند تا برای مبتدیان و افراد با تجربه مناسب باشد.

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

➍ چندزبانه بودن: این وب‌سایت به زبان‌های مختلف از جمله فارسی ترجمه شده است. ( مشاهده ترجمه فارسی وبسایت ) 🌐

چه کسانی می‌توانند از این وب‌سایت استفاده کنند ؟ 🤔

➊ مبتدیان: اگر هیچ تجربه قبلی در برنامه‌نویسی ندارید، این وب‌سایت می‌تواند شروع خوبی برای شما باشد.

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

💢 برای عمیق شدن توی زبان جاوااسکریپت هم میتونه بسیار کمک کننده باشه. ⚡

✅ در کل javscript.info یک منبع ارزشمند برای هر کسی است که می‌خواهد جاوااسکریپت یاد بگیرد.

Channel | YouTube | Instagram

#WhatsThat #javascript #object

* متد Object.defineProperty در جاوااسکریپت چیست ؟  *
#part1

یکی از روش‌های قدرتمند در جاوااسکریپت برای تعریف یا تغییر ویژگی‌های یک شیء به صورت دقیق و کنترل شده Object.defineProperty است. با استفاده از این متد، می‌توانید ویژگی‌های جدیدی به یک آبجکت اضافه کنید یا ویژگی‌های موجود را تغییر دهید و حتی رفتارهای سفارشی مدنظر خودتون رو برای آن‌ها تعریف کنید.

ویژگی های کلیدی Object.defineProperty 🚀

➊ کنترل کامل بر روی ویژگی‌ها : شما می‌توانید مشخص کنید که آیا یک ویژگی قابل خواندن، نوشتن یا حذف شدن است یا خیر.

➋ تعریف getter و setter : می‌توانید فانکشنالیتی کاستوم خودتون رو برای خواندن (getter) و نوشتن (setter) مقدار یک ویژگی تعریف کنید. این به شما اجازه می‌دهد تا عملیات پیچیده‌تری را قبل یا بعد از تغییر مقدار یک ویژگی انجام دهید.

➌ ایجاد ویژگی‌های غیر قابل تغییر : می‌توانید ویژگی‌هایی ایجاد کنید که پس از مقداردهی اولیه قابل تغییر نباشند ( در چالش قبلی از این این ویژگی استفاده شده بود ).

➍ بهینه سازی عملکرد : در برخی موارد، استفاده از Object.defineProperty می‌تواند به بهبود عملکرد کد کمک کند.

✅ ساختار کلی Object.defineProperty

Object.defineProperty(obj, prop, descriptor);

1️⃣ obj : آبجکتی که می‌خواهید ویژگی آن را تعریف یا تغییر دهید.

2️⃣ prop : نام ویژگی‌ای که می‌خواهید تعریف کنید.

3️⃣ descriptor : یک آبجکت که ویژگی‌های مورد نظر برای ویژگی جدید را توصیف می‌کند.

⚡ در کل Object.defineProperty یک ابزار قدرتمند برای کنترل دقیق پروپرتی‌ها در جاوا اسکریپت است. با درک کامل این متد، می‌توانید کدهای تمیزتر و انعطاف‌پذیرتری بنویسید. هدف این پست صرفا معرفی این متد بود، توی پست های بعدی به صورت جزئی بخش های جزئی و حرفه ای تر این متد رو بررسی میکنیم ✅

⚠️ ( حتما به این نکته توجه کنید که استفاده بیش از حد از Object.defineProperty می‌تواند کد را پیچیده‌تر کند. بنابراین، بهتر است از آن در مواردی استفاده کنید که واقعا نیاز به کنترل دقیق بر روی ویژگی‌های یک شیء دارید )

Channel | YouTube | Instagram

#javascript #js_trick #object

* متد Object.defineProperty در جاوااسکریپت چیست ؟  *
#part2

توی پارت قبلی به معرفی متد Object.defineProperty پرداختیم و ویژگی های کلیدی و ارگومان های مختلف این متد رو بررسی کردیم :

obj | prop | descriptor

و متوجه شدیم که با آرگومان descriptor میتونیم یسری ویژگی های جدید رو به پروپرتی خودمون اضافه کنیم تا کنترل بهتری روی پروپرتی خودمون داشته باشیم، حالا توی این پارت قراره که به صورت جزئی تر به مقادیر آرگومان descriptor بپردازیم و دونه به دونه با هم دیگه بررسی‌شان کنیم ⚡


مقادیر آرگومان descriptor 🚀

➊ value : مقدار اولیه ویژگی.

➋ configurable : مقدار بولینی که مشخص می‌کند آیا می‌توان ویژگی را حذف کرد یا تعریف آن را تغییر داد. 🛑🔁

➌ enumerable : یک مقدار بولین که مشخص می‌کند آیا ویژگی در یک حلقه for...in ظاهر می‌شود یا خیر. 👁️‍🗨️

➍ writable : یک مقدار بولین که مشخص می‌کند آیا می‌توان مقدار ویژگی را تغییر داد. 📝

➎ get : یک تابع که بعنوان گِتِر برای پروپرتی ما عمل میکند.

➏ set : یک تابع که به عنوان سِتِر برای پروپرتی ما عمل می‌کند.

✅ مثال عملی :

const person = {};

Object.defineProperty(person, 'name', {
  value: 'علی',
  writable: false,
  enumerable: true,
  configurable: false
});

console.log(person.name); // خروجی: علی

person.name = 'حسن' ;

ℹ️ در این مثال، ما یک ویژگی جدید به نام name با مقدار اولیه علی به آبجکت person اضافه کردیم. همچنین مشخص کردیم که این ویژگی قابل تغییر نیست، در حلقه‌های for...in قابل مشاهده است و نمی‌توان آن را حذف کرد.

⚠️ در نتیجه خط اخر با خطا مواجه میشود زیرا ویژگی writable را برابر با false قرار دادیم و پروپرتی name قابل تغییر نیست.

💥 توی پارت بعدی که پارت پایانی هستش درمورد دو پروپرتی set و get در descriptor به صورت کامل صحبت میکنیم و به صورت جزئی به بررسی این دو ویژگی می‌پردازیم ☕

Channel | YouTube | Instagram

#javascript #js_trick

* تبدیل مقادیر آرایه از String به Number *

یکی از روش های جالب برای تبدیل تایپ همه آیتم های یک آرایه از string به number استفاده از روش زیر هست ⚡

const stringNumbers = ["12", "4.36", "2000", "mohammad"];

const numbers = stringNumbers.map(Number);

console.log(numbers);

خروجی کد 🧑‍💻

[457, 5.36, NaN, 4500]

توی این کد متد map روی آرایه stringNumbers اعمال می‌شود. این متد هر عنصر آرایه را به یک تابع (در اینجا تابع Number) پاس می‌دهد و نتیجه را در یک آرایه جدید قرار می‌دهد.
تابع Number تلاش می‌کند که هر رشته را به یک عدد تبدیل کند. اگر رشته قابل تبدیل به عدد نباشد، NaN برمی‌گرداند.

در نهایت برای حذف مقادیر NaN میایم و فیلترشون میکنیم :

const filteredNumbers = numbers.filter(number => !isNaN(number));

console.log(filteredNumbers);

و توی خروجی فقط اعداد درست رو دریافت میکنیم ✅

[457, 5.36, 4500]

Channel | YouTube | Instagram

#javascript #js_trick #object

* متد Object.defineProperty در جاوااسکریپت چیست ؟  *
#part3

توی پارت های قبلی ( یک و دو ) به معرفی متد Object.defineProperty پرداختیم و ویژگی های کلیدی و ارگومان های مختلف این متد رو بررسی کردیم.

حالا توی این پست قراره که پروپرتی های get و set که متعلق به آرگومان descriptor هستند رو باهم بررسی کنیم.


❓ مفهوم getter چیست ؟

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

❔ مفهوم setter چیست ؟

سِتِر تابعی است که هر زمان مقداری به یک ویژگی نسبت داده می‌شود، فراخوانی می‌شود.
به جای جایگزینی مستقیم مقدار ویژگی، setter می‌تواند مقدار جدید را تغییر دهد یا قبل از ذخیره سازی آن، یک عملیات اعتبارسنجی انجام دهد.

بریم تو مثال عملی ببینیم چیکار میکنند 🚀

const obj = {};

let value = 0;

Object.defineProperty(obj, 'prop', {
    get() {
        return value;
    },
    set(newValue) {
        value = newValue + 1;
    },
    configurable: true,
    enumerable: true
});

obj.prop = 10;
console.log(obj.prop);

set :
وقتی obj.prop = 10 را می‌نویسیم، در واقع setter فراخوانی می‌شود و مقدار value به ۱۱ تغییر می‌کند.

get :
وقتی console.log(obj.prop) را می‌نویسیم، در واقع getter فراخوانی می‌شود و مقدار فعلی value که ۱۱ است در خروجی چاپ خواهد شد.

کاربردهای عملی set و get ✅

１ محاسبه مقادیر : می‌توانید از getter برای محاسبه مقادیر بر اساس مقادیر دیگر استفاده کنید. 👇

const person = {
   firstName: "ali",
   lastName: "ahmadi"
};

Object.defineProperty(person, 'fullName', {
  get() {
    return ${this.firstName} ${this.lastName}.toUpperCase();
  }
});

console.log(person.fullName); 

خروجی :

ALI AHMADI

２ اعتبارسنجی داده‌ها : می‌توانید از setter برای اطمینان از اینکه مقادیر ورودی معتبر هستند، استفاده کنید. 👇

const person = {};

Object.defineProperty(person, 'age', {
  get() {
    return this._age;
  },
  set(newAge) {
    if (newAge < 0) {
      throw new Error('سن نمی‌تواند منفی باشد.');
    }
    this._age = newAge;
  }
});

person.age = 30;
console.log(person.age); // خروجی: 30

try {
  person.age = -5;
} catch (error) {
  console.error(error.message); // خروجی: سن نمی‌تواند منفی باشد.
}

و این هم از پارت آخر متد Object.defineProperty

یک مقدار طولانی شد به این دلیل که دوسداشتم این متد رو به خوبی درک کنید ⚡❤️

Channel | YouTube | Instagram

#javascript #js_trick #object

* چرا باید از ()Object.is در مقایسه برابری استفاده کنید ؟ *

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

console.log(0 == ""); // true console.log(null == undefined); // true

در مقابل، === مقایسه برابری دقیق تری را انجام می‌دهد و به نوع داده‌ها توجه می‌کند. 👇

console.log(0 === ""); // false
console.log(null === undefined); // false

* حالا بریم بینیم متد Object.is دقیقا چیه ؟ 🤔 *

این متد یک روش جدید در جاوااسکریپت است که برای مقایسه برابری دقیق دو مقدار، مشابه === ، عمل می‌کند. با این تفاوت که Object.is در موارد خاص مانند مقایسه NaN، -0 و +0، نتایج دقیق‌تری ارائه می‌دهد.

* 💥 مثال عملی 👇 *

const a = NaN;
const b = 0 / 0;

console.log(a === b); // false
console.log(Object.is(a, b)); // true

در این قطعه کد دو متغیر به نام‌های a و b تعریف میکنیم و هر دو را برابر با مقدار NaN قرار می‌دهیم. این مقدار ( NaN ) معمولاً زمانی ایجاد می‌شود که یک عملیات ریاضی منجر به نتیجه‌ای نامعتبر شود، مانند تقسیم صفر بر صفر.

１مقایسه اول ( a ===b ) : این مقایسه از عملگر برابری دقیق (===) استفاده می‌کند که هم مقدار و هم نوع داده‌ای دو متغیر را بررسی می‌کند. در این مورد، هر دو متغیر مقدار NaN دارند اما === باز هم false را برمی‌گرداند. دلیل این اتفاق این است که در استاندارد IEEE 754 (استاندارد اعداد ممیز شناور)، NaN با خودش برابر نیست.

２ مقایسه دوم ( Object.is(a, b) ) : این مقایسه از متد Object.is استفاده می‌کند که برای مقایسه برابری دو مقدار طراحی شده است. این متد در بیشتر موارد مانند === عمل می‌کند، اما در مورد NaN رفتاری متفاوت دارد. Object.is تشخیص می‌دهد که هر دو متغیر مقدار NaN دارند و بنابراین true را برمی‌گرداند.

* ✅ مزایای استفاده از این متد چیه ؟ *

● دقت بیشتر : این متد در مقایسه با == و === دقت بیشتری در مقایسه برابری دارد 🚀

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

● سازگاری با استانداردها: این متد بخشی از استاندارد های ECMAScript 2015 است و در اکثر مرورگرهای مدرن پشتیبانی می‌شود ⚡

Channel | YouTube | Instagram

#javascript #js_trick #unary_operators

* عملگرهای یکانی (unary operators) در جاوااسکریپت *

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

این عملگرها عملیات مختلفی مانند افزایش/کاهش، ارزیابی نوع داده، منفی کردن یک مقدار و غیره را انجام می‌دهند ⚡

بریم چند موردش رو تو کد ببینیم 🚀


عملگر بیتی (~) : بیت‌های یک عدد را معکوس می‌کند.

let x = 5; // در باینری: 0000000000000000000000000000010
x = ~x; // در باینری: 11111111111111111111111111111010

عملگر void : هر مقداری را نادیده می‌گیرد و undefined برمی‌گرداند

function exampleFunction() {
    return 42; // این مقدار برگشتی تابع است
}

console.log(void exampleFunction()); // undefined

اگر دوست داشتید در مورد بقیه unary operator ها بدونید توی پست زیر به طور کامل بررسیشون کردیم 🔥

https://www.instagram.com/p/C-a5UK5swFQ

Channel | YouTube | Instagram

#javascript #triks #js_trick

● استفاده از Optional Chaining در جاوااسکریپت ●

وقتی میخواید به یک پروپرتی در یک آبجکت دسترسی پیدا کنید و مطمئن نیستید که آیا اون پروپرتی وجود داره یا نه، میتونید از Optional Chaining استفاده کنید تا از ارور جلوگیری کنید ⚡

مثل عملی 🚀

let user = {
  name: "Ali",
  address: {
    city: "Tehran"
  }
};

console.log(user.address?.city); // "Tehran"
console.log(user.contact?.phone); // undefined (بدون ارور)

ممنون میشم با ری‌ اکشنای خودتون بهمون انرژی بدید ❤️
〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️〰️
Channel | Group | YouTube | Instagram

●● 🔒 مخفی کردن قسمتی از اطلاعات حساس با JavaScript ●●

خیلی وقتا نیاز داریم که تنها بخشی از یک داده حساس مثل شماره تلفن، شماره کارت بانکی و غیره را نمایش بدیم و باقی اون رو با کاراکترهای خاصی مثل * کاور کنیم. با استفاده از این کد ساده در جاوا اسکریپت، میتونید این کار رو به راحتی انجام بدید 🚀

const mask = (value) => {
    return value.trim().slice(-4).padStart(value.length, '*');
}

console.log(mask('09121111111'));

// خروجی => 1111*******

اگه خوشت اومد برای پستای بیشتر مارو دنبال کن ❤️

#javascript #trick #js_trick
〰️〰️〰️〰️〰️〰️〰️️〰️〰️〰️

Channel | Group | YouTube

#javascript  #js_trick

●● نزار بیشتر از یک بار کلیک کنه ❌ ●●

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

button.addEventListener('click',() => {
  alert('سلام رفیق 👋');
}, { once: true });

🌐 مشاده آنلاین مثال استفاده واقعی

🆔 Channel | Group | YouTube

#javascript #js_trick

●● اطلاعات کامل باتری با جاوااسکریپت🔋●●

با استفاده از Battery Status Api میتونید سطح باتری، وضعیت شارژ شدن و دیگر اطلاعات مرتبط با باتری رو به دست بیارید و ازشون استفاده کنید.

نمونه کد 🚀

navigator.getBattery().then(battery => {
    console.log(`Battery level: ${battery.level * 100}%`);
    console.log(`Is charging: ${battery.charging ? 'Yes' : 'No'}`);
});

🌐 استفاده واقعی در وبسایت

🆔 Channel | Group | YouTube

#WhatsThat #javascript #window

●● آبجکت window چیه و چه کار هایی برای ما انجام می‌ده ؟ ●●

آبجکت window یک global object هستش که درواقع نماینده پنجره فعلی مرورگریه که اسکریپت شما در حال اجراست و یه جورایی می‌شه گفت که این window مثل مدیر ساختمونه که همه اتاقا و وسایل رو کنترل می‌کنه.

1️⃣ مدیریت تب‌های مرورگر

می‌تونی با window.open یه تب جدید باز کنی یا با window.close یه تب رو ببندی.

let myWindow = window.open("https://example.com")
// بستن تب باز شده بعد از 5 ثانیه
setTimeout(() => {
    myWindow.close();
}, 5000);

2️⃣ دسترسی به ابعاد پنجره

می‌تونی با window.innerWidth و window.innerHeight بفهمی اندازه فعلی پنجره فعلی چقدره. این خیلی به دردت می‌خوره وقتی می‌خوای سایز یه عنصر رو نسبت به اندازه صفحه تنظیم کنی.

let width = window.innerWidth;
let height = window.innerHeight;

let myDiv = document.getElementById("myDiv");

myDiv.style.width = (width / 2) + "px"; 
// نصف عرض پنجره

myDiv.style.height = (height / 3) + "px"; 
// یک سوم ارتفاع پنجره

3️⃣ ذخیره اطلاعات کاربر در LocalStorage

با window.localStorage می‌تونی اطلاعات کاربر رو ذخیره کنی که حتی بعد از بستن و باز کردن مرورگر هم باقی بمونه. مثلا یه کاربر می‌تونه تم سایت رو عوض کنه و بعداً همون تم دوباره براش لود بشه.

// ذخیره اطلاعات
window.localStorage.setItem("theme", "dark");

// خوندن اطلاعات
let theme = window.localStorage.getItem("theme");
console.log("تم انتخاب شده: " + theme);

// پاک کردن اطلاعات
window.localStorage.removeItem("theme");

4️⃣ کنترل URL

با window.location می‌تونی آدرس URL رو بخونی یا عوض کنی. مثلا کاربر رو به یه صفحه دیگه هدایت کنی.

// خوندن آدرس فعلی صفحه
console.log("آدرس فعلی: " + window.location.href);

// هدایت کاربر به صفحه دیگه
window.location.href = "https://example.com";

// تغییر قسمتی از URL بدون لود مجدد صفحه
window.location.hash = "section1"; // کاربر رو به بخش مشخصی از صفحه هدایت می‌کنه

5️⃣ تعامل با کاربر از طریق آلرت‌ها

می‌تونی با window.alert() یه پیام پاپ‌آپ به کاربر نشون بدی یا با window.prompt() ازش چیزی بپرسی.

// نمایش پیام ساده
window.alert("به وبسایت ما خوش آمدید!");

// پرسیدن سوال از کاربر
let name = window.prompt("اسمت چیه؟");
console.log("اسمی که کاربر وارد کرده: " + name);

// گرفتن تأییدیه از کاربر
let result = window.confirm("آیا مطمئن هستید که می‌خواهید ادامه دهید؟");
if (result) {
    console.log("کاربر ادامه داد");
} else {
    console.log("کاربر لغو کرد");
}

✅ در کل همه اینها یسری از قابلیت های پر کاربرد آبجکت window بودن، به زودی یه پست دیگه درست میکنم تا متد های بیشتری از window رو‌ بررسی کنیم

🌐 مشاهده داکیومنت window

🆔 Channel | Group | YouTube

#javascript #geolocation

💎 گرفتن لوکیشن کاربر با جاوااسکریپت 💎

با استفاده از Geolocation API در جاوااسکریپت می‌تونید به سادگی موقعیت جغرافیایی کاربر رو دست بیارید و توی بخش های مختلف ازش استفاده کنید.

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

نمونه کد 🚀

navigator.geolocation.getCurrentPosition((position) => {
console.log(`
Lat:${position.coords.latitude},
Long:${position.coords.longitude}
`);
});

🌐 مثال استفاده در پروژه واقعی

🆔 Channel | Group | YouTube