<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>جلسه دهم - DOM</title>
<style>
body { font-family: Tahoma; padding: 20px; transition: background 0.5s; }
#box {
width: 300px;
height: 100px;
background: #f0f0f0;
padding: 20px;
margin-top: 20px;
border: 2px solid #333;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>🛠️ کار با DOM</h1>
<div id="box">متن اولیه</div>
<br>
<button id="changeTextBtn">تغییر متن</button>
<button id="changeStyleBtn">تغییر استایل</button>
<button id="addElementBtn">افزودن المان جدید</button>
<script>
// ۱. پیدا کردن المانها
let box = document.getElementById("box");
let textBtn = document.getElementById("changeTextBtn");
let styleBtn = document.getElementById("changeStyleBtn");
let addBtn = document.getElementById("addElementBtn");
// ۲. رویداد تغییر متن
textBtn.addEventListener("click", function() {
box.textContent = "متن تغییر کرد! 🎉";
box.style.color = "green";
});
// ۳. رویداد تغییر استایل
styleBtn.addEventListener("click", function() {
box.style.backgroundColor = "#ffeb3b"; // زرد
box.style.borderRadius = "10px";
box.style.fontSize = "20px";
});
// ۴. رویداد افزودن المان جدید
addBtn.addEventListener("click", function() {
let newP = document.createElement("p");
newP.textContent = "این یک پاراگراف جدید است که با JS اضافه شد.";
newP.style.color = "blue";
newP.style.fontWeight = "bold";
// اضافه کردن به انتهای box
box.appendChild(newP);
});
</script>
</body>
</html>
کد نهایی جلسه دهم برای تمرین
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