JavaScript in TryHackMe Pre-Security: Making Webpages Interactive – Full Lab Write-Up

Introduction

While HTML gives structure and CSS adds style, JavaScript (JS) brings life to the web. Without it, websites would remain static and unresponsive.

In this lab from the TryHackMe Pre-Security course, we explore how JavaScript enables interactivity, handles user events, and dynamically updates web pages. For anyone starting their journey in web development or cybersecurity, understanding JavaScript's role is essential.

---

What is JavaScript?

JavaScript is one of the most widely used programming languages in the world, primarily used for creating dynamic and interactive web content.

Some common uses of JavaScript include:

• Dynamically updating text or styles on a page

• Responding to user actions like clicks or hovers

• Validating form inputs

• Creating animations and interactive UI components

JavaScript runs directly in the browser, allowing real-time changes without needing to reload the page.

---

How JavaScript Works in Web Pages

JavaScript can be embedded directly into an HTML page using the <script> tag or linked externally using the src attribute:

htmlCopyEdit<!-- Internal JavaScript -->
<script>
  console.log("Hello from inside the HTML!");
</script>

<!-- External JavaScript -->
<script src="/scripts/main.js"></script>

---

Key JavaScript Concepts from the Lab

Targeting and Updating Elements

You can select and modify HTML elements using document.getElementById() and .innerHTML.

Example:

javascriptCopyEditdocument.getElementById("demo").innerHTML = "Hack the Planet";

This code selects the element with the ID demo and replaces its content.

---

Adding Interactivity with Events

JavaScript can also respond to user actions such as button clicks. Here's an example using the onclick event:

htmlCopyEdit<button onclick='document.getElementById("demo").innerHTML = "Button Clicked";'>
  Click Me!
</button>

This button changes the text of the demo element when clicked. Such interactivity is crucial in real-world web applications and is foundational in building responsive UI.

Alternatively, event listeners can also be defined inside a <script> block:

javascriptCopyEditdocument.querySelector("button").onclick = function() {
  document.getElementById("demo").innerHTML = "Button Clicked";
};

---

Lab Exercise Summary

Task 1 – Update Content with JavaScript

Using JavaScript, we modified an HTML element's content to display the text:

javascriptCopyEditdocument.getElementById("demo").innerHTML = "Hack the Planet";

Answer: JSISFUN

---

Task 2 – Add a Clickable Button

We added an HTML button with an onclick event that updated the text on the page when clicked:

htmlCopyEdit<button onclick='document.getElementById("demo").innerHTML = "Button Clicked";'>
  Click Me!
</button>

This showed how HTML and JavaScript work together to create dynamic interactions.

---

Conclusion

This lab provided a practical introduction to how JavaScript enhances web pages beyond static content. By learning how to:

• Select HTML elements

• Modify content dynamically

• Handle user-driven events