پست‌های انتشارات فقط جاوا اسکریپت

این قسمت جاوا اسکریپت سخت گیر می‌شود !

محمد مسعودی — Fri, 12 Feb 2021 19:19:51 +0330

برای مدت طولانی جاوا اسکریپت بدون مشکل سازگار پذیری توسعه داده می‌شد و امکانات جدید بدون اینکه نیازی به تغییر در امکانات قبلی باشه، به این زبان اضافه می‌شد.مزیت این موضوع این بود که هیچوقت توی کدهای قدیمی اشکالی به‌وجود نمیومد اما مشکل اینجا بود که اگر اشکالی در طراحی زبان، توسط خالقان جاوا اسکریپت رخ داده بود، تا ابد بجا میمونداین موضوع تا سال 2009 که ECMAScript 5 (ES5) معرفی شد، ادامه داشت.ES5 قابلیت‌های جدیدی رو به زبان اضافه کرد و اصلاحاتی رو هم روی امکانات فعلی انجام داد.برای اینکه کدهای قدیمی کار کنن، بیشتر تغییراتی که در ES5 اتفاق افتاد، به صورت پیش‌فرض غیر فعاله، و برای فعال کردن اونا باید از طریق عبارت "use strict" این کارو انجام داد.حالت سخت‌گیرانه یا همون "use strict" عبارت دستوری (directive) "use strict" یا 'use strict' شبیه به یه رشته هست که زمانیکه اول اسکریپت قرار می‌گیره، تمام اسکریپت روی حالت مدرن کار خواهد کرد. برای نمونه :"use strict" // این کد ها توی حالت مدرن کار میکنن ...در مورد فانکشن‌ها (روشی برای گروه‌بندی کردن دستورات) در آینده خواهیم آموخت.اینجا صرفا اینو بدونین که میتونیم اول بیشتر فانکشن‌ها "use strict" رو بذاریم تا قواعد مدرن فقط روی کد های فانکشن اعمال بشهمطمئن بشین که use strict رو اول کداتون گذاشتین در غیر این صورت حالت مدرن فعال براتون فعال نمیشه alert("some code"); //یه سری توضیحات ... "use strict" // حالت سخت‌گیرانه اینجا غیر فعالهفقط توضیحات میتونن بالای "use strict" قرار بگیرنهیچ راه برای غیرفعال کردن use strict وجود نداره هیچ دستوری مثل no use strict وجود نداره تا به موتور جاوا اسکریپت دستور بده که به روش قدیمی کار کنه. زمانی‌که use strict رو قرار می‌دیم، راه برگشتی وجود ندارهکنسول مرورگروقتی از کنسول توسعه دهنده برای اجرا کردن کد استفاده می‌کنین حواستون به این باشه که به صورت پیش‌فرض از use strict استفاده نمیکنهبعضی وقتا use strict یه تفاوت هایی ایجاد میکنه که شما ممکنه نتیجه اشتباهی بگیرینپس واقعا چجوری از use strict توی کنسول مرورگر استفاده کنیم؟از دکمه های Shift+Enter استفاده کنین تا بتونین توی چند خط کد بنویسین، و use strict رو بالای کداتون بذارین مثل مثال زیر :‌'use strict'; // ...کداتون این روش توی اکثر مرورگرها یعنی Firefox و Chrome کار می کنه ولی اگه کار نکرد مثلا مرورگرتون قدیمی بود یا هر چیز دیگه‌ای یه روش هست براش اما روش زشتیه، اما خب میشه مطمئن شد که حتما use strict کار میکنه :(function() { 'use strict'; // کداتون رو اینجا بذارین })()اصلا باید از use strict استفاده کنیم یا نه؟ممکنه این سوال واضح به نظر برسه ولی اینطور نیستتوصیه میکنم از use strict اول کداتون استفاده کنین، اما میدونین چی جالبه؟جاوا اسکریپت مدرن از کلاس ها و ماژول ها و ساختار های پیشرفته زبان (که توی آموزش های بعدی بهشون میرسیم) پشتیبانی میکنه که use strict رو به صورت خودکار فعال میکنه، پس اگه از اونا استفاده کنیم لازم نیست از use strict استفاده کنیمفعلا use strict رو به عنوان یک مهمون بالای اسکریپت هاتون استفاده کنین بعدا که به ماژول ها و کلاس ها رسیدم میتونیم این مهمون رو بفرستیم بره خونه خودش :)توی قسمت های بعدی ویژگی های زبان رو یاد میگیریم و تفاوت های حالت سخت‌گیرانه و حالت قدیمی رو میبینیم، خوشبختانه تعدادشون زیاد نیست و در واقع زندگی ما بهتر میکنن :)پست قبلی (آشنایی بیشتر با ساختار برنامه نویسی با جاوا اسکریپت) https://vrgl.ir/D9rer پست بعدی (متغیرها در جاوا‌ اسکریپت) https://vrgl.ir/YTxew اگر توی این مقاله مشکلی بود یا خواستین توی این پروژه مشارکت کنین این لینک گیت‌هابش هست.منبعگیت‌هاب

۳ تکنیک بسیار مهم که هر برنامه نویس جاوااسکریپت باید بدونه !

بهنام بختیاری — Sun, 24 Jan 2021 18:23:50 +0330

سلام به دوستان عزیزم. در این مطلب قراره ما با سه تا تکنیک جالب و به درد بخور در مورد برنامه نویسی javascript آشنا بشیم. یادگیری این تکنیک ها به شما کمک میکنه از بقیه خیلی بهتر باشید.۱. تکنیک Curryingداستان Currying میگه ما برای اینکه، برای مثال به یک تابع ۳ تا ورودی (argument) بدیم بجای این کار یک ورودی به آن اختصاص دهیم و یک تابع درون تابع اصلی تعریف کنیم، دومین ورودی را به تابع درونی بدیم و داخل همین تابع مجددا تابع دیگری تعریف کنیم و سومین ورودی را به این تابع بدیم.اینجا ما بصورت معمول ۳ تا ورودی به تابع خودمون دادیم:const sum=function (a,b,c) { return a+c+b }حالا میایم از currying استفاده میکنیم که دقیقا کار تابع بالا رو انجام میده:const sum = function (a) { return function (b) { return function (c) { return a + b + c } } }این که کدهارو طولانی تر کرد...پس چرا ازش استفاده کنیم؟ چرا مفیده؟برای این currying مفیده چون یجورایی از closure استفاده کرده و اینکه بهمون کمک میکنه توابع مرتبه بالا (higher-order function) بسازیم. که حتما موقع کار با رویداد ها (event handling) به دردمون میخوره.توابع مرتبه بالا توابعی هستند که یک تابع را به عنوان پارامتر ورودی دریافت و یا به عنوان خروجی ارسال می کنند، دانستن اینکه چه زمانی و چگونه از این توابع استفاده می شود ضروری است ،استفاده از این توابع باعث میشه کد هایی که می نویسین ساده تر و قابل فهم تر بشه.۲. تکنیک Memoizationمعنی memoization میشه "خاطره سازی" ولی خب معنی لفظی زیاد مهم نیست، بیاید درکش کنیم. خیلی ساده بگم:فرض کنید ما یک تابع داریم و ازش استفاده میکنیم و آخرش هم یک مقدار(value) بهمون بر میگردونه . اوکی؟ خب حالا دفعه دوم که میخوایم از این تابع دوباره استفاده کنیم memoization میگه من مقدار دفعه قبلی رو داخل یه جا برات نگه داشتم (مثلا داخل یه متغیر به اسم cache ) خب همون رو برات بر میگردونم...چه کاریه دوباره بیای عملیات انجام بدی آخه؟! داخل کد هم یک نگاهی بندازیم مطلب بهتر جا بیفته:const memoizedAdd = () => { let cache = { } return (value) => { if (value in cache) { console.log('Fetching from cache') return cache[value] } else { console.log('Calculating result') let result = value + 10 cache[value] = result return result } } } // returned function from memoizedAdd const newAdd = memoizedAdd(); console.log(newAdd(9)); //output: 19 calculated console.log(newAdd(9)); //output: 19 cached۳. استفاده از call , apply , bindاول یک مثال بزنیم بعدش خیلی ساده با چندتا عکس مفهومش درک میشه:let obj = { num: 2 } let add = function (num2, num3, num4) { return this.num + num2 + num3 + num4 } let arr = [ 3, 4, 5 ] //Call method console.log(add.call(obj, 3, 4, 5)) //Output : 14 /Apply method console.log(add.apply(obj, arr)) //Output : 14 //bind Method let bound = add.bind(obj) console.log(bound(3, 4, 5)) //output : 14کارهای خیلی باحالی با این ۳ تا متد که مربوط به Object ها هستند، میشه انجام داد. حالا چرا میگیم اینا مهم و کاربردی هستند؟!فرض کنید ما دوتا object ساختیم و یک متد هم خارج از بدنه این object ها براشون ایجاد کردیم، حالا چجوری مقادیر و دیتا رو بین object و method مورد نظرش رد و بدل کنیم؟اینجاس که این ۳تا متد به کمک ما میان و طبق کد های بالا میتونید ببینید که چقدر باحال امکان استفاده از this رو خارج از یک object و داخل یک method خارجی، برای ما فراهم میکنه.هر سوالی داشتید داخل نظرات بپرسید حتما کمکتون میکنم ممنون از توجهتون، همیشه عالی باشید.

نگاهی به State of JavaScript

ایمان امیدی — Thu, 14 Jan 2021 16:25:03 +0330

