💠 کانال رسمی کربلایی
علی سهرابی
🔸در پیام رسان ایتا
🔺 اعلام جلسات
🔺 گزارشات صوتی و تصویری ...
🔹 کنار ما باشید 👇
https://eitaa.com/alj_sohrabi
خلاصه رویدادهای مهم
رویداد
توضیح
مثال کاربرد
click
کلیک موس
دکمه‌ها، لینک‌ها
input
تایپ کردن در اینپوت
جستجو، فرم‌ها
change
تغییر مقدار (بعد از خروج از اینپوت)
لیست‌های کشویی
keydown / keyup
فشار دادن دکمه کیبورد
میانبرها، Enter
mouseover
ورود موس به المان
منوها، افکت‌ها
mouseout
خروج موس از المان
باز شدن منو
load
بارگذاری صفحه
خوش‌آمدگویی اولیه
eitaa.com/Pythonfriend
16.7M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت اول
eitaa.com/Pythonfriend
19.6M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت دوم
eitaa.com/Pythonfriend
20.9M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت سوم
eitaa.com/Pythonfriend
20.7M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت چهارم
eitaa.com/Pythonfriend
19.6M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت پنجم
eitaa.com/Pythonfriend
19.1M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت ششم
eitaa.com/Pythonfriend
15.3M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت هفتم
eitaa.com/Pythonfriend
15.8M حجم رسانه بالاست
مشاهده در ایتا
جلسه یازدهم قسمت هشتم
eitaa.com/Pythonfriend
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>جلسه یازدهم - رویدادها</title>
<style>
body { font-family: Tahoma; padding: 20px; text-align: center; }
.container { margin-top: 50px; }
button {
padding: 10px 20px;
font-size: 18px;
margin: 10px;
cursor: pointer;
}
#counter {
font-size: 40px;
font-weight: bold;
color: #333;
}
.box {
width: 200px;
height: 100px;
background: #ddd;
margin: 20px auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
transition: all 0.3s;
}
</style>
</head>
<body>
<div class="container">
<h1>🖱️ تست رویدادها</h1>
<!-- شمارنده -->
<div id="counter">0</div>
<button id="incrementBtn">افزایش (+1)</button>
<button id="resetBtn">ریست (0)</button>
<hr>
<!-- باکس هاور -->
<div class="box" id="hoverBox">موس رو بیار روش!</div>
</div>
<script>
// ۱. رویداد شمارنده
let count = 0;
let counterDisplay = document.getElementById("counter");
let incBtn = document.getElementById("incrementBtn");
let resetBtn = document.getElementById("resetBtn");
incBtn.addEventListener("click", function() {
count++;
counterDisplay.textContent = count;
// تغییر رنگ بر اساس عدد
if (count > 10) {
counterDisplay.style.color = "red";
} else {
counterDisplay.style.color = "#333";
}
});
resetBtn.addEventListener("click", function() {
count = 0;
counterDisplay.textContent = count;
counterDisplay.style.color = "#333";
});
// ۲. رویداد هاور (Mouse Over/Out)
let box = document.getElementById("hoverBox");
box.addEventListener("mouseover", function() {
box.style.backgroundColor = "#4CAF50";
box.style.color = "white";
box.style.transform = "scale(1.1)"; // بزرگ شدن کمی
});
box.addEventListener("mouseout", function() {
box.style.backgroundColor = "#ddd";
box.style.color = "#333";
box.style.transform = "scale(1)";
});
// ۳. رویداد کلیک روی کل صفحه
document.addEventListener("click", function(e) {
console.log("کلیک در صفحه: " + e.target.tagName);
});
</script>
</body>
</html>
کد نهایی جلسه یازدهم برای تمرین
eitaa.com/Pythonfriend