"Hello, World!" in JavaScript

Hello, World! is the first concept learned in most programming languages. It introduces you to the syntax of the language and helps you become familiar with its coding environment. Because JavaScript works within a web page, it is helpful to be familiar with HTML and CSS as all three play a part in what you see on the finished page. HTML creates the page's content, CSS styles the content and JavaScript programs the content's behavior. Now let's see how we can use JavaScript to say hello to the world.

JavaScript Hello, World! Syntax

I've found a few examples of Hello, World!, one calling a function and two calling different object methods. Let's take a look at all three.

Console.Log Version

This is probably the simplest version of the three. It simply prints "Hello World!" in your web browser's debugging console. The JavaScript Developer Console is built into modern web browsers, like Chrome and Firefox. You can learn how to access and use the console from DigitalOcean.com.


Here, the log() method, which outputs a message, is being called on the console object.

Alert Version

This version can be coded in the debugging console or written directly in your web page's HTML code resulting in the pop-up message shown below. I wrote this code using Notepad++, but something as simple as the Windows built-in notepad would work as well.



In this version, the alert() method takes a string, or an object converted to a string, as its parameter and displays that in the alert box. The script tags defines a client-side script and can be placed in the <body> or <head> elements, or both.

Query Selector Version

The final version of Hello,World! is a bit more complicated because it uses an external JavaScript file and a function to access an element in the HTML code. Similar to how you link a CSS style sheet to a HTML file, you can reference a JavaScript file as a source.


It is recommended that you add this tag referencing the source file just before the closing body tag since JavaScript files can take longer to load, and you want the HTML it is affecting to load first.


In the actual JavaScript source file, we access the <h1> tag in the HTML using the querySelector() function which returns the first matching child element that matches the CSS selector (h1). That element is stored in the myHeading variable. In the second line of code, we assign "Hello world!" to myHeading using the textContent() function, which sets that element's text.

Comments

  1. Prof PalmerJanuary 29, 2018 at 5:25 AM

    Showing these multiple ways of generating the "Hello World!" program in JavaScript is a great way to share with us the facets of your language. Nice job! It would have been a great touch to follow the format of the previous two examples and show the output of the third program as well. But even so, this is really gets us into JS.

    ReplyDelete

Post a Comment