Scribd
Upload
2 views2 pages

Basic Javascript

The document provides an overview of basic JavaScript concepts including variables, arrays, objects, functions, conditionals, loops, DOM manipulation, and events. It includes code examples for each concept and demonstrates how to interact with the DOM through a button click. The script also logs messages to the console for debugging purposes.

Uploaded by

noxadi3388
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views2 pages

Basic Javascript

The document provides an overview of basic JavaScript concepts including variables, arrays, objects, functions, conditionals, loops, DOM manipulation, and events. It includes code examples for each concept and demonstrates how to interact with the DOM through a button click. The script also logs messages to the console for debugging purposes.

Uploaded by

noxadi3388
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Basic JavaScript Concepts</title>
</head>
<body>
<h1 id="title">JavaScript Basics</h1>
<p id="output">Click the button to interact.</p>
<button onclick="handleClick()">Click Me</button>

<script>
// 1. Variables and Data Types
let name = "Alice";
const age = 25;
var isStudent = true;

// 2. Array
let hobbies = ["Reading", "Gaming", "Cooking"];

// 3. Object
let user = {
name: "Bob",
age: 30,
greet: function () {
return "Hi, I'm " + this.name;
}
};

// 4. Function
function greetUser(username) {
return "Hello, " + username + "!";
}

// 5. Conditionals
function checkAge(age) {
if (age < 18) {
return "Minor";
} else if (age < 60) {
return "Adult";
} else {
return "Senior";
}
}

// 6. Loop
function listHobbies(hobbies) {
let result = "Hobbies: ";
for (let i = 0; i < hobbies.length; i++) {
result += hobbies[i];
if (i < hobbies.length - 1) result += ", ";
}
return result;
}

// 7. DOM Manipulation + Events


function handleClick() {
let output = document.getElementById("output");
let message = greetUser(name);
message += "<br>" + user.greet();
message += "<br>Status: " + checkAge(age);
message += "<br>" + listHobbies(hobbies);
output.innerHTML = message;
}
// 8. Console Logging
console.log("Script loaded!");
console.log(user);
console.log("Age status:", checkAge(age));
</script>
</body>
</html>

| Concept | Code Example |


| ---------------- | ------------------------------------- |
| Variables | `let`, `const`, `var` |
| Arrays | `["Reading", "Gaming"]` |
| Objects | `{ name: "Bob", age: 30 }` |
| Functions | `function greetUser(name)` |
| Conditionals | `if...else if...else` |
| Loops | `for (let i = 0; i < arr.length)` |
| DOM Manipulation | `document.getElementById().innerHTML` |
| Events | `onclick="handleClick()"` |

You might also like