No posts available in this category.

JavaScript Installation

Published on 8/12/2024

Add to Favorites

To begin using JavaScript on your computer, you only need a web browser like Chrome, Safari, or Firefox, and a text editor like Visual Studio Code.

In this guide, we will be using the Chrome browser.

Download Google Chrome

To download Chrome, go to Chrome and press the “Download Chrome” button.

You can write JavaScript code directly in the browser by right-clicking on a page and navigating to the console, but that’s not practical so this guide will focus on writing code in Visual Studio Code.

Download Visual Studio Code

To be able to run JavaScript, you can use an IDE like Visual Studio Code.

Download Visual Studio Code by going to Visual Studio Code and clicking the “Download” button that matches with your computer type.

Once the download completes, it will prompt you with a series of configurations, and you can select the default options for them all, but you can change settings if your prefer.

Once the installation and configuration is complete, go on the Visual Studio Code app, then go to the extensions tab and search “Live Server”. Click on the first result that shows up and click “install”. This will allow you to run your code in the browser in real-time and will update each time you save the file.

Create Your First File Using JavaScript

To create your first file using JavaScript, create an HTML .html file and entering the following code:

jsx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Example</title>
</head>
<body>
    <h1 id="greeting">Hello, World!</h1>
    <button onclick="changeGreeting()">Click Me</button>

    <script>
        function changeGreeting() {
            document.getElementById("greeting").innerText = "Hello, JavaScript!";
        }
    </script>
</body>
</html>

To learn more about the HTML the HTML tags used in the above example, check out this HTML Introduction guide. JavaScript code is wrapped in <script> elements and is typically placed at the bottom of the HTML <body> tag.

Displaying Your JavaScript Code

Once you have the Visual Studio Code “Live Server” extension installed, click on the “Go Live” button on the bottom of the app. This will run a live server of your HTML file containing the JavaScript code. LiveServer Now, you can play around with the code in real time and interact with the button from the HTML file.

Conclusion

In this guide, you learned how to download a web browser and text editor for running JavaScript code. You also learned how to create and format an HTML file with JavaScript code within it and run it on a live server. We will go more in depth on JavaScript and the advanced possibilities with JavaScript throughout this section.