این نوشتار نگاهی مختصر و اجمالی به نتایج این نظرسنجی دارد و فقط شامل بخش‌هایی که مورد توجه نگارنده بوده می شود. جهت کسب اطلاعات بیشتر به سایت نظرسنجی رجوع کنید و یا همراه پست‌های آینده‌ی من باشید.نظرسنجی State of JavaScript چیست؟نظرسنجی State of Js به صورت سالانه برگزار می شود و بر روی جنبه‌های مختلفی از اکوسیستم جاوااسکریپت تمرکز می کند و نتایج یافته‌های خود را در قالب آمارها و نمودارهایی براساس معیارهای مختلفی، اعم از رضایت و تجربه کاری دولوپر، محبوب بودن و میزان استفاده‌پذیری منتشر می کند.چهار معیار اصلی امسال شامل Satisfaction, Interest, Usage, Awareness می شوند.روش محاسبه‌ی هریک از معیارها:Satisfaction: would use again / (would use again + would not use again) Interest: want to learn / (want to learn + not interested) Usage: (would use again + would not use again) / total Awareness: (total - never heard) / totalاین نظرسنجی در سال‌های مختلفی که انجام شده دسته‌بندی های متفاوتی را مدنظر گرفته است که از میان این دسته‌بندی‌ها می‌توان: ویژگی‌های جدید زبان جاوا‌اسکریپت، APIهای جدید مرورگرها، فریمورک‌های بکند و فرانت، بیلدرها، لایبرری و فریمورک‌های تستینگ اشاره کرد.سال 2020؛ سال ثباتدر بازار فریورک‌ها و لایبرری‌ها در نگاه اول مهمترین چیزی که به چشم میاد ثبات نسبی فریمورک‌هاس که از این ثبات می توان برداشت که اکوسيستم جاوا‌اسکریپت مدرن از دوران تلاطم و آشفتگی سالهای پیشش به آرامی در حال عبور است و کم‌کم پرکتیس‌ها و متدها دارند به ثبات نسبی می‌رسند.دسته‌ی JavaScript Flavorsکه شامل زبان‌ها و سوپرست هایی است که به JS کامپایل میشوند. سوپرست TypeScript برای چهارمین سال پیاپی فاصله خودش را با رقبا حفظ کرده و همچنان در هر چهار معیار مقام اول را دارد که با توجه به مقبولیت گسترده تایپ‌اسکریپت چه در میان کاربران و چه در میان نویسندگاه فریمورک‌ها و ساپورت گسترده‌ی آن توسط اکثر فریمورک‌های اصلی؛ این روند صعودی برای سال‌های آتی نیز دور از ذهن نیست. از دیگر این نکات جالب این لیست فانکشنال بودن تمامی رقبای تایپ‌اسکریپت به غیر از ReasonML است.رده بندی براساس رضایت برنامه‌نویساننکته جالب دیگر در این دسته سقوط پلکانی Elm در بخش Satisfaction هست که قابل درک است.به نظر من غایب دیگر این لیست زبان Dart هست که با توجه به شیفت توجه نویسندگانش به سمت فلاتر و موبایل، این غیبت طبیعی استدسته‌ی فریمورک‌های فرانتدر این دسته فریمورک React همچنان قدرت بلامنازعی است که بیشتر بازار را به دست آورده و با توجه روند نوآوری‌ها (مثل Server Side Components و Concurrency) و تغییرات جدید این فریمورک آینده باثباتی پیش بینی می شود. رتبه بندی براساس استفادهدر بخش رضایت دولوپرها فریمورک جوان Svelte با رشد یک درصدی از React پیشی گرفت اما مهمتر از آن رشد استفاده از Svelte است که از ۸٪ به ۱۵٪ که بیشترین مقدار رشد در بین فریمورک‌هاست رسیده.احتمالا این رشد زا فراغ از نو و جذاب بودن این فریمورک؛ به کاهش رضایت دولوپران از تغییرات Vue در دو سال اخیر و حتی آینده‌ی نزدیک مرتبط دانست.رتبه بندی براساس رضایتدسته‌ی فریمورک‌های بکند (سمت سرور)فریمورک Express همچنان مهره اصلی این بخش از اکوسیستم جاوااسکریپت است و با توجه وفور پکیج‌ها و لایبرری‌های مربوط به این فریمورک، آینده‌ای به غیر استمرار این مسیر نمی توان تصور کرداما بخش جذاب و قابل توجه این دسته درخشش فریمورک NextJs است که به عنوان راهکاری فول‌استک که بر پایه‌ی React بنیان شده بسیار جالب است. این فریمورک موفق هم رضایت دولوپرها را جلب کند و هم با افزایش ۱۰٪ در معیار میزان استفاده مجدد در مقام دوم و پس از Express قرار بگیرد.تراژدی این دسته در نگاه اول باید به Meteor تعلق یابد اما با توجه روند نزولی آن در سال‌های گذشته دیگر تبدیل به خبر کهنه شده است. به همین خاطر تراژدی واقعی را می توان متعلق به Gatsby دانست که زمانی در کنار NextJs قرار می گرفت اما با سقوط ۱۸٪ در رضایت توسعه‌دهندگان و ۱۰٪ در محبوبیت برای یادگیری، پیش بینی میشود که قرعه برنده به نام NextJs بیافتد.کتابخانه‌های تستینگثبات نسبی و محبوبیت کما فی السابق Jest همچنان برقرار است و به غیر ظهور کتابخانه‌ی قدرتمند Testing Library تحول عجیبی در این دسته اتفاق نیوفتاده است.ابزارهای بیلدامسال در این زمینه اتفاقات جالبی افتاده است که آن هم حضور بیلدرهای جدیدی است که مقدمه‌ی افزایش پرفورمنس بیلدرها و بهره‌گیری از مزایای esm خواهد بود. برای مثال هرکدام از بیلدرهای جدید Snowpack و esbuild وعده افزایش سرعت ۱۰ تا ۱۰۰برابری در زمان بیلد گرفتن می‌دهند.استراتژی متفاوت snowpack در بیلد گرفتنبنچمارک سرعت esbuild برگرفته از سایت اصلیبه وقوع پیوستن این پیشرفت‌ها و کوتاه شدن فرآیند بیلد گرفتن کمک شایانی به تجربه کاربری توسعه‌دهندگان و درنهایت کاربران نهایی خواهد کرد.دسته‌ی موبایل و دسکتاپدسته موبایل و دسکتاپ همچنان جزو دسته‌های داغی هست که حتی با وجود نمونه‌های موفق قدرتمندی مثل vsCode، Slack و Discord در بخش دسکتاپ و اپ‌هایی همچون Instagram, Pinterest و حتی بخشی از محصولات موبایلی مایکروسافت مورد شک و ظن تعداد گسترده‌ای از برنامه نویسان هست.در این دسته React Native و Cordova و Electron به ترتیب در معیار استفاده مجدد توسط توسعه دهندگان مقام‌های برتر را مثل سال گذشته حفظ کردند ولی با کاهش شدید مقبولیت Cordova احتمال می رود که رفته رفته سهم این محصول کمتر و کمتر شود و بازار این پلتفرم موبایل و دسکتاپ بین React Native و Electron تقسیم شود.جمع‌بندیاین مطلب بخش اول از مطلبی دو بخشی است که بخش دوم آن نگاهی اجمالی به سطح آشنایی توسعه دهندگان با ویژگی‌های جدید زبانی و APIها خواهد پرداخت. از آنجایی که بخش دوم میتواند جنبه آموزشی بیشتری داشته باشد و مثمر ثمرتر باشد ترجیح دادم که به وقت دیگری موکول شود تا تحت تاثیر خستگی قرار نگیرد.جمع بندی کلی نظر سنجی امسال همانطور که در شروع مطلب اشاره شد؛ ثبات نسبی اکوسیستم جاوا اسکریپت و بلوغ بیشتر آن است اما این گفته به این معنا که فریمورک‌های گمنام که نوآوری های خارق‌العاده‌ای انجام میدهند دیگر وجود ندارد نیست بلکه بیشتر اشاره به پختگی مطرح‌ترین فریمورک‌های موجود و مشخص‌تر شدن بست پرکتیس‌ها و نزدیک تر شدن نقطه نگاه توسعه‌دهندگان است.

انت دیزاین

pooria vakili — Thu, 24 Dec 2020 22:17:30 +0330

انت دیزاین یک لایبری uicomponent است که اکثر react دولوپرها وبعضی ازvue دولوپرها ازش استفاده می کنند من بعضی از تگ های که در react به موارداستفاده می شود را توضیح می دهم.تو این مقاله قرار است در انت دیزاین در مورد تگ هایdivider ، row ، Col ، dropdown ، pagination ، cascader ، Select ،Switch ، timepicker ، treeselect ، treenode ، upload ، badge ،configproviderCollapse ، popover ، tabs ، Drawer ، modal ، Result ، توضیح بدهم و این تگ ها چهخصوصیت هایی در پروژه های که از انت دیزاین استفاده می کنید دارد.Dividerبا این تگ میتوانیم با اتربیو ت orientation همه تگ ها را به چپ چ ین یا راست چیننشان دهدRow col typegraphyبا تگrow و اتربیوت gutter چه قدر در مطالب فاصله بگذاریممثالم در کلیپ بدون صدا در مورد row col typography نشان میدهم.اگه در کلیپ دیده باشیم رفتارهای Row ,col با خصوصیاتی که میدهیم کاملا فرق میکندDropdownاین مثال در کلیپ نشان میدهم که چطور می شود باهاش کار کرد وچه خصوصیاتی داردشرمنده کمی کلیپ طولانی کردم میخواستم همه حالت های dropdown تا حدی نشان دهم . توی dropdown یک خصوصیت trigger داریم که حالتش مشخص میکنیم که من رو حالت click گذاشتم و overlay داشتیم که قرا ر است چه چیزی وقتی کلیک کردم نشان دهد و placement این نشون میدهد وقتی کلیک کردی همه تگ هات در کجا نشان دهد که مثلا خصوصیات هایی مثل top left top right bottom center bottom right داره و من برای استایل دهی از tailwindcss استفاده می کنم.https://www.aparat.com/v/DAeq9https://www.aparat.com/v/MuUCwmodaldrawerخروجی کدمثل modal بود فقط برای closable گذاشتمswitchPaginationdefult carrent مثلا از یک شروع شود تاtotal که اخرین صفحه 20 استselectخروجی کدTimepickerTree select treenodeخروجیbadgecollapseخروجیpopoverخروجیtabsخروجیدر کلیپhttps://www.aparat.com/v/USfgRResultconfig providerخزوجیمقاله ی بعدی در مورد antdesign pro,umi می باشد

همه چیز درباره برنامه نویسی JavaScript

شایان کیان پور — Thu, 24 Dec 2020 21:37:21 +0330

