#Chain_posts
#JavaScript_code_snippets
"نرم افزار ها در حال بلعیدن جهان هستند و جاوا اسکریپت در حال بلعیدن نرم افزارها. هر ساله جاوا اسکریپت در حال چیره شدن برنرم افزار ها میباشد و هیچ کسی نمیداند که در نهایت چه چیزی می تواند جایگزین آن شود."
🔸در این پست به معرفی چند code snippet در زبان جاوا اسکریپت می پردازیم که به صورت زنجیروار ادامه خواهد داشت.
🔹.all
▫️خروجی این قطعه کد true خواهد بود اگر شرط مورد نظر برای تمام عناصر آرایه true باشد و بلعکس.
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
🔻متد every() یک تابع را بروی تمام عناصر ارایه برای مطمئن شدن از برقرار بودن شرط مورد نظر چک میکند. اگر عنصری در این آرایه نتواند شرط مورد نظر را پاس کند ، دیگر عناصر ارایه (باقیمانده) چک نخواهند شد.
🔹.allEqual
▫️خروجی قطعه کد زیر در صورت برابر بودن تمام عناصر آرایه با یکدیگر true خواهد بود
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
🔻عملگر === در جاوا اسکریپت دو متغیر را براساس نوع و مقدار با هم مقایسه میکند.
11 === 11
▫️این قطعه کد چک خواهد کرد که دو عدد به طور تقریبی با هم برابر هستند یا خیر.
🔻در این کد کلمه کلیدی const به این معنی میباشد که متغیر تعریف شده ثابت بوده و غیر قابل تغییر در سراسر کد میباشد.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
🔻متد math.abs معادل قدر مطلق در ریاضی میباشد. خروجی یک قدر مطلق همواره عددی مثبت است.
🔹.arrayToHtmlList
▫️این قطعه کد هر عنصر از آرایه را به یک تگ <li> تبدیل کرده و انها را به یک لیست با یک ID میچسباند.
const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
🔻متد arr.map() یک non-mutating متد بوده (یعنی باعث تغییر آرایه پدر نمیشود) و کار آن ساخت ارایه جدید به وسیله صدا زدن یک تابع بروی هریک از عناصر آرایه پدرمیباشد.
@FullStackDevs
#JavaScript_code_snippets
"نرم افزار ها در حال بلعیدن جهان هستند و جاوا اسکریپت در حال بلعیدن نرم افزارها. هر ساله جاوا اسکریپت در حال چیره شدن برنرم افزار ها میباشد و هیچ کسی نمیداند که در نهایت چه چیزی می تواند جایگزین آن شود."
🔸در این پست به معرفی چند code snippet در زبان جاوا اسکریپت می پردازیم که به صورت زنجیروار ادامه خواهد داشت.
🔹.all
▫️خروجی این قطعه کد true خواهد بود اگر شرط مورد نظر برای تمام عناصر آرایه true باشد و بلعکس.
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
🔻متد every() یک تابع را بروی تمام عناصر ارایه برای مطمئن شدن از برقرار بودن شرط مورد نظر چک میکند. اگر عنصری در این آرایه نتواند شرط مورد نظر را پاس کند ، دیگر عناصر ارایه (باقیمانده) چک نخواهند شد.
🔹.allEqual
▫️خروجی قطعه کد زیر در صورت برابر بودن تمام عناصر آرایه با یکدیگر true خواهد بود
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
🔻عملگر === در جاوا اسکریپت دو متغیر را براساس نوع و مقدار با هم مقایسه میکند.
11 === 11
// => true
11=== '11' // => false
🔹. approximatelyEqual▫️این قطعه کد چک خواهد کرد که دو عدد به طور تقریبی با هم برابر هستند یا خیر.
🔻در این کد کلمه کلیدی const به این معنی میباشد که متغیر تعریف شده ثابت بوده و غیر قابل تغییر در سراسر کد میباشد.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
🔻متد math.abs معادل قدر مطلق در ریاضی میباشد. خروجی یک قدر مطلق همواره عددی مثبت است.
🔹.arrayToHtmlList
▫️این قطعه کد هر عنصر از آرایه را به یک تگ <li> تبدیل کرده و انها را به یک لیست با یک ID میچسباند.
const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
🔻متد arr.map() یک non-mutating متد بوده (یعنی باعث تغییر آرایه پدر نمیشود) و کار آن ساخت ارایه جدید به وسیله صدا زدن یک تابع بروی هریک از عناصر آرایه پدرمیباشد.
@FullStackDevs
#Chain_posts
✳️Developer Tools Console
🔹معرفی چند متد در کنسول مرورگر که دیباگ کردن کدهای js را در وب اپلیکیشن سهل و آسان می نماید.
🔹اگر تاکنون با کنسول مرورگر کار نکرده اید و با آن اشنایی ندارید همین الان مروگر را باز کرده و در هر جایی از صفحه کلیک راست کرده گزینه INSPECT ELEMENT را انتخاب کرده و به تب CONSOLE بروید. یا با فشردن کلید های CTRL + SHIFT + J کنسول مرورگر بازمیشود.(در برخی مرورگر ها نظیر کروم با فشردن کلید های CTRL + SHIFT + I).
▫️console.log()
🔸یکی از پرکاربردترین متدهایی که هر برنامه نویس جاوا اسکریپتی حداقل یکبار از آن استفاده کرده است.برای نمایش هر نوع متغیر و ابجکتی در کنسول مرورگر از این متد استفاده میکنیم.
برای نمایش چند شئ میتوانید با ',' آنها را از هم جدا کنید. همچنین این متد در پارامتر اول فرمت نمایشی خروجی را دریافت میکند به عنوان مثال فرمت
%c
امکان استایل دهی خروجی با css را فراهم مینماید.
console.log('%cThis text is styled!', 'color: #86CC00; background-color: blue; font-size: 20px; padding: 3px;')
کد بالا پیام مشخص شده را در یک کادر آبی رنگ نمایش خواهد داد.
🔻نکته برای اجرا شدن کد ها در کنسول مرورگر بعد از نوشتن هر کد کلید ENTER را فشار دهید.اگر میخواهید کد را چند خط بنویسید برای رفتن به خط بعد بدون اجرا شدن کد کلید های SHIFT + ENTER را فشار دهید.
▫️console.assert(expression, object)
🔸این متد دو پارامتر دریافت میکند . پارامتر اول یک عبارت شرطی میباشد و پارامتر دوم یک آبجکت یا یک رشته و..
در صورتی که خروجی عبارت شرطی پاس داده این متد FALSE باشد در نتیجه پارامتر دوم در خروچی چاپ خواهد شد.
var count = 5;
console.assert(count > 10, 'count is not larger than 10');
🔻برای پاک کردن انچه تاکنون نوشته اید از console.clear() استفاده کنید.
▫️console.count(label)
🔸این متد هر بار تعداد دفعاتی که با label مشخص شده، صدا زده شده است در خروجی نمایش میدهد. label پاس داده شده کلیدی برای متمایز کرد console.count ها از یکدیگر است.
▫️console.error(object [, object, …])
🔸این متد نیز مثل متد log پارامترهای ورودی خود را در خروجی چاپ میکند با این تفاوت که حروجی به عنوان یک error علامت گذاری میشود و همچنین یک stack trace ای از محلی که این متد صدا زده شده نمایش خواهد داد.
▫️console.group(object[, object, …])
▫️console.groupEnd()
🔸برای نمایش دادن مجموعه ای ار log message ها با هم که مطعلق به یک گروه اند از این متد استفاده میکنیم. بدین ترتیب که ابتدا با استفاده از متد
console.group(object[, object, …])
یک گروه جدید ایجاد کرده و هر message log و error log بعد از ایجاد تا قبل بستن آن در یک گروه میگیرند.
console.group("webdevs");
console.log("happy")
console.log("js")
console.error("codding");
console.groupEnd();
▫️console.info(object [, object, …])
🔸این متد نیز مانند متد log برای نمایش log message های به کاربرده میشود با این تفاوت خروجی نمایش داده شده توسط این متد به عنوان یک information نشانه گذاری میشوند.
▫️console.table(data)
🔸برای نمایش یک داده ساختاری مانند (ابجکت ها ، ارایه ها و...) در قالب یک جدول از این متد استفاده میکنیم.
▫️console.time(label)
▫️console.timeEnd(label)
🔸از این متد ها برای نمایش میزان زمانی که اجرای یک قطعه کد طول میکشد استفاده میکنیم.
console.time('Draw frame');
// Execute some code...
console.timeEnd('Draw frame');
برای مشخص کردن میزان زمان اجرای یک قطعه کد دو متد time و timeEnd را در با label های همنام به عنوان پارامتر ورودی در ابتدا و انتهای قطعه کد قرار دهید.
▫️console.warn(object [, object, …])
🔸از این متد هم برای چاپ خروجی به عنوان یک warning استفاده میشود.
@FullStackDevs
✳️Developer Tools Console
🔹معرفی چند متد در کنسول مرورگر که دیباگ کردن کدهای js را در وب اپلیکیشن سهل و آسان می نماید.
🔹اگر تاکنون با کنسول مرورگر کار نکرده اید و با آن اشنایی ندارید همین الان مروگر را باز کرده و در هر جایی از صفحه کلیک راست کرده گزینه INSPECT ELEMENT را انتخاب کرده و به تب CONSOLE بروید. یا با فشردن کلید های CTRL + SHIFT + J کنسول مرورگر بازمیشود.(در برخی مرورگر ها نظیر کروم با فشردن کلید های CTRL + SHIFT + I).
▫️console.log()
🔸یکی از پرکاربردترین متدهایی که هر برنامه نویس جاوا اسکریپتی حداقل یکبار از آن استفاده کرده است.برای نمایش هر نوع متغیر و ابجکتی در کنسول مرورگر از این متد استفاده میکنیم.
برای نمایش چند شئ میتوانید با ',' آنها را از هم جدا کنید. همچنین این متد در پارامتر اول فرمت نمایشی خروجی را دریافت میکند به عنوان مثال فرمت
%c
امکان استایل دهی خروجی با css را فراهم مینماید.
console.log('%cThis text is styled!', 'color: #86CC00; background-color: blue; font-size: 20px; padding: 3px;')
کد بالا پیام مشخص شده را در یک کادر آبی رنگ نمایش خواهد داد.
🔻نکته برای اجرا شدن کد ها در کنسول مرورگر بعد از نوشتن هر کد کلید ENTER را فشار دهید.اگر میخواهید کد را چند خط بنویسید برای رفتن به خط بعد بدون اجرا شدن کد کلید های SHIFT + ENTER را فشار دهید.
▫️console.assert(expression, object)
🔸این متد دو پارامتر دریافت میکند . پارامتر اول یک عبارت شرطی میباشد و پارامتر دوم یک آبجکت یا یک رشته و..
در صورتی که خروجی عبارت شرطی پاس داده این متد FALSE باشد در نتیجه پارامتر دوم در خروچی چاپ خواهد شد.
var count = 5;
console.assert(count > 10, 'count is not larger than 10');
🔻برای پاک کردن انچه تاکنون نوشته اید از console.clear() استفاده کنید.
▫️console.count(label)
🔸این متد هر بار تعداد دفعاتی که با label مشخص شده، صدا زده شده است در خروجی نمایش میدهد. label پاس داده شده کلیدی برای متمایز کرد console.count ها از یکدیگر است.
▫️console.error(object [, object, …])
🔸این متد نیز مثل متد log پارامترهای ورودی خود را در خروجی چاپ میکند با این تفاوت که حروجی به عنوان یک error علامت گذاری میشود و همچنین یک stack trace ای از محلی که این متد صدا زده شده نمایش خواهد داد.
▫️console.group(object[, object, …])
▫️console.groupEnd()
🔸برای نمایش دادن مجموعه ای ار log message ها با هم که مطعلق به یک گروه اند از این متد استفاده میکنیم. بدین ترتیب که ابتدا با استفاده از متد
console.group(object[, object, …])
یک گروه جدید ایجاد کرده و هر message log و error log بعد از ایجاد تا قبل بستن آن در یک گروه میگیرند.
console.group("webdevs");
console.log("happy")
console.log("js")
console.error("codding");
console.groupEnd();
▫️console.info(object [, object, …])
🔸این متد نیز مانند متد log برای نمایش log message های به کاربرده میشود با این تفاوت خروجی نمایش داده شده توسط این متد به عنوان یک information نشانه گذاری میشوند.
▫️console.table(data)
🔸برای نمایش یک داده ساختاری مانند (ابجکت ها ، ارایه ها و...) در قالب یک جدول از این متد استفاده میکنیم.
▫️console.time(label)
▫️console.timeEnd(label)
🔸از این متد ها برای نمایش میزان زمانی که اجرای یک قطعه کد طول میکشد استفاده میکنیم.
console.time('Draw frame');
// Execute some code...
console.timeEnd('Draw frame');
برای مشخص کردن میزان زمان اجرای یک قطعه کد دو متد time و timeEnd را در با label های همنام به عنوان پارامتر ورودی در ابتدا و انتهای قطعه کد قرار دهید.
▫️console.warn(object [, object, …])
🔸از این متد هم برای چاپ خروجی به عنوان یک warning استفاده میشود.
@FullStackDevs
Forwarded from Web Devs
#Chain_posts
#JavaScript_code_snippets
"نرم افزار ها در حال بلعیدن جهان هستند و جاوا اسکریپت در حال بلعیدن نرم افزارها. هر ساله جاوا اسکریپت در حال چیره شدن برنرم افزار ها میباشد و هیچ کسی نمیداند که در نهایت چه چیزی می تواند جایگزین آن شود."
🔸در این پست به معرفی چند code snippet در زبان جاوا اسکریپت می پردازیم که به صورت زنجیروار ادامه خواهد داشت.
🔹.all
▫️خروجی این قطعه کد true خواهد بود اگر شرط مورد نظر برای تمام عناصر آرایه true باشد و بلعکس.
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
🔻متد every() یک تابع را بروی تمام عناصر ارایه برای مطمئن شدن از برقرار بودن شرط مورد نظر چک میکند. اگر عنصری در این آرایه نتواند شرط مورد نظر را پاس کند ، دیگر عناصر ارایه (باقیمانده) چک نخواهند شد.
🔹.allEqual
▫️خروجی قطعه کد زیر در صورت برابر بودن تمام عناصر آرایه با یکدیگر true خواهد بود
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
🔻عملگر === در جاوا اسکریپت دو متغیر را براساس نوع و مقدار با هم مقایسه میکند.
11 === 11
▫️این قطعه کد چک خواهد کرد که دو عدد به طور تقریبی با هم برابر هستند یا خیر.
🔻در این کد کلمه کلیدی const به این معنی میباشد که متغیر تعریف شده ثابت بوده و غیر قابل تغییر در سراسر کد میباشد.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
🔻متد math.abs معادل قدر مطلق در ریاضی میباشد. خروجی یک قدر مطلق همواره عددی مثبت است.
🔹.arrayToHtmlList
▫️این قطعه کد هر عنصر از آرایه را به یک تگ <li> تبدیل کرده و انها را به یک لیست با یک ID میچسباند.
const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
🔻متد arr.map() یک non-mutating متد بوده (یعنی باعث تغییر آرایه پدر نمیشود) و کار آن ساخت ارایه جدید به وسیله صدا زدن یک تابع بروی هریک از عناصر آرایه پدرمیباشد.
@FullStackDevs
#JavaScript_code_snippets
"نرم افزار ها در حال بلعیدن جهان هستند و جاوا اسکریپت در حال بلعیدن نرم افزارها. هر ساله جاوا اسکریپت در حال چیره شدن برنرم افزار ها میباشد و هیچ کسی نمیداند که در نهایت چه چیزی می تواند جایگزین آن شود."
🔸در این پست به معرفی چند code snippet در زبان جاوا اسکریپت می پردازیم که به صورت زنجیروار ادامه خواهد داشت.
🔹.all
▫️خروجی این قطعه کد true خواهد بود اگر شرط مورد نظر برای تمام عناصر آرایه true باشد و بلعکس.
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
🔻متد every() یک تابع را بروی تمام عناصر ارایه برای مطمئن شدن از برقرار بودن شرط مورد نظر چک میکند. اگر عنصری در این آرایه نتواند شرط مورد نظر را پاس کند ، دیگر عناصر ارایه (باقیمانده) چک نخواهند شد.
🔹.allEqual
▫️خروجی قطعه کد زیر در صورت برابر بودن تمام عناصر آرایه با یکدیگر true خواهد بود
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
🔻عملگر === در جاوا اسکریپت دو متغیر را براساس نوع و مقدار با هم مقایسه میکند.
11 === 11
// => true
11=== '11' // => false
🔹. approximatelyEqual▫️این قطعه کد چک خواهد کرد که دو عدد به طور تقریبی با هم برابر هستند یا خیر.
🔻در این کد کلمه کلیدی const به این معنی میباشد که متغیر تعریف شده ثابت بوده و غیر قابل تغییر در سراسر کد میباشد.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
🔻متد math.abs معادل قدر مطلق در ریاضی میباشد. خروجی یک قدر مطلق همواره عددی مثبت است.
🔹.arrayToHtmlList
▫️این قطعه کد هر عنصر از آرایه را به یک تگ <li> تبدیل کرده و انها را به یک لیست با یک ID میچسباند.
const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
🔻متد arr.map() یک non-mutating متد بوده (یعنی باعث تغییر آرایه پدر نمیشود) و کار آن ساخت ارایه جدید به وسیله صدا زدن یک تابع بروی هریک از عناصر آرایه پدرمیباشد.
@FullStackDevs