16.9M حجم رسانه بالاست
مشاهده در ایتا
جلسه دهم قسمت پنجم
eitaa.com/Pythonfriend
8.8M حجم رسانه بالاست
مشاهده در ایتا
جلسه دهم قسمت ششم
eitaa.com/Pythonfriend
<!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
به کانال «امیرالمؤمنین علی (ع)» خوش آمدی.
اینجا فقط یه کانال نیست،
اینجا دلی است که برای علی (ع) می‌تپد.
نمی‌خواهیم شعار بدهیم،
می‌خواهیم بگوییم چرا علی (ع) هنوز هم نور است،
هنوز هم حقیقت، هنوز هم پناه.
«فُزْتُ وَ رَبِّ الْکَعْبَةِ»
چون علی (ع) رستگار بود...
ما هم با یادش رستگار می‌شویم.
دوست داشتی عضو شو رفیق ❤️
@AMIRALMOMENINIMAMALI
💠 کانال رسمی کربلایی
علی سهرابی
🔸در پیام رسان ایتا
🔺 اعلام جلسات
🔺 گزارشات صوتی و تصویری ...
🔹 کنار ما باشید 👇
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