همانطور که می‌دانید در دنیای برنامه نویسی همانند دنیای واقعی، با زبان‌های بسیاری روبرو هستیم که هر کدام مزایا و معایب خاص خود را دارند. در این مقاله سعی داریم یکی از محبوب‌ترین زبان‌های این حوزه را به شما معرفی کنیم. اگر مایل هستید با جاوا اسکریپت وارد دنیای برنامه نویسی شوید، اما اطلاعات چندانی در مورد آن ندارید در ادامه این مقاله با ما همراه باشید.زبان برنامه نویسی جاوا اسکریپت چیست؟زبان JavaScript که به اختصار JS نیز نامیده می‌شود، یکی از محبوبترین زبان‌های برنامه نویسی است. جاوا اسکریپت زبانی سطح بالا، داینامیک، شی‌گرا و تفسیری است که از شیوه‌های مختلف برنامه نویسی پشتیبانی می‌کند. از این زبان می‌توان برای برنامه نویسی سمت سرور (Server Side)، اپلیکیشن‌های موبایل، بازی و اپلیکیشن‌های دسکتاپ استفاده کرد. بنابراین می‌توان اینگونه برداشت کرد که زبان برنامه نویسی جاوا اسکریپت ، یک زبان همه فن حریف است.اگر با هر یک از این اصطلاحات آشنایی ندارید نگران نباشید، زیرا در ادامه به توضیح هر یک از آن‌ها خواهیم پرداخت. برای اینکه بهتر متوجه چیستی زبان جاوا اسکریپت شوید، در ابتدا باید جواب سوالاتی مانند زبان کامپایلری چیست و چه تفاوتی با زبان مفسری دارد؟، زبان برنامه نویسی سمت سرور و سمت کاربر به چه نوع زبان‌هایی گفته می‌شود؟ را بدانید. پس از درک این مفاهیم می‌توانید آموزش جاوا اسکریپت را شروع کنید.همانطور که می‌دانید کامپیوترها تنها به زبان صفر و یک (Binary) صحبت می‌کنند و زبان دیگری را متوجه نمی‌شوند. ما در ابتدا برای برقراری ارتباط با ماشین‌ها سعی کردیم به زبان خود آنها، یعنی زبانی که به زبان صفر و یک نزدیک‌تر است، صحبت کنیم. به این نوع زبان‌ها که به صورت مستقیم با پردازنده در ارتباط‌اند، در اصطلاح، زبان‌های سطح پایین (Low Level) گفته می‌شود. از جمله این زبان‌ها می‌توان به اسمبلی اشاره کرد.اما یادگیری و تسلط به این زبان‌ها برای برنامه نویسان فوق العاده سخت بود. بنابراین متخصصین تصمیم به ساخت زبان‌هایی گرفتند که به زبان انسان‌ها نزدیک‌تر باشد. در اصطلاح به این زبان‌ها، زبان‌های سطح بالا (High Level) می‌گویند. زبان‎های سطح بالایی مانند JavaScript کار را برای برنامه ‎نویسان ساده‌تر کردند، زیرا ساختار نوشتاری و منطق آن‌ها بسیار به زبان انسان‌ها نزدیک‌تر شده است. پس می‌توان اینگونه نتیجه گرفت که آموزش جاوا اسکریپت نسبت به سایر زبان‌های برنامه نویسی سطح پایین ساده‌تر است.همانطور که دیدید در تعریف زبان برنامه نویسی جاوا اسکریپت به این نکته اشاره شد که این زبان از نوع زبان‌های مفسری است. برای درک ماهیت زبان‌های برنامه نویسی مفسری ابتدا فکر کنید که شما یک مترجم هستید. برای ترجمه یک متن، دو راه بیشتر ندارید. یا باید آنچه را دریافت می‌کنید به صورت خط به خط و همزمان ترجمه کنید، یا کل مطلب را یک جا ترجمه کنید. این دقیقا همان تفاوت میان زبان‌های مفسری (Interpreter) و زبان‌های کامپایلری (Compiled) است.زبان‌های برنامه نویسی مفسری چه نوع زبان هایی هستند؟در زبان‌های مفسری (Interpreted) سورس کد به صورت خط به خط تفسیر می‌شود یعنی پس از تفسیر و اجرای خط اول به خط دوم می‌رود که این روند باعث کند شدن پروسه اجرا می‌شود. این زبان‌ها برعکس زبان کامپایلری به سیستم‌عامل وابسته نیستند چرا که به صورت همزمان و از طریق مفسر، اجرا می‌شوند.به چه زبان هایی، زبان برنامه نویسی کامپایلری می‌گویند؟اجازه دهید کمی بیشتر و تخصصی‌تر در این باره توضیح دهیم. در زبان‌های کامپایل شده تمام سورس کدها به یکباره کامپایل (ترجمه) شده و به صورت کامل پردازش و اجرا می‌شوند. خروجی ای که کامپایلر در اختیار شما قرار می‌دهد یک فایل کامپایل شده برای سیستم‌عامل مورد نظر شما است که هیچ وابستگی به کدهای نوشته‌شده ندارند. در واقع زبان‌های کامپایلری به سیستم‌عامل وابسته هستند و امکان استفاده از کدهای کامپایل شده بر روی سیستم‌عامل دیگری وجود ندارد.شی گرایی در جاوا اسکریپت به چه معنی است؟شی گرایی یک الگو و شیوه تفکر در برنامه نویسی است. رویکرد برنامه نویسی شی گرا از جزء به کل یا پایین به بالا است (Bottom-Up). یعنی در ابتدا واحدهای کوچکی از برنامه ایجاد می‌شوند و با پیوند این واحدهای کوچک به یکدیگر، واحدهای بزرگ‌تر شکل می‌گیرند و به همین ترتیب برنامه کامل‌تر می‌شود. برنامه نویسی شی گرا دو مفهوم کلاس (Class) و شی (Object) را ارائه می‌دهد.شی گرایی در برنامه نویسی می‌تواند مشکلات زیادی را برای شما حل کند و باعث ساده‌تر شدن فرآیند کدنویسی شود. از آنجایی که مفاهیم شی گرایی به شدت به دنیای واقعی نزدیک است، درک آن برای برنامه نویس آسان خواهد بود. در شی گرایی برخلاف روش‌های کدنویسی دیگر مانند رویه ای به جای دست و پنجه نرم‌کردن با تعداد زیادی متغیر و توابع، مستقیما با اشیا (Objects) کار می‌کنید. برای درک بهتر این موضوع بهتر است با مثالی این مطلب را توضیح دهیم.کارگاهی را در نظر بگیرید که دارای دستگاه‌های تولیدی مختلف است. این کارگاه را می‌توان به عنوان یک کلاس در نظر گرفت. هر یک از این دستگاه‌ها محصول متفاوتی تولید می‌کنند که می‌توان آن‌ها را به عنوان شی در نظر گرفت. اگر برای محصولات مشکلی پیش بیاید یا اگر بخواهیم تغییر در آن‌ها ایجاد کنیم نیازی به تخریب و از نو ساختن کارگاه نیست.به عنوان مثال اگر محصول خروجی کیک باشد، زمانیکه بخواهیم کیک شیرین‌تری داشته باشیم لازم نیست تغییری در کارگاه یا دستگاه‌ها ایجاد کنیم، کافیست کمی شکر به خمیر کیک اضافه کنیم. این دقیقا همان اتفاقی است که در برنامه نویسی شی گرا می‌افتد.زبان‌های سمت سرور و سمت کاربر چه تفاوتی هایی دارند؟پردازش و اجرای برخی زبان‌ها بر روی سرور (سایت) صورت می‌گیرد و سپس نتیجه به سوی کاربر ارسال می‌شود. این زبان‌ها برای برقراری ارتباط به نرم‌افزاری احتیاج دارند که به آن وب سرور گفته می‌شود. اما نکته جالبی که در مورد زبان JavaScript وجود دارد این است که از این زبان می‌توان هم برای برنامه نویسی سمت سرور و هم سمت کاربر استفاده کرد. اما در گذشته قلمروی این زبان تنها به برنامه نویسی سمت کاربر محدود می‌شد. کدهای زبان‌های برنامه نویسی سمت کاربر همانطور که از اسم آن مشخص است در سیستم کاربر پردازش و اجرا می‌شوند. نکته :جاوا اسکریپت یک زبان سطح بالا و مفسری است که از شی گرایی پشتیبانی می‌کند. این زبان در سمت کاربر پردازش و اجرا می‌شود. البته با کمک فریم ورک هایی مانند Node.JS و Express.JS می‌توان به عنوان زبان سمت سرور هم از این زبان استفاده شود. درباره این فریم ورک ها در مطالب بعد توضیح داده خواهد شد .کاربرد جاوا اسکریپت در دنیای برنامه نویسی چیست؟پیش‌تر به محبوبیت زبان جاوا اسکریپت اشاره کردیم. این محبوبیت بی دلیل نیست چرا که با این زبانِ شی گرا شما قادر خواهید بود تا سایت‌های بی‌روح خود را جان بخشی کنید و با کاربران خود تعامل داشته باشید. یعنی می‌توانید فایل‌های انیمیشنی، صوتی و تصویری را روی سایت خود به نمایش بگذارید. همچنین می‌توانید روی سایت‌تان تایمر قرار دهید، رنگ‌ها را با حرکت موس تغییر دهید و بسیاری کارهای دیگر که باعث جذابیت بیشتر صفحات وب می‌شوند.اما این تمام چیزی نیست که جاوا اسکریپت در اختیار شما قرار می‌دهد. شما با استفاده از این زبان می‌توانید شروع به ساخت برنامه‌های وب و موبایل و دسکتاپ کنید. برای این منظور می‌توانید از فریم‌ورک‌های مختلف JavaScript که مجموعه‌ای از کتابخانه‌ها را در اختیار شما قرار می‌دهند استفاده کنید. یکی از کارهای سرگرم کننده دیگری که می‌توانید از طریق این زبان انجام دهید، توسعه بازی‌های رایانه ای تحت مرورگر است. پس به صورت کلی می‌توان کاربردهای زبان جاوا اسکریپت را به صورت زیر بیان کرد :برنامه نویسی فرانت اندبرنامه نویسی بک اند با جاوا اسکریپتبرنامه نویسی نرم افزارهای موبایلبرنامه نویسی نرم افزارهای دسکتاپجاوا اسکریپت چگونه کار می‌کند؟حال که دیدیم جاوا اسکریپت چیست و چه کاربردهایی دارد، شاید این سوال برای شما پیش آمده باشد که جاوا اسکریپت چگونه در مرورگر‌های مختلف اجرا می‌شود؟ جواب این سوال موتورهای پردازشی (Engine) هستند. مرورگرهای مختلف برای اجرای کدهای جاوااسکریپت از موتورهای مختلفی استفاده می‌کنند که در ادامه به برخی از آنها اشاره می‌کنیم.موتور V8 برای مرورگرهای اپرا و کرومموتور SpiderMonkey برای فایرفاکسموتورهای Trident و Chakra برای ورژن‌های مختلف اینترنت اکسپلوررموتور ChakraCore برای مرورگر Edgeموتورهای Nitro و SquirrelFish برای مرورگر سافاریاین موتورها در ابتدا کدهای جاوا اسکریپت را ترجمه می‌کنند. سپس اسکریپت‌ها را به زبان ماشین کامپایل می‌کنند تا در نهایت کدها اجرا شوند. البته این موضوع به این معنی نیست که زبان جاوا اسکریپت تنها بر روی مرورگرهای وب اجرا می‌شود. این زبان برنامه نویسی تقریبا بر روی تمام پلتفرم‌ها با استفاده از JavaScript Virtual Machine قابل اجرا است.تاریخچه جاوا اسکریپتجاوا اسکریپت اولین بار در می‌1995 در 10 روز توسط برندن ایچ، یکی از کارکنان شرکت Netscape متولد شد! در ابتدا این شرکت به این نتیجه رسیده بود که به صفحات وب پویا و جذاب‌تری احتیاج دارد. این اولین قدم به سوی ساخت زبانی ساده بود. آقای براندان ایچ از طرف این شرکت مامور شد که زبانی اسکریپتی برای صفحات وب و دست بردن در کدهای HTML بسازد. ماموریت آقای ایچ این بود زبانی را ارائه کند که نه تنها متخصصان برنامه نویسی از آن استقبال کنند، بلکه به راحتی مورد استفاده طراحان هم باشد.این شرکت در ابتدا به فکر ارتقا و ساده سازی زبان Schema افتاد اما در نهایت به این نتیجه رسید که به زبانی شبیه جاوا اما با سینتکس ساده‌تر احتیاج دارد. در ابتدای کار اسم این زبان برنامه نویسی Mocha بود که بعد به Mona تغییر پیدا کرد. در سپتامبر همان سال اسم این زبان به LiveScript تغییر کرد و در آخر سریال تغییر اسم با انتخاب اسم JavaScript به اتمام رسید.نهایی شدن این اسم تنها به این دلیل بود که در آن روز‌ها زبان برنامه نویسی Java بسیار پرطرفدار شده بود. انتخاب این نام برای این زبان بسیار هوشمندانه بود. زیرا در آن زمان این زبان با انتخاب این نام، توانست سهم زیادی از بازار جاوا را به خود اختصاص دهد. به هر حال در سال 1996 جاوا اسکریپت برای استاندارد شدن به سازمان ECMA سپرده شد. در نهایت اولین استاندارد جاوا اسکریپت با نام ECMAScript در سال 1997 منتشر شد. اولین اکما اسکریپت ECMA-262 و آخرین ورژن آن با اسم ECMAScript 2017 در ژوئن 2017 منتشر شد.نقاط قوت جاوا اسکریپتهر یک از زبان هایی که در دنیای برنامه نویسی مورد استفاده قرار می‌گیرند نقاط قوت و ضعف هایی دارند که زبان جاوا اسکریپت هم از این موضوع مستثنا نیست. این زبان به دلیل مزایای فراوانی که دارد در میان برنامه نویسان از محبوبیت زیادی برخوردار است که به طور خلاصه به برخی از آنها اشاره می‌کنیم :بر اساس بررسی سایت stackoverflow محبوب‌ترین زبان برنامه نویسی سال 2018 استبرای پردازش و اجرا به کامپایلر احتیاجی ندارد.یادگیری جاوا اسکریپت نسبت به خیلی از زبان‌های برنامه نویسی راحت‌تر است.به صورت کراس پلتفورم روی مرورگر‌ها یا پلتفرم‌های مختلف اجرا می‌شود.نسبت به زبان‌های برنامه نویسی دیگر سبک‌تر و سریع‌تر است.فریم ورک ها،کتابخانه‌ها و به صورت کلی ابزارهای بسیار زیادی را در اختیارتان قرار می‌دهد.زبان بومی مرورگر وب است و در مرورگر کاربران پردازش می‌شود.امکان ایجاد صفحات وب تعاملی و پویا را به برنامه نویسان می‌دهد.در جواب عمل کاربران، عکس العمل نشان می‌دهد.نقاط ضعف جاوا اسکریپتبرخی از ضعف‌های این زبان برنامه نویسی عبارتند از :دشواری در تشخیص دلیل خطا دادن و مشکل در دیباگ کردنمحدودیت در اجرای اسکریپت‌های جاوا اسکریپت با ایجاد محدودیت هایی جهت حفظ امنیتاجرا نشدن بر روی مرورگرهای قدیمینفوذپذیری نسبت به اکسپلویت‌ها و عوامل مخربمی تواند برای اجرای کدهای مخرب در کامپیوتر کاربران استفاده شود.با رندر شدن متفاوت بر روی ابزارهای مختلف می‌تواند باعث ایجاد تناقض و نداشتن یکپارچگی شود.جمع بندیدر نهایت اگر تصمیم به یادگیری این زبان گرفته اید به شما تبریک می‌گوییم. چرا که جاوا اسکریپت در واقع تنها یک زبان برنامه نویسی سمت کاربر (Client Side) نیست. پیش بینی‌ها نشان می‌دهند در آینده ای نه چندان دور همه چیز به سمت بستر وب تعاملی خواهد رفت و این یعنی ما بیش از پیش به زبانی مانند جاوا اسکریپت نیاز خواهیم داشت که بتواند پاسخگوی تمام خواسته‌های ما باشد.همچنین این زبان در حال حاضر توسط افراد و سازمان‌های زیادی مورد استفاده است. این بدین معناست که شما به عنوان برنامه نویس در این حوزه به منابع و اطلاعات آموزشی زیادی دسترسی خواهید داشت. پس اگر تصمیم دارید به آموزش جاوا اسکریپت بپردازید، قطعا با کمبود منابع آموزشی مناسب مواجه نخواهید شد.در پست های آینده سعی میکنم که در رابطه ها فریم ورک های محبوب Js مطالبی منتشر کنم ، پس با من همراه باشید.

متد های آرایه توی جاوااسکریپت

Mohammad Jawad Barati — Wed, 23 Dec 2020 18:13:47 +0330

متد joinتوی این وضعیت میای مشخص میکنی که آرایه ای از رشته ها چجوری به هم بچسبن. const elements = ['Fire', 'Air', 'Water']; console.log(elements.join()); // expected output: "Fire,Air,Water" console.log(elements.join('')); // expected output: "FireAirWater" console.log(elements.join('-')); // expected output: "Fire-Air-Water"متد

چجوری پکیجمون رو در npm بزاریم

M.alavi majd — Tue, 22 Dec 2020 17:28:27 +0330

What is npm ?npm یا همون node package manager یک پکیج منیجر برای جاوااسکریپت هستش که شما با اون می تونید پکیج های مختلف رو نصب کنید . مثلا می تونید فریم ورک express.js رو با npm نصب کنید.How to create a package ?خب ، بستگی داره به اون کاری که می خواید بکنید ‌.مثلا می تونید یه لایبری خیلی ساده برای جاوا اسکریپت بنویسید .How to put my package in npm?اول مطمئن شید که node js روی دستگاه تون نصبه.بعدش برید تو این لینک و توش ثبت نام کنید ‌.بعد از ثبت نام ترمینال رو باز کنید و این دستور رو بنویسید . npm loginبعد چند تا سوال ازتون می پرسهسیستمم ویندوزه.از فروردین لینوکسش می کنم.دقیقا همون نام و پسورد و ایمیلی رو بزنید که باهاش تو سایته ثبت نام کردید.بعد این دستور رو تو ترمینال بزنیدnpm initبعد چند تا سوال درباره ی اسم پکیج و ورژن و ... می پرسه می پرسه و بعدش فایل package.json ایجاد می شهاگه اشتباهی یه چیزی تو جواب سوالات نوشتید بعدا می تونید فایل package.json رو تغییر بدید.در نهایت توی همون پوشه ای که package.json هستش فایل هایی که می خواید منتشر بشن رو قرار بدید .آخرش با npm publishمنتشرش کنید.دقت کنید که اسم پکیج همون اسمی میشه که توی سوالات ازتون پرسیده بود.اگه خواستید می تونید با npm i پکیج خودتون رو نصب بکنید.موفق باشید.

