Hey future dev, this is V, and today we're going to talk about every dev nightmare (just kidding) JavaScript.This is the first article in a series that will help you level up your JavaScript skills. So get comfortable, open your code editor and we are going to start!
What is JavaScript, and why do we need it?
Let’s start by defining what JavaScript (or JS) is. JavaScript is a scripting language that was developed in the 1990s. Today, it's widely used to add interactivity and behavior to websites and web applications.
With JavaScript, you can create animations, manipulate HTML elements, including change their text content or styles, and much more.
For example, when you scroll up and down and see the website header disappear or change color — that's JavaScript in action.
But don’t think JS is only for flashy browser effects. Since the release of Node.js, JavaScript can also run on the server side. This puts it in the same league as languages like Python.
To sum it up: JavaScript is a versatile programming language, heavily used in web development, that brings dynamic behavior to your applications.
Coding Time: Your First JS line
As I mentioned before, JavaScript is used to add functionality to your website. On its own, JavaScript can't run outside the browser, so there are three common ways to see it in action:
👉 In the browser
👉 By using local website files, like page.html and script.js
👉 By installing Node.js locally and running script.js files
In this section, we'll focus on the first two options, since using Node.js requires some prerequisites and deserves a separate article.
Check JS magic in Browser
To execute JavaScript directly in your browser, open a new tab and press Ctrl+Shift+I (or right-click anywhere on the page and choose Inspect). This opens the browser’s Developer Tools.
Navigate to the Console tab. You should see a blinking cursor. Now type console.log("Hello World!") into the console and press Enter
You should see a new line printed with: Hello World!
Obviously, this isn't the best place to write large amounts of JavaScript, but it's a great way to experiment. You can also try typing simple expressions, like 5 + 6
The console should return: 11
Run JS Scrips on your webpage
So, we had some fun with the DevTools Console — now it’s time to see how JavaScript works with your actual website.
You can download a code example with all the necessary files from the following GitHub repository.
Alternatively, I’ll walk you through creating the project step by step so you can build it yourself.
First, choose a folder on your computer where you want to store your website. Inside that folder, create two files:
👉 index.html
👉script.js
Then, add the following code to your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>I love JavaScript</title>
</head>
<body>
<main>
<h1>JavaScript is the best!</h1>
<button>Click me to see the title change</button>
</main>
</body>
<script src="./script.js"></script>
<script>
setTimeout(() => {
alert("Your are doing great!");
}, 3000);
</script>
</html>
Now, update script.js with this code:
alert("Hello User! Welcome to JavaScript");
document.addEventListener("DOMContentLoaded", function() {
const button = document.querySelector("button");
button.addEventListener("click", function() {
document.querySelector("h1").textContent = "I was manipulated by JavaScript!";
button.textContent = "Good Job!";
button.style.backgroundColor = "#B30086";
button.style.color = "white";
button.style.fontSize = "15px";
button.style.padding = "10px 20px";
button.style.border = "none";
button.style.borderRadius = "5px";
button.style.transition = "all 0.4s ease";
});
});
So, if you take a look at this line
<script src="./script.js"></script>
The <script> tag is specifically used to link a JavaScript file to your HTML document. The src attribute refers to the file being linked — in our case, that’s script.js.
You may also notice that we've embedded a script directly into the page. This should remind you of how we used internal CSS with the <style> tag — the logic is quite similar.
In general, it's better not to mix JavaScript and HTML. Using a separate JavaScript file keeps your code cleaner and easier to manage. However, for quick tests or small examples, an embedded script works just fine.
Let's talk about script code.
👉 alert is responsible to execute a browser native window with a certain message.
👉 document.addEventListener means that as soon as our html document will be loaded we want to turn on certain fnctionality, that is resides in the body of the method (inside cursly braces)
👉 const button = document.querySelector(“button”); this is how we can grab our DOM element (html tag) and manipulate it state. And the rest of the code is simply apply new styles to our button.
So...Frameworks, JQuery and Vanila JS
Before we finish this article, I want to mention a few terms that you're likely to encounter during your JavaScript journey.
First, there's jQuery. It was heavily used before modern frameworks appeared. Today, it's considered legacy, even though many websites still use it. For new projects, it's best to avoid jQuery and stick with modern JavaScript or frameworks.
Next, let’s talk about frameworks. Since DOM manipulation is one of JavaScript’s core features, different companies and developers have created libraries and frameworks to make it easier. Some of the most popular ones include React, Vue, and Angular.
You can check out this React article to build a small React app and get a taste of what modern frameworks offer.
That said, I strongly recommend learning the basics of JavaScript before diving into any framework. A solid foundation will make learning those tools much easier and more effective.
And lastly, you may come across the term Vanilla JS. As you might guess, this just refers to plain, native JavaScript — like the code we've written together today.
Thank you for reading it, and Happy Coding!
💬 Comment Section