JavaScript Coding Day 15 | JavaScript Basics: Alerts, DOM Manipulation, and Arrays
JavaScript Basics: Alerts, DOM Manipulation, and Arrays
Watch the lesson tutorial 🔻
Welcome back to the blog! Today, we are going to explore different ways to display output in JavaScript and how to handle basic data structures like Arrays. Whether you are running this code on a local browser or an online editor like NextLeap, these examples will help you understand the core concepts.
1. The Alert Box
The simplest way to show a message to a user is using the window.alert() method. This pops up a small window on the browser screen. The user must click "OK" to proceed.
Practical Example:
<script>
// This will create a popup window with the name "Prasad"
window.alert("Prasad");
// Output: A browser popup displaying "Prasad"
</script>
2. Changing Text Content (innerText)
To display data directly on the web page, we often manipulate the HTML elements. The innerText property allows you to change the plain text inside an element (like a div).
Note: In JavaScript, capitalization matters! It must be innerText, not innertext.
Practical Example:
<body>
<div id="div1"></div>
<script>
// Select the element by ID and change its text
document.getElementById("div1").innerText = "Prasad";
// Output: The text "Prasad" appears on the web page inside the div.
</script>
</body>
3. Inserting HTML Content (innerHTML)
If you want to add styling (like bold text or headings) dynamically, you use innerHTML. Unlike innerText, this property understands HTML tags and renders them correctly.
Practical Example:
<body>
<div id="div1"></div>
<script>
// Here we insert an H2 heading tag inside the div
document.getElementById("div1").innerHTML = "<h2>Prasad</h2>";
// Output: "Prasad" appears on the page, formatted as a large Heading 2.
</script>
</body>
4. Simple Data Structures: Array Manipulation
Arrays are used to store multiple values in a single variable. Here is how you can add items to an array dynamically:
push(): Adds a new item to the end of the array.unshift(): Adds a new item to the start of the array.
Correction Note: We use parentheses () for methods like push and unshift, not square brackets [].
Practical Example:
<script>
// 1. Create an array with one name
var x = ['Chirana'];
// 2. Add 'liyanage' to the END of the list
x.push('liyanage');
// 3. Add 'nimnaka' to the START of the list
x.unshift('nimnaka');
// Print the final list to the console
console.log(x);
// Output: Array(3) [ "nimnaka", "Chirana", "liyanage" ]
// The console on NextLeap will show the list in this specific order.
</script>
Codes Run On VS Code (Copy and Paste to Your Console)
<div id="div1"></div>
<div id="div2"></div>
<script>
// We use window.onload to make sure the HTML loads before the Script runs
window.onload = function() {
// ============================================
// SECTION 1: WINDOW ALERT
// ============================================
// Note: You must click "OK" on the popup for the rest to show
window.alert("Prasad");
// ============================================
// SECTION 2: INNER TEXT
// ============================================
// This targets the first div and adds plain text
var element1 = document.getElementById("div1");
if (element1) {
element1.innerText = "Prasad";
}
// ============================================
// SECTION 3: INNER HTML
// ============================================
// This targets the second div and adds an H2 heading
var element2 = document.getElementById("div2");
if (element2) {
element2.innerHTML = "<h2>Prasad</h2>";
}
// ============================================
// SECTION 4: ARRAY DATA STRUCTURE
// ============================================
var x = ['Chirana'];
// Add 'liyanage' to the END of the array
x.push('liyanage');
// Add 'nimnaka' to the START of the array
x.unshift('nimnaka');
// Print the result to the console
console.log(x);
// Output: ["nimnaka", "Chirana", "liyanage"]
};
</script>
Comments
Post a Comment