Welcome to your very first adventure in JavaScript coding! If you are itching to start creating interactive and dynamic web pages, this tutorial is the ideal place to begin. Today, we’ll review the basics of writing your very first JavaScript code. So don’t get intimidated if you’re starting from scratch; we’ll keep everything very understandable and simple.
Setting Up Your Environment
Before we dive into writing code, let’s first create a basic environment that will let you see your JavaScript in action. All you’ll need is a plain text editor like Notepad, Visual Studio Code, or Sublime Text, and a web browser like Chrome, Firefox, or Edge.
create a New File Start by opening your text editor and creating a new file.
Save the File: Save the file as index.html. This will tell your computer that it’s a webpage.
Writing HTML Structure
Our JavaScript code is going to run inside an HTML document. Here’s just a simple HTML structure to get us stated. Type this into your index.html file:
<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript</title>
</head>
<body>
<h1>Welcome to My JavaScript Page</h1>
<button onclick="displayMessage()">Click Me!</button>
<p id="message"></p>
<script>
// JavaScript goes here
</script>
</body>
</html>
In This HTML Document, We Have:
An h1 heading that reads “Welcome to My JavaScript Page”.
A button which, when clicked.
A paragraph, p, where we will print a message.
The script tag, where we will put our JavaScript code.
Adding Your First JavaScript Code
Now let’s add some JavaScript to make the button interactive. Inside the script tag, add the following code:
function displayMessage() {
document.getElementById('message').innerText = 'Hello, world!';
}
Here’s what this JavaScript code does:
Declaration: function displayMessage() declares a function named displayMessage. This is a set of instructions that will run when we call it.
DOM Manipulation: document.getElementById(‘message’) finds an HTML element with the ID message. .innerText = ‘Hello, world!’ changes the text inside that element to “Hello, world!”.
How It Works Together
When you open your index.html in a web browser and press the “Click Me!” button, the displayMessage function runs. It replaces the text inside the
tag with “Hello, world!”, which then shows up on the page.
Viewing Your Web Page
To see your JavaScript in action:
Open the folder that contains your index.html file.
Double click the index.html file. It should automatically open in your default web browser.
Click the “Click Me!” button and you will see “Hello, world!” pop up on screen.
Congratulations!
You’ve just written your first JavaScript code! You have connected JavaScript with HTML to make your first simple interactive web page. That is however just the tip of the iceberg when it comes to what you can do with JavaScript – why not try changing the message, or add more html elements and then also interact with those using JavaScript too.
Ready for more? Continue with our tutorials and you will be building more advanced and cooler web applications in no time. Happy coding!
