J

Learn JavaScript – Step by Step

Button click, alert, simple calculation – ছোট ছোট example থেকে শুরু।
← All Courses
Try it Yourself (HTML + JS)
JavaScript উদাহরণ এডিট করে Run চাপো – নিচের পেজে ফলাফল দেখবে।
` }, alert:{ title:"২. Alert & Console", text:`দুইটা সাধারণ output পদ্ধতি: 1) alert() → popup box দেখায় 2) console.log() → browser এর console এ মেসেজ দেখায় (F12 → Console)`, code:` Alert & Console

Alert & Console Example

` }, btn:{ title:"৩. Button Click Example", text:`HTML button এর onclick ইভেন্টে function কল করে আমরা ছোট ছোট কাজ করতে পারি – text পরিবর্তন, রং বদলানো ইত্যাদি।`, code:` Button Click
Click নিচের button

` }, calc:{ title:"৪. Simple Calculation", text:`JavaScript দিয়ে সহজেই input নিয়ে যোগ, বিয়োগ ইত্যাদি করা যায়।`, code:` Simple Calculator

Two Number যোগ

Result: 0

` } }; const contentEl = document.getElementById("content"); const codeArea = document.getElementById("code"); const iframe = document.getElementById("preview"); function loadChapter(key){ const chap = chapters[key]; if(!chap) return; contentEl.innerHTML = ""; const h2 = document.createElement("h2"); h2.textContent = chap.title; const p = document.createElement("p"); p.innerText = chap.text; const label = document.createElement("p"); label.innerHTML = "Example code:"; const box = document.createElement("div"); box.className = "code-box"; box.textContent = chap.code; contentEl.appendChild(h2); contentEl.appendChild(p); contentEl.appendChild(label); contentEl.appendChild(box); codeArea.value = chap.code; runCode(); } function runCode(){ const doc = iframe.contentDocument || iframe.contentWindow.document; doc.open(); doc.write(codeArea.value); doc.close(); } function resetCode(){ const active = document.querySelector(".chapter.active"); const key = active ? active.getAttribute("data-chapter") : "intro"; loadChapter(key); } document.querySelectorAll(".chapter").forEach(ch => { ch.addEventListener("click", () => { document.querySelectorAll(".chapter").forEach(c => c.classList.remove("active")); ch.classList.add("active"); loadChapter(ch.getAttribute("data-chapter")); }); }); loadChapter("intro");