https://virgool.io/feed/@alirezag برنامه نویس وب ، کارشناس مهندسی کامپیوتر و همیشه در حال یادگیری ... fa 2026-06-16 17:38:52 https://files.virgool.io/upload/users/1738932/avatar/YDorCR.jpeg?height=120&width=120 https://virgool.io/@alirezag https://virgool.io/@alirezag/%DA%86%DB%8C%D8%AF%D9%85%D8%A7%D9%86-%D8%B5%D9%81%D8%AD%D8%A7%D8%AA-%D9%88%D8%A8-%D8%A8%D8%A7-%D9%81%D9%84%DA%A9%D8%B3-%D8%A8%D8%A7%DA%A9%D8%B3flexbox-elcs3rwhqity فلکس باکسفلکس باکس Flex Box چیه؟فلکس باکس هم یکی از ماژول های قدرتمند سی اس اس برای چیدمان بهتر المان ها در صفحات وب استدر این ماژول عکس آنچه در سی اس اس گرید دیدیم المان فقط در یک محور تراز بندی می شوند به صورت سطری یا ستونیهمچنین برای ریسپانسیو سازی صفحات وب به ما کمک میکند.اگه با مفاهیم واکنش گرایی صفحات وب آشنا نیستی توی پست زیر توضیح دادم. https://vrgl.ir/lpiuI با من همراه باشید تا بیشتر با فلکس باکس آشنا بشیدمفاهیم فلکس باکسنگه دارنده فلکس Flex Containerتگ والدی که برای آن display : flex تعریف می کنیم و تگ های فرزند مستقیم آن فقط به صورت سطری یا ستونی ترازبندی می شوندContainerflex containerآیتم ها Flex Itemsتگ هایی که درون تگ نگه دارنده قرار می گیرند و فرزند مستقیم آن هستند ترازبندی روی آن ها اعمال می شودItemsویژگی های نگه دارنده Container Propertiesاین ویژگی فقط برای Container قابل استفاده هستند دقت کنید برای Items استفاده نکنید!flex-directionهمانطور که قبل تر گفتیم فلکس باکس فقط و فقط در یک محور اعمال می شود اینکه این محور به صورت سطری یا ستونی باشد توسط این ویژگی مشخص می شود دارای دو مقدار سطری row و ستونی column و دو مقدار دیگر که با پسوند reverse هستند همین مقادیر را در محور سطری یا ستونی به صورت عکس اعمال می کنندflex-directionflex-wrapبه صورت پیش فرض آیتم های ما که درون نگه دارنده قرار دارند یک ردیف را تشکیل می دهند و مقدار این ویژگی no-wrap است حال زمانی که بخواهیم با کمتر شدن عرض نگه دارند از عرض یک ردیف آیتم چند ردیف زیر یکدیگر تشکیل بدهیم باید از مقدار wrap برای این ویژگی استفاده کنیم. زمانی که می خواهیم با کوچک تر شدن صفحه وب آیتم ها زیر هم قرار بگیرند تا یک صفحه وب واکنش گرا داشته باشیم کاربردی می باشد.flex-wrapjustify-contentاین ویژگی آیتم ها را درون نگه دارنده در جهت محور اصلی با توجه به فضای خالی که بین آیتم های درون نگه دارنده وجود دارد ترازبندی می کندمحور اصلی ما به ویژگی flex-direction بستگی دارد اگر جهت محور ما ستونی column باشد ویژگی justify در جهت عمودی و اگر سطری row باشد در جهت افقی اعمال می شودمقادیری که برای تراز بندی در این ویژگی وجود دارد به شکل زیر می باشدjustify-contentalign-itemsاین ویژگی آیتم ها را درون نگه دارنده در عکس جهت اصلی ما ترازبندی می کندکمی قبل تر گفتیم محور اصلی توسط ویژگی flex-direction تعریف می شود حال اگر محور اصلی ما سطری باشد این ویژگی ترازبندی آیتم ها را در جهت عکس محور یا همان عمودی و اگر ستونی باشد در جهت عکس محور یا افقی ترازبندی می کند.مقادیر این ویژگی برای تراز بندی به شکل زیر می باشند.align-itemsalign-contentاین ویژگی فقط زمانی اجرا می شود که ویژگی flex-wrap : wrap را برای نگه دارنده خود تعریف کرده باشیم.در جهت عکس محور اصلی اعمال می شود و زمانی که چند ردیف تشکیل می شود آیتم ها را بین فضای خالی که در نگه دارنده وجود دارد ترازبندی می کند.align-contentویژگی های آیتم ها Item Propertiesاین ویژگی فقط برای Item قابل استفاده هستند دقت کنید برای Container استفاده نکنید!orderتگ های ما درون کد HTML با ترتیب بندی خاص خود وجود دارند این ویژگی زمانی که به یک آیتم داده می شود میتواند ترتیبی مجدد و مقدم بر کدهای HTML تعریف کندبه صورت پیش فرض مقدار این ویژگی برای تمام آیتم ها 0 صفر می باشد پس اگر به یک آیتم مقدار 1 یک بدهید به عنوان آخرین آیتم ما قرار می گیرد زمانیکه این ویژگی برای دو آیتم یکسان می باشد تقدم با توجه به کد های HTML مشخص می شودorderflex-growflex-shrinkویژگی grow مشخص می کند که آیتم های ما با نسبتی مشخص (طبق یک فرمول پیچیده محاسبه میشه) تا حدی که می توانند بزرگ شوند تا عرض نگه دارنده را پر کنند.مقدار پیش فرض آن صفر می باشدویژگی shrink مشخص می کند تا با کوچک شدن عرض نگه دارنده زمانی که نیاز است عرض آیتم ها با یک نسبت مشخص کوچک شود تا از نگه دارنده بیرون نزنند.اگر به یک آیتم مقدار بیشتری از این ویژگی ها بدهیم نسبت به بقیه آیتم ها به مقدار بیشتری بزرگ یا کوچک می شوند.shrink & growalign-selfاین ویژگی را قبل تر توضیح دادیم دقیقا کار align-items را می کند با این تفاوت که به جای همه آیتم ها فقط روی یک آیتم اعمال می شودalign-selfاگه علاقه دارید با فلکس باکس یکم بازی کنید تا بهتر مسلط بشید به وب سایت زیر سر بزنید :) https://flexboxfroggy.com/ اگه علاقه داری با گرید هم آشنا بشی توی پست زیر توضیح دادم https://vrgl.ir/g9EpK منابعA Complete Guide to Flexbox علیرضا علیرضا Tue, 16 Aug 2022 04:26:46 +0430 https://virgool.io/@alirezag/%D8%B3%DB%8C-%D8%A7%D8%B3-%D8%A7%D8%B3-%DA%AF%D8%B1%DB%8C%D8%AF%D9%84%D8%A7%DB%8C%D9%87-%D8%A8%D9%86%D8%AF%DB%8C-%D8%AF%D9%88-%D8%A8%D8%B9%D8%AF%DB%8C-t29o7fbplihu سی اس اس گریدسی اس اس گرید CSS Grid چیه ؟یک ماژول قدرتمند سی اس اس می باشد که از سال 2017 توسط همه ی مرورگرهای وب پشتیبانی می شود.سی اس اس گرید برای حل مشکل چیدمان صفحات وب طراحی شده است که به صورت دو بعدی اعمال می شود.اما فلکس باکس که از دیگر ماژول های سی اس اس است فقط در یک جهت اعمال می شود.همچنین برای ریسپانسیو سازی صفحات وب به ما کمک میکند.اگه با مفاهیم واکنش گرایی صفحات وب آشنا نیستی توی پست زیر توضیح دادم https://vrgl.ir/lpiuI برای اینکه بهتر درک کنید که گرید چیه باید شیرجه بزنیم توی کد و حسابی گریدی بشیم :) پس با من همراه باشید.flexbox vs gridواژه شناسی سی اس اس گریدGrid Container و Grid Itemcontainer & itemsتگ والدی که display : grid برای آن تعریف می شود نگه دارنده یا Container می باشد ویژگی های گرید فقط به فرزندان مستقیم این تگ اعمال می شود که این فرزندان همان Item های ما هستند.Grid Linegrid-line خط های که ستون ها و ردیف های ما را از هم جدا می کنند خط گرید یا Grid Line نامیده می شوندکه به صورت زیر شماره گذاری می شوند.در گرید ستون های ما با column و سطر های ما row مشخص می شوند.شماره گذاری سطر و ستون هاGrid Cellgrid cellفاصله بین دو Grid Line ستونی و دو Grid Line سطری که مجاور یکدیگر هستند سلول گرید گفته می شود.Grid Tracktrackفاصله بین دو Grid Line سطری یا ستونی که مجاور یکدیگر هستند یک Track نامیده می شود.ویژگی های CSS Gridویژگی ها یا Property های که در CSS Grid وجود دارند به دو دسته Container Properties و Item Properties تقسیم می شوند ویژگی های که مربوط به تگ والد یا نگه دارنده هستند و ویژگی هایی که مربوط به تگ های فرزند یا آیتم ها هستند.grid propertiesویژگی های نگه دارنده Container Propertyاین ویژگی فقط برای Container قابل استفاده هستند دقت کنید برای Items استفاده نکنید!grid-template-rowsgrid-template-columnstemplateویژگی template برای ایجاد قالب برای چیدمان گرید هستند با همین سه خط یک چیدمان شامل سه سطر و سه ستون تعریف میکنیم.تشکیل گریدtemplate gridgrid-gapgrid-row-gapgrid-column-gapgrid-gapفاصله بین سطرها با grid-row-gap و فاصله بین ستون ها grid-column-gap و فاصله بین هر دو با grid-gap مشخص می شود.grid gapgapjustify-itemsalign-itemsآیتم ها را در محدوده بین خط گریدی که برای آن ها مشخص شده تراز بندی می کند به صورت پیش فرض مقدارشان Stretch می باشد برای تراز بندی به صورت طولی از justify-items و به صورت عرضی از align-items استفاده می شود.و سه مقدار دیگر نیز دارد ابتدا یا start و انتها یا end و وسط چین یا centeralign & justify itemsjustify-contentalign-contentبه همان صورت که کمی قبل تر استفاده کردیم justify به صورت طولی و align به صورت عرضی اعمال می شود با این تفاوت که این بار ترازبندی در محدوده نگه دارنده یا Container انجام می گیرد همان طور که از اسمش هم پیداست content نشانگر این می باشد که تراز بندی روی خود تگ والد نگه دارنده انجام می گیرد نه آیتم ها که در قبل بررسی کردیم.مقادیر این ویژگی ها به صورت زیر می باشند.justify-contentalign-contentgrid-auto-flowgrid-auto-columnsgrid-auto-rowsجریان تشکیل سطر یا ستونی جدید را با grid-auto-flow تعریف می کنیم که به صورت پیش فرض مقدار row می باشد اگر آن را به column تغییر دهیم زمانی که آیتم در کنار هم یکدیگر جای نگیرند به جای اینکه سطری جدید تشکیل دهد ستونی جدید را برای ما تشکیل می دهد.همچنین این ستون یا سطر های جدید که تشکیل شده اند امکان دارد به آن ها اندازه مشخص نداده باشیم در این صورت با grid-auto-rows یا grid-auto-columns اندازه هر آیتم در سطر یا ستون جدید به صورت پیش فرض مشخص می کنیم.ویژگی های آیتم ها Item Propertiesاین ویژگی فقط برای Item قابل استفاده هستند دقت کنید برای Container استفاده نکنید!grid-row : start / endgrid-column : start / endاین دو ویژگی جایگاه قرارگیری آیتم های ما بین خط های گرید را مشخص می کنند می توانیم با grid-row به صورت سطری و با grid-column به صورت ستونی آیتم خود را جا به جا کنیم یا حتی تعداد بیشتری از سلول های گرید خود را به یک آیتم تخصیص بدهیمrow & columnjustify-selfalign-selfاین دو ویژگی را در قسمت ویژگی های نگه دارنده توضیح دادیم اگه یادتون بیاد align-items و justify-items که تراز بندی یک آیتم درون سلول گرید خودش رو مشخص می کردند این ها هم دقیقا همون کار را می کنند و همان مقادیر را دارند با این تفاوت که فقط روی یک آیتم اعمال می شوندalign / justify selfاگه علاقه دارید با گرید یکم بازی کنید تا بهتر مسلط بشید به وب سایت زیر سر بزنید :) https://cssgridgarden.com/ اگه علاقه داری با فلکس باکس هم آشنا بشی توی پست زیر توضیح دادم https://vrgl.ir/fWWBK منابعCSS Tricks : A Complete Guide to Grid علیرضا علیرضا Sun, 14 Aug 2022 18:25:06 +0430 https://virgool.io/@alirezag/%D9%85%D9%81%D8%A7%D9%87%DB%8C%D9%85-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7-%DB%8C%D8%A7-responsive-design-ze8kr4izyevg ریسپانسیو طراحی واکنش گرا چیه؟با رشد روز افزون استفاده از دستگاه های مختلف (مانند موبایل،تبلت و . . .) توسط کاربران برای بازدید از صفحات وب مفهومی به اسم واکنش گرایی یا Responsive بوجود آمد.طراحی واکنش گرا باعث می شود تا صفحات وب ما منعطف باشد و در دستگاه های مختلف به درستی و بدون بر هم ریختگی المان ها نمایش داده شوند.واکنش گرایی در صفحات وب ما تا حد زیادی با استفاده از Css انجام میشه با استفاده از اون تعریف میکنیم با کوچک تر شدن صفحه ما در اندازه های مشخص وب سایت ما چه واکنشی نشون بده تا المان های به خوبی هم چنان نمایش داده بشه.واکنش گرا یا بدون واکنش گراییدر واکنش گرایی از روش هایی مانند حذف المان های غیر ضروری و نمایش محتوای اصلی در اندازه های کوچکتر یا تغییر نحوه نمایش المان ها استفاده میکنیم برای مثال در تصویر بالا متن ها حذف شده و منو به صورت کشویی تعریف شده تا فضای بیشتری برای نمایش محتوای اصلی وجود داشته باشد.نقاط شکست یا Break Pointعرض دستگاه های مختلفبرای اینکه صفحه ما واکنش گرا باشد موارد مختلفی را باید لحاظ کنیم اما مهمترین آن ایجاد نقاط شکست استبا توجه به عرض صفحه نمایش در دستگاه های مختلف برای صفحه وب خود تعریف میکنیم تا با کوچکتر شدن عرض صفحه نمایش زمانی که به اندازه خاصی رسید استایل هایی را اعمال کنمانند کوچکتر کردن عرض صفحه و اندازه المان ها و . . . تا صفحه وب در آن اندازه مورد نظر به درستی نمایش داده شوداگر کمی با Css آشنا هستید به تصویر زیر دقت کنید نحوه تعریف نقاط شکست به صورت زیر می باشدمدیا کوِئریطراحی Mobile First چیه ؟Mobile First Designدر طراحی واکنش گرا یا Responsive ابتدا صفحه خود را با توجه به اندازه صفحه نمایش بزرگتر مانند دسکتاپ طراحی می کردیم و با کوچک تر شدن صفحه تغییرات را اعمال میکردیم.اما طراحی Mobile First برعکس آنچه در طراحی واکنش گرا رخ می دهد انجام می شود یعنی ابتدا صفحه وب را با توجه به اندازه صفحه نمایش کوچکتر طراحی می کنیم سپس با بزرگتر شدن صفحه نمایش به سراغ اعمال تغییرات در نحوه نمایش المان ها در صفحه وب خود می شویم.طراحی انطباقبه جای max-width از min-width استفاده میکنیم تا با بزرگتر شدن عرض تغییرات اعمال شود.مدیا کوِئریطراحی Adaptive چیه ؟طراحی انطباقیدر طراحی Responsive و Mobile First ما فقط یک صفحه وب تعریف می کردیم و با المان های صفحه وب خود را برای نمایش در اندازه های مختلف منعطف می کردیم .اما در طراحی انطباقی یا Adaptive ما برای هر اندازه ای یک صفحه ی وب جداگانه تعریف میکنیم.برای مثال در کدی که قبل تر بررسی کردیم 5 عرض را مشخص کردیم تا با توجه به آن تغییراتی اعمال شود.حال در طراحی انطباقی باید 5 صفحه وب جداگانه تعریف کنیم تا دقیقا منطبق با آن اندازه نمایش داده شوند.طراحی انطباقی نتیجه دقیق تری از طرح را برای ما ارائه می دهد اما انعطاف کمتری را دارد و کدهای بیشتری نسبت به طذاحی واکنش گرا باید نوشته شود.در طراحی واکنش گرا صفحه وب به صورتی طراحی می شود که در اندازه های جدید هم به احتمال زیاد بدون بر هم ریختگی نمایش داده شود.برای واکنش گرایی باید به سی اس اس مسلط باشید دوتا ماژول قدتمند سی اس اس که به ما کمک میکنند تا صفحات وب واکنش گرا یا responsive داشته باشیم رو توی پست های زیر توضیح دادم https://vrgl.ir/fWWBK https://vrgl.ir/g9EpK علیرضا علیرضا Sun, 14 Aug 2022 13:39:20 +0430 https://virgool.io/@alirezag/%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1%D9%87%D8%A7-%DA%86%DA%AF%D9%88%D9%86%D9%87-%DA%A9%D8%A7%D8%B1-%D9%85%DB%8C-%DA%A9%D9%86%D9%86%D8%AF-hdx78pll2jpt مرورگرهامرورگر وب چیه؟نرم افزاری که شما با استفاده از آن می توانید وارد دنیای وب بشوید و بین صفحات وب مورد علاقه خود گشت و گذار کنید. بدون استفاده از مرورگرها استفاده از صفحات وب ممکن نیست همین حالا که این مطلب رو مطالعه میکنید با استفاده از مرورگر به دنیای وب وارد شدید. آن چه در جلوی خود می بینید آدرس بار ، دکمه ها و . . . شامل رابط کاربری مرورگر می باشند. انواع مختلفی از مرورگرها وجود دارند اما نحوه کارکرد آن ها تقریبا یکسان است در این مطلب وارد قلب مرورگرها میشویم و برای شما توضیح میدهیم مرورگرها به چه صورت کار میکنند و از چه اجزایی تشکیل شدند.قبل از اینکه به صورت جزئی تر وارد نحوه کارکرد و اجزای مرورگر ها شویم یک توضیح کلی در مورد نحوه کارکرد مرورگر میدهیم تا در ادامه راحت تر بتوانید اجزای آن را درک کنیدبه تصویر زیر توجه کنیددرخواست و پاسخزمانی که ما نام وب سایتی را درون آدرس بار مرورگر خود وارد میکنیم یکسری رخداد توسط مرورگر در کسری از ثانیه انجام می گیرد که از چشم ما پنهان است تا صفحه وب را به ما نمایش دهد.در واقع توسط مرورگر ما درخواستی (Request) به سمت سرور برای دریافت اطلاعاتی که مرورگر برای نمایش صفحه وب نیاز دارد ارسال می شود.سرور درخواست مرورگر را دریافت کرده پردازش می کند و به عنوان پاسخ به درخواست مرورگر (Response)اسنادی که برای نمایش صفحه وب نیاز است مانند HTML و CSS را برای مرورگر ارسال می کند.اجزای تشکیل دهنده مرورگر وباجزای مرورگرUser InterfaceRendering EngineBrowser EngineData Storage1 . رابط کاربری User Interfaceرابط کاربری مرورگررابط کاربری مرورگر همونطور که از اسمش مشخص هست تعریف شده برای تعامل با کاربر چیزی که الان در همین صفحه جلوی خود می بینید مانند دکمه برگشت ، رفرش ، پنجره جستجو و . . . برای مثال زمانی که کاربر بر روی دکمه ای کلیک می کند این فرمان از طریق رابط کاربری برای موتور مرورگر ارسال می شود.رابط کاربری از پیش توسط شرکت سازنده مرورگر تعریف شده و ما نمی توانیم در کلیت آن تغییری ایجاد کنیم اما در بعضی از مرورگر ها امکاناتی برای تغییر تم و رنگ مرورگر تعریف شده تا کاربر با سلیقه ظاهر مرورگر را شخصی سازی کند.2 . موتور رندر Rendering Engineموتور رندر مرورگرهاموتور رندر (Rendering Engine) را همانند یک نقاش با بوم خالی در نظر بگیرید که اسناد را از سرور دریافت کرده و آن ها را تفسیر میکند و در صفحه مرورگر به نمایش در می آورد.مرورگرهای مختلف دارای موتورهای رندر متفاوتی هستند که در تصویر بالا نشان داده شده همین مورد گاهی اوقات باعث ناهماهنگی در نمایش یک صفحه وب در یک مرورگر با مرورگر دیگر می شود نحوه تفسیر مرورگرها ممکن است متفاوت باشد.در ادامه به تشریح اجزای تشکیل دهنده موتور رندر می پردازیم.شبکه Networkingشبکه جزئی از موتور رندر می باشد که وظیفه دارد ارتباطات و امنیت اینترنتی را تامین کند و اطلاعات مانند تصاویر و المان هایی که صفحه وب ما را می سازد از سرور دریافت کند.بک اند رابط کاربری UI Backendوظیفه تحلیل و تفسیر بک اند رابط کاربری را بر عهده دارد حتی بک اند رابط کاربری مرورگر هم توسط همین قسمت بررسی می شود.به ترسیم ویجت‌های اساسی مانند یک جعبه انتخاب، یک کادر ورودی، یک پنجره، یک چک باکس و غیره کمک می‌کند.مفسر جاوا اسکریپت JavaScript Interpreterمفسر جاوا اسکریپتزمانی که اسناد جاوا اسکریپت توسط مرورگر دریافت می شود مرورگر هیچ ایده ندارد که چگونه آن را باید تفسیر کند مانند این است از کسی که زبان فارسی را بلد نیست انتظار داشته باشید صحبت شما رو گوش کند.پس اینجا نیاز به یک مترجم داریم مفسرهای جاوا اسکریپت همین کار انجام می دهند اسناد جاوا اسکریپت را برای مرورگر قابل فهم و درک می کنند مرورگر های متفاوت از مفسر های متفاوتی استفاده می کنند.Chrome : V8Firefox : Spider MonkeyMicrosoft Edge : Chakra نحوه رندر شدن یک صفحه وبدرخت رندرموتور رندر سند HTML و CSS را از طریق بخش شبکه (Networking) دریافت می کند.1 . در ابتدا موتور رندر سند HTML را خوانده و سپس از محتوای آن یک درخت (Document Object Model) DOM همان طور که در تصویر بالا می بینید رسم می کند که این درخت متشکل از نود ها (DOM Nodes) می باشدنود ها می توانند تصاویر ، متن ها ، لیست ها یا هر المنت دیگری باشند.2 . سپس موتور رندر سند CSS را خوانده که مربوط به جلوه های بصری می باشد و درخت دیگری (CSSOM) برای آن رسم می کند.3 . حالا با ترکیب دو درختی که در بالا تشکیل شده درخت دیگری به نام درخت رندر (Render Tree) تشکیل می شود.4 . از طریق فرآیند طرح بندی (Layout) هر نود با توجه به مختصات روی صفحه قرار می گیرد.5 . هر نود را توسط قسمت بک اند رابط کاربری (UI Backend) درون صفحه وب ترسیم (Paint) می کند.3 . موتور مرورگر Browser Engineموتور مرورگردر واقع موتور مرورگر رابطی بین موتور رندر (Render Engine) و رابط کاربری(User Interface)و همچنین رابطی بین موتور رندر و ارتباطات خارجی با سرور می باشد.موتور مرورگر ، موتور رندر را بر اساس ورودی های رابط های کاربری مختلف مدیریت و دستکاری می کند.4 . ذخیره سازی داده Data Storageذخیره سازی داده هااین بخش از مرورگر برای ذخیره سازی تمام داده ها مانند ذخیره سازی محلی (Local Storage) و کوکی ها (Cookies) و . . . استفاده می شودکوکی ها Cookiesکوکی‌ها چیزی بیشتر از یک فایل متنی که بر روی کامپیوتر یا موبایل شما ذخیره می‌شوند نیستند. این فایل توسط مرورگر خوانده می‌شود و در آن اطلاعاتی در باره‌ی وب‌سایت‌ مانند مشخصات ورود به سایت و تنظیمات سفارشی شده‌ی کاربر ذخیره می‌شود. در کوکی‌ها همچنین اطلاعات دیگری که وب‌سایت‌ها برای شناسایی کاربر و ارائه‌ی خدمات بهتر به آن نیاز دارد، قرار می‌گیرد. وقتی یک وب‌سایت را باز می‌کنید، درخواستی به مرورگر شما ارسال می‌شود تا فایل کوکی بر روی هارد دیسک ذخیره شود و از آن پس اطلاعات مورد نیاز وب‌سایت برای شناسایی کاربر و ارائه‌ی خدمات اختصاصی شروع می‌شود.ذخیره در لوکال استوریج Local storageهر مرورگری دو حافظه داره که بهشون Local Storage و Session Storage میگیم و میتونیم این ها رو با inspect گرفتن در قسمت Application ، مشاهده کنیم.تفاوت Local Storage و Session Storageهر دوی این ها حافظه ی مرورگر هستن اما یه تفاوتی دارند و اون هم این هست که اطلاعاتی که در Local Storage ذخیره می شوند حتی بعد از بسته شدن Tab  و یا رفرش کردن صفحه باز هم اطلاعات درون اون باقی میمونند ؛ اما در Session Storage بعد از بستن صفحه اطلاعات داخلش هم پاک میشه.معرفی بهترین مرورگرهای وببهترین مرورگرهامرورگرهای مختلفی وجود دارند که هر کدام امکانات و نقاط ضعف و قوت مختص به خود را دارند.در میان برنامه نویسان و طراحان وب به دلیل ارائه افزونه های مختلف و کاربردی گوگل کروم از محبوبیت بالایی برخوردار است.همچنین با اختصاص دادن 63 درصد از کاربران جهانی به خود محبوب ترین مرورگر وب شناخته می شود.با این حال مرورگر کروم رقبای خوبی مانند فایرفاکس و سفاری و اپرا دارد.گوگل کروم Chromeکروم https://fa.wikipedia.org/wiki/%DA%AF%D9%88%DA%AF%D9%84_%DA%A9%D8%B1%D9%88%D9%85 فایرفاکس Firefoxفایرفاکس https://fa.wikipedia.org/wiki/%D9%81%D8%A7%DB%8C%D8%B1%D9%81%D8%A7%DA%A9%D8%B3 سفاری Safariسفاری https://fa.wikipedia.org/wiki/%D8%B3%D9%81%D8%A7%D8%B1%DB%8C_(%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1_%D9%88%D8%A8) منابعGeek Burger Show Channel : مرورگر چگونه کار می کندOpen Canvas Channel : How Web Browsers Functionbrowsertouse.com : What is Web Bro علیرضا علیرضا Thu, 11 Aug 2022 00:56:56 +0430 https://virgool.io/@alirezag/%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-%D8%AA%D9%84%D9%81%DB%8C%D9%82%DB%8C-%D8%A7%D8%B2-%D9%85%D9%86%D8%B7%D9%82-%D9%88-%D8%AE%D9%84%D8%A7%D9%82%DB%8C%D8%AA-p3w46vst7cdj توسعه دهنده فرانت اندفرانت اند چیه؟در یک وب سایت یا اپلیکیشن همه المان هایی که کاربر به صورت بصری میبینه به فرانت اند مربوط میشهبرای مثال : منوها ، تصاویر ، فرم های ورود اطلاعات و . . .فرانت اند به دو بخش تقسیم میشه بخش اول طراحی ظاهر وب سایت که توسط طراحان با استفاده از نرم افزار های گرافیکی مثل فیگما صورت میگیره و بخش دوم توسعه وب سایت که توسط توسعه دهنده با استفاده از زبان های فرانت اند طرح مورد نظر به صورت کد قابل فهم برای مرورگر پیاده سازی میشه که در این مطلب به بخش دوم میپردازیم.فرانت اندوظیفه فرانت اند ایجاد تعامل با کاربر و برقراری ارتباط بین مرورگر کاربر و سرور هست .برای اینکه بهتر متوجه بشید لطفا به تصویر زیر دقت کنید ، هر اون چه میبینید شامل فرانت اند یک وبسایت میشه.قالب وب سایتزبان های برنامه نویسی فرانت اند چیه؟به صورت کلی فرانت اند شامل زبان های زیر میشه که هر کدوم دریای از مباحث مختلف رو درون خودشون دارنددر ادامه بیشتر با این زبان ها آشنا میشیم.HTML : Hyper Text Markup LanguageCSS : Cascading Style SheetsJavaScriptتفاوت زبان های فرانت انددر واقع HTML و CSS زبان برنامه نویسی نیستند،HTML زبان نشانه گذاری و CSS زبان استایل دهی می باشد.اما سومین مورد ما یعنی JavaScript یک زبان برنامه نویسی قدرتمند و محبوب می باشد.با توجه به تصویر بالا اگر صفحه وب رو مانند بدن یک انسان در نظر بگیریم.زبان نشانه گذاری HTML نقش استخوان بندی و تعریف ساختار اصلی صفحات وب ما رو به عهده داره.برای مثال به مرورگر بفهمانیم محتوای ما به صورت متن یا لیست نمایش داده شود.ولی همونطور که توی تصویر میبینید ظاهر خیلی خوبی نداره حالا برای اضافه کردن زیبایی های ظاهری مثل پوست و لباس که در صفحه وب ما شامل رنگ ، اندازه و فاصله المان ها و . . . میشه به سراغ زبان استایل دهی CSS می رویم که نقش خلاقیت و ایجاد جلوه های بصری رو بر عهده داره و این دو زبان در صفحات وب هیچ جایگزین دیگری ندارند و همه صفحات وب داری کد های HTML و CSSهستند.تا حالا به کمک این دو زبان کدنویسی ساختار کلی بدنه وب سایت رو ساختیم.حالا قرار هست با استفاده از زبان برنامه نویسی قدرتمند JavaScript روحی در کالبد بی جان وب سایت بدمیم.بعد از افزودن JavaScript که در واقع مغز متفکر وب سایت ما می باشد میتوانیم رفتارهایی رو برای وب سایت خود تعریف کنیم و به اون اجازه بدهیم در موقعیت های مختلف رفتار های متفاوتی را از خود نشان دهد.برای مثال اگر کاربر روی یک المان در صفحه کلیک کرد پیغامی به او نمایش داده شود.کاربرد اصلی JavaScript تبدیل صفحات وب ایستا به صفحات وب پویا می باشد.توسعه دهنده فرانت اند کیه؟توسعه دهنده فرانت اندبا توجه به مواردی که توضیح دادم فهمیدن اینکه چه کسی توسعه دهنده فرانت اند هست خیلی ساده تر شده.کسی که با استفاده از زبان های فرانت اند ، طرحی که توسط طراح رابط کاربری (User Interface) و طراح تجربه کاربری (User Experience) ارائه شده رو به صورت کد پیاده سازی کنه.برای تبدیل شدن به یک برنامه نویس فرانت اند خوب نیاز به مهارت های دیگری هم داریم که در ادامه به صورت مختصر به آن ها اشاره خواهم کرد با من همراه باشید.نقشه راه فرانت اندنقشه راه فرانت اندپس از یادگیری مفاهیم اصلی زبان های فرانت اند باید به سراغ یادگیری کتابخانه ها که در ساده تر کردن کدها و فریم ورک ها که در تعریف چهارچوب کدنویسی برای رسیدن به هدفی مشخص به ما کمک میکنند بریم.در کنارش باید یاد بگیریم از ابزار هایی که توی برنامه نویسی به ما کمک میکنه مثل کد ادیتور و گیت هاب به خوبی استفاده کنیم .فرانت اند تلفیقی از منطق و خلاقیتتلفیقی از منطق و خلاقیتما به عنوان یک توسعه دهنده فرانت اند خوب باید مهارت استفاده از خلاقیت و منطق رو در خود پرورش دهیم.خلاقیت برای درک جلوه های بصری طراح و پیاده سازی آن با استفاده از زبان های HTML و CSS.و منطق برای درک ساختار زبان برنامه نویسی JavaScript ، ساختار برنامه و الگوریتم ها .خلاصهفرانت اند شامل هر آنچه که به صورت بصری در وب سایت مشاهده میکنید.زبان نشانه گذاری HTML معرف ساختار کلی وب سایت.زبان استایل دهی CSS افزودن جلوه های بصری به ساختار وب سایت.زبان برنامه نویسی JavaScript ایجاد رفتار و پویایی برای وب سایت.توسعه دهنده فرانت اند موظف به پیاده سازی طرح ها و تبدیل به کد. علیرضا علیرضا Mon, 08 Aug 2022 19:33:38 +0430