JavaScript applications
Going Through JavaScript in Simple Way
Hello everyone… Today I am going to do JavaScript in the easiest and simply understandable way. Here I am mainly focused on JavaScript applications using suitable examples. We can get a clear idea about JavaScript through examples. It is the best way to study this language.
To do this coding part you want to select a text editor as your preference.
What is this JavaScript?
JavaScript is client side scripting language. Next question goes to What is a scripting language? Yah, Scripting language is lightweight programming language.
Firstly let’s see Javascript theory part in briefly and then go to application part.
How start coding with JavaScript?
We can embed JavaScript code as internal or external.
First see how embed JS internally. In here we can embed JS directly to the html, using <script></script> tag. We can placed it into the<body> </body>or into the<head></head> section of the html page.
This bellow example for how using script tag in head section.
<!DOCTYPE html>
<html>
<head>
<title>JS Embedded</title>
<script type=”text/javascript”>
alert(“Hello World”);
</script>
</head>
<body>
<p>Getting start with JS</p>
</body>
</html>
Now see how embed JS externally. This is the best way to embed JS into html. Link external JS file to the html by using <script></script> tag.
<!DOCTYPE html>
<html>
<head>
<title>JS Embedded</title>
</head>
<body>
<p>Embed JS externally</p>
<script src=”javascriptex1.js”>
</script>
</body>
</html>
Let’s apply JavaScript to the real world examples. In here I’m going to explain JS code step by step.
1. Digital Clock using JavaScript
In here I’m going to do this from the beginning. First we need to create an HTML ,CSS and JS file with their own extensions.
Then we need to link that CSS and JS file into the HTML file. It should be like bellow. Save as “filename.html”.
<!DOCTYPE html>
<html>
<head>
<title>Build a clock</title>
<link rel=”stylesheet” href=”ex1.css”>
</head>
<body>
<h1>SMART CLOCK</h1>
<div id=’clock’></div>
<script type=”text/javascript” src=”ex1.js”>
</script>
</body>
</html>
The output still looks like this because the CSS and JS files are empty.
Now we focus on CSS file. We use it to add modification to web page. It like to be bellow. save as “filename.css”.
*{
background-color:teal;
width:900px;
margin: 60px;
text-align:center;
font-size: 90px;
color:darkred;
}
h1{
color:pink;
margin-top: -20mm;
}
Output should like bellow. Still JS file is empty.
Let’s focus on JavaScript code step by step. Save file as “filename.js”
First we call a function, displayClock(). Then define variables using “var” keyword.
setInterval(displayClock, 500);
function displayClock(){
var time=new Date();
var hours=time.getHours();
var minutes=time.getMinutes();
var seconds=time.getSeconds();
var period = “AM”;
After that we set time as 12 hours clock and using AM and PM period.
if (hours == 0)
hours = 12;
if (hours > 12) {
hours = hours — 12;
period = “PM”;
}
Then set a code to display time.
hours = hours < 10 ? `0${hours}` : hours;
minutes = minutes < 10 ? `0${minutes}` : minutes;
seconds = seconds < 10 ? `0${seconds}` : seconds;
var time = `${hours}:${minutes}:${seconds} ${period}`;
document.getElementById(‘clock’).innerText = time;
}
Other than above output we can modify code further more. For that we can use if else if part.
var wakeuptime =6;
var noon = 12;
var lunchtime = 12;
var playtime = lunchtime + 4;
var evening = 18;
var updateClock = function()
{
var time = new Date().getHours();
if (time == wakeuptime)
{
document.writeln(“Now Time to Wakeup!!”);
}
else if (time == lunchtime)
{
document.writeln(“Have Lunch”);
}
else if (time == playtime)
{
document.writeln(“Let’s play”);
}
else if (time < noon)
{
document.writeln(“Good Morning”);
}
else if (time >= evening)
{
document.writeln(“Good Night”);
}
else
{
document.writeln(“Good Afternoon”);
}
displayClock();
};
updateClock();
Finally we can get time and related statements. It’s like bellow.
2.OT Calculator using JavaScript
With this calculator we can find out the fee for employee’s OT. Simply they want to enter their basic salary and amount of hours they work as overtime.
Let’s start coding! Like above part first we want to create related HTML and CSS file. Here I quickly go through these two parts.
The HTML code part is given below.
<!DOCTYPE html> <html> <body> <link rel=”stylesheet” href=”cal.css”> <div id=”container”> <h1>OT Calculator</h1> <div id=”calculator”> <form> <p>How much was your salary? <p> Rs <input id=”salaryamt” type=”text” placeholder=”salary Amount”> <p>How many hours do you work as OT? <p> <select id=”othours”> <option disabled selected value=”0">Select OT time</option> <option value=”0">not have OT</option> <option value=”0.01">One Hour OT</option> <option value=”0.02">Two Hours OT</option> <option value=”0.03">Three Hours OT</option> <option value=”0.05">Four Hours OT</option> </select> </form> <button type=”button” id=”calculate”>Calculate</button> </div> <div id=”total Tip”> Rs.<span id=”tip”>0.00</span> <small id=”each”>each</small> </div> </div> <script type=”text/javascript” src=”cal.js”></script> </body> </html>
Let’s move on CSS coding part. We apply this to modify webpage.
body {
font-family: Roboto;
background:lightcoral;
}
#container {
height: 475px;
width: 360px;
margin: 100px auto;
background: #f7f7f7;
text-align: center;
}
h1 {
background: #1F030C;
color: white;
margin: 0;
padding: 10px 100px;
text-transform: uppercase;
font-size: 18px;
font-weight: normal;
}
p {
padding-left: 20px;
font-size: large;
font-family: ‘Times New Roman’, Times, serif;
}
form input[type=”text”] {
width=90px;
}
input {
padding-left: 20px;
}
#salaryamt {
font-size: 14px;
/*color: #2980b9;*/
color: #red;
background-color: #f7f7f7;
width: 60%;
padding: 5px 5px 8px 8px;
}
#salaryamt:focus {
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
#othours {
padding: 13px 13px 20px 20px;
margin-left: 20px;
font-size: 25px;
}
button {
text-transform: uppercase;
font-weight: bold;
display: block;
margin: 30px auto;
background:lightseagreen;
border-radius: 5px;
width: 200px;
height: 50px;
font-size: 17px;
color: white;
}
button:hover {
background:rosybrown;
border-bottom-color: #111;
}
button:active {
position: relative;
top: 1px;
}
#totalTip {
font-size: 30px;
margin-top: 5px;
text-align: center;
}
#totalTip:before {
content: “OT Amount”;
font-size: 20px;
font-weight: bold;
display: block;
text-transform: uppercase;
}
#totalTip sup {
font-size: 20px;
top: -18px;
}
#totalTip small {
font-size: 20px;
font-weight: bold;
display: block;
}
Before JavaScript part let’s see how our webpage is appearing.
Let’s focus on our interest part JavaScript. In here I’m going through JS code step by step.
First we should call a function and define variables that we will want. For this we use “var” keyword.
function calculateOT() {
var salaryAmt = document.getElementById(“salaryamt”).value;
var othours = document.getElementById(“othours”).value;
Then we apply if else statement. If we forget to enter values, then get a alert about it. It coded like bellow using conditions.
if (salaryAmt === “” || othours == 0)
{
alert(“Please enter values”);
return;
}
Then we code mathematical function to calculate OT amount.
var total = (salaryAmt * othours);
total = Math.round(total * 100) / 100;
total = total.toFixed(2);
document.getElementById(“totalTip”).style.display = “block”;
document.getElementById(“tip”).innerHTML = total;
}
Finally we want to display our output. For that we want to call the “calculateOT()” function like bellow.
//Hide the OT amount on load
document.getElementById(“totalTip”).style.display = “none”;
document.getElementById(“each”).style.display = “none”;
//click to call function
document.getElementById(“calculate”).onclick = function() {
calculateOT();
};
Let’s input some values and see the output.
Yeah!! It’s completed.
I think now you can understand about JavaScript coding and where we use JavaScript. Hope you all followed steps with me. Keep yourself more focused on coding for JavaScript. Hope to meet you with a new blog post about Angular JS. Till then Bye!.