معرفی کوتاهی به فریمورک svelte js

اشکان محمدی — Sun, 06 Dec 2020 12:01:40 +0330

ای بابا! باز هم یک framework دیگهآره میدونم، فریمورک های متعددی با ویژگی ها مختلف برای جاوا اسکریپت وجود دارند. اما این دفعه می خوام یه فریمورک خوب که نسبت به بقیه رقیبانش کمتر شناخته شده رو بهتون معرفی کنم. موضوع بحث ما در این پست فریمورک svelte js هستش.ویژگی های svelte js:مثل اکثر framework ها، svelte هم برخی ویژگی های جدید رو به زبان جاوا اسکریپت اضافه کرده که جزء خود جاوا اسکریپت نیستند. یعنی مرورگر به تنهایی قادر به اجرای کد های svelte نیست. خوب تا اینجا که شبیه به خیلی از framework های دیگه بود اما یه فرق اساسی داره. فریمورک هایی مثل react و vue و ... مرحله تبدیل کد به جاوا اسکریپت ساده (قابل اجرا توسط مرورگر) رو در مرورگر و در زمان بالا آمدن وبسایت انجام میدن. در حالی که svelte js این کار رو از قبل انجام میده و کد رو در یک فایل کوچیک bundle js قرار میده (که شامل دستورات جاوا اسکریپت خالصه) بنابر این مرورگر هیچ نیازی به ابزاری های دیگه مثل babel و ... نداره و می تونه از کد ها به صورت مستقیم استفاده کنه.این framework از virtual-dom استفاده نمی کنه. (نمی دونم خوبی حساب میشه یا بدی)نیازی به کتابخانه های state management نیست. خود svelte اینکار رو براتون انجام میدهفریمورک svlete به شما قابلیت استفاده از component ها رو میده. (مثل react)همچنین قابلیت two-way data binding رو هم داره (مثل angular)برنامه hello nameمیدونم یکم عجیبه. معمولا hello world مینویسن ولی اینبار من می خوام برنامه hello name رو بنویسم (یک input وجود داره که اسمتون رو میگیره و نشون میده. (جهت نشان داده قابلیت two-way data binding)) let name= "" let hello = "hello"

{hello} {name}

خوب همونطور که دیدید خیلی ساده است. کد های جاوا اسکریپت توی script نوشته میشن(من هرکاری کردم نتونستم کاری کنم ویرگول تگ های script رو نشون بده. ولی شما حواستون باشه که اونها رو بزارید). کد های html معمولا میان تگ های script و style هستند (نیازی هم نیست که یک والد واحد داشته باشند). کد های css هم که معمولا آخر های کد در تگ style نوشته میشن. برای استفاده از مقادیر متغیر ها در قسمت های مختلف کد های html از { } استفاده میشه.از bind:value برای اختصاص مقدار فیلد input به یک متغیر استفاده میشه.دانلود svlete jsاگه node js و npm رو دارید این دستور رو وارد کنید. npx degit sveltejs/template my-svelte-projectالبته برای من که این دستور کار نمی کنه. اگه برای شما کار کرد که هیچ اما اگه نکرد راحت ترین کار اینه که این فایل zip رو دانلود و استخراجش کنید. بعد هم با اجرای این دستورات برنامه رو اجرا کنیدcd my-svelte-project npm install npm run dev // runs development serverمنابع یادگیریبهترین منبع یادگیری خود وبسایت svlete.dev هستش. توضیحاتش کامله و مثال های خوبی ارائه میده. می تونید از این لینک وارد قسمت آموزش svelte بشید

تفاوت Arrow فانکشن ها و توابع معمولی در جاوااسکریپت - بخش دوم

هومن امینی — Sat, 05 Dec 2020 17:07:28 +0330

در گفتار قبل (لینک زیر) درباره نحوه برخورد Arrow فانکشن و فانکشن های معمولی با مقدار this را توضیح دادیم. https://vrgl.ir/oS9IT سایر تفاوت به شرح ذیل تقدیم می گردد.۲- سازنده ها (Constructors)همانطور که در گفتار قبل دیدیم با فانکشن های معمولی می توانند به سادگی یک آبجکت ایجاد کنیماما همین کار را نمی توانیم با arrow فانکشن ها انجام دهیم و خطای TypeError می گیریم۳ - متدهااستفاده از فانکشن معمولی یک راه معمول برای ایجاد یک متد در یک کلاس است.در کلاس Hero زیر متد logName با استفاده از فانکشن معمولی است.بعضی وقت نیاز داریم که متد یک کلاس را به عنوان callback صدا کنیم و با این روش به مشکل می خوریمبرای مثال استفاده از متد logName به عنوان callback در setTimeout :بعد از یک ثانیه در کنسول undefined چاپ می شود زیرا setTimeout یک فراخوانی ساده را انجام می دهد که در آن this در آن global آبجکت است و چون در گلوبال آبجکت متد logName وجود ندارد و بنابراین undefined برمی گرداند.جهت رفع این مشکل باید به صورت دستی مقدار this را به context صحیح به صورت زیر bind کنیم. با این روش مقدار this به شی یا (instance) - بتمن می چسبانیم یا bind می نماییم.اما یک راه ساده برای رفع این مشکل استفاده از arrow فانکشن است که آن متد به صورت lexically به کلاس می چسبد و یا خودکار bind می شود.

EventEmitter همه چی راجع به

Reza Salari — Sat, 28 Nov 2020 10:56:42 +0330

خود عکس کامل داره میگه چخبره:))سلام رفقا ، این اولین نوشته ام هست امیدوارم مفید باشه ، سوتی چیزی دیدین حتما بگید درستش کنماقا ما یه هفته ای بود درگیر یه اصطلاحی شده بودیم اونم EventEmitter ها ! خلاصه ازین بپرس ازون بپرس مگه این رو میشد بفهمی :/ خلاصه نشد اومدیمو تو مقالات مدیوم ( هَوو ویرگول:دی) فهمیدیم حالا میزارم که بچها خودمونم یاد بگیرن همونطور ک میدونید nodejs یه یجور Runtime Env هست که از معماری asynchronous استفاده میکنه خب حالا این ایونت ها کجا بدردمون میخوره ، فرض کنید شما یه کال بک دارید که هرموقع ک کال شده میخواید ازش یه استفاده ببرید واسه اینکه اینکارو انجام بدید باید اون تابع رو async کنید و کال بک رو await یا روش های دیگه ... اما یه موقع هایی هست شما بین کال کردن و کال بک گرفتن میخواید پروسستون سریعتر بشه یه مثال میزنم: فرض کنید یه کاربرقراره تو سایتتون رجیستر کنه خب نحوه کار اینه فرم ارسال میشه ولیدیت میشه مجدد برمیگرده و ثبت نام ولی شما میخواید تو این بین هرکاربر رو مشخصاتش رو مثلا از استک بگیرید واسه این کار باید کلاینت رو منتظر نگه داشت؟؟ نه طبیعتا ! خب کاری ک اینجا میکنیم اینه ک یه رویداد (event) تعریف میکنیم که هربار تابع ما کال بک برگشت داد ، این ایونت اجرا بشه و رویدادمون رو اجرا کنه ، مثال دوم : فرض کنید قراره یه سیستم مدیریت بلیط برای کنسرت ( ترجیحا شایع) بسازید خب بریم بسازیم :)const EventEmitter = require("events"); class TicketManager extends EventEmitter { constructor(supply) { super(); this.supply = supply; } buy(email, price) { this.supply--; this.emit("buy", email, price, Date.now()); } } module.exprots = TicketManager خب اومدیم خط اول ماژول رو فراخوانی کردیم تو خط دوم یک کلاس ساختیم که از ماژول ما ارث بری کنه متدهاشو ... سازنده ساختیم بابت ورودی های کلاسمون ،کاربرد سوپر هم برای اینه ک به ارث ببر متد های EventEmitter رو داخل کلاس خودمون یه متد buy گزاشتیم که ایمیل خریدارو مبلغی که پرداخت کردند برای بلیط رو بفرستیم واسشون بعدش عرضه کردن بلیط رو یکی کاهش میدیم :/ بعدشم صادرش کردیم خب تو فایل بعدیمون require میکنیم و ازش یک نمونه میسازیم و به تعداد بلیط هایی ک داریم بهش مقدار میدیمconst TicketManager = require("./ticketManager"); const ticketManager = new TicketManager(10); ticketManager.on("buy", () => { console.log("Someone bought a ticket!"); });حالا وقتشه رویدادمون ران بشهticketManager.buy("test@email.com", 20);خب خروجی جالب شد Someone bought a ticket!به همین راحتی هربار که buy رو مقداریم یعنی اینکه یه نفر بلیط مارو خریده و ارزش بلیط هارو کم میکنیم یسری متد داخل کدامون بود ک همشو توضیح میدیم emitter.addListener(event, listener) برای رویدادی که مشخص کردیم یک شنونده اضافه می کندemitter.on(event, listener) این متد هم دقیقا کاربرد بالا رو دارد وهمچینن چک نمی کند که ایا شنونده هست یا نهemitter.on(event, listener) یک شنونده را یک بار برای این رویداد اجرا می کندخیلی زیاد هستن نمیشه همشونو گفت خودتون برید R&D ، امیدوارم حداقل باعث بشه اینا یه سطح اشنایی داشته باشید سوتی بود بگید ناراحت نمیشم : ))) منابع : https://www.tutorialsteacher.com/nodejs/nodejs-eventemitter https://nodejs.org/api/events.html#events_events

چند تا کار جالب و خفن با جاوا اسکریپت

M.alavi majd — Thu, 19 Nov 2020 23:52:10 +0330

