Home » JavaScript Tutorial

Basic Web Application Development using JavaScript

In this article, I will be using JavaScript for developing a web-based gaming portal. Now you all must be wondering what is JavaScript? Like C++, Java etc. JavaScript is an object-oriented programming language. It is an interpreter based coding language, which was highly underrated.
Submitted by Mansha Lamba, on September 01, 2018

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.

Now you all must be wondering what is JavaScript? Like C++, Java etc. - "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.

I hope it is quite clear why JavaScript is getting more and more popular these days.

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.

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

Here we go...

JavaScript Code:

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

<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.






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.