-->
Showing posts with label JS Programs. Show all posts
Showing posts with label JS Programs. Show all posts

Thursday, July 17, 2025

JavaScript Tutorial: Learn Functions and Arrow Functions with Examples

 

JS Function programs collection

JS program to show the concept of arrow function


1. Normal function to return an object
<script>
 function getUser () 
{
return{
//taking the braces in newline terminates the return so the
//followed statement does not work
  name: "Radhe krishna", 
  age: 25 
};
 }
document.write(JSON.stringify(getUser()));
//it converts the object into string with the help of stringify()
</script>


JS program using arrow function to return an object


<script>
 getUser=()=> 
{
return{
//taking the braces in newline terminates the return so the
//followed statement does not work
  name: "Radhe krishna", 
  age: 25 
};
 }
document.write(JSON.stringify(getUser()));
//it converts the object into string with the help of stringify()
</script>

Or


<script>
 getUser=()=> 
(
//() tells JavaScript: “This is  returning an expression.
  {
//taking the braces in newline terminates the return so the
//followed statement does not work
  name: "Radhe krishna", 
  age: 25 
}
 );
document.write(JSON.stringify(getUser()));
//it converts the object into string with the help of stringify()
</script>



Posted by at No comments:
Labels: , , , , , , ,

Tuesday, July 15, 2025

JavaScript Tutorial: Learn Functions and Arrow Functions with Examples

 

JS Function programs collection

JS program to show the concept of arrow function


1. JS program to print hi using arrow function

<script>
s=()=>//same as function s()
{
  console.log("hi");
}
s();
</script>


2. JS program to print sum of two numbers using arrow function

<script>
sum=()=>//same as function sum()
{
  var a=30,b=20;
  return a+b;
}
console.log(sum());
</script>

Or

traditional way to use function

<script>
function sum()
{
  var a=30,b=20;
  return a+b;
}
console.log(sum());
</script>

3.JS program to print sum of two numbers using arrow function and passing parameters.

<script>
sum=(a,b)=>//means the function sum is accepting two parameters
{
  return a+b;
}
console.log(sum(12,13));
</script>


Or
<script>
sum=(a,b)=> a+b;//means the function sum is accepting two parameters
console.log(sum(12,13));
</script>


Note:We can not use return with a+b e.g. return a+b. Js does not support.
Use under braces. This is called implicit return. It means returning value without using return.
Posted by at No comments:
Labels: , , , , , , ,

Saturday, June 28, 2025

JavaScript Program to use function to find sum of series– Function concept in JS with Examples

 

JS Function programs collection

JS program to show the concept of function

JS program to find sum of series using function  sum()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>sum of series</title>

</head>

<body>

<h1>the sum is</h1>

<script type="text/javascript">

function sum()

{

var i,sum=0;

for(i=1;i<=100;i++)

{

sum+=i;

}

document.write(sum);

}

</script>

<script type="text/javascript">

sum();

</script>

</body>

</html>

Posted by at No comments:
Labels: , , , , , , ,

Thursday, June 26, 2025

JavaScript Program to Use querySelector() – DOM Manipulation in JS with Examples

 


JS DOM programs collection



JS program to show the concept of querySelector()

<!-- In JavaScript, 
querySelector() is a method provided by the DOM (Document Object Model) that allows you to select the first HTML element that matches a specified CSS selector. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DOM (queryselector)</title>
</head>
<body>
<p id="id1">hello DOM</p>
<script>
var txt;
txt=document.querySelector('#id1');
txt.style.color="green";
</script>

</body>
</html>
Posted by at No comments:
Labels: , , , , ,

Friday, June 20, 2025

JavaScript Program to Use getElementById() to change the color of paragraphs with different ids | DOM Manipulation in JS with Examples


JS DOM programs collection




JavaScript Program to Use getElementById() to change the color of different paragraphs having different ids  using getElementById (DOM)



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>looping through multiple ids</title>
</head>
<body>
<p id="i1">text1</p>
<p id="i2">text2</p>
<p id="i3">text3</p>
<p id="i4">text4</p>
<button onclick="highlights()">click to highlight the paragraphs</button>
<script>
function highlights()
{
let i;
for(i=1;i<=4;i++)
{
item=document.getElementById('i'+i);
item.style.backgroundColor="orange";
}
}
</script>
</body>
</html>
Posted by at No comments:
Labels: , , , , ,

Thursday, June 19, 2025

JavaScript Program to Use getElementById() to display text itself after typing | DOM Manipulation in JS with Examples

 

JS DOM programs collection




JavaScript Program to Use getElementById() to display text itself entered by user  using getElementById (DOM)






<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>auto appearing text</title>

</head>

<body>

<form>

enter your text:<br>

<input type="text" id="data" oninput="textappear()">


</form>

<p id="text">

</p>

<script type="text/javascript">

function textappear()

{

var t;

t=document.getElementById('data').value;

document.getElementById('text').innerText=t;

}

</script>


</body>

</html>

Posted by at No comments:
Labels: , , , ,

Thursday, June 12, 2025

JavaScript Program to Use getElementById() – DOM based program in JS to convert string into uppercase

 


JS DOM programs collection


