✴️Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
Client-side validation,
Dynamic drop-down menus,
Displaying date and time,
Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and prompt dialog box),
Displaying clocks etc.
JavaScript is used to create interactive websites. It is mainly used for:
Client-side validation,
Dynamic drop-down menus,
Displaying date and time,
Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box and prompt dialog box),
Displaying clocks etc.
1. Program to print hello world
<html>
<body>
<script type="text/javascript">
document.write("hello World");
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
document.write("hello World");
</script>
</body>
</html>
JavaScript Tutorials:
2. 2. Program to swap two strings.
<html>
<head>
<script> function swap()
{
var txt = document.getElementById('t1').value;
document.getElementById('t1').value = document.getElementById('t2').value; document.getElementById('t2').value = txt;
}
</script>
</head>
<body>
<input type="text" id="t1"> <input type="text" id="t2">
<br>
<input type="button" value="Swap" onclick="swap()">
</body>
</html>
2. 2. Program to swap two strings.
<html>
<head>
<script> function swap()
{
var txt = document.getElementById('t1').value;
document.getElementById('t1').value = document.getElementById('t2').value; document.getElementById('t2').value = txt;
}
</script>
</head>
<body>
<input type="text" id="t1"> <input type="text" id="t2">
<br>
<input type="button" value="Swap" onclick="swap()">
</body>
</html>
3. Program to add text to a particular division in the page.
<script>
function add1()
{
document.getElementById('div1').innerHTML = document.getElementById('t1').value
}
</script>
<input type="text" id="t1"> <br> <input type="button" value="Click" onclick="add1()"> <div id="div1">
</div>
<script>
function add1()
{
document.getElementById('div1').innerHTML = document.getElementById('t1').value
}
</script>
<input type="text" id="t1"> <br> <input type="button" value="Click" onclick="add1()"> <div id="div1">
</div>
4. Program to change style of a text at runtime.
<script>
function chngstyle()
{
document.getElementById('div1').style.color = "Red"
document.getElementById('div1').style.backgroundColor = "yellow"
document.getElementById('div1').style.width = "100"
document.getElementById('div1').style.height = "100"
}
</script>
<div id="div1"> Welcome to all </div>
<input type="button" value="Click" onclick="chngstyle()">
<script>
function chngstyle()
{
document.getElementById('div1').style.color = "Red"
document.getElementById('div1').style.backgroundColor = "yellow"
document.getElementById('div1').style.width = "100"
document.getElementById('div1').style.height = "100"
}
</script>
<div id="div1"> Welcome to all </div>
<input type="button" value="Click" onclick="chngstyle()">
6. Program to change color of the text box if empty string submitted.
<script>
function funup(val)
{
if(val.length>0) document.getElementById('t1').style.borderColor="silver";
}
function fun1()
{
txt=document.getElementById('t1').value if(txt.length == 0) document.getElementById('t1').style.borderColor = "red"
}
</script>
<input type="text" id="t1" onkeyup="funup(this.value)">
<input type="button" value="Submit" onclick="fun1()">
<script>
function funup(val)
{
if(val.length>0) document.getElementById('t1').style.borderColor="silver";
}
function fun1()
{
txt=document.getElementById('t1').value if(txt.length == 0) document.getElementById('t1').style.borderColor = "red"
}
</script>
<input type="text" id="t1" onkeyup="funup(this.value)">
<input type="button" value="Submit" onclick="fun1()">
7. Write a JavaScript program to display the current day and time in the following format.
<script>
var today = new Date();
var day = today.getDay();
var daylist=["Sunday"
,"Monday","Tuesday"
,"Wednesday","Thursday","Friday",
"Saturday"];
console.log("Today is : " + daylist[day] + ".");
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
var prepand = (hour >= 12)? " PM ":" AM ";
hour = (hour >= 12)? hour - 12: hour;
if (hour===0 && prepand===' PM ')
{
if (minute===0 && second===0)
{
hour=12;
prepand=' Noon';
}
else
{
hour=12;
prepand=' PM';
}
}
if (hour===0 && prepand===' AM ')
{
if (minute===0 && second===0)
{
hour=12;
prepand=' Midnight';
}
else
{
hour=12;
prepand=' AM';
}
}
console.log("Current Time : "+hour + prepand + " : " + minute + " : " + second);
</script>
<script>
var today = new Date();
var day = today.getDay();
var daylist=["Sunday"
,"Monday","Tuesday"
,"Wednesday","Thursday","Friday",
"Saturday"];
console.log("Today is : " + daylist[day] + ".");
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
var prepand = (hour >= 12)? " PM ":" AM ";
hour = (hour >= 12)? hour - 12: hour;
if (hour===0 && prepand===' PM ')
{
if (minute===0 && second===0)
{
hour=12;
prepand=' Noon';
}
else
{
hour=12;
prepand=' PM';
}
}
if (hour===0 && prepand===' AM ')
{
if (minute===0 && second===0)
{
hour=12;
prepand=' Midnight';
}
else
{
hour=12;
prepand=' AM';
}
}
console.log("Current Time : "+hour + prepand + " : " + minute + " : " + second);
</script>
8. Write a JavaScript program to get the current date.
<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10)
{
dd='0'+dd;
}
if(mm<10)
{
mm='0'+mm;
}
today = mm+'-'+dd+'-'+yyyy;
console.log(today);
today = mm+'/'+dd+'/'+yyyy;
console.log(today);
today = dd+'-'+mm+'-'+yyyy;
console.log(today);
today = dd+'/'+mm+'/'+yyyy;
console.log(today);
</script>
<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10)
{
dd='0'+dd;
}
if(mm<10)
{
mm='0'+mm;
}
today = mm+'-'+dd+'-'+yyyy;
console.log(today);
today = mm+'/'+dd+'/'+yyyy;
console.log(today);
today = dd+'-'+mm+'-'+yyyy;
console.log(today);
today = dd+'/'+mm+'/'+yyyy;
console.log(today);
</script>
9. Write a JavaScript function to find the area of a triangle where lengths of the three of its sides are 5, 6, 7.
<script>
var side1 = 5;
var side2 = 6;
var side3 = 7;
var s = (side1 + side2 + side3)/2;
var area = Math.sqrt(s*((s-side1)*(s-side2)*(s-side3)));
console.log(area);
</script>
<script>
var side1 = 5;
var side2 = 6;
var side3 = 7;
var s = (side1 + side2 + side3)/2;
var area = Math.sqrt(s*((s-side1)*(s-side2)*(s-side3)));
console.log(area);
</script>
10. Write a JavaScript program to determine whether a given year is a leap year in the Gregorian calendar.
<script>
year = window.prompt("Input a Year : ");
x = (year % 100 === 0) ? (year % 400 === 0) : (year % 4 === 0);
console.log(x);
</script>
<script>
year = window.prompt("Input a Year : ");
x = (year % 100 === 0) ? (year % 400 === 0) : (year % 4 === 0);
console.log(x);
</script>
11. Write a JavaScript program to find which 1st January is being a Sunday between 2014 and 2050.
<script>
console.log('--------------------');
for (var year = 2014; year <= 2050; year++)
{
var d = new Date(year, 0, 1);
if ( d.getDay() === 0 )
console.log("1st January is being a Sunday "+year);
}
console.log('--------------------');
</script>
<script>
console.log('--------------------');
for (var year = 2014; year <= 2050; year++)
{
var d = new Date(year, 0, 1);
if ( d.getDay() === 0 )
console.log("1st January is being a Sunday "+year);
}
console.log('--------------------');
</script>
12. Write a JavaScript program to calculate number of days left until next Christmas.
<script>
today=new Date();
var cmas=new Date(today.getFullYear(), 11, 25);
if (today.getMonth()==11 && today.getDate()>25)
{
cmas.setFullYear(cmas.getFullYear()+1);
}
var one_day=1000*60*60*24;
console.log(Math.ceil((cmas.getTime()-today.getTime())/(one_day))+
" days left until Christmas!");
</script>
<script>
today=new Date();
var cmas=new Date(today.getFullYear(), 11, 25);
if (today.getMonth()==11 && today.getDate()>25)
{
cmas.setFullYear(cmas.getFullYear()+1);
}
var one_day=1000*60*60*24;
console.log(Math.ceil((cmas.getTime()-today.getTime())/(one_day))+
" days left until Christmas!");
</script>
13. Write a JavaScript program to convert temperatures to and from celsius, fahrenheit.
function cToF(celsius)
{
var cTemp = celsius;
var cToFahr = cTemp * 9 / 5 + 32;
var message = cTemp+'\xB0C is ' + cToFahr + ' \xB0F.';
console.log(message);
}
function fToC(fahrenheit)
{
var fTemp = fahrenheit;
var fToCel = (fTemp - 32) * 5 / 9;
var message = fTemp+'\xB0F is ' + fToCel + '\xB0C.';
console.log(message);
}
cToF(60);
fToC(45);
function cToF(celsius)
{
var cTemp = celsius;
var cToFahr = cTemp * 9 / 5 + 32;
var message = cTemp+'\xB0C is ' + cToFahr + ' \xB0F.';
console.log(message);
}
function fToC(fahrenheit)
{
var fTemp = fahrenheit;
var fToCel = (fTemp - 32) * 5 / 9;
var message = fTemp+'\xB0F is ' + fToCel + '\xB0C.';
console.log(message);
}
cToF(60);
fToC(45);
14. Write a JavaScript program to check if two numbers are in range 40..60 or in the range 70..100 inclusive.
function numbers_ranges(x, y) {
if ((x >= 40 && x <= 60 && y >= 40 && y <= 60)
||
(x >= 70 && x <= 100 && y >= 70 && y <= 100))
{
return true;
}
else
{
return false;
}
}
console.log(numbers_ranges(44, 56));
console.log(numbers_ranges(70, 95));
console.log(numbers_ranges(50, 89));
function numbers_ranges(x, y) {
if ((x >= 40 && x <= 60 && y >= 40 && y <= 60)
||
(x >= 70 && x <= 100 && y >= 70 && y <= 100))
{
return true;
}
else
{
return false;
}
}
console.log(numbers_ranges(44, 56));
console.log(numbers_ranges(70, 95));
console.log(numbers_ranges(50, 89));
15. Write a JavaScript program to check if the last digit of the three given positive integers is same.
function last_digit(x, y, z)
{
if ((x > 0) && y > 0 && z > 0)
{
return (x % 10 == y % 10 && y % 10 == z % 10 && x % 10 == z % 10);
}
else
return false;
}
console.log(last_digit(20, 30, 400));
console.log(last_digit(-20, 30, 400));
console.log(last_digit(20, -30, 400));
console.log(last_digit(20, 30, -400));
function last_digit(x, y, z)
{
if ((x > 0) && y > 0 && z > 0)
{
return (x % 10 == y % 10 && y % 10 == z % 10 && x % 10 == z % 10);
}
else
return false;
}
console.log(last_digit(20, 30, 400));
console.log(last_digit(-20, 30, 400));
console.log(last_digit(20, -30, 400));
console.log(last_digit(20, 30, -400));
16. Write a JavaScript program to create a new string with first 3 characters are in lower case from a given string. If the string length is less than 3 convert all the characters in upper case.
function upper_lower(str) {
if (str.length < 3) {
return str.toUpperCase();
}
front_part = (str.substring(0, 3)).toLowerCase();
back_part = str.substring(3, str.length);
return front_part + back_part;
}
console.log(upper_lower("Python"));
console.log(upper_lower("Py"));
console.log(upper_lower("JAVAScript"));
function upper_lower(str) {
if (str.length < 3) {
return str.toUpperCase();
}
front_part = (str.substring(0, 3)).toLowerCase();
back_part = str.substring(3, str.length);
return front_part + back_part;
}
console.log(upper_lower("Python"));
console.log(upper_lower("Py"));
console.log(upper_lower("JAVAScript"));
17. Write a JavaScript program to compute the absolute difference between a specified number and 19. Returns triple their absolute difference if the specified number is greater than 19.
function diff_num(n) {
if (n <= 19) {
return (19 - n);
}
else
{
return (n - 19) * 3;
}
}
console.log(diff_num(12));
console.log(diff_num(19));
console.log(diff_num(22));
function diff_num(n) {
if (n <= 19) {
return (19 - n);
}
else
{
return (n - 19) * 3;
}
}
console.log(diff_num(12));
console.log(diff_num(19));
console.log(diff_num(22));
18. Write a JavaScript program to check two given numbers and return true if one of the number is 50 or if their sum is 50.
function test50(x, y)
{
return ((x == 50 || y == 50) || (x + y == 50));
}
console.log(test50(50, 50))
console.log(test50(20, 50))
console.log(test50(20, 20))
console.log(test50(20, 30))
function test50(x, y)
{
return ((x == 50 || y == 50) || (x + y == 50));
}
console.log(test50(50, 50))
console.log(test50(20, 50))
console.log(test50(20, 20))
console.log(test50(20, 30))