Part 4 मा हामीले website लाई सुन्दर (design) बनायौँ।अब Part 5 मा — website लाई smart र interactive बनाउने सिकौँ 🤖
JavaScript भनेको के हो?
👉 JavaScript = Website को दिमाग (Brain)
- HTML = Structure (घरको ढाँचा) 🏠
- CSS = Design (रंग, सजावट) 🎨
- JavaScript = Action (काम गर्ने शक्ति) ⚡
👉 उदाहरण:
- Button क्लिक गर्दा message देखाउने
- Form submit गर्दा check गर्ने
- Page मा data change गर्ने
JavaScript किन प्रयोग गर्ने?
JavaScript बिना:👉 Website static हुन्छ (केवल हेर्न मिल्ने)
JavaScript प्रयोग गर्दा:✅ Click गर्दा काम गर्छ✅ Form validate हुन्छ✅ Dynamic content देखिन्छ✅ User experience राम्रो हुन्छ
JavaScript कसरी लेख्ने?
1. Internal JavaScript (HTML भित्र)
<script>
alert("नमस्ते!");
</script>
👉 <script> tag भित्र लेखिन्छ
2. External JavaScript (अलग file)
👉 script.js file बनाउने
alert("Hello from JS");
HTML मा link गर्ने:
<script src="script.js"></script>
Basic JavaScript Examples
🔘 1. Button क्लिक गर्दा Message देखाउने
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("नमस्ते! तपाईंले क्लिक गर्नुभयो");
}
</script>
👉 Output: Click गर्दा popup देखिन्छ
🔤 2. Text Change गर्ने
<p id="text">Hello</p>
<button onclick="changeText()">Change</button>
<script>
function changeText() {
document.getElementById("text").innerHTML = "नमस्ते!";
}
</script>
👉 Output: Button क्लिक गर्दा text बदलिन्छ
📥 3. Input Value देखाउने
<input type="text" id="name" placeholder="नाम लेख्नुहोस्">
<button onclick="showName()">Show</button>
<script>
function showName() {
var name = document.getElementById("name").value;
alert("तपाईंको नाम: " + name);
}
</script>
👉 Output: Input गरेको नाम popup मा देखिन्छ
Form Validation (Simple)
<input type="text" id="username" placeholder="नाम">
<button onclick="validate()">Submit</button>
<script>
function validate() {
var user = document.getElementById("username").value;
if(user == "") {
alert("नाम खाली छ ❌");
} else {
alert("Form सफल भयो ✅");
}
}
</script>
👉 खाली भए error देखाउँछ
Complete Example (HTML + CSS + JavaScript)
<!DOCTYPE html>
<html>
<head>
<title>Interactive Form</title>
<style>
body {
font-family: Arial;
background: #f2f2f2;
}
form {
background: white;
padding: 20px;
width: 300px;
}
input {
width: 100%;
padding: 8px;
margin: 5px 0;
}
button {
background: blue;
color: white;
padding: 10px;
border: none;
}
</style>
</head>
<body>
<h1>Login Form</h1>
<form>
<input type="text" id="user" placeholder="Username">
<input type="password" id="pass" placeholder="Password">
<button type="button" onclick="login()">Login</button>
</form>
<script>
function login() {
var u = document.getElementById("user").value;
var p = document.getElementById("pass").value;
if(u == "" || p == "") {
alert("सबै field भर्नुहोस् ❌");
} else {
alert("Login सफल भयो 🎉");
}
}
</script>
</body>
</html>
👉 अब तपाईंको website interactive + smart भयो 😍
गाउँको उदाहरण
👉 HTML = घर बनाउने👉 CSS = घर रंगाउने👉 JavaScript = घरमा बिजुली + ढोका खोल्ने सिस्टम ⚡🚪
➡️ अब घर “जीवित” जस्तो हुन्छ
Part 5 बाट के सिक्यौँ?
✅ JavaScript के हो✅ Script कसरी add गर्ने✅ Button click event✅ Text change गर्ने✅ Input value लिने✅ Simple form validation
Part 6 मा के आउँछ?
👉 DOM Manipulation👉 Page लाई पूर्ण control गर्ने👉 Advanced interaction
👉 अब तपाईं practice गर्नुहोस् 👨💻 — Part 6 मा हामी अझ powerful कुरा सिक्नेछौँ!
<!DOCTYPE html>
<html>
<head>
<title>Interactive Form</title>
<style>
body {
font-family: Arial;
background: #f2f2f2;
}
form {
background: white;
padding: 20px;
width: 300px;
}
input {
width: 100%;
padding: 8px;
margin: 5px 0;
}
button {
background: blue;
color: white;
padding: 10px;
border: none;
}
</style>
</head>
<body>
<h1>Login Form</h1>
<form>
<input type="text" id="user" placeholder="Username">
<input type="password" id="pass" placeholder="Password">
<button type="button" onclick="login()">Login</button>
</form>
<script>
function login() {
var u = document.getElementById("user").value;
var p = document.getElementById("pass").value;
if(u == "" || p == "") {
alert("सबै field भर्नुहोस् ❌");
} else {
alert("Login सफल भयो 🎉");
}
}
</script>
</body>
</html>
👉 अब तपाईंको website interactive + smart भयो 😍
---
गाउँको उदाहरण
👉 HTML = घर बनाउने👉 CSS = घर रंगाउने👉 JavaScript = घरमा बिजुली + ढोका खोल्ने सिस्टम ⚡🚪
➡️ अब घर “जीवित” जस्तो हुन्छ
---
Part 5 बाट के सिक्यौँ?
✅ JavaScript के हो✅ Script कसरी add गर्ने✅ Button click event✅ Text change गर्ने✅ Input value लिने✅ Simple form validation
---
Part 6 मा के आउँछ?
👉 DOM Manipulation👉 Page लाई पूर्ण control गर्ने👉 Advanced interaction
---
👉 अब तपाईं practice गर्नुहोस् 👨💻 — Part 6 मा हामी अझ powerful कुरा सिक्नेछौँ!
Comments
No comments yet. Be the first to comment!