14.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; }
.box {
background: #e3f2fd;
padding: 15px;
margin-top: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>🛠️ تست توابع</h1>
<div class="box">
<p>خروجی کنسول رو ببینید (F12)</p>
</div>
<script>
// ۱. تابع ساده
function showMessage() {
console.log("تابع اجرا شد!");
}
showMessage();
// ۲. تابع با پارامتر
function calculateArea(width, height) {
return width * height;
}
let area1 = calculateArea(5, 10);
let area2 = calculateArea(3, 4);
console.log("مساحت مستطیل اول: " + area1); // 50
console.log("مساحت مستطیل دوم: " + area2); // 12
// ۳. تابع شرطی
function checkGrade(score) {
if (score >= 10) {
return "قبول";
} else {
return "مردود";
}
}
console.log("وضعیت نمره ۱۵: " + checkGrade(15)); // قبول
console.log("وضعیت نمره ۵: " + checkGrade(5)); // مردود
</script>
</body>
</html>
کد نهایی جلسه نهم برای تمرین
eitaa.com/Pythonfriend
خلاصه دستورات DOM
دستور
کاربرد
getElementById("id")
پیدا کردن المان بر اساس ID
querySelector("selector")
پیدا کردن المان بر اساس انتخاب‌گر CSS
innerHTML
تغییر محتوای HTML داخل المان
textContent
تغییر متن ساده داخل المان
element.style.property
تغییر استایل CSS المان
createElement("tag")
ساختن المان جدید
appendChild(element)
اضافه کردن المان به والد
eitaa.com/Pythonfriend
19.3M حجم رسانه بالاست
مشاهده در ایتا
جلسه دهم قسمت اول
eitaa.com/Pythonfriend
19.1M حجم رسانه بالاست
مشاهده در ایتا
جلسه دهم قسمت دوم
eitaa.com/Pythonfriend
19.8M حجم رسانه بالاست
مشاهده در ایتا
جلسه دهم قسمت سوم
eitaa.com/Pythonfriend
16.7M حجم رسانه بالاست
مشاهده در ایتا
جلسه دهم قسمت چهارم
eitaa.com/Pythonfriend
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