What is JavaScript?

JavaScript 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:

• Interpreted Programming Language: Most programming languages are either compiled or interpreted. A compiled programming language must first go through an external compiler before it can be executed. Most languages – Java, Python, Ruby, etc. – are like that. There no such requirement for an interpreted programming language. A program written in an interpreted language can be run right away. For JavaScript, this means you can run the program straight from the browser itself.
• Client-Side Script: All web programming can be divided into two categories: client-side and server-side. A server-side program (or script) is executed on the web server where web pages are actually stored. A client-side program, on the other hand, is executed on the user’s web browser itself. For JavaScript, this means the program is executed as soon as the user downloads the webpage. You can learn more about JavaScript client-side scripting in this course.

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

• Verifying data entered into a web form such as a sign-up or contact-us form.
• Updating information on a webpage without refreshing it.
• DOM (Document Object Model) scripting. This is a fairly advanced way to use JavaScript. Don’t worry about it now. We’ll get to it once you’re comfortable with basic JavaScript.
• Creating alerts, new browser windows, etc.
• Creating animations through plugin libraries like jQuery.

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:

• A text editor. Your humble Notepad will do just fine, but we highly recommend Notepad++ (free).
• A web browser. You can use anything you want – Google Chrome, Firefox, Internet Explorer or Safari.

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.