نوشته های میثم مینوئی

معرفی ES6 و آشنایی با مفاهیم آن

میثم مینوئی — Mon, 11 Oct 2021 21:46:23 +0330

معرفی ES6اگر برنامه نویس فرانت‌اند هستید و یا قصد ورود به این حوزه و یادگیری زبان برنامه نویسی جاوااسکریپت را دارید حتما واژه ES6 را شنیده اید. اگر معنی این واژه را نمی دانید نگران نباشید! در مقاله امروز قصد دارم اکما اسکریپت را معرفی و درباره نسخه 6 آن که جاوااسکریپت را متحول کرد صحبت نمایم. با من همراه باشید.فهرست مطالباکما اسکریپت چیست؟اکما اسکریپت 6 - کلمه کلیدی let و const - اَرو فانکشن(Arrow function) - پارامترهای پیش‌فرض در تابع - پارامتر rest و اپراتور spread - حلقه for ofاکما اسکریپت چیست؟اکما اسکریپت در واقع نوعی زبان برنامه نویسی اسکریپتی، استاندارد شده می باشد که با انواع مرورگرهای اینترنتی سازگاری دارد. اکما اسکریپت برای استاندارد سازی زبان جاوااسکریپت در سال1997 یعنی دو سال بعد از پیدایش زبان جاوااسکریپت عرضه شد و می توان گفت که مکمل زبان جاوااسکریپت می باشد تا چارچوب استانداردی برای این زبان برنامه نویسی تعیین نماید. البته دستورات و مفاهیم جدید را در قالب ورژن جدید اکما اسکریپت سالانه یا هر چند سال یکبار به زبان جاوااسکریپت اضافه می کند. نسخه 6 این استاندارسازی سال 2015 عرضه شد که با نام های ES6، جاوااسکریپت 6 یا جاوااسکریپت 2015 شناخته می شود. اکما اسکریپت 6 مفهوم های زیادی را به جاوااسکریپت اضافه کرد و از اهمیت بالایی برخوردار است و برنامه نویسان فرانت اند به صورت مکرر از این دستورات اضافه شده در ES6 استفاده می نمایند. اکما اسکریپت 12 آخرین ورژن می باشد که در سال 2021 میلادی عرضه شده است.برای اطلاع از تغییرات و افزودنی های اکما اسکریپت 12 اینجا کلیک نمائید.اکما اسکریپت 6همان طور که در بالا گفته شد، اکما اسکریپت 6 مفاهیم جدید و ارزشمندی را به جاوااسکریپت اضافه کرد که در ادامه با بعضی از این موارد بیشتر آشنا خواهیم شد.کلمه کلیدی let و constتا قبل از ES6 برای تعریف متغیر باید از کلمه کلیدی var استفاده می شد، کلمه کلیدی var به صورت سراسری در کدهای ما قابل استفاده بود. اما در ES6 دو کلمه کلیدی let و const به زبان جاوااسکریپت اضافه شد. این دو کلمه کلیدی برخلاف var، بلاک اسکوپ می باشند یعنی اگر متغیری را داخل یک تابع یا حلقه تعریف نمائیم، این متغیر خارج از تابع قابل دسترسی نیست و درون تابع یا حلقه فقط دردسترس می باشد.مقدار کلمه کلیدی const یکتا می باشد و داخل برنامه هم قابل تغییر نیست و در صورتی که مقدار متغیر تعریف شده با const را تغییر دهیم برنامه با خطا مواجه می شود. به مثال زیر توجه نمائید:const car = "volvo" console.log(car); car = "bmw"خروجی کد بالا:خروجی کد بالا - متغیر constاَرو فانکشن(Arrow function)ارو فانکشن جایگزینی برای فانکشن های بدون نام می باشد و باعث کوتاه تر شدن کدها و خوانایی بیشتر کدهای ما می شود. به صورت کلی هرجا که از کلمه کلیدی function استفاده شده باشد، می توان از ارو فانکشن استفاده کرد. - اگر دستورات ما یک خط باشد، نیازی به استفاده از کلمه return در ارو فانکشن نداریم. - اگر یک آرگومان داشته باشیم، می توانیم پرانتز ها را حذف نمائیم.به عنوان مثال:// ES5 way button.addEventListener('click', function() { ... }) // ES6 way button.addEventListener('click', () => { ... }) مثالی دیگر:let array = [1,7,98,5,4,2] // ES5 way var moreThan20 = array.filter(function (num) { return num > 20 }) // ES6 way let moreThan20 = array.filter(num => num > 20)پارامترهای پیش‌فرض در تابعاز اکما اسکریپت 6 بعد می توانیم برای آرگومان های درون تابع مقدار پیشفرض تعیین نمائیم. در نگاه اول شاید این مورد مهم به نظر نرسد اما می تواند از رویدادن خطاهای اتفاقی در برنامه ما جلوگیری نماید. برای درک بهتر این موضوع به مثال زیر توجه نمائید.function sum(x,y){ return x+y; } console.log(sum()); console.log(sum(5)); // function for default parameters function sum2(x=0,y=0){ return x+y; } console.log(sum2());خروجی کد بالا:خروجی کد بالا - پارامترهای پیشفرضپارامتر rest و اپراتور spreadهر دو مورد پارامتر rest و اپراتور spread به صورت (...) نسان داده می شوند. مثلا با استفاده از پارامتر rest پارامتر می توانیم آرگومان های یک تابع را به یک آرایه تبدیل نمائیم و با استفاده از اپراتور spread می توانیم یک آرایه را دریافت و این آرایه را به لیستی از آرگومان های جدا از هم تبدیل می نماید یا یک چندین آرایه را با هم جمع نمائیم. به مثال زیر توجه نمائید.let numbers = [1 ,2, 3, 4, 5]; console.log(...numbers); let yekan = [1, 2, 3]; let dahgan = [10, 20, 30]; let sadgan = [100, 200, 300]; let combine = [...yekan, ...dahgan, ...sadgan]; console.log(combine);خروجی کد بالا:خروجی کد بالاحلقه for ofبا استفاده از حلقه for of می توانیم تک تک آیتم های یک آرایه را دریافت نمائیم و عملیات مورد نظر خود را روی عناصر آرایه پیاده سازی نمائیم.let numbers = [1 ,2, 3, 4, 5]; for ( let num of numbers){ console.log(num); }خروجی کد بالا:خروجی کد بالا - حلقه for ofعلاوه بر موارد بالا، موارد مهم دیگری مانند کلاس ها، پرامیس ها و ... هم وجود دارد که در اکما اسکریپت 6 به جاوااسکریپت اضافه شده اند، برای مطالعه بیشتر درباره این موارد، می توانید به سایت w3schools مراجعه نمائید.در این مقاله سعی شد که از مثال های ساده استفاده شود تا فهم مطلب برای تمامی خوانندگان راحت باشد و قطعا برای تسلط کامل بر روی مفاهیم ES6 هم به مطالعه بیشتر هم تمرین های مختلف نیاز می باشد.امیدوارم این مقاله براتون مفید بوده باشه.

معرفی DOM و مدیریت آن

میثم مینوئی — Thu, 07 Oct 2021 15:35:40 +0330

معرفی DOM و مدیریت آنیکی از مهمترین مفهوم هایی که برنامه نویسان فرانت اند با آن مواجه می شوند، درک مفهوم DOM است. با استفاده از زبان برنامه نویسی جاوااسکریپت می توانیم ساختار DOM را تغییر دهیم. در این مقاله، ابتدا با مفهوم DOM آشنا می شویم و سپس با نحوه مدیریت آن آشنا می شویم. با من همراه باشید.فهرست مطالبمعرفی DOMمعرفی Nodesمدیریت DOM - پیدا کردن المنت از طریق ID - پیدا کردن المنت از طریق name - پیدا کردن المنت از طریق نام class - پیدا کردن المنت ازطریق نام tag - پیدا کردن المنت ازطریق هر چیزی - پیدا کردن اولین المنت ازطریق هر چیزی - ایجاد یک المنت - اضافه کردن المنت به body یا هر المنت دیگری - گرفتن مقدار یک ویژگی (attribute) - مقدار دهی به ویژگی های المنت attribute - استایل دهی به المنت هامعرفی DOMفرض کنید یک صفحه وب ساده با استفاده از Html ایجاد کرده ایم و می خواهیم با استفاده از جاوااسکریپت تغییراتی را در این صفحه ایجاد نمائیم. مثلا یک پاراگراف را به این صفحه اضافه نمائیم یا با کلیک بر روی دکمه یا بخشی از صفحه تغییراتی ایجاد نمائیم. یا بخشی از محتوا را داینامیک نمائیم. این تغییرات در DOM اتفاق می افتد. به عبارت دیگر DOM (Document Object Model) روشی برای دسترسی به عناصر صفحات وب و اعمال تغییرات بر روی آن ها می باشد. هنگام استفاده از DOM هر یک از تگ های Html به عنوان یک شی در نظر گرفته می شوند. این اشیا مانند سایر اشیا در جاوااسکریپت دارای ویژگی ها و متدهایی می باشند. برای درک بهتر مفهوم DOM مثالی را برای شما آماده کرده ام. برای ایجاد یک صفحه وب حداقل چیزی که نیاز داریم یک فایلHtml می باشد. در زیر یک فایل ساده Html ایجاد می نمائیم. Simple Web Page

Dom and management DOM

