Scribd
Upload
4 views

JQUERY AND JAVASCRIPT CODING EXERCISES Coding For Beginners (TAM, JJ [TAM, JJ])

It is cool to learn

Uploaded by

sm2314126
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

JQUERY AND JAVASCRIPT CODING EXERCISES Coding For Beginners (TAM, JJ [TAM, JJ])

It is cool to learn

Uploaded by

sm2314126
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 78

JQUERY AND JAVASCRIPT

CODING EXERCISES

CODING FOR BEGINNERS


JJ TAM
JQUERY CODING EXERCISES
CHECK JQUERY IS LOADED
SCROLL TO THE TOP
DISABLE RIGHT CLICK MENU
BLINK TEXT
CREATE TABLE EFFECT
MAKE FIRST WORD BOLD
UNDERLINE ALL THE WORDS
CHANGE BUTTON TEXT USING JQUERY
ADD OPTIONS TO A DROP-DOWN LIST
SET BACKGROUND-IMAGE
DELETE ALL TABLE ROWS EXCEPT FIRST ONE
DISABLE A LINK
CHANGE A CSS CLASS
SET THE BACKGROUND COLOR
ADD THE PREVIOUS SET OF ELEMENTS
ADD A SPECIFIED CLASS
ADD TWO CLASSES
INSERT SOME HTML
COUNT EVERY ELEMENT
COUNT ALL ELEMENTS
ANIMATE PARAGRAPH ELEMENT

JAVASCRIPT CODING EXERCISES


DISPLAY THE CURRENT DAY AND TIME
PRINT THE CONTENTS
DISPLAY THE CURRENT DATE
FIND THE AREA OF A TRIANGLE
CHECK WHETHER A GIVEN YEAR IS A LEAP YEAR
CALCULATE MULTIPLICATION AND DIVISION
CONVERT TEMPERATURES
FIND THE LARGEST
REVERSE A GIVEN STRING
REPLACE EVERY CHARACTER
CAPITALIZE THE FIRST LETTER
CONVERT NUMBER TO HOURS AND MINUTES
COUNT VOWELS IN A GIVEN STRING
CREATE A NEW STRING
CONCATENATE TWO STRINGS
MOVE LAST THREE CHARACTER
COMPUTE THE SUM
ADD TWO DIGITS
CHECK WHETHER A GIVEN YEAR IS A LEAP
CHECK GIVEN POSITIVE NUMBER
CHECK A STRING STARTS WITH 'JAVA'
CHECK TWO GIVEN INTEGER VALUES
FIND A VALUE WHICH IS NEAREST TO 100
JQUERY CODING EXERCISES
Check jQuery is loaded
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Test if jQuery is loaded</title>
</head>
<body>
<p>Click me!</p>
</body>
</html>

JAVASCRIPT CODE
$("p").bind("click", function(){
$( "This is a click Event").appendTo( "body" );
});

$("p").bind("dblclick", function(){
$( "This is a double-click Event" ).appendTo( "body" );
});
OUTPUT
Click me!
This is a click Event
Scroll to the top
of the page
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Scroll to the top of the page with jQuery</title>
</head>
<body>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<p>jquery</p>
<a href='#top'>Go Top</a>
</body>
</html>

JAVASCRIPT CODE
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Disable right click menu
In html page
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Disable right click menu in html page using jquery</title>
</head>
<body>
</body>
</html>

JAVASCRIPT CODE
$(document).bind("contextmenu",function(e){
return false;
});
Disable/enable the form
submit button
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Disable/enable the form submit button</title>
</head>
<body>
<input id="accept" name="accept" type="checkbox" value="y"/>I
accept<br>
<input id="submitbtn" disabled="disabled" name="Submit" type="submit"
value="Submit" />
</body>
</html>

JAVASCRIPT CODE
$('#accept').click(function() {
​ if ($('#submitbtn').is(':disabled')) {
​ $('#submitbtn').removeAttr('disabled');
} else {
​ $('#submitbtn').attr('disabled', 'disabled');
}
});
OUTPUT
Blink text
using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Blink text using jQuery</title>
</head>
<body>
<p>jQuery <span class="blink">Exercises</span> and Solution</p>
</body>
</html>

JAVASCRIPT CODE

