JavaScript Basics – Programming Foundations #05

Let’s get started with some JavaScript basics. By now you know that JavaScript is a programming language that deals with web pages. Not only is it simple to learn, it’s also among the more powerful and popular languages out there today. Create interactive web pages, games and learn about using JavaScript functions and objects.

It’s time to learn JavaScript! Let’s get started.

javascript basics

Why use JavaScript basics to master programming foundations?

JavaScript basics are easy to understand and easy to implement. When you learn JavaScript, you’ll see that it can be used to create useful network-oriented applications while working across different types of platforms. It is the conquering programming language of the internet.

JavaScript allows you to interact with the users of your web pages, react to events and create immersing graphics right in your web pages.

All web pages have a structure, layout and style when presenting content. But web pages that use JavaScript can also be made to be interactive and more interesting.

You may already know that the structure of the content in a web page (headings, paragraphs etc) is defined by HTML, or Hyperttext Markup Language. You may also know that the style of your web page (colors, fonts etc) can be manipulated by using CSS, or Cascading Style Sheets.

javascript basics

Now by adding JavaScript into your web pages, you can create various kinds of behaviors. Your pages will be able to react to user input and communicate with them.

As discussed in an earlier post, JavaScript is a scripting language. And as it’s an interpreted programming language, you will not need to do any code compiling as the conversion to machine code will be handled by the browser itself. However, something you DO need to remember when you learn JavaScript is that it is a case-sensitive language. Let’s get started with a very simple JavaScript program to see what that’s all about.

The first thing you need to get a JavaScript program up and running is a simple web page. All you need to do is to open a HTML file so the JavaScript can work with it. Open a new file on your computer’s default text editor (Notepad/ TextEdit etc) and rename it as a .html file. Similarly, open another new file and rename it as a .js file. Make sure you open both of these files in the same folder..

javascript basics

Next open both of these files in a text editor so you can edit them. You can also use a free source code editor such as Notepad++ for this purpose.

Edit your HTML file.

<html>
<head>
<title>Simple Page</title>
</head>
<body>
<p>Just a simple page</p>
<script src = "beginner.js"></script>
</body>
</html>
javascript basics
javascript basics in notepad++

Save this file.

If you’re new to HTML, just know that HTML is a markup language and not actually a programming language. Just by going through the above lines you will see that HTML simply takes care of the structure of your web page. It defines the headings, paragraphs etc. of the web page.

There is no executable code in HTML.You can add executable code to your web page by adding JavaScript. Notice how the location of the JavaScript file has been added to the web page through the line <script src = “beginner.js”></script>

Now it’s time to edit the beginner.js file in your text editor.

alert(“Hello World!”);

javascript basics
javascript basics in notepad++

Save this file too.

You can see that we have used just one line of JavaScript programming language  here.

Next, just open your saved HTML file (beginner.html). It will open up in your default web browser. The HTML page will then load your JavaScript file, interpret it and execute it. This is what you will see.

javascript basics

You should see an alert box popping up on your web page. Creating alert boxes is pretty much one of the most basic things that you will do when you learn JavaScript.

Check out our other tutorials to learn about JavaScript statements, JavaScript functions, JavaScript variables and values.

The next article discusses the types of statements in JavaScript.

While you’re here feel free to check out our other programming tutorials. We have tutorials on Python, Java and other coding tidbits you’ll love!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.