اگر این کدها را در یک فایل با پسوند html. ذخیره نمائیم و با استفاده از یک مرورگر آن را باز نمائیم، یک صفحه وب ساده خواهیم داشت. با کلیک راست روی صفحه و انتخاب گزینه اینسپکت (inspect)، دقیقا همین کدها را مشاهده خواهیم کرد.خروجی کدهای بالا حال با استفاده از جاوااسکریپت قصد داریم یک پاراگراف را به این صفحه وب اضافه نمائیم. با استفاده از دستورات زیر در کنسول یا قرار دادن تگ script در قسمت body فایل اصلی خود، یک پاراگراف به صفحه ما اضافه می شود.const Paragraph = document.createElement('p'); Paragraph.innerText = 'I am dynamic paragraph'; document.body(Paragraph);حال اگر کدها را ذخیره نمائیم و کیلک راست نمائیم و اینسپکت صفحه را بگیریم مشاهده خواهیم کرد که یک پاراگراف به کدهای ما اضافه شده است.خروجی کدهای بالا این پاراگراف بدون تغییر در منبع اصلی کدهای ما (فایل html.) و با استفاده از Dom ایجاد شده است.ساختار DOM معرفیNodes ساختار DOM یک ساختار سلسله مراتبی یا درختی می باشد، که از قطعات کوچک تری به نام Node یا گره ایجاد شده است. که این گره ها می توانند شامل گره های دیگری باشند. گره ها هم خود دارای انواع مختلفی هستند که در زیر به آنها اشاره می نمائیم. - المنت ها: تگ های Html از این دسته هستند. مانند دکمه ها، ورودی ها، تگ های div و پاراگراف ها و ... - متن ها: هر متنی که در صفحه درون تگ های Html وجود داشته باشد یک گره به حساب می آید. - ویژگی ها: ویژگی های المنت ها به صورت مجزا یک گره به حساب می آیند. - داکیومنت (document): عنصر ریشه DOM خودش یک گره به حساب می آید. داکیومنت بالاترین گره می باشد. - هر کامنت Html هم یک گره به حساب می آید.در ادامه به نحوه مدیریت DOM می پردازیم.مدیریت DOMمدیریت DOM یعنی چه؟ همان طور که در بالا گفته شد با استفاده از DOM می توانیم عناصر مختلف در صفحه را دریافت نمائیم و تغییراتی در آنها ایجاد نمائیم یا یک رویداد برای برخی از عناصر تعریف نمائیم یا حتی عناصر جدیدی تحت شرایطی که خودمان مشخص می نمائیم، ایجاد نمائیم. عناصر صفحه را با استفاده از متدهای گوناگونی می توان دریافت کرد که در زیر به آنها اشاره می نمائیم.پیدا کردن المنت از طریق IDیکی از متدهایی که می توانیم با استفاده از آن المنت ها را دریافت نمائیم document.getElementById می باشد. با توجه به اینکه id در فایل های Html به صورت یکتا می باشد، فقط یک المنت را به ما می دهد.const btn= document.getElementById("button");پیدا کردن المنت از طریق nameبا استفاده از متد document.getElementByName می توانیم المنت ها را با استفاده از name آن ها دریافت نمائیم و یک NodeList را برمی گرداند.const ageInput = document.getElementsByName('age');پیدا کردن المنت از طریق نام classبا استفاده از متد document.getElementByClassName می توانیم مجموعه ای از المنت ها که دارای یک کلاس هستند را دریافت نمائیم.const cards = document.getElementsByClassName('card');پیدا کردن المنت از طریق نام tag با استفاده از این متد می توانیم مجموعه ای از تگ های مشابه در صفحه را دریافت نمائیمconst headings = document.getElementsByTagName('h1');پیدا کردن المنت از طریق هر چیزیبا استفاده از این متد می توانیم با استفاده از سلکتورهای css برای دریافت بر روی DOM استفاده نمائیم.const navLinks = document.querySelectorAll('#navbar li:not(:first-child) a'); const signUpInputs = document.querySelectorAll('#sign-up input'); const editButtons = document.querySelectorAll('[data-action="edit"]'); const menuEl = document.querySelectorAll('#main-menu'); const cards = document.querySelectorAll('.card');پیدا کردن اولین المنت از طریق هر چیزیاین متد مشابه document.querySelectorAll می باشد با این تقاوت که اولین موردی را که پیدا نماید بر می گرداند.const cards = document.querySelector('.card');ایجاد یک المنتبرای ایجاد یک عنصر از دستور زیر استفاده می نمائیم و نام تگ مورد نظر را به آن می دهیمconst button = document.createElement('button'); const box = document.createElement('div');اضافه کردن المنت به body یا هر المنت دیگریبا استفاده از متد زیر می توانیم المنت های ایجاد شده را به المنت های دیگر یا تگ body صفحه خود اضافه نمائیم.document.body(menu); usersList(newUser); signUpForm(companyNameInput);گرفتن مقدار یک ویژگی (attribute)برای دریافت ویژگی های هر المنت می توانیم از دستور زیر استفاده نمائیم.const action = button.getAttribute('data-action');مقدار دهی به ویژگی های المنتبا استفاده از متد زیر می توانیم برای المنت های داخل صفحه یا المنت های ایجاد شده در صفحه ویژگی هایی مشخص نمائیم و مقدار آنها را تعیین نمائیم. مقدار اول نام ویژگی و مقدار دوم مقدار ویژگی می باشد.button.setAttribute('data-action', 'edit');استایل دهی به المنت هابا استفاده از این دستور می توانیم به صورت مستقیم به المنت های خود استایل دهیم، تمامی استایل های Css را از این طریق می توانیم به المنت خود اضافه نمائیم. فقط نکته ای که باید به آن توجه داشته باشید، تفاوت نام استایل ها در این روش با Css می باشد. مثلا در Css به صورت زیر نام استایل ها را مشخص می نمائیم.font-size: 20px; margin-right: 20px; اما در جاوا اسکریپت به صورت کمل کیس (Camel Case) نام استایل ها را مشخص می نمائیم.productDetails.style.display = 'none'; menu.style.marginLeft = '10px'; backButton.style.borderStyle = 'solid'علاوه بر متدهای بیان شده در بالا، متدهای دیگری هم در جاوااسکریپت برای مدیرت Dom وجود دارد. در این مقاله سعی کردم که متدهای اصلی را معرفی نمایم. امیدوارم این مقاله براتون مفید بوده باشه.

معرفی جاوااسکریپت و آشنایی مقدماتی با دستورات آن

میثم مینوئی — Tue, 05 Oct 2021 15:20:36 +0330

