آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت
رنگ پس زمینه سایت شما جزو اولین چیزهایی است که برای کاربر لود می شود پس باید رنگی انتخاب شود که متناسب با هدف سایت شما باشد. حال در این قسمت راحت‌ترین آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت را در اختیار شما قرار میدهیم.
آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت
هدف ما این است که در این مقاله با آموزش تغییر رنگ پس زمینه در html و جاوا اسکریپت را به ساده‌ترین حالت ممکن توضیح دهیم تا کاملا قابل درک باشد. قبل از هر کاری برای اینکه بتوانید تغییرات سفارشی مانند تغییر رنگ پس زمینه انجام دهید لازم است که به سورس قالب دسترسی داشته باشید و بعد از آن از تگ های مخصوص این کار استفاده نمایید.
استفاده از تگ مرسوم در html
تغییر بک گراند در html جزو اولین مواردی است که در درس طراحی سایت آموزش داده می شود. شما خیلی راحت از طریق تگ ساده bgcolor در اچ‌تی‌ام‌ال می توانید پس زمینه را به رنگ دلخواه در آورید. به مثال زیر دقت کنید:
<body bgcolor=”#009966″ >
عددی که در مقابل تگ bgcolor نوشته شده است یک مقدار کد هگز است که شما می توانید رنگ مورد نظر را به جای این کد قرار دهید.
تغییر رنگ پس زمینه در html و جاوا اسکریپت
روش قبلی یکی از روش های منسوخ که در ورژن های قدیمی معمولا استفاده می شد و در حال حاضر برای هرگونه تغییرات از جمله تغییر رنگ پس زمینه یا به اصطلاح استایل دهی به سند اچ‌تی‌ام‌ال باید از روش های بهتر که همان کدهای css هستند استفاده نمایید.
Style یک ویژگی عمومی در html است که از طریق آن می توانید از کدهای css استفاده نمایید. فقط کافی است که آن را در تگ body در html وارد کنید دقیقا به صورت زیر:
<body style=”background-color: #ffbb22;”>
تغییر رنگ پس زمینه با کد جاوا اسکریپت
اگر قصد این کار را دارید باید بگویم در قدم اول نیاز دارید که یک راه ارتباطی با سند html بسازید. البته کار سختی ندارید این کار را می توانید با تگ هایی که برای این منظور هستند استفاده کنید. در این قسمت ما استفاده از تگ button و a را آموزش میدهیم.
- روش اول اگر تصمیم دارید با یک کلیک بر روی دکمه رنگ پس زمینه عوض شود ابتدا باید دکمه را بسازید، سپس کدهای تغییر رنگ را در جاوا اسکریپت بزنید و در انتها این دو بخش را اتصال دهید. در ادامه کامل با جزئیات توضیح خواهیم داد:
گام اول: برای ساخت دکمه تنها کافی است از تگ button در سند استفاده کنید، مانند کد زیر:
<button>change background color</button>
حال شما یک دکمه دارید بعد از این قرار است با زدن دکمه رنگ پس زمینه عوض شود. حال باید از ویژگی onclick استفاده نمایید تا با زدن کلیک یک عمل موردنظر که اتصال است انجام شود. پس نیاز است کد زیر را وارد نمایید:
<button onclick=” ” >change background color</button>
گام دوم: اولین کاری که در این گام باید انجام دهیم باید شی بسازیم(این اقدام برای دسترسی به تگ ها درون اچ‌تی‌ام‌ال است). ما از تگ body در html استفاده کردیم پس نیاز است از آن یک شی بسازیم. بعد از استفاده از تگ body از style استفاده کردیم تا رنگ را تغییر دهیم. حال نوبت آن است که مشخص کنیم منظورمان رنگ پس زمینه است و رنگ مورد علاقه مان را اضافه میکنیم. دقیقا تک تک این مراحلی که گفتیم را باید به صورت زیر وارد نمایید:
document.body.style.background=”#35f1f8″;
گام سوم: حال نوبت پیاده‌سازی اتصال دو بخش قبلی به یکدیگر است که دو روش وجود دارد:
روش اول: در روش اول به صورت مستقیم باید کد قبلی را در ویژگی onclick اضافه کنید. با اجرای کد زیر یک متن با عنوان change background color نمایش داده می شود که زدن به رنگی که کد آن را وارد کرده اید در می آید.
<button onclick=”document.body.style.background= ‘#35f1f8’ ;”>change background color</button>
روش دوم: در این روش ابتدا وارد بخش کدهای جاوا اسکریپت می شوید یک تابع تعریف می کنید (قرار است این کد را در html فراخوانی کنید) :
function setBgColor (color) {
document.body.style.background=color;
}
بعد از آن در بخش html کد زیر را وارد کنید:
<button onclick=” setBgColor (‘#35f1f8’);”>change background color</button>
-
تغییر رنگ پس زمینه با تگ a
شما تمامی موارد بالا را می توانید با تگ a نیز پیاده‌سازی کنید، دقیقا مشابه کد زیر:
<a href=”#” onclick=” setBgColor (‘#35f1f8’);”>change background color</a>
تغییر رنگ پس زمینه با رنگ‌های تصادفی
اگر تصمیم دارید که از رنگ های تصادفی استفاده کند و هر دفعه با وارد شدن کاربر آنها را سورپرایز کنید فقط کافی است از این روش استفاده کنید.برای استفاده از رنگ تصادفی باید از دو تابع setBgColor و randBg استفاده کنید. در تابع randBg نیاز است که یک آرایه با چند رنگ و عدد تصادفی با توجه به طول آرایه تعریف کنید، دقیقا مشابه کد زیر:
function setBgColor(color){
document.body.style.backgroundColor = color;
}
function randBg() {
var bgColor, colors = new Array(‘red’, ‘green’, ‘blue’, ‘yellow’, ‘orange’);
bgColor=colors[(Math.floor(Math.random() * colors.length))];
setBgColor(bgColor);
}
حال باید تابع را با استفاده از تکه کد زیر فراخوانی کنید:
<button onclick=” randBg ();”>change background color</button>
تغییر رنگ پس زمینه در حالت های مختلف
شما با استفاده از جاوا اسکریپت می توانید سایت های زیبایی طراحی کنید و کسب درآمد کنید، اگر هنوز نمی دانید چطور اینکار را انجام دهید حتما مقاله روش های کسب درآمد از برنامه نویسی جاوا اسکریپت را مطالعه فرمایید. در این قسمت چند نمونه از رایج ترین روش هایی که می توانید با استفاده از آن زیبایی دوچندان به صفحه خود بدهید را به شما آموزش داده ایم:
تغییر پس زمینه با هر رفرش
راحت ترین روشی که برای تغییر پس زمینه با هر رفرش می توانید انجام دهید این است که به جای اینکه مقدار یا رنگ مشخصی بدهید از یک عدد رندم استفاده نمایید.
تغییر پس زمینه به صورت گرادینت
یکی از بک گراندهای جذاب، بک گراند گرادینت است. برای اینکار در بخش جاوا اسکریپت باید یک تایمر و در داخل آن استایل گرادینت اضافه نمایید.
تغییر پس زمینه بعد از پرداخت
معمولا اکثر افرادی که سایت طراحی میکنند برای بعد از پرداخت وجه ایده های جالبی دارند یکی از این ایده ها این است که بعد از پرداخت پس زمینه صفحه تغییر کند. برای این کار شما نیاز دارید که یک استایل شرطی تعریف کنید و از طریق بولین بررسی شود که اگر پرداخت با موفقیت انجام شد سبز و اگر ناموفق بود قرمز شود.
خلاصه
اگر فکر میکنید که جاوا اسکریپت و HTML را نمی دانید میتوانید آموزش جاوا اسکریپت و آموزش HTML را ببینید. در این روش سعی کردیم تمامی قسمت ها و روش ها را به صورت کامل توضیح دهیم، اما فراموش نکنید شما زمانی می توانید این بخش را به صورت کامل فرا بگیرید که آن را پیاده‌سازی کنید. شروع کنید، تمرین کنید و سوالی داشتید در این مسیر از مداد سبز بپرسید.
دیدگاهتان را بنویسید