JS program to convert entered string into uppercase by user using getElementById()

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>js program to convert into uppercase</title>

</head>

<body>

<form>

enter your text:<input type="text" id="mytext" placeholder="enter a text">

</form>

<button onclick="convertintouppercase();">change into uppercase</button>

<p id="result"></p>

<script>

function convertintouppercase()

{

var txt;

txt=document.getElementById('mytext').value;

document.getElementById('result').innerText=txt.toUpperCase();

}

</script>

</body>

</html>


Output:-

JS code to convert string into uppercase



Posted by at No comments:
Labels: , , , , ,

JavaScript Program to Use getElementById() – DOM based program to find sum of two numbers

 

JS DOM programs collection

JS program to find sum of two numbers entered by user using getElementById() (DOM)


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>js program to find sum of two numbers using text boxes</title>

</head>

<body>

<form>

enter first number:<input type="text" id="n1" placeholder="enter first number"><br>

enter second number:<input type="text" id="n2" placeholder="enter second number"><br>

</form>

<button onclick="sumnumbers();">click to find the sum</button>

<p>sum is:<span id="resultsum"></span></p>

<p>difference is:<span id="resultdiff"></span></p>

<script>

function sumnumbers()

{

var number1,number2,sum;

number1=parseFloat(document.getElementById('n1').value);

number2=parseFloat(document.getElementById('n2').value);

sum=number1+number2;

document.getElementById('resultsum').innerText=sum;

document.getElementById('resultdiff').innerText=number1-number2;

}

</script>

</body>

</html>


Output:

JS program to find sum of two numbers entered by user


Posted by at No comments:
Labels: , , , , , ,

Friday, June 6, 2025

JavaScript Program to Use getElementById() to count the total number clicked a button | DOM Manipulation in JS with Examples




JS DOM programs collection




JavaScript Program to Use getElementById() to count the total number clicked a button using getElementById (DOM)


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>to count total number of times we clicked the button</title>

</head>

<body>

<button onclick="totalclicks();">click me</button>

<p>clicked times=<span id="count"></span></p>

<script>

var c=0;

function totalclicks()

{

c++;

document.getElementById('count').innerText=c;

}

</script>

</body>

</html>


output:-

JS program to count total clicks


Posted by at No comments:
Labels: , , , ,

JavaScript Program to Use getElementById– DOM Manipulation in JS with Examples --- To change the contents after clicking

 


JS DOM programs collection



JS program to To change the contents after clicking, using getElementById (DOM)




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>DOM concept</title>

</head>

<body>

<p id='p1'>hello world, you are beautiful.</p>

<button onclick="textChange();">click to change the text</button>

<script>

function textChange()

{

document.getElementById("p1").innerHTML="this is a new text";

}

</script>

</body>

</html>


Output:-

JS code to change the contents after clicking the button





Posted by at No comments:
Labels: , , , , ,

Thursday, June 5, 2025

JavaScript Program to Use getElementById and style– DOM Manipulation in JS with Examples --- To hide and show the contents

 

JS DOM programs collection



JS program to show  and hide the content using getElementById (DOM)


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>hiding and showing the text(toggling)</title>

</head>

<body>

<p id="para1">this is JS code</p>

<button onclick="shText();">click to hide/show</button>

<script>

function shText()

{

                var p;

p=document.getElementById('para1');

if(p.style.display=="none")

{

p.style.display="block";

}

else

{

p.style.display="none";

}

}

</script>

</body>

</html>


Output:




JS program to hide/show the contents














Posted by at No comments:
Labels: , , , , ,

JavaScript Program to Use getElementById and oninput event– DOM Manipulation in JS with Examples --- to count total characters entered by user

 

JS DOM programs collection


 JS program to show the concept of getElementById (DOM)



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>counting typed characters</title>

</head>

<body>

Enter your text<br>

<textarea id="messagecount" oninput="charasCount();" rows="10" cols="10"></textarea>

<p>total characters you have types is:<span id="total">0</span></p>

<script>

function charasCount()

{

var i;

i=document.getElementById('messagecount').value;

document.getElementById('total').innerText=i.length;

}

</script>

</body>

</html>


Output:-

JS program to count total characters



Posted by at No comments:
Labels: , , , , ,

JavaScript Program to Use getElementById – DOM Manipulation in JS with Examples-to change the background color

 

JS DOM programs collection

 JS program to show the concept of getElementById(DOM)


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>background change</title>

</head>

<body>

<button onclick="colorChange();">click to change the background</button>

<script>

function colorChange()

{

document.body.style.backgroundColor="orange";

}

</script>

</body>

</html>

Output:

JS program to change background color



Posted by at No comments:
Labels: , , , ,

JavaScript Program to Use getElementById – DOM Manipulation in JS with Examples

JS DOM programs collection


 JS program to show the concept of getElementById(DOM)



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>background change</title>

</head>

<body>

<button id="bt1" onclick="colorChange();">click to change the background</button>

<script>

function colorChange()

{

//var id=document.getElementById('bt1');

//OR

document.getElementById('bt1').style.backgroundColor="purple";

}

</script>

</body>

</html>


Output:

JS code to implement DOM in program-document.getelementById()



Posted by at No comments:
Labels: , , , ,