معرفی جاوااسکریپت و آشنایی مقدماتی با دستورات آنجاوااسکریپت یکی از محبوب ترین و پرکاربرترین زبان های برنامه نویسی می باشد. جاوا اسکریپت دیگر، فقط یک زبان برنامه نویسی برای پویا سازی صفحات وب نیست! امروزه با استفاده از جاوااسکریپت می توان اپلیکیشن های موبایل و دسکتاپ ایجاد کرد. کاربردهای جاوااسکریپت به این موارد محدود نمی شود و روز به روز در حال گسترش است. در ادامه این مقاله درباره کاربردهای جاوااسکریپت و دستورات مقدماتی آن بیشتر آشنا خواهیم شد.جاوااسکریپت چیست؟کاربردهای جاوااسکریپتآشنایی با نحوه نوشتن (سینتکس) جاوا اسکریپت - مقادیر - متغیرها - عملگرها - عبارات (Expressions) - کامنت یا توضیحات - نامگذاری متغیرها در جاوااسکریپتجاوااسکریپت چیست؟جاوااسکریپت یک زبان سطح بالا و تفسیری می باشد که در سال 1995توسط برندان آیک ایجاد شد. در ابتدا جاوا اسکریپت یک زبان سمت کاربر(کلاینت ساید) بود که برای افزایش جذابیت و داینامیک کردن صفحات وب مورد استفاده قرار می گرفت و فقط بر روی مرورگرها قابل اجرا بود اما با معرفی Node.js در سال 2009 جاوااسکریپت خارج از مرورگر هم قابلیت اجرا شدن پیدا کرد و علاوه بر سمت کاربر، سمت سرور(سرور ساید) هم شد. با آمدن فریم ورک و کتابخانه های انگولار، ویو و ریکت شاهد پیشرفت و گسترش بیشتر این زبان برنامه نویسی بودیم به طوری که امروزه اکثر وبسایت ها و اپلیکیشن های مدرن از جاوااسکریپت استفاده می کنند.جاوااسکریپت یک زبان سطح بالاست اما این به چه معنی است؟ زبان های برنامه نویسی سطح بالا به زبان انسان نزدیک تر هستند و یادگیری و استفاده از آنها نسبت به زبان های سطح پایین که به زبان کامپیوتر نزدیک تر هستند، راحت تر است.جاوااسکریپت یک تفسیری است اما این به چه معنی است؟ زبان های برنامه نویسی به دو دسته تفسیری و کامپایلری تقسیم می شوند. در زبان های کامپایلری تمامی کدها به زبان ماشین تبدیل می شوند و سپس اجرا می شوند اما در زبان های تفسیری کدها خط به خط به زبان ماشین تبدیل و اجرا می شوند. همان طور که دربالا اشاره شد جاوااسکریپت یک زبان تفسیری می باشد.برنامه نویسی فرانت اندکاربردهای جاوااسکریپتبا استفاده از جاوااسکریپت می توانیم صفحات وب پویا داشته باشیم. انواع مختلفی از انیمیشن و فایل های چند رسانه ای را در صفحات خود استفاده نمائیم. برای دکمه ها یا بخشی از سایت خود رویداد تعریف نمائیم و عناصر خلاقانه ایجاد نمائیم و کلی کار جذاب و خلاقانه دیگر اما امروزه کاربرد های جاوااسکریپت به پویا سازی صفحات وب محدود نمی شود و برای ساخت اپلیکیشن و نرم افزار و بازی های تحت وب هم می توانیم از جاوااسکریپت استفاده نمائیم. همچنین برنامه نویسی بک اند هم با جاوااسکریپت امکان پذیر است. با استفاده از جاوا اسکریپت و کتابخانه تنسور فلو می توانیم نرم افزار های تحت وب هوشمند ایجاد نمائیم و با استفاده از لیسک در حوزه بلاک چین هم میتوان فعالیت کرد. به صورت کلی کاربرد های زبان جاوااسکریپت را می توانیم به صورت زیر بیان نمائیم: - برنامه نویسی فرانت اند (کتابخانه ریکت و فریم ورک ویو و انگولار ) - برنامه نویسی بک اند (فریم ورک اکسپرس برای Node.js) - برنامه نویسی نرم افزار های موبایل ( با استفاده از ریکت نیتیو ) - برنامه نویسی نرم افزار های دسکتاپ (با استفاده از الکترون) - ساخت بازی های تحت وب (گیم جی اس) - برنامه نویسی هوش مصنوعی (یادگیری ماشین با کتابخانه تنسور فلو) - استفاده در حوزه بلاک چین (با استفاده از لیسک )در جاوااسکریپت کتابخانه ها و فریم ورک های دیگری هم وجود دارد، در بالا به چند مورد شناخته شده تر اشاره کردیم. جاوااسکریپت روز به روز در حال گسترش است.آشنایی با نحوه نوشتن (سینتکس) جاوا اسکریپتاز کاربردهای زبان جاوااسکریپت که بگذریم نوبت به آشنایی با سینتکس این زبان برنامه نویسی می رسد. سینتکس چیست؟ مجموعه‌ای از قوانین می باشد که نحوه قرارگیری و ترکیب کلمات، نشانه ها و علایم یک زبان را به صورتی که معنای درستی بدهند مشخص می کند. هر زبان برنامه نویسی سینتکس مخصوص به خود را دارد، گرچه سینتکس بعضی از زبان ها به هم نزدیک هست و بعضی دیگر تا حدودی شباهت هایی با هم دارند. در ادامه با سینتکس های مقدماتی زبان جاوااسکریپت بیشتر آشنا می شویم.مقادیرسینتکس مقادیر در جاوااسکریپت به دو دسته کلی تقسیم می شود:1- مقادیر ثابت2- مقادیر متغیردر ابتدا با انواع مقادیر ثابت آشنا می شویم و در ادامه به سراغ متغیر ها و بقیه دستورات جاوااسکریپت می رویم.مقادیر عددی (Number): در جاوااسکریپت مقادیر عددی را می توان به صورت صحیح یا اعشاری تعریف کرد.13 10.36مقادیر متنی یا رشته ها (String): مقادیر متنی یا رشته ها باید داخل سینگل کوتیشن یا دابل کوتیشن قرار بگیرند."hello" 'wold'متغیرها برای تعریف متغیر در جاوااسکریپت از کلمه کلیدی var و let و const می توانیم استفاده نمائیم. در جاوااسکریپت نیازی نیست که نوع متغیر را تعریف کنیم. متغیر var به صورت سراسری تعریف می شود و در تمام برنامه می تواند تغییر نماید. متغیر let به صورت لوکال تعریف می شود. متغیر const مقداری ثابت می گیرد که قابل تغییر نیست و در صورتی که بخواهیم مقدار آن را تغییر دهیم، برنامه با خطا مواجه می شود.var x; x = 6; let y; y = 10.25; const z;هنگام تعریف متغیر می توانیم مقداری به آن نسبت دهیم.var x =25; let y = "hello world" const z =10;عملگرهاعملگر تساوی(assignment) : با استفاده از این عملگر به متغیرها می توانیم مقدار نسبت دهیم. البته در بالا این کار را انجام داده ایم و در زیر نمونه های دیگری را مشاهده می کنیم.let x; x = 10; let y = 5;عملگرهای ریاضی(arithmetic): در جاوااسکریپت از عملگرهای ریاضی جمع، تفریق، ضرب و تقسیم هم می توانیم استفاده نمائیم. برای چسباندن دو رشته به یکدیگر می توانیم از عملگر + استفاده نمائیم.let x=20; let y=4; let z; z = x+y; // 24 z= x- y; //16 z = x *y; //80 z = x / y; //5عبارات (Expressions)به هر ترکیبی از مقادیر ثابت و متغیرها و عملگر ها، عبارت یا اکسپرشن گفته می شود.x * 10 " hello" + "meysam" x + yکامنت یا توضیحاتکامنت گذاری در جاوااسکریپت به دو صورت می باشد. کامنت های یک خطی و کامنت های چند خطی. برای ایجاد کامنت های تک خطی از دو علامت متوالی اسلش استفاده می نمائیم// this is commentبرای ایجاد کامنت های چند خطی و طولانی، از */ برای شروع کامنت و از /* برای پایان کامنت استفاده می نمائیم./* this is firstline commen this is seconds line comment this is end line comment */نامگذاری متغیرها در جاوااسکریپتهر زبان برنامه نویسی برای نامگذاری متغیر ها قوانینی دارد، قوانین نامگذاری در متغیر ها در جاوااسکریپت به شکل زیر است. - حرف اول باید حروف لاتین، آندرلاین(_) یا علامت دلار($) باشد - بقیه نام می تواند حروف لاتین، اعداد، آندرلاین و علامت دلار باشد.توجه: استفاده از اعداد در ابتدای نام متغیر مجاز نیست. - جاوااسکریپت به بزرگ و کوچک بودن حروف حساس می باشد! یا به عبارت دیگر case sensitive می باشد.var _name1; var $name22; var Last_name; var last_name; در خط سوم و چهارم دو متغیر متفاوت خواهیم داشت، زیرا یکی با حروف کوچک و دیگری با حروف بزرگ شروع شده است.موارد بالا سینتکس های مقدماتی زبان جاوااسکریپت بود که هر کدام را می توان در یک مقاله جدا به صورت تخصصی بررسی کرد، هدف من آشنایی مقدماتی مخاطب با سینتکس این زبان برنامه نویسی بود. امیدوارم این مقاله براتون مفید بوده باشه.

انواع متدلوژی در css

میثم مینوئی — Sat, 02 Oct 2021 04:12:35 +0330

انواع متدلوژی در cssاگر یک برنامه نویس هستید، حتما برای شما پیش آمده که به کدهایی که قبلا نوشته اید مراجعه کنید و تعجب کنید! این مشکل برای اکثر برنامه نویسان تازه کار پیش میاید. به طور کلی علت اصلی چنین مشکلی استفاده نکردن از کامنت نویسی و انتخاب نکردن نام های مناسب برای متغیر ها و توابع و کلاس ها و غیره می باشد. در این مقاله درباره روش های جلوگیری از این مشکل یا انواع متدلوژی در css صحبت خواهیم کرد.فهرست مطالبمتدلوژی چیست؟کامنت گذاریمتدلوژی BEM متدلوژی OOCSSمتدلوژی چیست؟بهتر است قبل از ادامه با مفهوم متدلوژی یا روش شناسی در حوزه برنامه نویسی آشنا شویم. به مجموعه ای از روش ها، مستندات و اقدامات که توسعه دهندگان برای نگهداری و خوانایی هرچه بیشتر کدهای خود انجام می دهند، متدلوژی گفته می شود. اهمیت استفاده از متدلوژی در پروژه های تیمی و بلند مدت بیشتر به چشم می آید. در ادامه با چند متدلوژی در css آشنا می شویم.کامنت گذاری کامنت گذارییکی از ساده ترین و موثرترین روش ها کامنت گذاری می باشد. در زمان نوشتن استایل ها و پیاده سازی طرح ها، حتما کامنت بنویسید و راه حل خود را برای پیاده سازی را شرح دهید یا حداقل به صورت مختصر کامنت بنویسید. بخش های مختلف طرح خود را با کامنت مشخص نمائید شاید در پروژه های کوچک جدا کردن بخش ها از یکدیگر خیلی مهم به نظر نرسد اما در پروژه های بزرگ تر و کارهای تیمی بخش بندی قسمت های مختلف به شدت مفید خواهد بود. توصیه می شود کامنت های خود را به گونه ای بنویسید که انگار شخصی کم تجربه قرار است از کدهای شما استفاده نماید تا کامنت های شما کامل تر باشد.متدلوژی BEM متدلوژی BEM متدلوژی BEM مخفف سه کلمه Block Element Modifier است. روشی کامپوننت محور برای توسعه فرانت اند می باشد. در این متدلوژی کلاس ها به 3 دسته تقسیم می شوند و استفاده از آی دی و نام تگ ها ممنوع می باشد و تمامی عناصر با استفاده از کلاس ها استایل دهی می شوند. در نام گذاری کلاس ها از حروف لاتین کوچک و اعداد و برای جداکردن کلمات از یک خط فاصله استفاده می شودبلاک (Block): کامپوننت مستقل در صفحه که به تنهایی معنادار می باشد و قابلیت استفاده مجدد را دارد. بلاک ها می توانند درون یکیدیگر قرار داشته باشند و حتی با هم تعامل داشته باشند اما نباید از یکدیگر تاثیر بگیرند. نام بلاگ باید به گونه ای انتخاب شود که هدف آن را توصیف کند.عنصر (ٍElement): کامپوننتی که درون کامپوننت بلاک قرار می گیرد. عنصر ها بخش هایی از بلاک هستند که به صورت مستقل معنا ندارند. نام عنصر ها از نام بلاک و دو Underscore (__) و نام عنصر تشکیل می شوند.پیراینده (Modifier): ماهیتی است که ظاهر، حالت و رفتار یک بلاک یا عنصر را مشخص می کند. نام پیراینده از نام بلاک یا عنصر و یک Underscore (_) و نام پیراینده تشکیل می شود.(توجه در بعضی موارد برای نام گذاری پیراینده از دو تا خط فاصله به جای یک Underscore استفاده می شود).search-form__button_disabled .search-form__button_size_sمتدلوژی OOCSS متدلوژی OOCSSدر این متدلوژی از مفهوم شئ گرایی الگو گرفته شده است. در شئ گرایی ما کارهای بزرگ را به چند کار کوچک تر تقسیم می کنیم. حال این کار را در css انجام می دهیم. مهمترین نکته در این متدلوژی طرز فکر ما در توسعه و جداسازی ساختار عناصر از استایل ها می باشد. متدلوژی OOCSS یک الگو (پارادایم) برنامه نویسی است. OOCSS مخفف Object Oriented CSS است، درواقع همان مفهوم برنامه نویسی Object Oriented دارد. در OOCSS تمرکز برروی کامپوننت های منعطف، ماژولار، و قابل تعویض است که تنها یک کار را انجام میدهند. درواقع در OOCSS کامپوننت ها تنها یک وظیفه دارند و از یکدیگر مستقل هستند..media {} .media .img {} .media .img img {} .media .imgExt {} .bd {} علاوه بر متدلوژی های ذکر شده در بالا، متدلوژی های دیگری مانند SMACSS و Atomic CSS و ITCSS و SUIT CSS وجود دارند که می توان از آن ها استفاده کرد. علاوه بر این متلوژی های آماده شده، شما می توانید متدلوژی خاصی را برای خود تنظیم نمائید و از آن استفاده نمائید. البته یادتان نرود متدلوژی خود را مستند کنید تا همکاران یا افراد دیگر بتواند از کدهای شما استفاده نمایند.امیدوارم این مقاله براتون مفید بوده باشد.