function blink_text() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
}
setInterval(blink_text, 1000);
Create table effect
Like Zebra Stripes
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<style type="text/css">.table_style {
​ width: 500px;
​ margin: 0px auto;
​}
​ table{
​ width: 100%;
​ border-collapse: collapse;
​}
​ table tr td{
​ width: 50%;
​ border: 1px solid #ff751a;
​ padding: 5px;
​}
​ table tr th{
​ border: 1px solid #79ff4d;
​ padding: 5px;
​}
​ .zebra{
​ background-color: #ff0066;
​}
​ </style>
<title>Create a Zebra Stripes table effect</title>
</head>
<body>
<div class="table_style">
<table>
​ <tr>
​ <th>Student Name</th>
​ <th>Marks in Science</th>
​ </tr>
​ <tr>
​ <td>James</td>
​ <td>85.00</td>
​ </tr>
​ <tr>
​ <td>David</td>
​ <td>92.00</td>
​ </tr>
​ <tr>
​ <td>Arthur</td>
​ <td>79.00</td>
​ </tr>
​ <tr>
​ <td>George</td>
​ <td>82.00</td>
​ </tr>
</table>
</div>
</body>
</html>

JAVASCRIPT CODE
$(document).ready(function(){
​ $("tr:odd").addClass("zebra");
});

OUTPUT
Make first word bold
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>Make first word bold of all elements</title>
</head>
<body>
<p>PHP Exercises</p>
<p>Python Exercises</p>
<p>JavaScript Exercises</p>
<p>jQuery Exercises</p>
</body>
</html>

JAVASCRIPT CODE
$('p').each(function(){
​ var pdata = $(this);
​ pdata.html( pdata.text().replace(/(^\w+)/,'$1') );
});

OUTPUT
PHP Exercises
Python Exercises
JavaScript Exercises
jQuery Exercises
Underline all the words
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Underline all words of a text through jQuery</title>
</head>
<body>
<p>The best way we learn anything is by practice and exercise questions</p>
</body>
</html>

CSS CODE
p span{
text-decoration: underline;
}

JAVASCRIPT CODE
$('p').each(function() {

var text_words = $(this).text().split(' ');

​ $(this).empty().html(function() {

​ for (i = 0; i < text_words.length; i++) {


​ if (i === 0) {
​ $(this).append('<span>' + text_words[i] + '</span>');
​ } else {
​ $(this).append(' <span>' + text_words[i] + '</span>');
​}
​}
​ });
});

OUTPUT
Change button text using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Change button text using jQuery.</title>
</head>
<body>
<input type='button' value='Cancel' id='button1'>
</body>
</html>

JAVASCRIPT CODE
//Uncomment the following code and see the changes.

//$("#button1").prop('value', 'Save');
Add options to a drop-down list
Using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add options to a drop-down list using jQuery.</title>
</head>
<body>
<p>List of Colors :</p>
<select id='myColors'>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="White">White</option>
<option value="Black">Black</option>
</select>
</body>
</html>

