https://virgool.io/feed/@xtremedoto Mid Level Front End Developer fa 2026-06-17 02:55:23 https://files.virgool.io/upload/users/1151792/avatar/HiFrCu.jpeg?height=120&width=120 https://virgool.io/@xtremedoto https://virgool.io/@xtremedoto/%D8%B3%D8%A7%D8%AE%D8%AA-%D8%B3%D8%A7%DB%8C%D8%AA%DB%8C-%D9%85%D8%B4%D8%A7%D8%A8%D9%87-ui-gradients-%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86-%D9%BE%D8%B1%D9%88%DA%98%D9%87-%D8%B3%D8%B7httpsfilesvirgooliouploadusers1151792postsay0hrhlmo9dsbquzfcncl8sjjpeg%D8%AD-%D9%85%D8%A8%D8%AA%D8%AF%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%DA%A9%D8%A7%D8%B1%D8%A7%D9%86-ay0hrhlmo9ds سلام دوستان تو این مقاله قصد داریم که یه سایتی مشابه سایت UI Gradients البته به صورت خیلی ساده تر و با کد های قابل فهم تر برای اون دسته از دوستانی که مبتدی هستن و تازه شروع به یادگیری زبان برنامه نویسی جاوا اسکریپت کردن یا میخوان پروژه هایی کوچیکی که سطح مبتدی دارن و برای بالا بردن مهارت کد نویسی جاوا اسکریپتشون هست رو ارتقا بدن.ی چیز مهم : خط به خط کد های جاوا اسکریپتی که مینویسیم توضیحشون هم میدیم پس خیالتون از این بابت راحت باشه :)خب بریم ک شروع کنیم...اول از همه طبق معمول فایل های index.html style.css app.js رو میسازیم البته این اسما اختیاری هست شما هر اسمی که عشقتون کشید میتونین بزارین برای فایلاتون.گام بعد اینه که ما بیایم به قول خوبا اسکلت سایتمون رو با html پیاده سازی کنیمبه صورت زیر هست...<div id=&quotbg&quot></div>بکگراند گردینتمون که هر رنگی تولید میشه به این المنتمون هم اعمال میشه خلاصه کاربر باید یه دید رنگی که تولید شده داشته باشه دیگه تا بخواد کد رنگش رو کپی و استفاده کنه. <div id=&quotglass&quot> <p>Click the button to Change Random bg color</p> <input type=&quottext&quot spellcheck=&quotfalse&quot id=&quotcolor-code&quot> </div>خب کد بالا هم که ما میایم یه گلسی وسط صفحه قرار میدیم و کد رنگ رو داخل یه اینپوتی که چایلد گلس هستش میریزیم. <div class=&quotcopy-animation&quot> <p>Copied</p> </div>این تیکه کدم که وقتی کاربر روی اینپوت کلیک میکنه و کد به صورت خودکار کپی میشه براش به نمایش در میاد حالا در ادامه با اضافه کردن css و js بهتر درک میکنید کاراییشو...<button id=&quotbtn&quot> <img src=&quothttps://s4.uupload.ir/files/change-icon-color-9_ayb5.jpg&quot alt=&quot&quot> </button>اخرین کاری که برای تکمیل اسکلت وبسایتمون باید انجام بدیم اضافه کردن تیکه کد بالاست که تمامی رویداد ها با کلیک بر روی این دکمه اتفاق میوفته یعنی بگراند و... اینا عوض میشن یه عکسی هم انداختیم توش حالا شما خواستین میتونین از ایکون های font awesome یا google استفاده کنین به جای عکسی چیز مهم : دقت کنین برای پیدا کردن المنت هامون از طریق DOM باید حتما المنت های داخل سند HTML مون ایدی و یا کلاس داشته باشن و اینکه یادتون نره فایلاتون رو لینک کنید به یک دیگه.خب دوستان من تصمیم گرفتم کدای css رو داخل یه کد ادیتور آنلاین برای شما بزارم تا بتونین از اونجا یه ویویی داشته باشین از کدای css چون خیلی زیاد بودن میتونین روی لینک کلیک کنین تا ببینین codesandboxبر فرض اینکه شما css بلدین توضیح دادن این بخش هم میدونستم خیلی کسل کننده میشه براتون برای همین قبل از استایل دادن هر بخش از المنت های HTML مون یه کامنته کوتاهی گذاشتم برای عزیزانی که css بلد نبودن که برن بخونن.شما الان باید یه همچین ویویی از برنامه ای که نوشتین داشته باشین حالا میریم که این برناممون رو با جاوا اسکریپت تعاملی کنیم و بهش مغز بدیم. اول از همه ما به یه آرایه ای که پر از رنگ های گردنیت مختلف هستش نیاز داریم که به صورت زیر باید تعریف کنید. کدای اینم متاسفانه زیاد شده من همرو با عکس توضیح میدم کداشو، و خروجی کار رو میزارم داخل کدپن که شماهم بتونین ببینین.اگر رنگ های گردنیت بیشتری به آرایه مون اضافه کنیم خب مثلما وب اپلیکیشنمون کارایی و تنوع رنگی بالاتری خواهد داشت. میتونین خودتون اینکار رو انجام بدینبعد از اینکه آرایه رنگارو ساختیم میریم سراغ پیدا کردن المنت هامون که میخوایم با جاوا اسکریپت تعاملیشون کنیم و کاربر با اون ارتباط داشته باشه.const btn = document.getElementById(&quotbtn&quot);const bg = document.getElementById(&quotbg&quot);const ColorCode = document.getElementById(&quotcolor-code&quot);const CopyAnimation = document.querySelector(&quot.copy-animation&quot);const CopyAnimationLength = document.querySelector(&quot.copy-animation&quot);بعدش میایم به دکمه ای که داخل سند HTML مون ساخته بودیم ایونت کلیک رو اعمال میکنیم btn.addEvenetListener(&quotclick&quot, ChangeColor);فانکشنی که به ایونت دکممون پاس دادیم رو مینویسیمداخل فانکشن استارت کار اصلیمون رو میزنیمباید اول بیایم تعداد عناصر آرایه مون رو به دست بیاریم و اون رو با متد Math.floor و Math.random ضرب در تعداد عناصر آرایه مون میکنیمالان اگر از این کد Color[RandomColor] کنسول بگیرین میبینین که داره یه کد رنگی گردینت برمیگردونه و همونطور که میبینین با هر دفعه کلیک روی دکمه بک گراند المنتمون که ایدی bg رو داشت تغییر میکنهخب باید کدمون رو از یه طرف دیگه داخل اینپوتی که ساختیم و حالت دیفالتش هیدن هست باید این کدارو بهش اضافه کنیم با هر بار کلیک روی دکمه مقدار داخل اینپوت بر اساس رنگی که تولید شده کد اون رنگ رو میده و بکگراند خود اینپوت هم تغییر میکنه.حالا میایم انیمیشن هامون رو اضافه میکنیم وقتی که روی دکمه کلیک میشه ایدی bg یه انیمیشن چند ثانیه ای محو شدگی میگیره و اینپوتمون هم انیمیشن به اصطلاح پیپر رو میگیره باز و بسته میشه و این عملیات هر 200 ثانیه اضافه میشه با کلیک بر روی دکمه و ورداشته میشه .و در آخر هم میایم وقتی رو اینپوت کلیک شد کد رنگ به صورت اتوماتیک کپی کلیپ بورد کاربر میکنیم کدش رو مینویسیم.رویداد کلیک رو به اینپوت داخل صفحه مون میدیم و با استفاده از شی navigator.clipboard.writeText می آییم و مقدار داخل اینپوت را میگیریم و داخل کلیپ بورد کاربر کپی میکنیم شی navigator اطلاعاتی از مرورگر کاربر را بر روی خودش ذخیره میکند و شی clipboard محتویات نوشته شده را بر میگرداند wirteText مشخص میکند که چه نوع داده ای داخل کلیپ بورد ذخیره شود و در اخر هم وقتی روی اینپوت کلیک شده المنت copied نمایان میشه و هر 2000 ثانیه استایلش حذف میشهلینک کامل پروژه در کدپن Ui Gradients اگر از این سری آموزش ها خوشتون اومده میتونین توی قسمت نظرات بنویسین برام منم سعی میکنم هفته ای یکبار پروژه های مبتدی تا پیشرفته جاوا اسکریپت رو براتون بزارم و اینکه من رو به بزرگی خوتون ببخشید اگر ایراداتایی داشتم چون اولین تجربه نوشتنم بود عذر خواهی میکنم ازتون و در پایانحتما این نوشته رو با دوستاتون که در مسیر یادگیری جاوا اسکریپت هستند به اشتراک بزارین تا کمکی کرده باشین بهشون و اموزش داده شده رو تمرین و تکرار کنید تا به مباحث مسلط شوید.سوالی بود هم من رو به عنوان نزدیک ترین دوستتون بدونید و بهم پیام بدید در خدمتم .اینستاگرام : Madi.jigsawایمیل : MahdiDev.Front@gmail.com Mahdi Rostami Mahdi Rostami Thu, 07 Oct 2021 22:34:31 +0330 https://virgool.io/@xtremedoto/5-%D8%A7%D8%B4%D8%AA%D8%A8%D8%A7%D9%87-%D8%AA%D8%A7%D8%B2%D9%87-%DA%A9%D8%A7%D8%B1%D8%A7%D9%86-%D8%AF%D8%B1-%D8%B1%D8%A7%D8%A8%D8%B7%D9%87-%D8%A8%D8%A7-html-vpntgfwpofxf HTML اصل و بنیاد اولیه توسعه وب و طراحی وبسایت است. البته سوء تفاهمی پیش نیاید که یک زبان برنامه نویسی نیست و با آن نمیتوان کارهایی که یک زبان برنامه نویسی مثل C# و یا Python انجام میدهد را انجام دهید HTML یک زبان نشانه گذاری است که به شما اجازه میدهد فندانسیون یک وبسایت را پایه ریزی کنید. در این ساختار المان های یکی صفحه نه با استفاده از دستورات برنامه نوسی که با تگ ها و خصوصیات مربوط به آن ها ایجاد میشوند.هر برنامه نویس وبی برای استارت کار باید تگ های پایه ای HTML را فرا بگیرد برای ورود به دنیای توسعه و طراحی وب اهمیت بسیار زیادی دارد چرا که «خشت اول گر نهد معمار کج، تا ثریا می رود دیوار کج». به همین دلیل بسیار مهم است که بتوانید در کنار یادگیری مباحث اولیه، سعی کنید که اشتباهات و کارهای نادرستی که ممکن است براساس بی تجربگی انجام می‌دهید را در همین قدم‌های اول تصحیح نموده و با دید بهتری پیش بروید.در این مطلب از وبسایت ویرگول قصد دارم در رابطه با 5 مورد از این اشتباهات رایج صحبت کنم که تصحیح کردن شان در همین قدم های اولیه به پیشرفت تان کمک میکند تا بتوانید کد های بهینه تر و خوانا تری بنویسید. استفاده از تکنیک Inline styling توسعه دهندگان زیادی وجود دارند که بدلیل کاهش فایل های CSS پروژه شان از استایل دهی خطی یا inline styling استفاده میکنند. باید بگویم که استفاده کردن از چنین روشی ابدا یک رویکرد مناسب نیست و باعث میشود که شما خطوط قرمز استاندارد بودن و اصول اولیه طراحی را زیر پا بگذارید.مثال : <h1 style="color: #1f1f1f">Hello World</h1> رویکرد اشتباه H1{ Color: #000; رویکرد درست}۲. استفاده نکردن از تگ Figureدسترسی‌پذیری یکی از عوامل مهم برای حرفه‌ای نشان دادن خودتان بعنوان یک توسعه‌دهنده وبسایت است. در این بین یکی از تکنیک‌های بسیار کاربردی برای بالا بردن دسترسی‌پذیری المان‌های تصویر خود، استفاده از تگ Figure است. در حال حاضر چیزی که ما مشاهده می‌کنیم استفاده بسیار کم از این تگ و تنها به کار بردن تگ img بصورت تنهاست. با این کار شما شانس استفاده از Caption را تا حد زیادی از دست می‌دهید.برای اینکه بتوانید از این تگ بصورت درست استفاده کنید نیاز است که به رویکرد درست زیر توجه نمایید:رویکرد اشتباه:<P>This Is An Image.</P><Img Src=&quotImages/Img&quot Alt=&quotAlt Text&quot />رویکرد درست:</Figure><Figure><Img Src=&quotImages/Img&quot Alt=&quotAlt Text&quot><Figcaption>This An Image Of A Car.</Figcaption>رعایت این مورد ارزشمندی طراحی و وبسایتی که شما ایجاد کرده‌اید را در نزد کاربر و همچنین موتورهای جستجوگر بسیار بالا می‌برد.۳. استفاده نکردن از تگ‌های معنادار یا Semantic Tagsیکی دیگر از اشتباهاتی که بسیاری از افراد مبتدی مرتکب آن می‌شوند استفاده نکردن از تگ‌های معنادار HTML است. این نوع از تگ‌ها به بالا بردن قابلیت خوانایی یا Readability وبسایت کمک بسیار زیادی می‌کنند.مطمئنا اگر با HTML آشنایی داشته باشید این نوع تگ‌ها را می‌شناسید و نام‌شان را شنیده‌اید. برای مثال Header، Nav، Main، Article و... شامل این دسته از تگ‌ها می‌شود. از طرفی تگ‌هایی مانند Div و Span تگ‌هایی معنادار نبوده و ما تنها برای فرایند ساختاردهی و لایه‌بندی از آن‌ها استفاده می‌کنیم.بنابراین برای مکان‌هایی که تگ معنادار وجود دارد «مانند سربرگ، پاورقی و...) بجای استفاده از Div از Header و Footer استفاده کنید.رویکرد اشتباه:<Div Class=&quotFooter&quot>This Is A Footer</Div><Div Class=&quotHeader&quot>This Is A Header</Div><Div Class=&quotSection&quot>This Is A Section</Div>رویکرد درست:<Footer>This Is A Footer</Footer><Header>This Is A Header</Header><Section>This Is A Section</Section>۴. استفاده از المان‌های Block محور در داخل Inline محوراین نکته را خوب به یاد بسپارید که هیچگاه المان‌های بلوک محور مانند h۱ را نباید در داخل المان‌های Inline محور مانند a قرار دهید. المان‌های بلوک‌محور همان‌هایی هستند که یک Block یا بصورت همه فهم‌تر یک خط کامل را به خود اختصاص می‌دهند. تگ‌های Heading، Div و... جزو این دسته هستند. از طرفی المان‌های Inline المان‌هایی هستند که تنها به اندازه محتوایی که دارند مکان و فضا را اشغال می‌کنند. تگ‌های span، a و... جزو این دسته از المان‌ها هستند.بنابراین هیچگاه از المان‌های بلوک محور در داخل المان‌های درون-خط محور استفاده نکنید.رویکرد اشتباه:</a><a><h2>This is a link</h2>رویکرد درست:</h2><h2><a>This is a link</a>۵. استفاده از تگ‌های Bold و Italicهمانطور که می‌دانید تگ‌های b و i برای bold و italic کردن (کلفت و کج) متون استفاده می‌شوند. با این حال در نظر بگیرید که این تگ‌ها ابدا تگ‌های معناداری نبوده و اصل دسترسی‌پذیری را نقض می‌کند.برای اینکه متنی را به شکل‌های ذکر شده در بیاورید بهتر است از تگ‌های معنادارتری مانند strong و em استفاده کنید.رویکرد اشتباه:<b>This text is bold.</b><i>This text is italic.</i>رویکرد درست:<em>This text is bold.</em><strong>This text is italic.</strong>در پایانهمانطور که مشاهده کردید در این مطلب پنج اشتباه بسیار تکنیکی و مهم را بررسی کردیم که به حرفه‌ای بودن شما در همین قدم‌های اول یادگیری طراحی وبسایت کمک بسیار زیادی می‌کند. این مقاله را حتما با کسانی که در ابتدای راه فراگیری هستند به اشتراک بگذارید و نکات گفته شده را متذکر شوید. Mahdi Rostami Mahdi Rostami Sun, 29 Aug 2021 01:06:14 +0430