تفاوت آیکون با فونت آیکون

میثم مینوئی — Sat, 02 Oct 2021 01:28:27 +0330

تفاوت آیکون با فونت آیکون در فضای اینترنت کمتر وب سایت یا اپلیکیشنی را پیدا می کنید که در رابط کاربری آن از آیکون استفاده نشده باشد. آیکون ها یکی از پر استفاده ترین عناصر در طراحی گرافیک و طراحی وبسایت هستند. از این رو برنامه نویسان فرانت اند در طراحی و پیاده سازی وبسایت و وب اپلیکیشن ها، از آیکون ها استفاده می نمایند. در این مقاله با مفهوم و مزایای استفاده از فونت آیکون ها بیشتر آشنا می شویم، با من همراه باشید.فهرست مطالبفونت آیکون چیست؟آیکون یا فونت آیکون؟مزایای فونت آیکون - فراخوانی کل آیکون ها با یک درخواست! - کیفیت ثابت و بالا - راحت بودن تغییر اندازه و رنگ آیکون هامعایب فونت آیکون هانحوه استفاده از فونت آیکون ها - دانلود و قرار دادن فونت آیکون در پروژه - استفاده از CDNفونت آیکون چیست؟به طور کلی به مجموعه ای از آیکون ها که به صورت برداری ایجاد شده اند و در یک مجموعه قرار می گیرند و با استفاده از دستورات خاصی توسط برنامه نویسان فرانت اند در طراحی رابط کاربری وبسایت ها و اپلیکیشن ها استفاده می شود، فونت آیکون گفته می شود. شاید برای شما سوال باشد که فونت آیکون را می توان در طراحی گرافیکی (مانند بنر و کارت ویزیت و پوستر و...) استفاده کرد؟ پاسخ این سوال، خیر می باشد. فونت آیکون ها برای حل مشکلات استفاده آیکون در وبسایت ها و اپلیکیشن ها ایجاد شده اند، البته شما می توانید این آیکون ها را از سایت ارائه دهنده فونت آیکون به صورت تکی دانلود و استفاده نمائید.آیکون یا فونت آیکون؟در گذشته برنامه نویسان فرانت اند باید هر آیکون را به صورت تصویر مجزا به پروژه خود اضافه و از آن استفاده می کردند، این کار محدودیت هایی مانند بالا رفتن حجم صفحه، ثابت بودن رنگ بندی را برای برنامه نویسان ایجاد می کرد. در پروژه های کوچک با تعداد آیکون پایین شاید مشکلی ایجاد نشود اما در پروژه هایی که تعداد آیکون ها زیاد باشد و بخواهیم مثلا رنگ بندی وب سایت یا اپلیکشن را تغییر دهیم، نیاز است که رنگ تک تک آیکون ها را تغییر دهیم که کاری طاقت فرسا محسوب می شود اما با آمدن فونت آیکون ها، مجموعه ای از آیکون را با افزودن یک فایل به پروژه خود اضافه می کنیم و با این فونت آیکون ها، مانند فونت رفتار می شود و به راحتی با یک خط کد می توانیم رنگ و اندازه تمامی فونت های استفاده شده در وبسایت یا اپلیکیشن را تغییر دهیم. مزایای فونت آیکون مزایای فونت آیکونامروزه کمتر کسی از آیکون ها به صورت تصویر استفاده می کند و برنامه نویسان هم تمایل بیشتری به استفاده از فونت آیکون ها دارند. در ادامه به برخی از مزایای فونت آیکون ها اشاره می کنیم.فراخوانی کل آیکون ها با یک درخواست!همان طور که در بالا اشاره شد، مثل گذشته نیازی نیست که چنذین درخواست برای دریافت تصاویر آیکون داشته باشیم و از انجایی که مجموعه ای از آیکون ها در یک فایل یا CDN قرار دارند، فقط یک درخواست برای دریافت تمامی آیکون ها مورد نیاز است. برای آشنایی بیشتر با مفهوم CDN اینجا کلیک کنید.افزایش سرعت بارگذاری صفحات اینترنتیوبسایت های به صورت کلی هر چه تعداد درخواست کمتری به سرور ارسال کنند، سرعت بالاتری خواهند داشت و با توجه به گفته های بالا، برای دریافت تمامی آیکون ها ما به یک درخواست بیشتر نیاز نداریم و در نتیجه سرعت بارگذاری سایت ما افزایش پیدا میکند.کیفیت ثابت و بالااز آنجایی که این آیکون ها به صورت برداری طراحی می شوند، با تغییر اندازه آیکون ها کیفیت ثابت می ماند و افت کیفیت نخواهیم داشت. به بیان ساده کیفیت آیکون ها وابسته به سایز آیکون نمی باشد.راحت بودن تغییر اندازه و رنگ آیکون هابه این نکته در بالا هم اشاره شد، فونت آیکون ها رفتاری مانند فونت دارند و با تغییر ویژگی color می توانیم رنگ آیکون ها را تغییر دهیم و با استفاده از ویژگی فونت سایز می توانیم اندازه آیکون ها را تغییر دهیم. البته در فایل این فونت آیکون ها کلاس هایی تعبیه شده است که با اختصاص دادن این کلاس ها به تگ آیکون مورد نظر می توانیم اندازه این آیکون ها را تغییر دهیم.معایب فونت آیکون هابرای فونت آیکن ها معایبی هم در نظر می گیرند که به صورت موردی به این موارد اشاره می کنم. البته به نظر من معایبی که بیان می شود خیلی جدی نیستند که باعث شود از فونت آیکون ها استفاده نکنیم. محدود بودن آیکون هافونت آیکون ها تک رنگ هستندوجود نسخه های تجارینحوه استفاده از فونت آیکون هابه صورت کلی برای استفاده از فونت آیکون ها دو روش وجود دارد، روش اول دانلود مجموعه فونت و قرار دادن آن ها در پروژه. روش دوم استفاده از CDN (توجه:ممکن است بعضی از ارائه دهندگان فونت آیکون ها از این روش پشتیبانی نکنند).دانلود و قرار دادن فونت آیکون در پروژهدر این روش به سایت ارائه دهنده فونت آیکون مراجعه می کنیم و فایل فونت آیکون را دانود می کنیم. بعد از اینکه این فایل را از حالت فشرده خارج کردیم، فونت های موجود را در پوشه فونت های پروژه قرار می دهیم و معمولا یک فایل Css هم وجود دارد که در کنار فایل های Css پروژه قرار می دهیم و این فایل را در قسمت head قالب خود فراخوانی می کنیم. در سایت ارائه دهنده فونت آیکون می توانیم فونت های موجود را تماشا و آیکون های موردنظر خود را انتخاب نمائیم و در پروژه خود از آنها استفاده نمائیم.استفاده از CDNدر این روش کافیست که یک تگ لینک (لینک) را در قسمت head قالب خود اضافه کنیم، این تگ را می توانیم از سایت ارائه دهنده فونت آیکون دریافت نمائیم.از فونت آیکون های محبوب می توان به Font Awesome و Line Icons و Material icons اشاره کرد. البته فونت آیکون های متنوعی برای انواع کتابخانه ها،فریم ورک ها و زبان های برنامه نویسی وب وجود دارد که با جستجو در موتور جستجوی گوگل به راحتی می توانید این فونت آیکون ها را پیدا نمائید و از آنها استفاده نمائید.برای کسب اطلاعات بیشتر درباره فونت آیکون ها و نحوه استفاده و آیکون های موجود، توصیه می شود به سایت ارائه دهنده فونت آیکون مراجعه نمائید.امیدوارم این مطلب براتون مفید بوده باشه. شما از چه فونت آیکون هایی استفاده می کنید؟

اندازه گیری در Css چگونه است؟

میثم مینوئی — Thu, 23 Sep 2021 14:58:02 +0330

