How to Write JavaScript Program

Back to: JavaScript Tutorial For Beginners and Professionals

How to Write a JavaScript Program

In this article, I am going to discuss how to write JavaScript Program with Examples. Please read our previous article before proceeding to this article, where we gave a brief introduction to JavaScript.

What is DHTML?

The DHTML stands for “dynamic hypertext transfer markup language”. DHTML is not a language. It is basically a collection of web technologies that are used together to create robust interactive web applications. The web page’s behavior will change in response to the user’s behaviors.

So, in simple words, we can say that DHTML is a combination of three technologies such as HTML, CSS, and JavaScript.

All three components are connected via the Document Object Model (DOM).

HTML defines web sites content through semantic tags (heading, sections, articles, paragraphs, lists)
CSS described the look and formatting of a document
- Layout and position of elements on the page
- Presentation styles (background, border, colors…)
- Text and font styles (size, color, family)
JavaScript defines dynamic behavior
- Programming logic for interaction with the user
- Handle user events
HTML, CSS, and JavaScript are the three layers of the Web that helps to make web pages interactive.

What can JavaScript do?

Can handle events such as button clicks
Can read/ write HTML elements and modify the DOM tree dynamically
It Can access/modify the browser cookies.
It can detect the user browser as well as the Operating System (OS) of the user.
We can also Implement the object-oriented language features using JavaScript
It is also used to make asynchronous server calls (i.e. AJAX calls)
Can implement complex graphics and animation via Canvas
It is also possible to implement back-end logic using Node.js

JavaScript Basic Syntax:

A JavaScript contains JavaScript statements that are placed between the <script>… </script> HTML tags in a web page.

You can put the <script> tag containing JavaScript code anywhere within your web page but it is considered as the best way to keep it within the <head> tags.

The <script> tag tells the browser to begin converting all the text between these tags as a script. In simple words is specifies that we are using JavaScript. The simple syntax of JavaScript will be as:

<script …>
JavaScript code goes here
</script>

The Script takes 3 attributes:

language: this attribute indicates which scripting language we are using in the program and its value will be javascript.
type: this attribute indicates the scripting language is getting used and its value should be “text/javascript”.
src: it specifies the URL of an external JavaScript file. This attribute overrides any existing JavaScript place between the <script>

syntax:

<script language=”javascript” type=”text/javascript”>
Javascript code goes here
</script>

Writing the first JavaScript Program:

Once we have the software ready we can start writing JavaScript code. JavaScript code is written as plain text using a text editor. To add JavaScript code into an HTML file, create or open an existing HTML file with a text editor. A basic HTML file has some basic HTML tags, such as <html>, <head> and <body>. For example, a basic HTML5 file looks something like that is shown below.

<html>
   <head>
      <title>Testing JavaScript</title>
   </head>
   <body>
      Code goes here
   </body>
</html>

We can place the JavaScript code into an HTML page either by including HTML tags or without HTML tags. Let’s start writing the JavaScript program step by step. We can place JS code with an HTML tag into the HTML page directly. Type the below code in the notepad

OR we can place JS code without an HTML tag into the HTML page directly.

The line that starts with the <script> tag indicates the beginning of JS code for the browser.
The next line after that is the actual program – which tells the browser to display a popup window (‘alert’) with the text ‘Hello world‘.
The closing </script> tag tells the end of the JS code.

Saving the File:

Now save this text written in the notepad somewhere in your hard drive e.g.: on the desktop or wherever you want. While saving the ‘Save As’ dialogue box appear In the ‘filename’ field, type in: firstjavascript.html (or any name you want to give)

Change the ‘Save as type’ from ‘Text documents (*.txt)‘ to ‘All files‘ as shown in the below image: HTML files are stored with .htm or .html extension.

Note that we have used ‘.html’ as the file extension. This tells the browser that this file is a web page and the browser should execute the script places between <script>..</script> tag in the file. If we save the file with the default ‘.txt’ extension, then the browser will just display the code like a notepad rather than executing it.

Open the file in the web browser. we can either:

Double click on the file to open it.
Use the browser’sOpen’ command from the menu or using the Ctrl+O keyboard shortcut

Here I am using a chrome browser. So the browser will ask which file need to be opened. Search the firstjavascript.html that you just created and double click on it. Here we go, we should see our first JavaScript program running in the browser:

The popup boxes look different in different browsers.

Unobtrusive JavaScript:

Initially, when JavaScript was used, it was aimed to be placed directly into the Web Pages HTML code. The following is an example that will popup an alert message when the button is clicked:

<button id=’button’ href=’#’ onclick=’alert(“Hello World”)’>Click Me</a>

Here we mixed the JavaScript code along with the HTML code, as a result, the JavaScript code is now tightly coupled with the HTML code. Now if you do any changes in the HTML code, then it also required to change the JavaScript code in order to stop it from giving any error.

You can easily separate the JavaScript code from the HTML code simply by placing it inside its <script> tags. The below code snippet will result in the same as the previous example.

<script>
const btn = document.getElementById('button');
btn.addEventListener('click', function()
 {
    alert('Hello World!');
 });
</script>

In the above code, JavaScript is in one place, between the two script tags, instead of mixed with the HTML tags.

That’s it for today. In the next article, I am going to discuss how to debug a JavaScript Program. Here, in this article, I try to explain how to write a JavaScript program in detail. I hope you enjoy this how to write a JavaScript program article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.