JAVASCRIPT CODE
var myOptions = {
val1 : 'Blue',
val2 : 'Orange'
};
var mySelect = $('#myColors');
$.each(myOptions, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
OUTPUT
Set background-image
Using jQuery CSS property
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Set background-image using jQuery CSS property.</title>
</head>
<body>
</body>
</html>

JAVASCRIPT CODE
$('body').css('background-image',
'url("https://www.htmlresource.com/includes/jquery-images/jquery.gif")');

Output
Delete all table rows except first one
using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Delete all table rows except first one using jQuery.</title>
</head>
<body>
<table border="1" id="myTable">
<tr>
<th>Year</th>
<th>Savings</th>
</tr>
<tr>
<td>2014</td>
<td>$10000</td>
</tr>
<tr>
<td>2015</td>
<td>$8000</td>
</tr>
<tr>
<td>2016</td>
<td>$9000</td>
</tr>
</table>
<p>
<input id="button1" type="button" value="Click to remove all rows except
first one"/></p>
</body>
</html>

JAVASCRIPT CODE
$(document).ready(function(){
$('#button1').click(function(){
$("#myTable").find("tr:gt(0)").remove();
});
});

OUTPUT
Disable a link
Using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Disable a link using jQuery</title>
</head>
<body>
<a href="https://www.htmlresource.com/jquery-exercises/">jQuery
Exercises, Practice, Solution</a>
<p></p>
<input id="button1" type="button" value="Click to remove the link!" />
</body>
</html>

JAVASCRIPT CODE
$(document).ready(function(){
$('#button1').click(function(){
$("a").removeAttr('href');
});
});
OUTPUT
Change a CSS class
Using jQuery
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Change a CSS class name using jQuery.</title>
</head>
<body>
<p id="pid" class="center"> jQuery Exercises</p>
<input id="button1" type="button" value="Click to change the Class" />
</body>
</html>

CSS CODE
p.center {
text-align: center;
color: red;
}

p.large {
font-size: 200%;
}
JAVASCRIPT CODE
$(document).ready(function(){
$('#button1').click(function()
{ $('#pid').removeClass('center').addClass('large');
});
});
OUTPUT
Set the background color
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Set the background color red of the following elements using jQuery.
</title>
<style type="text/css">
button {
display: block;
margin: 20px 0 0 0;
} </style>
</head>
<body>
<textarea>TutoRIAL</textarea>
<p>jQuery</p>
<span>Exercises</span>
<button id="button1">Click to see the effect</button>
</body>
</html>

JAVASCRIPT CODE
$('#button1').click(function(){
$("p").add( "span" ).add("textarea").css( "background", "red" );
});
Add the previous set of elements
On the stack to the current set
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Using jQuery add the previous set of elements on the stack to the
current set.</title>
</head>
<body>
<div class="left">
<p><strong>Before <code>addBack()</code></strong></p>
<div class="before-addback">
<p>JavaScript</p>
<p>jQuery</p>
</div>
</div>
<div class="right">
<p><strong>After <code>addBack()</code></strong></p>
<div class="after-addback">
<p>JavaScript</p>
<p>jQuery</p>
</div>
</div>
</body>
</html>

CSS CODE
p, div {
margin: 5px;
padding: 5px;
color: #c03199;
}
.border {
border: 2px solid #360e9b;
}
.background {
background: #cdc8b1;
}
.left, .right {
width: 40%;
float: left;
}
.right {
margin-left: 2%;
}

JAVASCRIPT CODE
$( "div.left, div.right" ).find( "div, div > p" ).addClass( "border" );

// First Part
$( "div.before-addback" ).find( "p" ).addClass( "background" );

// Second Part
$( "div.after-addback" ).find( "p" ).addBack().addClass( "background" );
Add a specified class
To the matched elements
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add a specified class to the matched elements.</title>
</head>
<body>
<p>PHP</p>
<p>Java</p>
<p>Python</p>
</body>
</html>

CSS CODE
p{
margin: 8px;
font-size: 16px;
}
.h3r_font_color{
color: red;
}
.h3r_background {
background: yellow;
}
JAVASCRIPT CODE
$( "p" ).last().addClass( "h3r_font_color" );
Add two classes
To the matched elements
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add two classes to the matched elements.</title>
</head>
<body>
<p>PHP</p>
<p>Java</p>
<p>Python</p>
</body>
</html>

CSS CODE
p{
margin: 8px;
font-size: 16px;
}
.h3r_font_color{
color: blue;
}
.h3r_background {
background: orange;
}
JAVASCRIPT CODE
$( "p" ).last().addClass( "w3r_font_color h3r_background " );
Insert some HTML
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Using jQuery insert a paragraph after all paragraphs.</title>
<style type="text/css">
button {
display: block;
margin: 20px 0 0 0;
} </style>
</head>
<body>
<p>jQuery Exercises</p>
<button id="button1">Click to see the effect</button>
</body>
</html>

CSS CODE
$('#button1').click(function(){
$( "p" ).after( "<b><i>With solution.</i></b>" );
});

JAVASCRIPT CODE
$('#button1').click(function(){
$( "p" ).after( "<b><i>With solution.</i></b>" );
});

OUTPUT
Count every element
In the document
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Count every element (including head, body, etc.) in the document.
</title>
</head>
<body>
<div>This is division</div>
<span>This is a span</span>
<p>This is a Paragraph</p>
<button id="button1">Click to see the effect</button>
</body>
</html>

CSS CODE
button {
display: block;
margin: 20px 0 0 0;
clear: both
}

div, span, p {
width: 160px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #B0E0E6
}

JAVASCRIPT CODE
$('#button1').click(function(){

var elementCount = $( "*" ).css( "border", "3px solid blue" ).length;


$( "body" ).prepend( "<h2>" + elementCount + " elements found</h3>" );
});

OUTPUT
Count all elements
Within a division
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Count all elements within a division.</title>
</head>
<body>
<div id="iddiv">
<span>This is a span</span>
<p>This is a Paragraph</p>
<button id="button1">Click to see the effect</button>
</div>
</body>
</html>

CSS CODE
button {
display: block;
margin: 20px 0 0 0;
clear: both
}

span, p {
width: 160px;
height: 40px;
float: left;
padding: 10px;
margin: 10px;
background-color: #B0E0E6
}

JAVASCRIPT CODE
$('#button1').click(function(){

var elementCount = $( "#iddiv" ).find( "*" ).css( "border", "2px solid blue"
).length;

$( "body" ).prepend( "" + elementCount + " element(s) found" );


});

OUTPUT
Animate paragraph element
HTML CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Click the button to animate the paragraph element with a number of
different properties.</title>
</head>
<body>
<p id="pid">jQuery</p>
<button id="button1">Click to see the animation</button>
</body>
</html>

CSS CODE
button {
display: block;
margin: 20px 0 0 0;
}

p{
background-color: #B0E0E6;
width: 70px;
border: 1px solid red;
}

JAVASCRIPT CODE
$('#button1').click(function(){
$( "#pid" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
JAVASCRIPT
CODING EXERCISES

CODING FOR BEGINNERS


JJ TAM
JAVASCRIPT CODING
EXERCISES
Display the current day and time
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript current day and time</title>
</head>
<body></body>
</html>

JAVASCRIPT CODE
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);
Print the contents
of the current window
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Print the current page.</title>
</head>
<body>
<p></p>
<p>Click the button to print the current page.</p>
<button onclick="print_current_page()">Print this page</button>
</body>
</html>

JAVASCRIPT CODE
function print_current_page()
{
window.print();
}
Display the current date
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Write a JavaScript program to get the current date.</title>
</head>
<body>
</body>
</html>

JAVASCRIPT CODE
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);
Find the area of a triangle
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>The area of a triangle</title>
</head>
<body>
</body>
</html>

JAVASCRIPT CODE
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);
Check whether a given year is a leap
year
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Find Leap Year</title>
</head>
<body>
</body>
</html>

JAVASCRIT CODE
function leapyear(year)
{
return (year % 100 === 0) ? (year % 400 === 0) : (year % 4 === 0);
}
console.log(leapyear(2016));
console.log(leapyear(2000));
console.log(leapyear(1700));
console.log(leapyear(1800));
console.log(leapyear(100));

OUTPUT
true
true
false
false
false
Calculate multiplication and
division
of two numbers
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JavaScript program to calculate multiplication and division of two
numbers </title>
<style type="text/css">
body {margin: 30px;}
</style>
</head>
<body>
<form>
1st Number : <input type="text" id="firstNumber" /><br>
2nd Number: <input type="text" id="secondNumber" /><br>
<input type="button" onClick="multiplyBy()" Value="Multiply" />
<input type="button" onClick="divideBy()" Value="Divide" />
</form>
<p>The Result is : <br>
<span id = "result"></span>
</p>
</body>
</html>

JAVASCRIPT CODE
function multiplyBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 * num2;
}

function divideBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 / num2;
}
OUTPUT
Convert temperatures
To and from celsius, Fahrenheit in
JAVASCRIPT
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Write a JavaScript program to convert temperatures to and from
celsius, fahrenheit</title>
</head>
<body>
</body>
</html>

JAVASCRIPT CODE
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);
OUTPUT
60°C is 140 °F.
45°F is 7.222222222222222°C.
Find the largest
Of three given integers
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to find the largest of three given integers.</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
function max_of_three(x, y, z)
{
max_val = 0;
if (x > y)
{
max_val = x;
} else
{
max_val = y;
}
if (z > max_val)
{
max_val = z;
}
return max_val;
}

console.log(max_of_three(1,0,1));
console.log(max_of_three(0,-10,-20));
console.log(max_of_three(1000,510,440));

Output:
1
0
1000
Reverse a given string
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to reverse a given string.</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
function string_reverse(str)
{
return str.split("").reverse().join("");
}

console.log(string_reverse("jsresource"));
console.log(string_reverse("www"));
console.log(string_reverse("JavaScript"));

OUTPUT
ecruosersj
www
tpircSavaJ
Replace every character
with the character following it in the
alphabet
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to replace every character in a given string with
the character following it in the alphabet.</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
function string_reverse(str)
function LetterChanges(text) {
//https://goo.gl/R8gn7u
var s = text.split('');
for (var i = 0; i < s.length; i++) {
// Caesar cipher
switch(s[i]) {
case ' ':
break;
case 'z':
s[i] = 'a';
break;
case 'Z':
s[i] = 'A';
break;
default:
s[i] = String.fromCharCode(1 + s[i].charCodeAt(0));
}

// Upper-case vowels
switch(s[i]) {
case 'a': case 'e': case 'i': case 'o': case 'u':
s[i] = s[i].toUpperCase();
}
}
return s.join('');
}
console.log(LetterChanges("PYTHON"));
console.log(LetterChanges("W3R"));
console.log(LetterChanges("php"));

