Page Content

Tutorials

How To Create Hello World Program In JavaScript

Hello World Program in JavaScript

Learning programming languages typically begins with a Hello, World! program. “Hello, World!” is usually output by this straightforward program to welcome you to the programming world. Computer scientist Brian Kernighan initiated this custom in 1972, and “The C Programming Language” published it for the first time in 1978. They are the first words said by something you have given life to, and the underlying significance of this straightforward expression is just as powerful now as it was back then.

Even while it might seem dated to a more advanced generation of students studying programming, the example’s main focus is on the fact that you are producing something independent with noticeable results, not the language or the way it is shown.

Depending on the circumstances, there are multiple ways to write and execute a JavaScript “Hello, World!” program. Although JavaScript can also run in other settings, such Node.js, the browser is the primary environment in which it operates.

Using the Browser Console

Using the built-in console of your web browser is one of the easiest ways to begin writing “Hello, World!” in JavaScript. There is an interactive JavaScript command line available in the browser console.

To execute the code, type it straight into the console and hit Enter:

“Hello world!” console.log; or: console.log(“Hello world!”)

“Hello, World!” is logged to the terminal by this single statement. The console should say “Hello, World!” if everything goes according to plan. The console.log() statement will be used frequently to test code snippets and see the outcomes. Any message you send to the console.log() function via the argument is displayed. This is the simplest way for Node to deliver output to the stdout stream or show a message to the user.

In addition to console.log(), there are other console methods like console.table() and console.error().

Using the Command

“Hello, World!” is also frequently shown by using the alert() command. The window object’s alert() method shows an alert box with a given message. There is an OK or Cancel button in this box, however the button’s content varies depending on the browser and cannot be changed. The message that appears in the popup that is created by the alert command is enclosed in parenthesis.

Here’s how to use alert() to write “Hello, World!”

“Hello World” alert;

or as an alternative:

“Hello world!” called window.alert;

Instead of using HTML as the message, the window.alert(message) function uses plain text. When the “OK” button on the alert box is pressed, it will be dismissed. If you want to ensure that the user receives information, you frequently utilise an alert box. This technique should not be overused because it diverts attention from the active window and prevents additional code execution until the user clicks OK. The alert box’s design cannot be changed, and it only functions in browsers.

Because console.log() allows you to output multiple numbers at once without disrupting the browser interface, it is often easier to learn how to code and run programs in the console than using alert().

Including JavaScript Directly in HTML

Another option is to create a basic webpage that displays “Hello, World!” by incorporating JavaScript code straight into the HTML. You could, for instance, make an HTML file and add a <script> tag to it.

<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>

The alert box would appear when you opened this.html file in your browser.

As an alternative, you could create a function that makes use of alert() and use the onLoad event handler to call it when the page loads:

<html>
<head>
<title>Title of the Page</title>
<script language="JavaScript">
<!--function hello(){
alert("Hello World")
}
//-->
</script>
</head>
<body onLoad="hello()">
Here are the contents of the page!
</body>
</html>

A function called hello is defined with the function hello(){… }. The message is shown using the alert(“Hello World”) command inside the function. The <body> tag’s onLoad=”hello()” indicates that the hello() function is invoked upon document loading. Since JavaScript is now the default language, the <script> tag’s language=”JavaScript” attribute is no longer required.
Another option is to use document.write() to write the text straight to the document. The document object contains a function called document.write().

Running “Hello, World!” in Node.js

JavaScript requires a host environment in order to function as an interpreted language. Although the browser is a typical environment, JavaScript may be run outside of the browser with Node.js. Console.log() is used to write the traditional “Hello World” program in Node.js:

log from console (“Hello World!”);

Node programs are run with commands like node program.js, where program.js contains your code. Console.log() is the easiest way to display a message or send output to stdout in Node.js, and it’s not just for debugging. Like browsers, Node specifies console.log() to debug output.

Web servers that react to queries can also be made with Node.js. A straightforward Node.js HTTP server might reply, “Hello world!”

Underlying Concepts

A statement is at the heart of the “Hello, World!” program, regardless of whether you use console.log() or alert(). Syntax constructions and commands that carry out activities are called statements. Programs are merely compilations of numerous statements that outline the procedures to carry out a program’s objective.

An example of a string, a primitive data type, is the text “Hello World”. Single quotes (‘…’) or double quotes (“…”) enclose string literals. Usually, a string is required when a value needs to be printed on the screen. Concatenation is the process of combining strings using the + operator. Collections of statements that operate as a single entity are called functions. When a function is called, a collection of statements is executed.

All variations of the “Hello, World!” program are essentially a straightforward example of how a programming language can provide output, such as text on a web page, popup message, or console.

Index