توی این آموزش ها می خوایم سه تا کار جالب با جاوا اسکریپت انجام بدیم.واقعا جاوا اسکریپت همه کارسجاوااسکریپت همه کاره1_نوشتن متنی درون کلیپ بورد کاربر خب ما برای این کار می آییم از (navigator.clipboard.writeText(x استفاده می کنیم البته بجای x اون متنی که ما می خوایم رو می نویسیممثال:let mystring="hello world" navigator.clipboard.writeText(mystring)توی این مثال اول میاد مقدار hello world رو درون متغیر mystring می ریزه . بعد میاد همون متغیر رو تو کلیپ بورد کاربر می ریزه انگار خودش اون رو کپی کرده2_استفاده از `` و {}$آیا از کلی + و ' ' خسته شدی؟دیگه این کار رو انجام نده:console.log("your id is " + '9340423')دیدید چقدر طولانی هستشبه جاش:let id='9340423' console.log(`your id is ${id})به همین راحتی کد رو کوتاه کردیم 3_ آیا کاربر آنلاین است؟ما می تونیم از navigator.onLine استفاده کنیم تا ببینیم کاربر آنلاین است یا نهمثال :let isonline=navigator.onLine if(isonline==true){ alert("you are online") }else{ alert("you are offline") }توی کد بالا اول یه متغیر ساختیم که مقدارش navigator.onLine هستش . در واقع‌‌‌ navigator.onLine یک مقدار بولین بر می گردونه که حالا اگه این متغیره برابر با true بود کاربر آنلاینه وگرنه( false باشه) آفلاینهشما می تونید بر اساس مقدار این متغیر، کارای جالبی بکنیدممنونم از خواندن این مقاله

|آموزش طراحی سایت|دستورات if .. else در جاوا اسکریپت|

برلیانس — Wed, 18 Nov 2020 15:43:30 +0330

امروز با پست جدیدی از سری پست های آموزش طراحی سایت همراه شما هستیم. در این پست دستورات if .. else در جاوا اسکریپت را مورد بررسی قرار می دهیم.دستورات شرطی را به منظور انجام عملیات خاص در صورت برقرار بودن شرایط معین بکار می بریم، بدین معنا که در صورت درست بودن شرط معین دستورات و عملیات معینی اجرا شود. https://www.aparat.com/v/wt4zL دستورات شرطی (conditional statements)گاهی اوقات به هنگام نوشتن یک اسکریپت یا کد، برنامه نویس نیاز دارد که تصمیم های متفاوتی با توجه به نتایج مختلف بگیرد، برای نیل به این هدف برنامه نویس از دستورات شرطی کمک می گیرد.دستورات شرطی زبان جاوا اسکریپت به شرح زیر می باشد.دستور if - از اين ساختار در مواقعی که می خواهيم در صورت بر قرار بودن شرط معینی دستور مشخصی اجرا شود، استفاده می کنیم . چنانچه شرط تعیین شده صحیح یا برقرار نبود، هيچ دستوری اجرا نخواهد شد.دستور else - از اين ساختار زمانی استفاده می کنیم که می خواهيم در صورت بر قرار بودن شرط، دستور معینی اجرا شود و در صورت عدم بر قراری آن شرط، دستور یا مجموعه ای از دستورات دیگر اجرا گردند.دستور else if : اگر شرط درست باشد دستور مقابل if اجرا می شود در غیر این صورت دستور مقابل else اجرا می گردد (در صورت غلط بودن شرط اول، شرط دیگری را برای امتحان کردن مشخص می کند).دستور Switch : برای گزینش و اجرای یک دستور از میان چندین دستور مختلف بکار می رود.دستور شرطی ifاز اين ساختار در مواقعی که می خواهيم در صورت بر قرار بودن شرط معینی دستور مشخصی اجرا شود، استفاده می کنیم. چنانچه شرط تعیین شده صحیح یا برقرار نبود، هيچ دستوری اجرا نخواهد شد.آموزش طراحی سایت دستور نگارش (syntax)نکته:توجه داشته باشید که دستور شرطی if با حروف کوچک نوشته می شود. نوشتن آن با حروف بزرگ If یا IF باعث ایجاد خطا می شود.مثال:در صورتی که زمان هنوز مرز ساعت 18:00 را رد نکرده، رشته ی "Good day" را نشان بده.if (hour < 18) { greeting = "Good day" ‎}نمونه یکif (new Date().getHours() < 18) { document.getElementById("demo") = "Good day!" }امتحان کنید:

Display "Good day!" if the hour is less than 18:00:

Good Evening!

if (new Date().getHours() < 18) { document.getElementById("demo") = "Good day!" } https://www.aparat.com/v/4gGj2 دستور شرطی elseاز اين ساختار زمانی استفاده می کنیم که می خواهيم در صورت بر قرار بودن شرط، دستور معینی اجرا شود و در صورت عدم بر قراری آن شرط، دستور یا مجموعه ای از دستورات دیگر اجرا گردند.دستور if (شرط) {قطعه کدی که در صورت برقرار بودن شرط باید اجرا گردددستور } else {قطعه کدی که در صورت غلط یا برقرار نبودن شرط اول اجرا می گردد{اگر زمان از مرز ساعت 18 نگذشته، رشته ی "Good day" را نشان بده و در غیر این صورت "Good evening" راif (hour < 18) { ‎ greeting = "Good day" ‎} else { greeting = "Good evening" ‎}‎نتیجه:نمونه دوfunction myFunction() { var hour = new Date().getHours(); var greeting; if (hour < 18) { greeting = "Good day" } else { greeting = "Good evening" } document.getElementById("demo") = greeting; }امتحان کنید:

Click the button to display a time-based greeting:

Click the button to get a time-based greeting:

ng-content

Firouzeh Dabbaghi — Mon, 16 Nov 2020 14:35:17 +0330

شاید برای شما سوال بوجود آمده باشد که مابین تگ های کامپوننتی که میسازیم چه چیز باید بنویسیم؟ شاید هم تست کرده باشید ولی هیچ خروجی به شما نشان داده نشده باشد.ابزاری هست به نام ng-content که انگولار در اختیار ما قرار میدهد.محتویاتی که میخواهیم از parent انتقال بدهیم را در فرم نمایش دهد.هرجایی که خواستیم محتویات نمایش دهد از تگng-content استفاده میکنیم.این تگ کمک میکند تا هر اطلاعاتی که ازparent داخل تگ child نوشتیم،در مکانی که تگ ng-content را نوشتیم قرار داده شود.کلاس مادر:

اطلاعات داخل فرم فرزند نوشته میشود.

کلاس فرزند: متن ارسالی از کلاس مادر: ng-content یک ویژگی داره به نام select که در حقیقت همون selector هایی هست که در css هم با آنها کار میکنیم. مثل نقطه که برای انتخاب کلاس و هشتک که برای انتخاب آیدی استفاده میکنیم. از تمامی سلکتور های css در اینجا هم میتوان استفاده کرد.کلاس مادر:

پیغام نخست

کلاس فرزند: متن ارسالی از کلاس مادر: مکان نمایش پیغام اول: مکان نمایش پیغام دوم: برای دسترسی به اطلاعات داخل ng-content باید از Localrefrence استفاده کنیم. داخل کامپوننت child از دکوریتور ContentChild استفاده میکنیم.دقت شود برای دسترسی به متغییر داخل خود کامپوننت مادر از ViewChild استفاده میشود ولی اینجا چون داخل کامپوننت فرزند میخواهیم دسترسی داشته باشیم از ContentChild استفاده میکنیم و اسمی که داخل کامپوننت مادر تعریف کردیم را به ان ارسال کنیم.برای خواندن اطلاعات شبیه viewChild عمل میکنیم.@ContentChild("one", { static: true }) one: ElementRef; چرخه زندگی ContentChild که بنا به نیاز از آن استفاده کنیم:AfterContentInit زمانی که متغییر از نوع ContentChild را initialize میکند یعنی در حالت اولیه و تنها یکبار رخ میدهد. AfterContentChecked پس از AfterContentInit برای اولین بار اتفاق میافتد و سپس هر موقع تغییرات به مقدار content میدهیم صدا زده میشود.

چگونه از AJAX برای بارگذاری فایل استفاده می کنید ؟

samadi — Sat, 14 Nov 2020 00:15:54 +0330

هر برنامه نویسی باید در مورد نحوه ایجاد درخواست غیرهمزمان توسط AJAX به سمت یک سرور، اطلاعات کافی داشته باشد. اجازه دهید با این سوال که AJAX چیست شروع کنیم و سپس با یک مثال کوتاه با نحوه عملکرد آن آشنا شویم. AJAX خلاصه شده Asynchronous JavaScript and XML هست و این بدان معناست که شما می توانید بدون اینکه معطل پاسخ از طرف سرور برای درخواست ارسالی اتان گردید به کارتان ادامه دهید تا سرور درخواست شما را تکمیل کرده و پاسخ مناسب را به شما ارسال کند. اطلاعات موجود در پاسخ سرور توسط مرورگر دریافت شده و شما می توانید بر روی آن اطلاعات عملیات مورد نیازتان را انجام دهید. برای ساخت درخواست ما از یک سازنده به نام XMLHttpRequest استفاده خواهیم کرد و سپس از چندین تابع دیگر برای مدیریت درخواست ارسالی کمک خواهیم گرفت. نام تابعی که با XML شروع می شود ممکن است ما را کمی گمراه کند. استفاده از XML این روزهای خیلی مد نیست و قرار نیست که از آن استفاده کنیم. ما می توانیم با استفاده از آبجکت جاوا اسکریپت محتوای متن درخواست را بررسی و فراخوانی کنیم و نیازی به XML نداشته باشیم.اکنون مهمترین متدی که باید درباره آن بدانیم متد Open هست که به ما اجازه می دهد که درخواستمان به سمت سرور را آماده کنیم. و در نهایت با استفاده از متد Send درخواستمان را به سمت سرور ارسال کنیم. حال اگر درخواستمان ارسال شده است می توانیم یک رویداد ویژه بنام readystatechange را تحت نظر بگیریم تا به محض اینکه دیتای درخواستی را سرور ارسال کرد متوجه شویم. سرور دیتای ارسالی را درون یک آبجکت به ما ارسال خواهد کرد که در دل خود چندین مشخصه دارد که می توانیم برای بررسی و صحت سنجی درخواست از آن بهره ببریم. بعد اینکه درخواست مورد نظر تایید شد ما اطلاعات دریافتی را به خورد یک آبجکت جاوا اسکریپتی می دهیم.پس اجازه دهید که جلوتر بروم و نگاهی به نحوه انجام آن داشته باشیم. اینجا برنامه ساده کوچکی است. این یک پروژه بوت استرپ ساده است با چندتا نوشته درون آن. و در سمت راست درون فولدرهای ساخته شده، فولدر پروژه وجود دارد به همراه فایل index.htm و یک فولدر javascript که درون آن فایل data.json را که چیزی شبیه به این است را داریم .این همان چیزی است که می خواهیم ایمپورت کنیم . لزومی ندارد که حتما فایل json باشد ولی چون با json کارمان موقع خوراندن اطلاعات به آبجکت جاوا اسکریپت خیلی راحت تر می شود از آن استفاده می کنیم. فایل های دیگری که مشاهده می کنید فایل های مورد نیاز پروژه است . ولی ما اینجا با فایل data.json کار خواهیم کرد.اگر با ES6 کار کنید کد های جاوا اسکریپت درون فولدر process قرار دارد و اینجا فایل script.js وجود دارد که فعلا کاملا خالی است و ما درون آن کدهایمان را خواهیم نوشت. با سازنده شروع می کنیم XMLHttpRequest. یک متغیر بنام request که یک نمونه از XMLHttpRequest را به آن وصل می کنیم. var request = new XMLHttpRequest();حال که این آبجکت را داریم می تونیم چند تا از متدهای آن را استفاده کنیم. معمولا شما یک درخواست را open و send می کنید که بصورت زیر ما این کار را انجام میدهیم. request.open();request.send();برای اینکه ما یک درخواست را باز کنیم نیاز داریم که دوتا چیز را مشخص کنیم. اول اینکه چطور می خواهیم اطلاعات را ارسال کنیم و ما اینجا از متد GET استفاده خواهیم کرد .این بدان معناست که ما از سرور درخواست گرفتن چیزی را خواهیم کرد و در مرحله دوم فایل مورد نظر را تعیین خواهیم کرد. که اینجا ما قصد داریم از فایل data.json استفاده کنیم که درون فولدر JS قرار دارد. پس آرگومان اول متدی که استفاده می شود را ارسال می کند و آرگومان دوم محل فایل مورد نظر ما را. حال متد open ما به شکل زیر تکمیل شد.request.open(‘GET’, ‘js/data.json’);بخاطر داشته باشیم که ما بخاطر ساختار پروژه فایل درون فولدر JS را استفاده می کنیم. حال اجازه دهید ببینیم اگر دیتایی را از طرف سرور دریافت می کنیم چه اتفاقی رخ می دهد؟ زمانیکه شما درخواستی را ایجاد می کنید. سرور تلاش خودش را انجام می دهد تا به شما اطلاعاتی را در پاسخ ارسال کند. و ما با استفاده از رویداد گوش به زنگ خواهیم ماند. این کار را می توانیم با استفاده از یک فانکشن callback انجام دهیم. درون این فانکشن باید چند مورد را بررسی کنیم. request.onreadystetchange = function() {}ابتدا از اینکه درخواست مورد قبول بوده یا نه بایستی مطمعن شویم. این کار را با استفاده از پیغام status انجام خواهیم داد. این پیغام یا عددی که از طرف سرور باز خواهد گشت به ما درباره وضعیت درخواست ما به ما اطلاعاتی خواهد داد. مثلا اگر شما فایلی را از سرور درخواست کنید که وجود نداشته باشد با پیغام مشهور : این صفحه پیدا نشد و یا کد 404 روبرو خواهید شد. در همین راستا کد ۲۰۰ به معنی موفقیت درخواست ما خواهد بود و این همان پیغامی است که ما همواره دوست داریم به عنوان جواب از طرف سرور بشنویم.request.onreadystetchange = function() { if ( request.status === 200) { }}حال نیاز داریم که یک مورد دیگر را بررسی کنیم. و آن آماده بودن یا نبودن دیتای درخواستی ما از طرف سرور است. آیا دیتا آماده است ؟ جواب این سوال را با استفاده از readyState خواهیم فهمید. و اگر جواب ۴ را دریافت کنیم یعنی دیتای ما آماده است. در AJAX یک درخواست در چهار مرحله تکمیل می شود و متناسب با آن کدهای یک ، دو، سه و چهار بازخورد داده خواهد شد. عدد ۴ یعنی دیتای درخواستی ما آماده است و می توانیم روی آن عملیات خودمان را انجام دهیم. request.onreadystetchange = function() { if ( request.status === 200 && request.readyState === 4) { }}خب حالا نوبت این است که دیتای دریافتی را داخل یک متغیر ذخیره کنیم. دیتای دریافتی درون فیلدی بنام responseText به ما از سمت سرور برگشت می خورد . ابتدا یک متغیر به اسم data بالا می سازیم. و اگر شرط برقرار شد دیتای مورد نظر را توسط متد JSON. parse به درون یک آبجکت جاو ا اسکریپت ریخته خواهد شد. کار متد json.parse گرفتن نوشته ها و تحویل آن به شکل یک آبجکت جاوا اسکریپت است. پس حال ما میتوانیم بگوییم که از درون ً ًRequest به فیلد responseText برس و مقدار آنرا درون متغیر data ذخیره کن. request.onreadystetchange = function() { if ( request.status === 200 && request.readyState === 4) { data = JSON.parse(request.responseText); }}اجازه بدهید ابتدا خروجی ها را درون کنسول مشاهده کنیم. پس با استفاده از console.log مقدار data و از طرفی محتوای request را هم درون کنسول مشاهده کنیم. request.onreadystetchange = function() { if ( request.status === 200 && request.readyState === 4) { data = JSON.parse(request.responseText); console.log(data); console.log(request); }}خب اکنون اجازه دهید این فایل را ذخیره کنیم و ببینیم وقتی صفحه را بارگذاری مجدد می کنیم همه چیز درست پیش می رود ؟ var data;var request = new XMLHttpRequest();request.open(‘GET’, ‘js/data.json’);request.onreadystetchange = function() { if ( request.status === 200 && request.readyState === 4) { data = JSON.parse(request.responseText); console.log(data); console.log(request); }}request.send();اگر همه چیز خوب پیش بره می تونیم با inspect کردن المان روی صفحه و مشاهده درون کنسول از نتیجه مطمعن شوید. درون کنسول دو تا ردیف وجود دارد یکی object و دیگری XMLHttpRequest که می توان محتویات درون آن را با جزییات بیشتر مشاهده کنیم. بر روی مثلث کوچک کنار Object کلیک کنید. این همان دیتای واقعی است که ما می خواهیم دریافت کنیم. این دیتا از دیتای درون فایل data.json برگرفته شده است.دقت کنید هیچ ترتیب خاصی در آن دیده نمی شود. هرچند ابتدا لیست calendar ها دیده می شود ولی در واقع ابتدا لیست artist ها خوانده می شوند. پس ما به یک سری از آبجکت ها که درون خودشون اطلاعات artist ها را دارند دسترسی داریم. خیلی عالی شد. اینجا هم اطلاعات دیگری درباره calendar داریم. پس مطمعن شدیم که اطلاعات را بخوبی توانستیم از سرور بخوانیم. چیز دیگری که ما می تونیم بهش سرکی بزنیم xmlHttpRequest هستش. اگر برروی خود درخواست کلیک کنیم ما به کد status که قبلا دریافت کرده بودیم ببینیم و یا readystate که مقدار ۴ را به خود گرفته است.کمی پایین تر می توان responseText را نیز ببینیم که دیتای درون آن را توسط متد JSON.parse تبدیل به آبجکت کرده بودیم. AJAX می تونه کمی دشوار بنظر برسد ولی در واقعیت بسیار ساده است تا زمانیکه نحوه استفاده از درخواست را بدانیم و کدهای که نیاز داریم تا چک کنیم را در نظر داشته باشیم و نحوه خوراندن نوشته های درون سرور و ذخیره کردن آنها را درون یک متغیر بخاطر بسپاریم. اطلاعات بیشتر را می توانید از لینک های زیر بیابید. این متن ترجمه یک درس از لینک زیر است https://www.lynda.com/Web-Development-tutorials/Have-you-used-AJAX-load-external-file/580663/669101-4.htmlبا تشکر از زمانی که برای مطالعه صرف کردید.

آموزش React Native: اولین اپلیکیشن React Native خود را بسازید

محمد صادق پنادگو — Tue, 10 Nov 2020 14:02:37 +0330

آیا به یادگیری React Native علاقه‌مندید؟ بیایید اولین اپلیکیشن React Native خود را بسازید، یک اپلیکیشن ساده موبایلی که لیستی از کشورها را از یک Rest API واکشی کرده و نمایش می‌دهد. هدف این آموزش React Native معرفی آن به شماست و به شما پایه و اساس آن چه که قبل از شروع ساخت یک اپلیکیشن واقعی با React Native را نیاز دارید، معرفی می‌کند. در انتهای این مقاله شما می‌توانید یک اپلیکیشن ًReact Native تولید کنید که بر روی دستگاه‌های با هر دو سیستم عامل اندروید یا iOS اجرا خواهد شد.کتابخانه React Native یک کتابخانه توسعه Cross Platform است که بر اساس React توسط Facebook برای توسعه برروی پلتفرم‌های موبایلی ساخته شده است. این کتابخانه در سال ۲۰۱۳ به صورت یک پروژه hackthon (پروژه هایی که به صورت جلسه ای با برنامه نویسان و متخصصين سخت افزار برگزار می‌شود و نتیجه آن می‌تواند یک نرم افزار یا یک سخت افزار جدید باشد.) درون Facebook ساخته شد و بعدها در سال ۲۰۱۵ برای استفاده عموم منتشر شد. به سرعت به محبوبیت بزرگی در بین جامعه توسعه‌دهندگان دست پیدا کرد و کمپانی‌های متعددی آن را به عنوان راه حل اصلی توسعه موبایل خود برگزیدند چرا که اپلیکیشن‌های ًReact Native دارای یک کد مشترک برای هر دو پلتفرم iOS و اندروید است و نتیجه نهایی به راحتی قابل تشخیص از اپلیکیشن‌هایی که به صورت Native نوشته شده‌اند، نیست. طبق وبسایت ًReact Native: در سال ۲۰۱۸ React Native در GitHub رتبه دوم را از نظر تعداد استفاده کنندگان به دست آورد. امروز React Native بسیاری از تولید کنندگان شخصی نرم افزار و کمپانی‌های در سرتاسر جهان مانند Microsoft و Expo پشتیبانی می‌شود.قبل از آن که شروع به تولید اولین اپلیکیشن React Native خود کنیم، بیایید مزایا و معایب آن و جزئیات بیشتری از این که واقعا React Native چیست را بررسی کنیم.الف- React Native چیست؟یک کتابخانه توسعه نرم افزاری موبایلی ترکیبی (Hybrid) است.اپلیکیشن‌های React Native با JSX و Javascript نوشته می‌شوند و به کد native کامپایل می‌شوند.اپلیکیشن‌های React Native شامل ۸۵ الی ۹۰ درصد کد مشترک JSX و Javascript هستند.ب- آنچه که React Native نیست؟الف- WebView نیست.ب- React نیست.ج- PWA نیست.ج- چرا باید React Native را انتخاب کنیم و یا یاد بگیریم؟پلتفرم‌های گوناگونی را با تلاش و کد یکسان پشتیبانی می‌کند. (iOS, Android, Web, TVOS)جامعه بزرگ و درحال رشدی دارد که پشتیبانی کافی برایتان فراهم می‌کند.قابلیت پشتیبانی از کد native را دارد که به این معنی است که شما می‌توانید کد native را برای use-case ها و ‌Business Logic برنامه تان تغییر دهید.نیاز به دانش Javascript دارد، Javascript زبانی پر طرفداریست که یادگیری آن همیشه به دردتان خواهد خورد.ویژگی جالبی دارد که به نام رفرش سریع یا ریلودینگ داغد- معایب React Nativeمعایبی نیز برای React Native وجود دارند، اما توسعه دهندگان این کتابخانه با توجه به رشد جامعه آن در تلاش برای بهبودش هستند:زمانی که کد برنامه بین پلتفرم‌های مختلف مشترک می‌شود، دانش توسعه native نیز گاهی نیاز است تا پروژه‌های پیشرفته React Native را انجام داد.علارغم این که بیشتر اپلیکیشن‌های React Native شبیه اپلیکیشن‌های native هستند، اما گاهی به نرمی و روانی آن‌ها اجرا نمی‌شوند.توسعه دهندگان React Native اتفاق نظر دارند که گزارش خطا به خوبی صورت نمی‌گیرد اما با گذر زمان با این مشکل کنار آمده‌اند.اولین اپلیکیشن React Native خود را بسازیدبیایید یک اپلیکیشن React Native بسازیم که لیستی از کشورها را نمایش دهد. اپلیکیشن شامل تنها یک صفحه است و ما میخواهیم عملکرد و طراحی ظاهر آن را به ساده‌ترین شکل ممکن انجام دهیم، چرا که هدف این آموزش، کمک به شما برای راه‌اندازی محیط React Native و لمس این زبان برنامه‌نویسی است. در آموزش React Native ما میخواهیم از Expo استفاده کنیم. Expo یک ابزار قوی برای تازه‌کاران در دنیای React Native است که امکان اجرا و مشاهده اپلیکیشن‌های React Native را برروی دستگاهتان به سادگی فراهم می‌کند.مرحله اول - نصب Expoمرجع رسمی how to install Expo مراحل نصب آن را توضیح داده است. هر زمان که Expo را نصب کردید، بازگردید و مراحل بعدی را دنبال کنید.مرحله دوم - ساخت اپلیکیشن React Nativeدستور زیر را در Terminal اجرا کنید:expo init firstappگزینه پروژه blank را انتخاب کنید.گزینه ِY را انتخاب کنید تا با yarn کار کنید.Yarn v1.19.2 found. Use Yarn to install dependencies? (Y/n)زمانی که Yes را کلیک کنید، Expo جادوی خود را انجام داده و تمام فایل‌های مورد نیازتان را می‌سازد. می‌توانید به ساختار فولدر ساخته شده نگاهی بیاندازید تا دریابید که پروژه قرار است چگونه کار کند.مرحله سوم - اولین اپلیکیشن React Native خود را اجرا کنیددستورات زیر را اجرا کنید تا پروژه تازه ساخته شده شروع به کار کند:cd firstappnpm run iosدر این لحظه اگر Expo به درستی در مراحل قبل تنظیم شده باشد، پروژه React Native شما باید با موفقیت اجرا شود و صفحه ای مانند اسکرین شات زیر به شما نمایش داده شود.این نمایی از اولین اپلیکیشن React Native شماست که با موفقیت ساخته‌اید. به صورت پیشفرض به شما می‌گوید که App.js را باز کنید تا بتوانید روی اپلیکیشن خود کار کنید. موافقم که بهترین خوش آمدگویی که Expo می‌توانسته پیشنهاد بدهد نیست اما ما به حرفش گوش می‌کنیم و آنچه که گفته را انجام می‌دهیم. بیایید فایل App.js را باز کنیم، که کد زیر در آن وجود دارد:قبل از ادامه توضیحی در رابطه با آنچه که در این فایل اتفاق می‌افتد، بدهیم:متغیرهای استایل شامل دیکشنری هایی ظاهری متفاوتی از کامپوننت‌ها هستند.تابع App یک کامپوننت عملگرای React Native است. به صورت پیشفرض آنچه که ما در حال حاضر می‌بینیم را روی صفحه رندر می‌کند. در بالا importها را می‌بینیم که کامپوننت‌های مورد نیاز را import می‌کنند.مرحله چهارم - اضافه کردن لیست کشورهامی‌خواهیم کمی پا را فراتر گذاشته و این صفحه بدردنخور را به صفحه دلخواهمان تغییر دهیم. همانطور که اشاره شد، قصد نمایش لیستی از کشورها را داریم، برای این منظور نیاز به پیاده سازی کد به شکل زیر است:همانطور که مشاهده می‌کنید ما App.js را به روز کردیم و موارد زیر را به آن اضافه نمودیم:یک Flatlist برای نمایش لیست کشورهایک dataset برای نمایش روی لیستهمچنین style را نیز به روز کردیم تا شامل style متن ما نیز شوداپلیکیشن‌تان را اگر هنوز اجرا نکرده‌اید، اجرا کنید و آنچه می‌بینید باید به شکل زیر باشد:حالا ما چیزی برای کار کردن داریم. اما داده‌هایمان استاتیک هستند و ما علاقه‌مندیم که یک لیست پویا و طولانی‌تر داشته‌باشیم، که قابلیت تغییر داشته و تغییرات را در صفحه برنامه خود ببینیم. پس ما نیاز داریم که UIای Reactive داشته باشیم تا بتوانیم مدل داده‌ایمان را تغییر دهیم. این اساس مفهوم React و ًReact Native است. پس ما نیاز به معرفی مفهوم state داریم.یک کامپوننت React Native داده را در درون state خود نگه می‌دارد و هر زمان که نیاز باشد آن را تغییر می‌دهد، UI نیز دوباره رندر شده و تغییرات را نشان می‌دهد. بیایید متغییر state اضافه کنیم و اسم آن را countriesData بگذاریم که لیست پویای کشورها را روی صفحه نمایش می‌دهد.const [countriesData, setCountriesData] = useState([])در React Native به این useState به اصطلاح hook گفته می شوند. بر اساس مقاله رسمی React در رابطه با hook: یک hook یک تابع مخصوص است که به شما اجازه‌ قلاب شدن به ویژگی‌های ‌React را می‌دهد.ما تازه یک state برای داده کشورها ساخته‌ایم که مقدار پیشفرض آرایه خالی دارد و یک تابع به نام setCountriesData برای بروزرسانی مقدار counriesData داریم. به عنوان مثال، صدا زدن تابع زیر مقدار countriesData را به مقدار ورودی تغییر خواهد داد.setCountriesData([1,2,3])یک hook مهم دیگه useEffect است که در تکه کد زیر پیاده‌سازی شده است. به آسانی هر کدی که داخل useEffect قرار بگیرد، زمانی که کامپوننت mount شود، اجرا خواهد شد.لطفاً از آنچه در حال رخ دادن است، نترسید. ما داریم از fetch API برای دریافت داده‌ی کشور‌ها از یک API استفاده می‌کنیم و لیستی از کشورهای آفریقایی را نمایش می‌دهیم. این Fetch API ابزاریست که به وسیله آن می‌توانید در React Native درخواست شبکه ایجاد کنید. همانطور که متوجه شدید، ما از یک آدرس API رایگان در وبسایت restcountries.eu استفاده کردیم که به ما یک آبجکت JSON برمی‌گرداند که در بند then متد واکشی پارس شده است. زمانی که عملیات پارس با موفقیت انجام شود، ما متغیر state کشورها را با لیست جدیدی از کشورها که به تازگی دریافت کرده‌ایم، بروزرسانی می‌کنیم. در نتیجه‌ی بروزرسانی آبجکت state، ظاهر UI نیز دوباره رندر شده و ما می‌توانیم کشورها را روی صفحه ببینیم.مرحله پنجم - به اولین اپلیکیشن React Native خود style بدهیدحالا می‌خواهیم روی طراحی اپلیکیشن تمرکز کنیم و تغییراتی را روی دیکشنری styles انجام دهیم.همانطور که مشاهده می‌کنید، رنگ پس‌زمینه را با تغییر صفت backgroundColor به کد hex #483d8b به بنفش تغییر دادیم.قواعد بسیار شبیه CSS است، با اندکی تفاوت. اما ایده اصلی یکسان است، پس اگر CSS را بلد باشید به راحتی می‌توانید به اپلیکیشن React Native خود را استایل دهید. همچنین اگر با flexbox layout آشنایی داشته باشید که چه بهتر.نتیجه‌گیریما بزرگترین نقاط قوت استفاده از React Native را برای فرایند توسعه نرم‌افزار موبایلی مشاهده کردیم و دیدیم که ساخت اپلیکیشن برای اندروید و iOS چه ساده است.ما Expo را که یک ابزار اعجاب‌انگیز برای تازه‌کارهای React Native است را راه اندازی کردیم و از آن برای ساخت اولین پروژه React Native خود استفاده کردیم.پس از آن در رابطه با کامپوننت‌های عملگرا، hook و state آموختیم. از Fetch API برای دریافت داده از طریق درخواست شبکه استفاده کردیم و کامپوننت‌های ظاهری را با تغییر در stylesheet طراحی کردیم.تبریک می‌گویم! شما ازین پس قادرید که اپلیکیشن React Native بسازید. حالا زمان آن است که کامپوننت‌های پیشرفته‌تر را نیز فرا بگیرید تا بتوانید یک اپلیکیشن با عملکردهای پیچیده‌تر بسازید که بتوانید آن را در App Store و Google Play Store منتشر کنید. لیستی از بهترین منابع React Native را بررسی کنید تا درباره آن بیشتر بدانید و بتوانید به مراحل بعدی بروید.مراحل بعدیحالا که شما در رابطه با بهترین ابزارهای توسعه React Native دانش خوبی کسب کرده‌اید، بهتر است که به موضوعات زیر نیز نگاهی بیاندازید: Firebase — Push notifications | Firebase storageHow To in React Native — WebView | Gradient| Camera| Adding GIF| Google Maps | Redux | Debugging |Hooks| Dark mode | Deep-link | GraphQL | AsyncStorage | Offline | Chart | Walkthrough | Geolocation| Tinder swipe | App icon | REST API Payments — Apple Pay | StripeAuthentication — Google Login| Facebook login | Phone Auth |Best Resource – App idea | Podcasts | Newsletters | App templatesاگر شما به یک پایه برای شروع اپلیکیشن ‌React Native خود نیاز دارید، می‌توانید با کمک گرفتن از قالب‌های React Native آماده، کار خود را چندین ماه به جلو بیاندازید.منبع مقاله: https://www.instamobile.io

آموزش طراحی سایت-آرایه ها در جاوا اسکریپت

برلیانس — Tue, 10 Nov 2020 12:06:46 +0330

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

با شناسه "demo"نمایش می دهیم.همان طور که در مثال زیر مشاهده می کنید، اولین خط ، آرایه ای به نام cars ایجاد می کند.دومین خط المانی که شناسه ی آن "demo"می باشد را یافته سپس آرایه را در "innerHTML" آن المان نمایش می دهد. https://www.aparat.com/v/4vgzF مثال:نمونه یک

Saab,Volvo,BMW

سه الگوی پر کاربرد در ReactJS

بهنام عظیمی — Sun, 08 Nov 2020 14:24:04 +0330

سلام دوستاندر این نوشته اشاره ای می کنم به سه تا الگوی پرکاربرد در ReacJS. به احتمال زیاد این الگوها رو هنگام استفاده از کتابخانه ها و یا در نمونه کدهای مختلف دیدین و تجربه ی استفاده هم داشتید. در اینجا هم میخوام باهم نگاهی به پشت پرده این الگو ها بندازیم و ببینیم چطور پیاده سازی میشن و دقیقا چه مزایایی برای ما دارن.سه الگوی پرکاربرد در reactjsالگوی Function as Child (تابع به عنوان فرزند)در این الگو در واقع React به ما اجازه میده که یک تابع را به عنوان فرزند به کامپوننت بفرستیم.? پارانتز باز:فرزند یا فرزندان داخل یک کامپوننت در اجرای کلاس یا تابع کامپوننت تحت عنوان یک prop به نام children به کامپوننت ارسال میشه.پارانتز بسته!الگوی نمونه رو در کد زیر مشاهده میکنید: https://gist.github.com/behnamazimi/e9534782ef5a805f130c5b52d95d6d17 در کارکرد استاندارد در واقع ما با ارسال تابع فرزند انتظار داریم که اون تابع به عنوان متد رندر کامپوننت عمل کنه. الان باید ببینیم که داخل کامپوننت Calculator چه اتفاقی باید بیفته تا چیزی که انتظار داریم انجام بشه. https://gist.github.com/behnamazimi/ad79e92751aa422f9df55eb79efd5e04 همونطور که میبینید، کامپوننت MyComponent به عنوان مقدار برگشتی، نتیجه ی اجرای پراپرتی children رو برمیگردونه. یعنی در واقع متدی که به عنوان فرزند بهش پاس دادیم (که چون متد هست پس قابل فراخوانی هم هست) رو اجرا میکنه و نتیجه ی اجرای اون تابع به عنوان مقدار برگشتی MyComponent رندر میشه.این الگو کاربردهای زیادی داره. مثلا وقتی بخواید روی پراپرتی های یک کامپوننت محاسباتی انجام بدید و یا وقتی بخواید مقادیر async رو کنترل کنید میتونید از این الگو استفاده کنید.در مثال پایین از این الگو استفاده کردم تا یک کامپوننت کنترل انیمیشن خیلی ساده درست کنم. کامپوننتی به اسم TranslateX که قرار هست المان های زیرش رو به صورت افقی از یک نقطه به نقطه ی دیگه جابجا کنه. https://gist.github.com/behnamazimi/fe445586b8261b0dd880756d90c5d988 https://codesandbox.io/s/blissful-bell-lm5td نکته ای که باید بهش توجه کنید اینه که تابعی که به عنوان فرزند به یک کامپوننت پاس میدیم، یک تابع ساده است و نمیتونه نقش یک Functional Component رو برامون بازی کنه. یعنی در واقع react در هر بار رندر کامپوننت به جای اینکه کامپوننت (های) فرزند رو صدا بزنه و رندر کنه، یک تابع معمولی رو دوباره فراخوانی میکنه. در نتیجه در داخل Child Function نمیشه از hook ها و متد های Lifecycle استفاده کرد.الگوی HOC یعنی Higher-order componentsالگویی کاربردی دیگه ای که قراره بررسی کنیم HOC هست. به احتمال زیاد این الگو رو بارها در کدهای react دیدین. https://gist.github.com/behnamazimi/db6f49f993e6d2d1c41b28d6bf9e97c8https://gist.github.com/behnamazimi/9f8c91e2ab168dea77711961b250fbfb ? پارانتز باز:در برنامه نویسی یک تعریف داریم به اسم تابع بالا مرتبه و یا higher-order function. برای اینکه بتونیم بگیم یک تابع HO هست یا نه حداقل باید یکی از شرایط زیر در موردش صادق باشه:یک یا چند تابع دیگه رو به عنوان ورودی (argument) بگیرهنتیجه ای که برمیگردونه یک تایع باشهپارانتز بسته!با استناد به پارانتزی که بالا باز کردم و همینطور با توجه به اینکه میدونیم هر کامپوننت react هم در واقع یک function هست پس دور از انتظار نیست که یک Component داشته باشیم که تابع یا توابعی رو به عنوان پراپرتی بگیره ویا یک تابع رو به عنوان خروجی برگردونه. در react به کامپوننتی که حداقل یکی از ورودی هاش و خروجیش کامپوننت باشه میگیم Higher-order Component.در یک توضیح کامل تر، HOC کامپوننتی هست که به عنوان یک لایه برای کامپوننت ورودی (کامپوننتی که به عنوان پارامتر به تابع فرستاده میشه) عمل میکنه. یعنی کامپوننت رو میگیره و بعد از انجام یک سری عملیات یک کامپوننت دیگه رو به عنوان خروجی برگشت میده. https://gist.github.com/behnamazimi/db6f49f993e6d2d1c41b28d6bf9e97c8 زمانی که بخوایم عملیات مشترکی روی کامپوننت ها انجام بدیم اون عملیات رو در قالب یک HOC پیاده سازی میکنیم و در مواقع نیاز HOC رو همراه با کامپوننت هدف صدا میزنیم. مثلا در مثال withSomething من خواستم که پراپرتی something رو به کامپوننت هام اضافه کنم. پس MyComponent رو به تابع withSomething پاس دادم و اون هم بعد از اضافه کردن پراپرتی مورد نظر به کامپوننت من، در خروجی یک کامپوننت جدید برام برگشت داده.الگوی Sub Components ویا Dot notation components https://gist.github.com/behnamazimi/5fe5f2d5d8700cb3c644c95edeaecb1a تا حالا با کامپوننت های آماده ای کار کردید که sub-component هم داشته باشن؟ در واقع اکثر کتابخانه های UI از این ویژگی استفاده میکنند. یعنی یک کامپوننت که چند کامپوننت دیگه رو به عنوان زیرمجموعه اش داره.میشه گفت رابطه ی این زیر کامپوننت ها با والدشون دقیقا به اندازه یک نقطه است.? پارانتز باز:برای درک این الگو نیازه که با مفهوم پراپرتی ها و متدهای static در جاوا اسکریپت آشنا باشید. توضیح این مفهوم در یک پارانتز کوچک جا نمیشه برای همین مطالعه اش به عهده خودتون.پارانتز بسته!برای پیاده سازی این الگو روش های مختلفی وجود داره که من در زیر چند موردش رو مثال زدم https://gist.github.com/behnamazimi/7f5ec9eb31ab71ee1bc59e0cb143462c معمولا برای دسته بندی کامپوننت ها تحت یک اسم و بالا بردن خوانایی کد و دسترسی سریع به کامپوننت ها از این الگو استفاده میکنیم.امیدوارم این مطلب براتون مفید واقع بشه. نظراتتون خوشحالم میکنه. :)در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.چینش خاص عناصر در HTML اصلا سخت نیستمحیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSبررسی iterable و iterator در جاوا اسکریپتسایه رنگی با کمی خلاقیت - سری نوت های CSS منمربع بدون ارتفاع - سری نوت های CSS منبرای مطالعه نوشته هام منو در توییتر دنبال کنید.

چک کردن وضعیت اینترنت کاربر در جاوا اسکریپت

فرید ذوالقدر — Sat, 07 Nov 2020 10:38:23 +0330

توی این مقاله قصد دارم درباره نحوه چک کردن لحظه ای وصل بودن یا نبودن کاربر به اینترنت تو زمانی که وارد سایت ما شده با هم مرور کنیم.خیلی وقتا پیش اومده،کاربر به سایت ما اومده و اینترنتش یه دفعه قطع شده، این وسط کاربر متوجه نشده و request خودش به سایت ما تحویل داده! کاربر از همه جا بی خبر هم فکر میکنه سایت ما مشکل داره :)) این وسط وظیفه برنامه نویس هستش تا با چک کردن وضعیت اینترنت کاربرش بهش پیام بده که " اینترنت شما قطع می باشد ... ". توی این مقاله تلاش میکنم با چند تا کد ساده این قضیه تو جاوا اسکریپت حل کنم.اول از همه سراغ کدهای جاوا اسکریپت میرمwindow.addEventListener('load', () => { if (navigator.onLine) { showOnlineStatus(true); } window.addEventListener('online', () => { showOnlineStatus(true); window.addEventListener('offline', () => { showOnlineStatus(false); }); });همین جوری که توی کد بالا می بینید من اومدم به کمک addEventListener و همینطور دستور navigator وضعیت onLine بودن یا offline سیستم کاربر چک میکنم. بعد در صورت وصل بودن یا نبودنش یه متد که نوشته شده به نام showOnlineStatus با یه مقدار boolean صدا میزنم قرار بیاد یه پیامی به کاربر نشون بده.به همین سادگی با چند خط کد توی جاوا اسکریپت اومدیم و قطع و وصل بدن اینترنت به کاربرمون اطلاع دادیم.اینم نمونه کامل این کد: hi

Oops, the internet went out.

How would you tell your user their internet connection is down but your site is working fine?

Try switching off your wifi or mobile internet to see a No network connection message.

ساخت یک سیستم اطلاع رسانی درون سازمانی قسمت دوم

دکتر فلفل — Fri, 06 Nov 2020 14:15:21 +0330

در قسمت قبلی در مورد ساختار کلی پروژه و فایل permission توضیح دادیم در این قسمت قرار است فایل .env را ایجاد کرده و اطلاعاتی را که از هنگام ساخت اکانت رای کانکت دریافت کرده ایم درون آن قرار دهیم برای ساخت اکانت موقتی رای کانکت میتونید به این صفحه برید و یک اکانت رای کانکت برای خودتون دریافت کنید.کار با این صفحه خیلی سادس اسم اپتون رو انتخاب کنید و شماره موبایلتون رو وارد کنید / بعد از تایید کردن موبایلتون براتون username/password اپتون ارسال میشهاین یوزر نیم و پسورد رو در یک جای امن ذخیره کنید چون دیگه بهتون نمایش داده نمیشهمن اطلاعاتی که دریافت کردم رو درون فایل .env که خودم ایجادش کردم قرار دادم به شکل زیر مقدار APP_ID در واقع همان نام اپی است که هنگام ثبت نام مشخص کرده اید و مقدار SCOPES باید توسط برنامه نویس تعریف گردد من messages و places رو تعریف کردم هر اسکوپ رو باید با , از هم جدا کنیمخب حالا بریم سراغ فایل server.jsمن به کلیت این فایل زیاد کاری ندارم فقط اخر این فایل برامون مهمه در اخر این فایل یک کوئری به صورت پیش فرض تعریف شده است بهتر است در مورد هر کوئٰری توضیحاتی بهتون بدمدر تصویر زیر ساختار یک کوئری رو از لحاظ سینتکسی توضیح دادم و در قسمت قبلی هم به صورت کامل توضیح داده ام در متغیر data درون کالبک این کوئری اطلاعات جالبی وجود دارد که در عکس زیر توضیح داده امهر کاربر بعد از لاگین کردن در رای کانکت (مهم نیست که به چه روشی لاگین میکند) و حتی اگر مهمان باشد یک token دارد توکن کاربر یک شناسه معادل با کانکشن کاربر است که مشخص میکند کاربر دقیقا با چه دیوایسی به سیستم لاگین کرده است همچنین شما میتوانید از طریق توکن به کاربر پیامی را ارسال کنید و یا اگر کاربر یک query را پابلیک کرده باشد آن را صدا بزنید (بله درست فهمیدید هم کاربران و هم سرویس ها میتوانند یک کوئری را پابلیک کنند)من در این پروژه میخوام توکن ها رو بعد از صدا زده شدن یک کوئری اگه از قبل ثبت نشده بودن در یک جایی ثبت کنماما این ساختار برای نوشتن کوئری ها یکم کد رو زشت میکنه پس من میخوام کوئٰری ها رو از انتهای فایل server.js به یک فایل جدید به نام query.js انتقال بدم پس اون کوئری رو از انتهای فایل server.js پاک میکنم و جاش اینو میزارم require("./query")(miapp);حالا بریم سراغ فایل query.jsخب حله حالا کوئری رو داریم که دیتارو لاگ میکنه اما من میخوام توکن ها رو اگه قبلا ثبت نشده بودن یک جا ثبت کنم تا بتونیم به همه توکن هایی که در واقع subscribe کردند یک پیام ارسال کنیمما تا اینجای آموزش نمیخوایم از دیتابیس استفاده کنیم پس میخوایم token ها رو داخل یک ارایه ذخیره کنیم برای اینکار من میخوام یک class بسازم و داخل اون کلاس یک سری متد درست کنیم من داخل این کلاسم یک Set تعریف کردم مزیت Set این هست که مقادیرش unique هست و شما وقتی مقادری رو توش add میکنید یک بار بیشتر add نمیشه :)دوتا فانکشن Add و Next هم داخل این کلاسم رو یکی برای اد کردن مقدار جدید و دیگری رو برای پیدا کردن تک تک مقادیر این ست ازش استفاده کردمکلاسم رو در زیر میبینید : کلاس subscribe کلاسم رو داخل یک فایل به نام subs.js ذخیره کردم :) حالا تغییراتم در فایل query.js رو ببینید خط اول رو که به این فایل جهت صدا زدن کلاسم اضافه کردم و بقیشو در عکس توضیح دادمالان هر ریکوئستی که به این مسیر بیاد رو ما token اش رو به set امون اضافه میکنیمخب حالا من میخوام یک کوئری دیگه هم تعریف کنم که در صورت صدا زده شدن بتونیم باهاش یک پیامیو به همه بفرستیم من بعد از همون query در فایل query.js یک کوئری جدید به شکل زیر اضافه میکنم الان در صورت صدا زده شدن این مسیر پیام مورد نظرمون به همه کاربر ها ارسال خواهد شدبهتره کمی در مورد ساختار متد execQuery توضیح بدم متد execQuery برای صدا کردن یک کوئری استفاده میگردد / البته در حالت execQuery معمولا انتظار پاسخی از کوئری مربوطه نداریم در مثال بالا ما uniqueID را برابر * قرار داده که به معنای همه کاربران میباشد اما چون tokenID برابر یک توکن قرار داده شده است دیتا دقیقا به همان توکن ارسال میگردد بقیه موارد نیز در عکس زیر توضیح داده شده استتوضیحات کلی از متد execQueryساختار فایل query.js بعد از تغییراتمون به این شکل در اومده :در ادامه کار قراره فرانت اندمون رو با electron.js ایجاد کنیم تا بر روی سیستم های کاربرانمون نصب بشه و یک چیزیو بهشون نشون بده :) به محض اماده شدن قسمت بعدی لینکشون در همینجا براتون میزارم قسمت سوم اماده شد

آموزش ساخت یک سرویس اطلاع رسانی درون سازمانی (قسمت اول)

دکتر فلفل — Fri, 06 Nov 2020 00:10:05 +0330

قراره چی کار کنیم ؟قراره یک سیستم اطلاع رسانی درون شرکتی / سازمانی بسازیم تا بر روی همه کامپیوتر های یک شرکت که به اینترنت وصل هستند و نرم افزار ما رو نصب دارند بتونیم یک پیغامی رو نشون بدیم ? ، یک سیستم خیلی ساده که با استفاده از رای کانکت ایجادش میکنیمموارد مورد نیاز :اکانت موقتی رای کانکت (صرفا برای آموزش)یک سرور مجازی – یا اکانت فندق (نسخه رایگانش هم جواب میده)یک ادیتور برای کد نویسی مثلا (vscode)نصب بودن nodejs در سیستمتونتلگرام (ربات تلگرام)رای کانکت چی هست ؟ رای کانکت یک فریم ورک ابری یا cloud framework هست، رای کانکت کلی تابع آماده در اختیارتون قرار داده که به وسیله اون توابع میتونید به سادگی اپتون رو توسعه بدید بدون اینکه نیاز به نوشتند خیلی چیز ها از قبل داشته باشیددر رای کانکت، نیاز نیست که نگران خیلی از چیزا باشید سیستم مدیریت کاربران - کنترل دسترسی - ارسال پیام کوتاه - ورود با تلفن همراه - اپلود - پیام رسانی بلادرنگ - کوئری سرویس - مینی دیتابیس و هزار و یک چیز به صورت آماده در رای کانکت وجود داره که شما میتونید ازش به سادگی استفاده کنید ساخت اکانت موقتی رای کانکتقبل از هر کاری باید یک اکانت رای کانکت بسازیم / رای کانکت فعلا در فاز تست و توسعه قرار داره پس باید از سرور های موقتی رای کانکت اقدام به ایجاد یک اپ رای کانکتی کنیم / این زیر یک سرور رای کانکت گذاشتم که میتونید برای ساخت اپ رای کانکت بهش مراجعه کنیدبرای ساخت اکانت موقتی رای کانکت میتونید به این صفحه برید و یک اکانت رای کانکت برای خودتون دریافت کنید.کار با این صفحه خیلی سادس اسم اپتون رو انتخاب کنید و شماره موبایلتون رو وارد کنید / بعد از تایید کردن موبایلتون براتون username/password اپتون ارسال میشهاین یوزر نیم و پسورد رو در یک جای امن ذخیره کنید چون دیگه بهتون نمایش داده نمیشه ?راه اندازی یک پروژه از نوع rayconnectاول باید nodejs رو نصب کنیم :برای نصب، فرقی نمی‌کند سیستم‌‌عامل شما Windows ،Linux یا macOS باشد، تنها به NodeJS و npm نیاز دارید. برای دانلود و نصب NodeJS می‌توانید از لینک مقابل استفاده کنید: وب‌سایت رسمی NodeJSبعدش باید git رو نصب کنیم : راهنمای کامل نصب گیت در سیستم عامل های مختلف رو میتونید از اینجا بخونید خوب حالا که جفتشون رو نصب کردیم باید بویلر پلیت رای کانکت رو کلون کنیم تا بتونیم بر اساسش کارمون رو توسعه بدیممن یک نسخه خیلی ساده از رای کانکت بویلر پلیت رو اینجا قرار دادم که میتونید کلونش کنید https://github.com/mrfelfel/rayconnect-boilerplate بعد از کلون کردنش با ساختار پوشه ایش روبه رو میشیم که این شکلیه ├── package.json ├── package-lock.json ├── README.md ├── server │ ├── permissions.js │ └── server.js └── start.jsکد های اساسی برنامه در پوشه server هست و ما باید در پوشه سرور کد هامون رو بنویسیم این پوشه از دو فایل اساسی تشکیل شده فایل اول با نام permissions و فایل دوم با نام server برنامه های رای کانکتی در تابع های کوچک که به query معروف هستند نوشته میشوددر رای کانکت هر تابع (عملکرد) از برنامه با سه مشخصه زیر از یک دیگر جدا میگردد اسکوپ یا scope محدوده ای که تابع در آن فعالیت میکند را مشخص میکند برای مثال users اشاره به محدوده کاربران و یا books اشاره به محدوده کتاب ها دارد (نام گذاری اسکوپ ها به عهده برنامه نویس میباشد)آدرس یا address مسیر دقیق فعالیت تابع را مشخص میکند برای مثال users/library/signup آدرس تابع ثبت نام کاربر در کتابخانه و books/list آدرس تابعی است که لیست کتاب ها را به خروجی بر میگرداندمتد یا method نحوه تعامل با تابع را مشخص میکند برای مثال LIST / POST / GET و هر نام دیگری نام گذاری این مقادیر کاملا اختیاری و بر عهده برنامه نویس میباشد (فقط نکته قابل توجه این است که نباید شامل فاصله یا حروف غیر انگلیسی باشد ) همچنین نباید با اعداد یا کلمات رزرو شده تمام شود (back - end - loop) از کلمات رزرو شده ی سیستم میباشدرای کانکت به صورت دیفالت استفاده از permission را اجباری کرده است یعنی شما باید به عنوان برنامه نویس مشخص کنید که کاربران و مهمان ها به چه توابعی دسترسی دارند که این امر به سادگی در فایل permissions قابل انجام استبر اساس توضیحات بالا کد زیر ارایه ای از دسترسی ها میباشد که توضیح خواهم داد :ارایه دسترسی های رای کانکتکد بالا ارایه ای از دسترسی های رای کانکت میباشدکلید mode که در حالت add قرار دارد به معنای این است که این دسترسی قرار است به سیستم اضافه شودکلید uid اشاره به کاربری دارد که این دسترسی را دریافت میکند که میتواند یک نام کاربری - علامت * به معنای همه کاربران و یا guest به معنای کاربران مهمان باشد که در این حالت اشاره به کاربران مهمان دارددر خط بعد address قرار دارد که در بالا توضیح داده شد به این معنا که کاربران مهمان به تابعی به این ادرس دسترسی دارند در خط بعد متدی که کاربر به آن دسترسی دارد و در خط بعد scope قرار دارد این دسترسی دقیق ترین نوع دسترسی برای اشاره به یک فانکشن مخصوص با همه ویژگی های آن است که آدرس دقیق یک فانکشن را شامل آدرس - متد و اسکوپ آن اعلام کرده استتوجه کنید که فیلد ها به یک دیگر وابستگی به معنایی دارند و اسکوپ و متد نسبت به ادرس تعریف میشودبقیه ماجرا رو در قسمت دوم که لینکش رو به محض انتشار در همینجا قرار خواهم داد بخونید :)لینک قسمت دوم