JavaScript Tutorials: 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
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>
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>
<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()">
5. Program to create a scrolling banner.
<html>
<head>
<style>
#divhead
{
background-color:gray;
height:50px;
width:150px;
text-align:center;
color:white;
font-size:20;
}
</style>
<script>
function helpyou()
{
tpos = document.body.scrollTop document.getElementById('divhead').
style.position="absolute"
document.getElementById('divhead').style.top=tpos+300
}
</script>
<body onscroll="helpyou()">
<div id="divcontainer">
<div id="divhead">
<p onclick='divcontainer.style.visibility=
"hidden"'> May I Help You</p>
</div> Full page of content </div>
</body>
</html>
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()">
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>
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>
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>
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>
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>
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>
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);
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));
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));
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"));
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));
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))
19. Write a JavaScript program to check a given integer is within 20 of 100 or 400
function testhundred(x) {
return ((Math.abs(100 - x) <= 20) ||
(Math.abs(400 - x) <= 20));
}
console.log(testhundred(10));
console.log(testhundred(90));
console.log(testhundred(99));
console.log(testhundred(199));
console.log(testhundred(200));
20. Write a JavaScript program to check from two given integers, if one is positive and one is negative.
function positive_negative(x, y)
{
if ((x < 0 && y > 0) || x > 0 && y < 0)
{
return true;
}
else
{
return false;
}
}
console.log(positive_negative(2, 2));
console.log(positive_negative(-2, 2));
console.log(positive_negative(2, -2));
console.log(positive_negative(-2, -2));
21. Write a JavaScript program to create a new string adding "Py" in front of a given string. If the given string begins with "Py" then return the original string.
function string_check(str1) {
if (str1 === null || str1 === undefined || str1.substring(0, 2) === 'Py')
{
return str1;
}
return "Py"+str1;
}
console.log(string_check("Python"));
console.log(string_check("thon"));
22. Write a JavaScript program to remove a character at the specified position of a given string and return the new string.
function remove_character(str, char_pos)
{
part1 = str.substring(0, char_pos);
part2 = str.substring(char_pos + 1, str.length);
return (part1 + part2);
}
console.log(remove_character("Python",0));
console.log(remove_character("Python",3));
console.log(remove_character("Python",5));
23. Write a JavaScript program to create a new string from a given string changing the position of first and last characters. The string length must be greater than or equal to 1.
function first_last(str1)
{
if (str1.length <= 1)
{
return str1;
}
mid_char = str1.substring(1, str1.length - 1);
return (str1.charAt(str1.length - 1)) + mid_char + str1.charAt(0);
}
console.log(first_last('a'));
console.log(first_last('ab'));
console.log(first_last('abc'));
24. Write a JavaScript program to create a new string from a given string with the first character of the given string added at the front and back.
function front_back(str)
{
first = str.substring(0,1);
return first + str + first;
}
console.log(front_back('a'));
console.log(front_back('ab'));
console.log(front_back('abc'));
25. Write a JavaScript program check if a given positive number is a multiple of 3 or a multiple of 7.
function test37(x)
{
if (x % 3 == 0 || x % 7 == 0)
{
return true;
}
else {
return false;
}
}
console.log(test37(12));
console.log(test37(14));
console.log(test37(10));
console.log(test37(11));
26. Write a JavaScript program to create a new string from a given string taking the last 3 characters and added at both the front and back. The string length must be 3 or more.
function front_back3(str)
{
if (str.length>=3)
{
str_len = 3;
back = str.substring(str.length-3);
return back + str + back;
}
else
return false;
}
console.log(front_back3("abc"));
console.log(front_back3("ab"));
console.log(front_back3("abcd"));
27. Write a JavaScript program to check if a string starts with 'Java' and false otherwise.
function start_spec_str(str)
{
if (str.length < 4)
{
return false;
}
front = str.substring(0, 4);
if (front == 'Java')
{
return true;
}
else
{
return false;
}
}
console.log(start_spec_str("JavaScript"));
console.log(start_spec_str("Java"));
console.log(start_spec_str("Python"));
28. Write a JavaScript program to check if two given integer values are in the range 50..99 (inclusive). Return true if either of them are in the said range.
function check_numbers(x, y)
{
if ((x >= 50 && x <= 99) || (y >= 50 && y <= 99))
{
return true;
}
else
{
return false;
}
}
console.log(check_numbers(12, 101));
console.log(check_numbers(52, 80));
console.log(check_numbers(15, 99));
29. Write a JavaScript program to check if three given integer values are in the range 50..99 (inclusive). Return true if one or more of them are in the said range.
function check_three_nums(x, y, z)
{
return (x >= 50 && x <= 99) || (y >= 50 && y <= 99) || (z >= 50 && z <= 99);
}
console.log(check_three_nums(50, 90, 99));
console.log(check_three_nums(5, 9, 199));
console.log(check_three_nums(65, 89, 199));
console.log(check_three_nums(65, 9, 199));
30. Write a JavaScript program to check if a string "Script" presents at 5th (index 4) position in a given string, if "Script" presents in the string return the string without "Script" otherwise return the original one.
function check_script(str)
{
if (str.length < 6) {
return str;
}
let result_str = str;
if (str.substring(10, 4) == 'Script')
{
result_str = str.substring(0, 4) + str.substring(10,str.length);
}
return result_str;
}
console.log(check_script("JavaScript"));
console.log(check_script("CoffeeScript"));
Aucun commentaire