واحدهای اندازه گیری در Cssدر زبان Css ویژگی هایی وجود دارد که باید برای آنها مقدار تعیین کنیم، نکته که باید به ان توجه کنیم استفاده صحیح از واحدهای اندازه گیری می باشد. برای استفاده صحیح از واحدهای اندازه گیری نیاز داریم که انواع واحدهای اندازی گیری را بشناسیم و کارکرد هر کدام را بدانیم. در این مقاله قصد داریم با واحدهای اندازی گیری در زبان Css آشنا شویم، با من همراه باشید.فهرست مطالبتعریف واحدهای اندازی گیریواحدهای اندازه گیری مطلقنحوه استفاده از واحدهای اندازه گیری مطلقواحدهای اندازه گیری نسبینحوه استفاده از واحدهای اندازه گیری نسبینکات تکمیلی واحدهای اندازه گیریدر Css برای تعیین اندازه بعضی از ویژگی ها مانند عرض (width)، ارتفاع (height)، فاصله از عنصر خارجی (margin)، فاصله از عنصر داخلی (padding)، اندازه فونت (font-size)، حاشیه (border) و خیلی از موارد دیگر نیاز داریم که مقداری برای این ویژگی ها مشخص کنیم. واحدهای اندازه گیری در Css از دو قسمت به هم پیوسته تشکیل می شوند، قسمت اول عدد و قسمت دوم واحد اندازه گیری، به عنوان مثال 5px یا %20 یا 100vw . واحدهای اندازه گیری در Css به دو دسته واحدهای اندازه گیری مطلق و نسبی تقسیم می شوند که در ادامه با این دو دسته آشنا خواهیم شد.واحدهای اندازه گیری مطلقاین دسته از واحدهای اندازه گیری یک مقدار ثابت دارند و عددی که همراه واحد اندازه گیری می آید، دقیقا به همان اندازه در صفحه وب فضا اشغال می کند. معولا برای داشتن صفحات پویا و واکنشگرا نسبت به اسکرین‌های مختلف کمتر از واحدهای مطلق استفاده می شود. از واحدهای اندازه گیری مطلق بیشتر برای چاپ های خارجی (چاپ بنر، پرینت و ...) استفاده می شود. چندین نوع واحد اندازه گیری مطلق در زبان Css داریم که در ادامه با آنها آشنا می شویم.واحد cm: که به معنی سانتیمتر می باشدواحد mm: که به معنی میلیمتر می باشدواحد in: که به معنی اینچ می باشد (مقدار هر اینچ با 2.54 سانتیمتر یا 96 پیکسل برابر است)واحد px: که به معنی پیکسل می باشد(مقدار هر px برابر با 1/96 هر اینچ می باشد)واحد pt: که به معنی نقاط می باشد(مقدار هر pt برابر با 1/72 هر اینچ می باشد)واحد pc: که کوتاه شده کلمه picas می باشد(هر pc برابر با 12pt می باشد)در بین تمام واحدهای اندازه گیری مطلق px بیشترین کاربرد را دارد و در طراحی صفحات اینترنتی استفاده می شود.نحوه استفاده از واحدهای اندازه گیری مطلقاستفاده از واحد های px و pt رایج تر است و بقیه واحدهای اندازه گیری این دسته در صفحات وب کمتر استفاده می شوند یا اصلا استفاده نمی شوند. جایی که اکثر اوقات از واحد مطلق استفاده می شود ویژگی border یا همان حاشیه می باشد، برای تعیین عرض و ارتفاع بعضی از قسمت های صفحه هم از واحد px می توان استفاده کرد. نحوه استفاده این دستورات به شکل زیر است:div { width:500px; height:300px; border: 1px solid #fac800; font-size: 37pt; }خروجی کد:خروجی کد نکته: از تمامی واحدهای اندازه گیری برای تعیین عرض و ارتفاع می توان استفاده کرد، در اینجا رایج بودن استفاده از این واحدها مد نظر می باشد.معمولا برای تعیین اندازه فونت سایز (font-size) برای کل صفحه یا حداقل برای المان ریشه که معیار اندازه گیری واحد های نسبی em و rem می باشد از pt یا px استفاده می شود. اندازه پیشفرض فونت سایز برای صفحات وب 16px می باشد.واحدهای اندازه گیری نسبیاین دسته از واحدهای اندازه گیری برای یک عنصر، نسبت به ویژگی عرض عنصر دیگر (والد) سنجیده می شوند و در طراحی واکنشگرا انعطاف پذیری بیشتری دارند. در استفاده از واحدهای اندازه گیری نسبی که جدیدتر به زبان Css اضافه شده اند باید پشتیبانی از این واحدها در مرورگرهای مختلف بررسی شود. واحد em: این واحد نسبت به ویژگی font-size عنصر والد سنجیده می شود.به عنوان مثال اگر ویژگی فونت سایز را 10 پیکسل در نظر بگیریم، 2em به معنی اندازه 20px می باشد و 1.5em به معنی 15 پیکسل خواهد بود.واحد ex: نسبت به ارتفاع کاراکتر x سنجیده می شود.واحد ch: نسبت به اندازه عرض کاراکتر 0 تعیین می شود.واحد rem: نسبت به اندازه فونت ریشه (تگ html) مشخص می شودواحد vw: نسبت به 1 درصد عرض کل صفحه نمایش مشخص می شود، مثلا اگر عرض صفحه نمایش شما 30 سانتیمتر باشد هر 1vw برابر با سه دهم سانتیمتر (0.3cm) می باشدواحد vh: نسبت به 1 درصد ارتفاع کل صفحه نمایش مشخص می شودواحد vmin: نسبت به 1 درصد از صفحه نمایش در ابعاد کوچکتر سنجیده می شود، به بیان دیگر بین عرض و ارتفاع صفحه نمایش هرکدام کوچکتر باشد اندازه نسبت به آن سنجیده می شود.واحد vmax: نسبت به 1 درصد از صفحه نمایش در ابعاد بزرگتر سنجیده می شود، به بیان دیگر بین عرض و ارتفاع صفحه نمایش هرکدام بزرگتر باشد اندازه نسبت به آن سنجیده می شود.واحد %: اندازه را به صورت درصد مشخص می کند طبق نظر وبسایت w3schools.com که از سایت های مرجع آموزش برنامه نویسی می باشد، واحدهای اندازه گیری em و rem بیشترین مقیاس پذیری را دارند.تفاوت واحدهای اندازی گیری مختلف در Cssباید به این نکته توجه داشت که اندازه های نسبی در صفحه نمایش های مختلف یا به نسبت عنصر والد یا ویژگی والد ممکن است، متغییر باشند نسبت به تصویر بالا.نحوه استفاده از واحدهای اندازه گیری نسبیبرای درک بهتر واحدهای اندازه گیری نسبی و ارتباط این واحدها با واحدهای اندازی گیری مطلق مثالی برای شما آماده کرده ام که در زیر به آن می پردازیم. دو واحد اندازه گیری em و rem را با هم مقایسه می کنیم.در ابتدا دو تگ div با کلاس های item-1 و item-2 ایجاد می نمائیم و برای وسط قرار گرفتن محتوا و نمایش بهتر دو تگ div ، استایل های زیر را به عناصر خود اختصاص می دهیم.توجه: در کادر زیر فقط استایل هایی که قرار نیست تا انتها تغییری در آنها ایجاد نمائیم، آورده شده است. body { width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .item-1 { height: 200px; background-color: red; } .item-2 { height: 200px; background-color: blue; }در کدهای بالا مشخص کرده ایم که عرض و ارتفاع محتوا به اندازه تمام عرض و تمام ارتفاع دستگاه استفاده کننده باشد.در مرحله اول اندازه یکسان به دو تگ div ایجاد شده خودمان می دهیم..item-1 { width: 10em} .item-2 { width: 10rem}از آنجایی که این دو واحد اندازه گیری به اندازه font-size وابسته هستند و مقدار پیشفرض فونت سایز 16px می باشد، هر دو عنصر ما عرض 160px خواهند داشت.خروجی کددر مرحله بعدی مقدار ویژگی فونت سایز برای body را به 32px تغییر می دهیم.body { font-size: 32px; }خروجی کد همان طور که در تصویر مشاهده می کنید عنصری بالایی که دارای عرض 10em می باشد دو برابر عنصر پایینی می باشد که مقدار عرض آن 10rem می باشد. با تغییر اندازه فونت سایز body عرض عنصر بالایی که دارای واحد em می باشد دو برابر شد اما عنصر پایینی که دارای عرض 10rem می باشد بدون تغییر باقی ماند، زیرا واحد rem وابسته به اندازه فونت سایت تگ html می باشد و فقط در صورت تغییر فونت سایز برای این تگ مقدار آن تغییر می کند.در مثال بالا فونت تمامی المان های صفحه هم دو برابر می شود اما اگر نخواهیم این اتفاق بیفتد کافیست ویژگی فونت سایز را به جای عنصر body به کلاس خود عنصر بدهیم تا روی اندازه فونت باقی عناصر صفحه تاثیری نداشته باشد..item-1 { font-size: 32px; }خروجی کدحال اگر فونت سایز body را به حالت اولیه برگردانیم و فونت سایز تگ html را به 32px تغییر دهیم، عرض هر دوعنصر دو برابر خواهد شد و البته تمامی عناصر صفحه دارای اندازه فونت دو برابر می شوند.مانند شکل زیر.html { font-size: 32px; }خروجی کد توجه برای استفاده از این واحدها رایج است که یک مقدار برای تگ body و html تعریف می شود و طبق آن اندازه عناصر صفحه را تعیین می نمایند. نکات تکمیلی واحدهای اندازه گیریبین عدد و واحد نباید فاصله وجود داشته باشد.اگر مقدار یکی ویژگی صفر باشد نیازی نیست واحد برای آن مشخص کنیماندازه های منفی به صورت کلی تعریف نشده هستند اما برخی از ویژگی های Css اندازه منفی را نیز قبول می کنند. مانند ویژگی های top و left و right و bottom .امیدوارم این مطلب براتون مفید بوده باشه.

طراحی واکنشگرا با Css Grid

میثم مینوئی — Wed, 22 Sep 2021 04:17:56 +0330

طراحی با Css Gridیکی از دغدغه های افرادی که در حوزه فرانت اند فعالیت می کنند، طراحی واکنشگرای صفحات وب سایت می باشد به صورتی که برای تمامی دستگاه های موجود (تلفن های همراه، تبلت ها و کامپیوتر ها) وب سایتی که کدنویسی می کنند، نمایش خوبی داشته باشد. طراحی واکنشگرا با استفاده از Css یا فریم ورک های این زبان انجام می شود. در این مقاله یکی از ماژول هایی که در Css برای طراحی واکنشگرا ایجاد شده است را با هم بررسی می کنیم.دو ماژولی که Css برای طراحی واکنشگرا در اختیار ما قرار می دهد، Css Grid و Flexbox می باشد. از این دو ماژول می توان به صورت مجزا استفاده کرد اما بهترین کار استفاده ترکیبی از هر دو ماژول می باشد. من در این مقاله درباره گرید (Css Grid) صحبت خواهم کرد.فهرست مطالبگرید چیست؟اصطلاحات کار با گریدشروع کار با گرید - استفاده از grid-template-rows و grid-template-columns - مقدار min-content و max-content - مقدار auto - معرفی تابع minmax - معرفی تابع repeat - مقدار auto-fill و auto-fit - ویژگی grid-template-area - ویژگی grid-template - ویژگی grid-gapتعیین مکان آیتم هاید گریدترازبندی آیتم ها در گریدقبل از صحبت درباره گرید، بهتر است اصطلاحاتی را که هنگام کار با گرید موردنیاز می باشد را یادآور شوم و یک تعریف کلی از گرید داشته باشیم.گرید چیست؟گرید ابزاری برای چیدمان صفحه است، به طوری که یک عنصر به عنوان عنصر اصلی (والد) تعریف می شود و ما می توانیم عناصری (فرزند) را داخل این والد تعریف نمائيم. البته ما قدرت کنترل اندازه، ترازبندی و مشخص کردن موقعیت عناصر داخل این والد را خواهیم داشت. گرید ابزاری برای طراحی همزمان در دوبعد طول و عرض (دو بعدی) می باشد. می توانیم هر بخش ایجاد شده را مطابق طرح خودمان طراحی نمائیم.اصطلاحات کار با گریدگرید کانتینر (Grid Container): به عنصر اصلی یا همان والد که قاب اصلی کار ما می باشد، گرید کانتینر گفته می شود.کادر آبی عنصر اصلی ما می باشدگرید آیتم (Grid Item): به فرزندان مستقیم گرید کانتینر، گرید آیتم گفته می شود. ویژگی های float، clear و vertical-tab بر روی این آیتم ها تاثیری ندارند.هر مربع را می توان یک آیتم در نظر گرفتگرید لاین (Grid Line): به خطوطی که عنصر والد ما را در راستای افقی و عمودی تقسیم بندی می کنند، گرید لاین گفته می شود. با استفاده از این خطوط می توان موقعیت آیتم ها را مشخص کرد. به صورت پیشفرض از چپ به راست و از بالا به پایین به ترتیب از شماره ۱ نامگذاری می شوند. دقت کنید که هر خط می تواند چند نام داشته باشد.نامگذاری پیشفرض خطوط در گریدستون گرید (Grid Column): به فضای عمودی بین دو خط عمودی متوالی، ستون گرید گفته می شود.کادر سبز ستون گرید می باشدردیف گرید (Grid Row): به فضای افقی بین دو خط افقی متوالی، ردیف گرید گفته می شود.کادر سبز ردیف گرید می باشد تِرَک گرید (Grid Track): نام عمومی برای ردیف و ستون گرید می باشد، به فضای بین هر دو خط متوالی ترک گرید می گویند. در ادامه بیشتر از این نام استفاده می کنیم.به کادر سبز ترک گرید گفته می شودسلول گرید (Grid Cell): فضایی که بین دوخط عمودی و افقی متوالی قرار بگیرد، سلول گرید گفته می شود.مربع سبز و بقیه مربع ها سلول گرید می باشندناحیه گرید(Grid Area): شبیه تعریف سلول گرید می باشد با این تفاوت که نیازی نیست که حتما خطوط افقی یا عمودی به صورت متوالی باشند. ناحیه گرید می تواند شامل یک یا چندین سلول گرید باشد.به کادر سبز ناحیه گرید گفته می شودگرید گپ (Grid Gap): به فاصله ای که بین ستون ها یا ردیف ها از یکدیگر ایجاد می کنیم گرید گپ گفته می شود. در طراحی معمولا نیاز داریم که بین ردیف های محتوا یا ستون های محتوای خود فاصله ای ایجاد کنیم در گرید به این فاصله گپ گفته می شود.خطوط قرمز گرید گپ می باشندشروع کار با گریدبرای شروع کار با گرید ابتدا باید ساختار صفحه یا محتوای خود را مشخص نمائیم یعنی مشخص کنیم که به چند ردیف و ستون نیاز داریم و اندازه موقعیت این ستون ها و ردیف ها را مشخص نمائيم. سپس باید ویژگی display را برای عنصر اصلی تعیین نمائیم که سه مقدار grid (گرید از نوع بلاک)و inline-grid (گرید از نوع خطی)و subgrid (فرزندان مستقیم هم دارای گرید بندی مانند عنصر والد می شوند) را می تواند دریافت کند. گرید فقط بر روی فرزندان مستقیم خودش تاثیر دارد..grid-container { display: grid; }استفاده از grid-template-rows و grid-template-columnsبا استفاده از grid-template-columns می توانیم نام، اندازه و تعداد ستون های مورد نیاز خود را مشخص نمائیم و با استفاده از grid-template-rows تعداد ردیف های مورد نیاز خود را مشخص می نمائیم. برای مشخص کردن اندازه می توانیم از واحد های پیکسل، درصد یا واحد اختصاصی ماژول گرید که fr نام دارد، استفاده نمائیم. واحد fr اول کلمه fraction به معنی تکه یا بخش است. با استفاده از این واحد فضای خالی را می توان با نسبت های مختلف و منعطف تقسیم بندی کرد. اگر برای خطوط نام مشخص نکنیم به صورت پیشفرض نام هر ردیف و ستون با اعداد جایگزین می شود.با استفاده از این دستور سه ستون و سه ردیف خواهیم داشت..grid-container { display: grid; grid-template-columns: 100px 20% 1fr; grid-template-rows: 2fr 20% 50px; }خروجی کد:مقدار min-content و max-contentبا استفاده از این دو کلمه کلیدی به عنوان اندازه ترک ها (یادتان باشد،ترک به معنی ستون و ردیف می باشد) می توانیم مشخص کنیم که اندازه ترک کمترین مقدار ممکن یا متناسب با اندازه محتوای ما باشد.grid-template-columns: min-content max-content; grid-template-rows: 1fr 1fr 1fr;خروجی کد:مقدار auto با استفاده از کلمه کلیدی auto ترک های ما به صورت خودکار به نسبت های مساوی تقسیم می شوند و تمام عرض یا طول عنصر والد را در بر می گیرند.grid-template-columns: 50px 100px auto; grid-template-rows: 1fr 1fr 1fr;خروجی کد:معرفی تابع minmaxاین تابع دو مقدار دریافت می کند، مقدار اول کمترین اندازه ای که برای هر ردیف یا ستون در نظر می گیریم و مقدار دوم حداکثر اندازه ای که برای هر ردیف یا ستون در نظر می گیریم.grid-template-columns: minmax(50px, 1fr) minmax(10px, 25%) 50px; grid-template-rows: 1fr 1fr 1fr;خروجی کد:معرفی تابع repeatبا استفاده از این تابع می توانیم ستون هایی با اندازه یکسان را بدون تکرار کردن ایجاد نمائیم.grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr;دستور بالا 4 ستون با اندازه های مساوی ایجاد می کند. خروجی کد:مقدار auto-fill و auto-fitبه جای مشخص کردن تعداد تکرارها در تابع repeat می توانیم از این دو مقدار استفاده نمائیم. auto-fill باعث تولید خودکار ترک ها به تعدادی می شود که سرریز نشوند و auto-fit هم باعث تولید خودکار ترک ها می شود اما ترک هایی که محتوایی ندارند و اندازه آنها صفر می باشد را در نظر نمی گیرد و فضای باقی مانده را با توجه به حداکثر اندازه مشخص شده برای هر ترک بین بقیه تقسیم می کند.grid-template-columns: repeat(auto-fill, 1fr);ویژگی grid-template-areaبا استفاده از این ویژگی می توانیم به عناصر خود نام اختصاص دهیم و با استفاده از این نام ها صفحه خود را طراحی نمائیم. در این مدل صفحه چینی لازم است تا نکاتی را رعایت کنیم:تعداد نام هایی که می نویسم در هر ردیف باید برابر باشد، مثلا در همه ردیف ها سه نام داشته باشیمبرای خالی گذاشتن یکی از نام ها، کافی هست که یک یا چند نقطه جای آن قرار دهیمنام گذاری خطوط در این روش به صورت خودکار انجام می شود.body { display: grid; grid-template-area: "header header header" ". main ." "footer footer footer" } header{ grid-area: header; } main { grid-area: main; } footer { grid-area: footer; }ویژگی grid-templateیک ویژگی برای خلاصه نویسی دستورات ساخت ردیف و ستون می باشد. به این صورت که اول مقادیر مربوط به ردیف را نوشته و یک / قرار می دهیم و سپس مقادیر مربوط به ردیف را وارد می نمائیم. از این دستور برای خلاصه نویسی grid-template-area و ترکیبی از همه موارد ذکر شده هم می توان استفاده کرد.grid-template: 1fr 1fr 2fr / 2fr 1fr 2fr;ویژگی grid-gap با استفاده ار این ویژگی می توانیم بین ردیف ها و ستون ها فاصله ایجاد نمائیم. با استفاده از ویژگی gap هم می توانیم دو دستور بالا را در یک دستور خلاصه نویسی کنیم.ویژگی های دیگری مانند grid-auto-columns و grid-auto-rows و grid-auto-flow و .. وجود دارد که می توانیددر مورد هر کدام جستجو نمائید.grid-template: 1fr 1fr 2fr / 2fr 1fr 2fr; grid-gap: 10px 5%;خروجی کد:تعیین مکان آیتم هاید گریدویژگی های بالا همه مربوط به عنصر اصلی بود که ساختار صفحه را با آنها می توان کنترل و ایجاد کرد اما برای تعیین موقعیت هر کدام از آیتم های گرید نیاز داریم با استفاده از دستوراتی موقعیت این دستورات را کنترل نمائیم. با استفاده از 4 ویژگی زیر ساختار گرید را می توانیم برای آیتم های گرید تنظیم نمائیم.ویژگی grid-column-start: خط عمودی شروع یک آیتم گرید را مشخص می کند.ویژگی grid-column-end: خط عمودی پایان یک آیتم گرید را مشخص می کند.ویژگی grid-row-start: خط افقی شروع یک آیتم گرید را مشخص می کند.ویژگی grid-row-end: خط افقی پایان یک آیتم گرید را مشخص می کند. با استفاده از ویژگی های grid-row و grid-column می توانیم 4 دستور بالا را خلاصه نویسی کنیم، به صورتی که عدد اول شروع ردیف یا ستون سپس علامت اسلش قرار می دهیم و عدد دوم که نشانه ردیف یا ستون پایانی هست را وارد می کنیم. (در اینجا اعداد همان نام خطوط هستند).grid-container { display: grid; grid-template: 1fr 1fr 2fr / 2fr 1fr 2fr; grid-gap: 10px 5%; } .grid-item{ grid-row: 1 /3; grid-column: 1/2; background-color: orange; }خروجی کد:ترازبندی آیتم ها در گریدخب بعد از ایجاد ساختار کلی صفحه و مشخص کردن اندازه و موقعیت آیتم های گرید نوبت به ان می رسد که ترازبندی یا الاینمنت را برای آیتم ها مشخص نمائیم. ترازبندی در ماژول های flexbox و Css grid به یک شکل می باشد، برای درک کامل این موضوع و نحوه ترازبندی عناصر به مقاله طراحی و صفحه آرایی با فلکس باکس ( Flexbox ) مراجعه نمائید.فقط به این نکته توجه داشته باشید که جهت یا دایرکشن پیشفرض چپ به راست می باشد و تمامی موارد برای ما فارسی زبانان برعکس خواهد بود . برای تغییر جهت کافیست ویژگی dir در تگ را rtl قرار دهیم.برای داشتن وبسایت واکنشگرا کافیس با استفاده از مدیا کوئری ها و تنظیم ساختار گرید و آیتم های آن برای سایر اسکرین ها، وبسایت خود را واکنشگرا نمائیم.امیدوارم این مطلب براتون مفید بوده باشد.

نکات ثبت دامین و انتخاب هاست

میثم مینوئی — Thu, 16 Sep 2021 23:09:40 +0430

نکات ثبت دامین و انتخاب هاستاولین قدم برای راه اندازی وب سایت و ورود به دنیای کسب و کارهای مجازی انتخاب دامین یا همان دامنه می باشد و دومین قدم برای راه اندازی وب سایت تهیه هاست متناسب با کسب و کار شما می باشد. قبل از اینکه نکات ثبت دامین و انتخاب هاست مناسب را بیان کنیم، لازم است تا با مفهوم دامین، هاست و انواع آنها آشنا شویم تا بتوانیم انتخاب صحیحی داشته باشیم. تا انتهای این مقاله با من همرا باشید.فهرست مطالبدامین چیست؟پسوندهای دامین - پسوندهای عمومی - پسوندهای اختصاصی - پسوندهای ملی- انواع دامین با پسوند ملینکات ثبت دامینهاست چیست؟انواع هاست - انواع هاست - هاست اختصاصی - هاست نیمه اختصاصی (VPS) - هاست ابرینکات انتخاب هاست دامین دامین چیست؟دامین یا همان دامنه، آدرس منحصربه فرد کسب وکار شما در دنیای اینترنت می باشد و در اصل همان نامی است که در نوار بالای مرورگرها کاربران وارد می کنند تا به وب سایت شما هدایت شوند. دامین دارای دو بخش است، قسمت اول نامی است که شما برای کسب و کار خود انتخاب می کنید و قسمت دوم پسوند آن می باشد. اما برای ثبت دامین باید به دو نکته توجه داشت، اول اینکه نام دامین فقط می تواند شامل حروف لاتین، اعداد و خط تیره یا ترکیبی از این موارد باشد، دوم اینکه نام دامین منحصربه فرد است و نمی توان دامین هایی که قبلا توسط شخص یا شرکت دیگری ثبت شده باشد را مجددا ثبت کرد. پسوندهای دامین هم دارای انواع مختلفی هستند که در ادامه بیشتر با آنها آشنا می شویم.پسوندهای دامینپسوندهای دامین دارای انوع مختلفی هستند که هر کدام دارای ویژگی هایی خاصی می باشد و در مواردی ثبت برخی از پسوندها نیازمند داشتن شرایط خاص و ارائه مدارک باشد. پسوندهای مجاز توسط کمیته مخصوص تایید و تصویب پسوندها ( Internet Corporation for Assigned Names and Numbers) ICANN تایید می شوند. به این پسوندهای تایید شده TLD ( Top Level Domain) می‌گویند و دامین ها طبق قوانین این شرکت به سه دسته تقسیم می شوند.پسوندهای عمومیپسوندهای .com که مناسب فعالیت های تجاری می باشد، پسوند .net که مناسب فعالیت های شبکه‌ای می باشد و پسوند .org که مناسب ارگان ها می باشد، در این دسته قرار می گیرند. نکته مهم درمورد این پسوند ها این است که هر شخص یا سازمانی می تواند بدون دریافت مجوز، دامین با این پسوندها را ثبت نماید.پسوندهای اختصاصیاین نوع پسوندها به صورت اختصاصی برای سازمان ها یا حتی افراد با فعالیت های مشخص، با قوانین و مقررات تعیین شده قابل ثبت هستند. از پسوندهای رایج در این دسته بندی می توان به .biz که برای کسب و کارهای الکترونیکی قابل ثبت هست و .info که برای سایت های اطلاعاتی می باشد و .pro که برای افرادی که در یک زمینه به صورت حرفه ای فعالیت می کنند مناسب است، ثبت این دامین نیاز به دریافت مجوز دارد.پسوندهای ملیاین نوع پسوندها رایج ترین پسوند موجود می باشد و برای هر کشور به صورت مستقل وجود دارد. معمولا این پسوندها دو حرف دارند، مثلا .ir که پسوند ملی کشور ایران می باشد. دامین هایی با این پسوند برای عموم مردم و سازمان ها قابل ثبت هستند. هر کشور می تواند قوانین مشخصی را برای پسوند ملی خود ایجاد نماید. پسوند ملی کشور ما خود به دسته بندی های گوناگونی تقسیم شده است که در زیر به معرفی برخی از این دسته بندی ها خواهیم پرداخت.در کشور ما ثبت نام دامین در بعضی موارد نیاز به ارائه مدارک و دریافت مجوز دارد. مثلا برای ثبت دامین هایی که همنام اماکن گردشگری می باشند نیاز به اخذ مجوز می باشد.انواع دامین با پسوند ملیپسوند co.ir: برای شرکت های ثبت شده در ایران می باشد(سهامی عام، خاص و شرکت های با مسئولیت محدود)پسوند ac.ir: برای دانشگاه ها و موسسات آموزشی که دارای مجوز رسمی هستند.پسوند org.ir: برای شرکت ها و موسسات خصوصی که دارای مدارک احراز هویت هستند.پسوند net.ir: فقط برای شرکت های ارائه دهنده اینترنت رسمی در ایرانپسوند gov.ir: این پسوند فقط به مراکز و سازمان های دولتی ارائه می شود .پسوندهای مختلف دیگری هم برای دامین با پسوند ملی وجود دارد،برای کسب اطلاعات بیشتر درباره قوانین ثبت دامنه با پسوند ملی به سایت ایرنیک (مرکز ثبت دامنه کشوری ایران) مراجعه کنیدنکات ثبت دامینبعد از آشنایی با پسوندهای مختلف دامین و انتخاب یکی از این پسوندها نوبت این است که نام دامین خود را هم مشخص کنیم در اینجا نکاتی را برای انتخاب هرچه بهتر نام دامین آورده ام:سعی کنید نام دامین خود را تا جای ممکن کوتاه انتخاب کنیدسعی کنید دامینی انتخاب نمایید که تلفظ راحتی داشته باشد تا در ذهن بماندسعی کنید در نام دامین از کلماتی که مربوط به حوزه کاری شما هست استفاده نماییدسعی کنید تا جای ممکن از خط تیره و اعداد استفاده نکنیدسعی کنید از نام هایی استفاده کنید که شبیه برندهای معروف نباشد، زیرا امکان توقیف دامین شما به دلیل مسائل برندینگ وجود دارد.هاستاکنون که دامین مناسب برای کسب و کار یا استفاده خود را انتخاب کرده اید، نوبت انتخاب هاست مناسب برای اتصال به دامین و راه اندازی وبسایت خودمان می باشد.هاست چیست؟برای راه اندازی وب سایت به محلی نیاز داریم که اطلاعات سایت خودمان مثل توضیحات، تصاویر، کالاها، سفارشات مشتری و... را ذخیره کنیم یا به عبارتی در بستر اینترنت برای دسترسی عموم در سراسر جهان و شبانه روزی قرار دهیم. به این محل هاست یا سرور گفته می شود. در واقع اگر شما داخل خانه کامپیوتر یا لب تاب داشته باشید میتونید از آن به عنوان سرور استفاده نمائید، اما باید شبانه روزی کامپیوتر شما روشن باشد تا کاربران بدون مشکل بتوانند به سایت شما دسترسی داشته باشند. البته موارد دیگری هم وجود دارد که باعث می‌شود ما از کامپیوتر خودمان به عنوان سرور استفاده نکنیم، مثل امنیت، سخت افزار خوب، پایداری اتصال اینترنت برای ارتباط با کاربر و ... ، برای همین برای خرید هاست مناسب سراغ شرکت های هاستینگ می رویم. هاست هایی که توسط این شرکت ها ارائه می شوند انواع مختلفی دارند که در ادامه آنها را بررسی خواهینم کرد.انواع هاستشرکت های هاستینگ با توجه به بودجه و نیاز کاربران هاست های مختلفی را ارائه می دهند، در ادامه انواع هاست های ارائه شده توسط این شرکت ها را بررسی می نمائیم.هاست اشتراکیشرکت های ارائه دهنده هاستینگ بعضی از سرورهای خود را به صورت اشتراکی بین تعدادی از کاربران تقسیم می کنند. این کار به این دلیل است که معمولا سایت هایی که در شروع کار هستند نیار به استفاده از تمام منابع سرور ندارند و هزینه زیادی به آنها تحمیل می شود. هاست های اشتراکی دارای قیمت پایینی هستند و برای شروع کسب وکار می توانند مناسب باشند. البته معایبی مانند امنینت پایین تر و افت سرعت در بعضی مواقع دارند. در یک هاست اشتراکی ممکن است شما با چند ده نفر دیگر از یک سرور استفاده نملئید.هاست اختصاصیدر این نوع هاست شما به صورت اختصاصی و بدون شریک مالک یک سرور می شوید و تمام منابع متعلق به شما می باشد، این نوع هاست دارای کیفیت بالایی می باشد و البته هزینه بالایی هم دارد که برای شروع یک کسب وکار می تواند هزینه زیادی داشته باشد. از مزایای این نوع هاست می توان به پایداری سرعت وب سایت و امنیت بهتر آن اشاره کرد (هر چه امنیت سایت شما بالاتر باشد، امنیت سرور شما هم بالا می رود و برعکس). این نوع هاست بیشتر برای سایت هایی با بازدید بالا مناسب می باشد.هاست نیمه اختصاصی (VPS)این نوع هاست دارای مشخصات و ویژگی هایی بینابین هاست اشتراکی و هاست اختصاصی می باشد، به این هاست ، هاست خصوصی مجازی هم می گویند. در هاست نیمه اختصاصی، سرور به چند بخش تقسیم می شود و وبسایت شما روی یکی از قسمت های این سرور به صورت مجزا قرار می گیرد. این نوع هاست مزایای سرور اختصاصی را ندراد اما برخی از معایب هاست اشتراکی مانند افت سرعت را از بین می برد. قیمت این نوع هاست بسته به انتخاب شما (میزان حجم و شرایط سرور) بستگی دارد اما به صورت کلی نسبت به هاست اختصاصی پایین تر و از هاست اشتراکی بالاتر است.هاست ابریاین هاست شباهت زیادی با هاست نیمه اختصاصی دارد ، در این نوع هاست چندین سرور اشتراکی یا نیمه اختصاصی به صورت شبکه به یکدیگر متصل می شوند. در صورتی که یکی از سایت ها ترافیک بالایی را استفاده کند در حالت معمولی وی سایت های دیگر بر روی آن سرور با کاهش منابع و در نتیجه افت سرعت روبه رو می شوند. اما در هاست ابری اطلاعات سایت شما روی تمام سرورهای شبکه شده تقسیم می شود و در صورت بروز چنین موردی منابع شما کاهش پیدا نمی کند و در نتیحه افت سرعت نخواهید داشت. مهمترین عیب این نوع هاست پراکنده بودن اطلاعات سایت شما می باشد که در هنگام پشتیبان گیری از اطلاعات وب سایت ممکن است با مشکلاتی واجه شوید.انواع دیگری از هاست ها هم مانند هاست وردپرسی و هاست فروشگاهی و ... وجود دارد که شاخه ای از چهار دسته بالا هستند، مثلا هاست های وردپرسی متناسب با سیستم مدیریت محتوا وردپرس بهینه شده اند و نسبت به هاست اشتراکی قیمت بالاتری دارند.نکات انتخاب هاست معتبر بودن شرکت هاستینگپشتیبانی شبانه روزی سرعت و کیفیت هاست هاقابلیت ارتقا هاستبرای بررسی موارد بالا لازم است که شرکت های مختلف هاستینگ را بررسی نمائید و بهترین گزینه را انتخاب نمائید. توصیه من به شما این است که اگر در شروع کار هستید و قصد راه اندازی وبسایت را دارید از هاست اشتراکی استفاده نمائید و بعد از مدتی که کسب و کار شما رشد کرد از هاست های نیمه اختصاصی استفاده نمائید و وقتی که بازدید وب سایت شما افزایش قابل توجه ای پیدا کرد از هاست های اختصاصی استفاده نمائید.امیدوارم که این مطلب براتون مفید بوده باشه. شما از کدوم شرکت های هاستینگ استفاده کردیه‌اید؟ تجربه خودتون رو برای ما بنویسید.

برنامه نویسی فرانت اند چیست؟

میثم مینوئی — Mon, 13 Sep 2021 01:06:33 +0430

یکی از شاخه های پرطرفدار برنامه نویسی، برنامه نویسی وب می‌باشد. اگر در حوزه برنامه نویسی وب فعالیت می‌کنید یا قصد فعالیت در این زمینه را دارید، احتمالا با واژه‌های فرانت اند (Front End) و بک اند (Back End) برخورد داشته‌اید. در این مقاله به معرفی فرانت اند و زبان های برنامه نویسی مرتبط با آن خواهیم پرداخت.فهرست مطالببرنامه نویسی وب سایتفرانت اند چیست؟زبان HTML زبان CSSزبان جاوا اسکریپتبرنامه نویسی وب سایتقبل از اینکه وارد مفهوم فرانت اند شویم، لازم است که درباره برنامه نویسی وب و شاخه های آن کمی صحبت کنیم. برنامه نویسی وب به دو شاخه اصلی فرانت اند و بک اند تقسیم می‌شود. هر سایت یا وب اپلیکیشنی که دردسترس ما قرار دارد از این دو بخش تشکیل شده است. ظاهر وبسایت یا وب اپلیکیشن مربوط به بخش فرانت اند می‌باشد و بخش پایگاه داده و سرور مربوط به بخش بک اند می‌باشد. البته این دو بخش ارتباط مستقیمی با یکدیگر دارند. در ادامه با بخش فرانت اند بیشتر آشنا می‌شویم.فرانت اند چیست؟در تعریف عام به ظاهر هر وبسایت یا وب اپلیکیشن که توسط کاربران قابل مشاهده است، فرانت اند می‌گویند. در بخش فرانت اند کدهای غیرقابل فهم برای کاربر، به ظاهر گرافیکی و قابل فهم برای کاربر تبدیل می‌شود. با گسترش و پیشرفت تکنولوژی زبان های برنامه نویسی مختلفی برای فرانت اند ایجاد شده است. اما سه زبان پایه که برنامه نویسان این شاخه باید تسلط داشته باشند، Html و Css و جاوا اسکریپت می باشد. به طورکلی کدهای بخش فرانت اند توسط مرورگر پردازش می‌شوند.برنامه نویسی فرانت اند به دو بخش طراحی گرافیکی و توسعه دهنده رابط کاربری (UI) تقسیم می شود. در ابتدا طراحان گرافیک، وبسایت یا وب اپلیکیشن را با استفاده از نرم افزار های طراحی مانند ادوب ایکس دی، فیگما، اسکتچ، فتوشاپ و ... پیاده سازی می‌کنند و طرح نهایی را به توسعه دهنده رابط کاربری تحویل می‌دهند. توسعه دهنده رابط کاربری هم این طرح را با استفاده از زبان های برنامه نویسی Html و Css و جاوا اسکریپت پیاده سازی می‌کند. در ادامه مقاله با این زبان ها بیشتر آشنا می‌شویم.زبان HTMLزبان HTMLنام HTML کوتاه شده عبارت Hyper Text Markup Language می باشد و به معنی زبان نشانه گذاری ابر متن می باشد. Html زبان برنامه نویسی نمی باشد و به عنوان زبان نشانه گذاری شناخته می‌شود. ساختار تمام صفحات اینترنتی و وب اپلیکیشن ها بر پایه HTML می‌باشد و عضو جدایی ناپذیر در برنامه نویسی فرانت اند می‌باشد. البته صفحاتی که با استفاده از Html ساخته می‌شوند به تنهایی ظاهر جذابی ندارند و برای افزودن ظاهر گرافیکی و جذاب به زبان Css نیاز داریم.زبان CSSزبان CSSنام CSS کوتاه شده عبارت Cascading Style Sheets می باشد و به معنی شیوه نامه آبشاری می باشد. با استفاده از Css می توانیم صفحات Html را استایل دهی کنیم و به المان های مختلف استایل های مختلفی بدهیم. Css زبان قدرتمندی برای استایل دهی می باشد و استفاده از آن به سطح مهارت و خلاقیت برنامه نویس برمی‌گردد. با استفاده از Css می توانیم وب سایت های واکنشگرا طراحی کنیم.فریم‌ورک های متنوعی برپایه Css ساخته شده اند که امکانات زیادی را به کاربران ارائه می دهند و علاوه بر این چارچوب استانداردی را ایجاد می‌کنند که در کارهای تیمی و سازمانی کاربردی می باشد و باعث یکسان سازی استایل ها و منظم بودن پروژه ها می‌شود. فریم ورک های بسیار زیاد و متنوعی برای Css وجود دارد که می توانیم به بوت استرپ (BootStrap) ، تیلویند (Tailwind) ، سمنتیک یوآی (Semantic UI) ، یوآی کیت(Uikit) و .. اشاره کرد.زبان جاوا اسکریپتزبان جاوا اسکریپتبا استفاده از Html و Css ما می‌توانیم صفحات ایستا داشته باشیم و امکان تعامل با کاربران برای ما سخت خواهد بود، زبان برنامه نویسی جاوا اسکریپت برای حل این مشکل وارد میدان شده است. با جاوا اسکریپت می توانیم وب سایت ها و وب اپلیکیشن های پویا داشته باشیم و به سادگی با کاربران تعامل داشته باشیم. جاوا اسکریپت بر روی مرورگر و سمت کاربر اجرا می شود. جاوا اسکریپت هم مانند Css دارای فریم‌ورک ها و کتابخانه های متنوعی می‌باشد که از این بین می‌توان به ری‌اکت، انگولار، ویو اشاره کرد.امیدوارم این مقاله براتون مفید باشه، شما با چه فریم‌ورک یا کتابخانه هایی کار کردید؟ تجربیات خودتون رو با ما به اشتراک بذارید.