Basic Web Application Development using JavaScript

Basic Web Application with JavaScript: In this tutorial, we will learn how to develop a simple web application using HTML and JavaScript? By Mansha Lamba Last updated : July 29, 2023

There are many programming languages out there in the market each one having its own significance. Out of many, in this article, I will be using JavaScript for developing a web-based gaming portal.

JavaScript is an object-oriented programming language. It is an interpreter based coding language, which was highly underrated. All the dynamic and responsive WebPages you see across the browsers are build-using JavaScript.

What makes JavaScript so special?

Easy syntax and semantics.
Simple language, easy to grasp.
Object-oriented language.
Can handle both front and back end of websites alone.

For all the newbie's in the programming world, Elaborating last point: Every website/webapp we see on different browsers has two parts namely, Frontend & Backend. Front-end refers to how the website appears to users, designing, layout, color scheme etc. and on the other hand, back-end refers to the processing of data like payment gateways, dynamic and responsive behavior, authorization, security concerns. Earlier developers needed more than one language for development an maintenance of websites but then came JavaScript in the race, it could handle it all alone.

Basic Web Application (Number Guessing Game using JavaScript)

Now in this tutorial, I am going to design and develop a hit n trial based gaming interface using JavaScript.

JavaScript File

var location1 = 3;
var location2 = 4;
var location3 = 5;
var guess;
var hits = 0;
var guesses = 0;
var isSunk = false;
var tocontinue = true;

while (isSunk == false && tocontinue == true) {
  guess = prompt("Ready, aim, fire! (enter a number from 0-6): OR Enter q to quit the game");
  if (guess < 0 || guess > 6) {
    alert("Please enter a valid cell number!");
  } else if (guess == "") {
    alert("game over");
  } else if (guess == "q") {
    var quit = prompt(" are you sure you want to quit ?");
    if (quit == "yes") {
      tocontinue = false;
    }
  } else {
    guesses = guesses + 1;
    if (guess == location1 || guess == location2 || guess == location3) {
      alert("HIT!");
      hits = hits + 1;
      if (hits == 3) {
        isSunk = true;
        alert("You sank my battleship!");
      }
    } else {
      alert("MISS");
    }
  }
}
if (tocontinue == true) {
  var stats = "You took " + guesses + " guesses to sink the battleship, " +
    "which means your shooting accuracy was " + (3 / guesses);
  alert(stats);
}

HTML File

<html lang="en">
  <head>
    <style>
      h1{
      border:5px double black;
      }		
    </style>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>PLAY BATTLESHIP</h1>
    <script src="battleship.js"></script>
  </body>
</html>

Here, we need two files one of HTML extension and other a JavaScript file of JS extension because browsers cannot render a JS file they only understand HTML format. (I expect readers to have basic knowledge of HTML).

In HTML, I have given a path for JS file (<script src="battleship.js"></script>) which is in the same folder as the HTML file.

As you can see JavaScript code is quite simple and self-explanatory.

In JS instead of int, char, float, we have var (let and const also) which is kinda all in one and can be assigned to any datatype. After that, we have a basic while loop and if else statements. Things that must be bothering you would be alert & prompt. Alert and prompt are methods of window object which is inbuilt in JS but they do not need a dot operator or period to be invoked.

Alert is for displaying any sort of information to the user via a dialogue box. It has only one argument.

Similarly prompt is for taking input from the user which is saved into another variable and then this variable is further used for decision making to have dynamic behavior on websites.

I hope the rest of the code is easy to grasp.

Thank you for reading my article. For any queries, feel free to write in the comment section. I will be soon back with another interesting article.

JavaScript Tutorial »

JavaScript - Booleans

Where to place JavaScript Code?