State در وب؛ حافظه صفحه

اگر مقدارها را نگه نداری، سایتت هر لحظه نقش آدم فراموشکار را بازی می‌کند.

درس 5 از 10

شمارنده با state

در وب ساده هم state داریم. یک متغیر نگه می‌داری و هر بار تغییر کرد، خروجی را دوباره render می‌کنی.

counter render

import kotlinx.browser.document

var count = 0

fun render() {
    document.getElementById("count")?.textContent = "تعداد: $count"
}

fun main() {
    document.getElementById("plus")?.addEventListener("click", {
        count++
        render()
    })
    render()
}

خروجی یا نتیجه اجرا

هر کلیک روی plus عدد count را یکی زیاد و متن صفحه را به‌روز می‌کند.

نکته کاربردی: حتی اگر framework نداری، مفهوم state و render باید توی ذهنت جا بیفتد. فریم‌ورک‌ها همین را شیک‌تر می‌کنند.

نتیجه این درس 🎯

State و render را در وب فهمیدی. درس بعد می‌رویم سراغ فرم‌ها و ورودی کاربر.

تمرین! 🧠

یک count را با دکمه minus یکی کم کن و render را صدا بزن.

جواب تمرین

document.getElementById("minus")?.addEventListener("click", {
    count--
    render()
})

خروجی جواب

با هر کلیک روی minus، عدد روی صفحه یکی کم می‌شود.