JAVASCRIPT

تغیر رنگ پس زمینه با جاوااسکریپت

چطور با جاوااسکریپت رنگ پس زمینه رو عوض کنم؟

جاوااسکریپت زبان دوست داشتنی بسیار مرموز دنیای وب از اوایل پیدایش خود همیشه کاربردی بوده و خواهد بود . در اینجا به زبان بسیار ساده به شما خواهیم گفت که چطور یک تابع کوچک بنویسید و توسط اون رنگ پس زمینه صفحه خودتون رو تغییر بدین و کمی ماجراجویی میکنیم و این تابع رو با یک دکمه فعال میکنیم کمی خلاقیت چاشنی اون میکنیم تا برای شما بهتر جاب بیفته و ترس یا نگرانی که نسبت به یادگیری جاوااسکریپت داشتین برطرف بشه . پس مثل همیشه کنار ما باشید تا باهم دنیا رو فتح کنیم البته با صلح…!

شیرینی این زبان اینجاست که نیاز خاصی به هیچ چیزی نداریم , با یک Notepad کد رو مینویسیم و با یه مرورگر اجراش میکنیم .

 

در کد بالا یک سند HTML رو میبینید که در آن جاوااسکریپت نوشته شده و باکمک Onclick , تابع ما صدا زده میشه و دستورات موجود در آن اجرا میشه . دو متغییر داریم که مسولیت ساخت رنگ را به عهده دارن و صورت رندم فعالیت می کنن و در دو خط اخر تابع قسمتهایی که باید تغییر کنن رو انتخاب کردیم و مقدارش رو همان دو متغییر قرار دادیم.

در مرحله بعد علاوه بر تغییر پس زمینه  صفحه به تعداد دلخواه دکمه با رنگ بندی مختلف می سازیم به راحتی بالا . پس با ما همراه باشید ….

نسبت به تابع قبلی چند خطی اضافه شده که باهم اون هارو بررسی میکنیم و به سادگی و جذابیت جاوااسکریپت پی میبریم :

آموزش پروژه محور جاوااسکریپت

تابع generateNewButton :

در خط اول دستور ساخت دکمه صادر می شود

در خط دوم نوشته درون دکمه به صورت رندم تولید می شود که بین ۱۰ تا ۹۹ است

در خط سوم نوشته ایجاد شده به عنوان فرزند دکمه اضافه می شود

در خط چهارم کلاسی که در css برای دکمه تعریف کردیم رو صدا می زنیم و برای دکمه ای که ساختیم در نظر میگیریم

در خط پنجم یه دستور css ساده است

در ششم و هفتم که رنگ های پس زمینه و دکمه ساخته می شود و در متغییر قرار می گیرد

در خط هشتم هم متغییر ساخته شده برابر با پس زمینه  قرار داده می شود

درخط نهم هم متغییر مربوطه به دکمه متصل می شود

در خط آخر تایع دکمه ای که ساخته شده به سند Html اضافه می شود

بررسی تابع generateMultipleButtons:

در اینجا برای جلوگیری از تکرار کدنویسی اضافی و صرفه جویی در وقت دستورات قبل رو در یک حلقه قرار میدهیم

در این  صفحه قرار بر این است که دو کار انجام شود

با کلیک بروی دکمه Ha ha , Im a Button Generator تابع  generateNewButton صدا زده می شود و تابع شروع به فعالیت می کند و دکمه با شرایطی که تعریف کردیم تولید می شود

با کلیک بر دکمه Im a Faster Button Generator تابع generateMultipleButtons فراخوانی خواهد شد و با به تولید دکمه های بیشتر می پردازد که خودتون می تونید تعداد رو تغییر بدین .

در پست های بعدی کلی مینی پروژه خیلی ساده براتون تدارک دیدیم که سهمی کوچکی داشته باشیم در پیشرفت برنامه نویسی شما . به جی کوئری هم خواهیم رسید کلی پلاگین جی کوئری براتون مینویسیم که حتما از دیدنشون و سادگیشون تعجب خواهید کرد.

منبع : w3schools

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

1 دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

بستن