Output:
QZUIPO
X4S
qIq
Capitalize The First Letter
Of Each Word
Of A Given String
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to capitalize the first letter of each word of a
given string.</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
function capital_letter(str)
{
str = str.split(" ");

for (var i = 0, x = str.length; i < x; i++) {


str[i] = str[i][0].toUpperCase() + str[i].substr(1);
}

return str.join(" ");


}

console.log(capital_letter("Write a JavaScript program to capitalize the first


letter of each word of a given string."));

OUTPUT
Output:
Write A JavaScript Program To Capitalize The First Letter Of Each Word Of
A Given String.
Convert number to hours and
minutes
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to convert a given number to hours and minutes.
</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
function time_convert(num)
{
var hours = Math.floor(num / 60);
var minutes = num % 60;
return hours + ":" + minutes;
}

console.log(time_convert(71));
console.log(time_convert(450));
console.log(time_convert(1441));

OUTPUT
1:11
7:30
24:1
Count vowels in a given string
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to count the number of vowels in a given string.
</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
function vowel_Count(str)
{

return str.replace(/[^aeiou]/g, "").length;


}

console.log(vowel_Count("Python"));
console.log(vowel_Count("htmlresource.com"));

Output:
1
5
Create a new string
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to create a new string without the first and last
character.</title>
</head>
<body>

</body>
</html>
JAVASCRIPT CODE
function without_first_end(str) {
return str.substring(1, str.length - 1);
}
console.log(without_first_end('JavaScript'));
console.log(without_first_end('JS'));
console.log(without_first_end('PHP'));
Output:
avaScrip
H
Concatenate two strings
Except their first character
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to concatenate two strings except their first
character.</title>
</head>
<body>

</body>
</html>
JAVASCRIPT CODE
function concatenate(str1, str2) {
str1 = str1.substring(1, str1.length);
str2 = str2.substring(1, str2.length);
return str1 + str2;
}

console.log(concatenate("PHP","JS"));
console.log(concatenate("A","B"));
console.log(concatenate("AA","BB"));

Output:
HPS

AB
Move last three character
start of a specified string
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to move last three character to the start of a given
string. The string length must be 3.</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
function right_three(str) {
if (str.length > 1)
{
return str.slice(-3) + str.slice(0, -3);
}
return str;
}
console.log(right_three("Python"));
console.log(right_three("JavaScript"));
console.log(right_three("Hi"));

Output:
honPyt
iptJavaScr
Hi
Compute the sum
Of three elements of a given array
Of integers of length 3
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to compute the sum of three elements of an given
integers of length 3.</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
function sum_three(nums)
{
return nums[0] + nums[1] + nums[2];
}

console.log(sum_three([10, 32, 20]));


console.log(sum_three([5, 7, 9]));
console.log(sum_three([0, 8, -11]));

Output:
62
21
-3
Add two digits
Of a given positive integer
Of length two
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to add two digits of a given positive integer of
length two.</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
function add_two_digits(n)
{
return n % 10 + Math.floor(n / 10);
}
console.log(add_two_digits(25))
console.log(add_two_digits(50))

Output:
7
5
Check whether a given year is a leap
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Find Leap Year</title>
</head>
<body>
</body>
</html>

JAVASCRIPT CODE
function leapyear(year)
{
return (year % 100 === 0) ? (year % 400 === 0) : (year % 4 === 0);
}
console.log(leapyear(2016));
console.log(leapyear(2000));
console.log(leapyear(1700));
console.log(leapyear(1800));
console.log(leapyear(100));

OUTPUT
true
true
false
false
false
Check given positive number
Multiple of 3 or a multiple of 7
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to check whether a given positive number is a
multiple of 3 or a multiple of 7. </title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
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));
Output:
true
true
false
false
Check a string starts with 'Java'
And false otherwise
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to check whether a string starts with 'Java' and
false otherwise.</title>
</head>
<body>
</body>
</html>

JAVASCRIPT CODE
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"));

Output:
true
true
false
Check two given integer values
In the range 50..99
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to check whether two given integer values are in
the range 50..99 (inclusive). Return true if either of them are in the said
range.</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
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));
OUTPUT
false
true
true
Find a value which is nearest to 100
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript program to find a value which is nearest to 100 from two
different given integer values.</title>
</head>
<body>

</body>
</html>

JAVASCRIPT CODE
function near_100(x, y) {
if (x != y)
{
x1 = Math.abs(x - 100);
y1 = Math.abs(y - 100);

if (x1 < y1)


{
return x;
}
if (y1 < x1)
{
return y;
}
return 0;
}
else
return false;
}
console.log(near_100(90, 89));
console.log(near_100(-90, -89));
console.log(near_100(90, 90));

Output:
90
-89
false

You might also like