How to Quickly Get Started with JavaScript Programming (Development Environment)

How to Quickly Get Started with JavaScript Programming (Development Environment)

Generally speaking, there are three quick ways to get started with JavaScript programming: coding directly in the browser console, using an online JavaScript environment for practice, or creating local files on your computer for exercises. In this article, JavaScript programming refers specifically to front-end development. If you want to go further with JavaScript, you can install and configure Node.js locally for more advanced practice.

Browser Console Environment

Modern browsers such as Chrome and Firefox come with built-in developer tools. In Chrome or Firefox, you can open the developer tools panel and start coding right away (shortcut: Ctrl+Shift+I). In the console, you can directly enter code and begin programming.

Online JavaScript Environments

Some websites provide online JavaScript programming environments, which are convenient for practicing JavaScript directly in the browser. Well-known online editors include:

• JSBin
• Runoob Tools
• W3School

If you want to practice TypeScript online, you can also try:

• Runoob Tools
• Official Playground

Creating Local Files

Create a local directory named HelloWorld, and inside it create an index.html file:

<div id="HelloWorld">Hello World</div>
<h1>Welcome To JavaScript World</h1>
<p></p>

In the same folder, create a styles.css file:

#HelloWorld {
  width: 100px;
  height: 100px;
  color: tomato;
  background-color: yellow;
}

h1 {
  width: 200px;
  height: 100px;
  color: blueviolet;
}

p {
  color: blue;
}

Also in the same folder, create a HelloWorld.js file:

document.getElementById("HelloWorld").innerHTML = `
<h1>Hello World</h1>
<h2>hello world</h2>
`;

window.onload = () => {
  alert("This is a beginner example program");
};

Open this folder in VS Code or another editor, edit these files, and you can start practicing JavaScript. Open the HTML file in a browser to see the results. If you use VS Code, you can also install an HTML Preview extension to preview the page directly in the editor.