JavascriptHelloWorldJavaScript is the engine that drives the internet. Virtually every one of your favorite websites uses JavaScript in some way or the other. From checking text input to creating alerts and animations, JavaScript finds many uses on a web page.

Learning JavaScript is essential to becoming a front end web developer. It is also one of the easier languages to pick up, making it ideal for beginners looking to start their programming journey. This JavaScript prep course will teach you how you can start using JavaScript on your websites.

In this tutorial, we will introduce you to some JavaScript programming fundamentals and create our very first “Hello World” program.

What is JavaScript?

Wikipedia defines JavaScript or JS as an “interpreted programming language” that allows “client-side scripts to interact with the user”.

It’s okay if all that sounded complete mumbo jumbo to you.

Let’s breakdown this definition into something a normal person could understand:

JavaScript is primarily used to create interactive elements on a web page. Some of the most common uses of JavaScript are:

As you can see, this covers the entire gamut of interactivity on any webpage. JavaScript plugin libraries are especially useful in this context as they give you access to advanced functions without requiring any coding on your part. We’ll learn more about plugin libraries in later tutorials. For now, all you should know is that JavaScript adds interactivity to a web page.

Caveat: JavaScript is Not Java

One of the first mistakes beginners make is assuming that JavaScript is a simplified version of Java. It’s not. JavaScript is as different from Java as chalk is from cheese. The only thing common between them are a few stray syntax elements and the name itself.

Java, for the uninitiated, is a powerful object oriented programming language used for creating complex, platform-independent (i.e. they can run on any operation system) programs. JavaScript, on the other hand, can only run programs within a web browser. Java is heavily used in business software, while JavaScript is limited to use in web pages.

With that little confusion out of our way, let’s dive right into JavaScript programming.

Hello World: Writing Your First JavaScript Program

“Hello World” is a staple of programming courses. The objective of this program is simple: output the text “Hello World” on a computer screen. Because of the simplicity of the message and syntax, it is usually the first program taught to beginners.

Writing a “Hello World” program in JavaScript, as we will learn, is exceptionally easy and requires not more than 3 lines of code.

Want to be a web developer? Learn how you can create complex websites with JavaScript and become a web developer from scratch with this course.

What You’ll Need

Since JavaScript is interpreted by the browser itself, we don’t need any fancy compilers or additional software to write JS programs. All you need is:

Getting Started: Creating the HTML Framework

JavaScript programs are usually embedded within the web page itself. This means they are written along with the HTML, though you can include them externally as well.

To get started, we will first create a simple HTML file where we can include our JavaScript.

Open your text editor and type the following code into it:

<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Hello World</title>
</head>
<body>
<h1>JavaScript Hello World Example</h1>
</body>
</html>

Save this file as test.html (make sure to save as ‘All Files’ if using Notepad).

This is a standard HTML template, nothing special about it. It should be pretty clear to anyone with even a basic grasp of HTML.

Adding the JavaScript Code

We can now go ahead and write the JavaScript program.

Add the following code after the <h1> tag and save the file:

<script>
<alert(“Hello World!”)
<script>

That’s it! You’ve now successfully crated a JavaScript program.

Now use your web browser to open test.html. This is what you should see:

Easy, right?

All JavaScript code is written between <script></script> tags. We use ‘alert’ to create a function. The text to be displayed is written between quotes in brackets.

But what if we wanted to create a separate “Hello World!” function we can call anytime?

We can do that as well using just a few lines of code.

Creating a “Hello World” JavaScript Function

Programming 101: A function is any block of code that can be ‘called’ any number of times within a program. Functions are extremely useful in programming since you can create them once, use them n number of times.

We created a “Hello World!” alert box in the above example. Now we’ll create a function that will create the same alert box whenever we want.

Type in the following code into your text file:

<!DOCTYPE HTML>
<html>
<head>
<script>
function myFunction()
{
alert(“Hello World!”)
}
</script>
</head>
<body>
</body>
</html>

Save this as test2.html.

Instead of adding the script in the <body>, we added the script to the <head> and created a function called ‘helloWorld’. You can turn any piece of code into a function by wrapping it in { } brackets and adding “function functionName()” before it.

Now that we’ve created the function, we can call on it any number of times.

Add the following code anywhere between the <body></body> tags:

<p><button onclick="myFunction()">Create a Dialog Box!</button></p>
<p><button onclick="myFunction()">Create Another Dialog Box!</button></p>

Altogether, your code should look like this:

Now open the test2.html file in your web browser. This is what you should see:

Click on either of the two buttons and you’ll see the “Hello World!” dialog box pop up.

Congratulations! You’ve now successfully created a function in JavaScript. This is just the beginning, however. There is still a lot more to learn in this wonderful programming language. This course on JavaScript for beginners should help you get started.

JavaScript students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo