Javascript programs

-

 Javascript programs


JS program to add two numbers:

<!Doctype html>
<html lang = “en”>
<head>
<title>Document</title>
</head>
<body>
Enter first number: <br>
<input id = “value1” type = “text”> <br>
Enter second number: <br>
<input id = “value2” type = “text”> <br>
<button onclick= “calSum()” >Click Me</button>
<script>
function calSum(){
var a = parseInt(document.getElementById(“value1”).value);
var b = parseInt(document.getElementById(“value2”).value);
var sum = a + b;
document.write(sum);
}
</script>
</body>
</html>



OR

<html>
<head>
<body>
<script>
function calsum()
{
var a=parseInt(document.getElementById("value1").value);
var a1=parseInt(document.getElementById("value2").value);
var sum=a+a1;
document.getElementById("demo").innerHTML=sum;
}
</script>
Enter first No<input type="text" id="value1"><br>
Enter second No<input type="text" id="value2"><br>
<button onclick="calsum()"> Addition</button>
<p id="demo"></p>
</body>
</head>
</html>
• parseInt():
This function parses a string and returns an integer.
• Document.write():
Write some text directly to HTML output.
• Document.getElementById():
Get the element by specified Id.
• Element.innerHTML:
The easiest way to modigy the content of an HTML element is by using the innerHTML
property.

Ex:
<!Doctype html>
<html lang = “en”>
<head>
<title>Document</title>
</head>
<body>
<p id = “p1”> Hello </p>
<script>
var element = document.getElementById(“p1”);
element.innerHTML = “New Text”;
</script>
</body>
</html>

JS program to change background color:

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Example</title>
<script>
function mycolorcolor()
{
document.bgColor="yellow";
}
function mywebsite()
{
open("https://www.google.com ");

}
</script>
</head>
<body>
<button type="button" onclick="mycolorcolor()">Click Me</button>
<button type="button" onclick="mywebsite()">My Website</button>
</body>
</html>

JS Program to find cube of a number:

<html>
<head>
<body>
<script>
function cube()
{
var a=document.getElementById("value1").value;
document.write(a*a*a);
}
</script>
Enter anynumber<input type="text" id="value1"><br>
<button onclick="cube()"> find cube</button>
</body>
</head>
</html>

JS program to find largest of three numbers:

<html>
<head>
<body>
Enter first No: <input type="text" id="value1"><br>
Enter second No: <input type="text" id="value2"><br>
Enter second No: <input type="text" id="value3"><br>
<button onclick="Largest()"> Click for Largest</button>
<p id="demo"></p>
<script>
function Largest(){
var a= parseInt(document.getElementById("value1").value);
var b= parseInt(document.getElementById("value2").value);
 var c= parseInt(document.getElementById("value3").value);
 var result= document.getElementById(“demo”);
if(a>b && a>c){
result.innerHTML= a + “ is largest number”;
}
elseif(b>a && b>c){
result.innerHTML = b + “ is largest number”;
}
else{
result.innerHTML = c + “ is largest number”;
}
}
</script>
</body>
</head>
</html>

JS program to print multiplication table of number entered by the user:

<!Doctype html>
<html lang = “en”>
<head>
<title>Document</title>
</head>
<body>
<input type= “text” placeholder= “Enter a number” id = “value1”>
<button onclick= “printTable()”>Click for Table</button>
<p id = “p1”> </p>
<script>
function printTable(){
var num= parseInt(document.getElementById(“value1”).value);
var result = document.getElementById(“p1”);
var table = “The table of ” + num + “ is <br>”;
for(let i=1; i<=10; i++){
table + = num * i + “<br>”;
}
result.innerHTML = table;
}
</script>
</body>
</html>

JS program to show even numbers between 1 to a number entered by the user:

<!Doctype html>
<html lang = “en”>
<head>
<title>Document</title>
</head>
<body>
<input type= “text” placeholder= “Enter a number” id = “value1”>
<button onclick= “printEven()”>Click for Table</button>
<p id = “p1”> </p>
<script>
function printEven(){
var num= parseInt(document.getElementById(“value1”).value);
var result = document.getElementById(“p1”);
var even = “The table of ” + num + “ is <br>”;
for(let i=1; i<=10; i++){
if(i%2==0){
even + = i + “<br>”;
}
}
result.innerHTML = even;
}
</script>
</body>
</html>

JS program to validate user input:

<!Doctype html>
<html lang = “en”>
<head>
</head>
<body>
<form onsubmit = “return_data()”>
User Name: <input type=”text” id= “n1”/> <br>
Contact: <input type= “number” id = “n2”/> <br>
Password: <input type = “password” id = “n3”/> <br>
Confirm Password: <input type = “password” id = “n4”/> <br>
<input type= “submit” value= “submit-your-data”/>
</form>
<script>
function return_data(){

var a = document.getElementById(“n1”).value;
var b = document.getElementById(“n2”).value;
var c = document.getElementById(“n3”).value;
var d = document.getElementById(“n4”).value;
if(a == “ ” || b == “ ” || c == “ ” || d == “ ”){
alert(“All fields are mandatory”);
return false;
}
else if(b.length < 10 || b.length > 10){
alert(“Number should be of 10 digits. Please enter valid number.”);
return false;
}
else if(isNaN(b){
alert(“Only number is allowed”);
return false;
}
else if(c !=d){
alert(“Enter same password”);
return false;
}
else{
return true;
}
}
</script>
</body>
</html>

JavaScript Program of Simple Calculator:

<!DOCTYPE html>
<html>
<head>
 <title>Basic Calculator</title>
 <style>
 body {
 font-family: Arial, sans-serif;
 margin: 50px;
 text-align: center;
 }
 input, button {
 margin: 5px;
 padding: 10px;
 font-size: 18px;
 }
 </style>
</head>
<body>
 <h2>Basic Calculator</h2>
 <input type="number" id="num1" placeholder="First number" />
 <input type="number" id="num2" placeholder="Second number" /><br>
 <button onclick="calculate('+')">+</button>
 <button onclick="calculate('-')">-</button>
 <button onclick="calculate('*')">*</button>
 <button onclick="calculate('/')">/</button>
 <h3 id="result">Result: </h3>
 <script>
function calculate(operator) {
 const num1 = parseFloat(document.getElementById('num1').value);
 const num2 = parseFloat(document.getElementById('num2').value);
 let result;
 if (isNaN(num1) || isNaN(num2)) {
 result = "Please enter valid numbers.";
 } else {
 switch(operator) {
 case '+':
 result = num1 + num2;
 break;
 case '-':
 result = num1 - num2;
 break;
 case '*':
 result = num1 * num2;
 break;
 case '/':
 result = num2 !== 0 ? num1 / num2 : "Cannot divide by zero";
 break;
 }
 }
 document.getElementById('result').innerText = "Result: " + result;
 }
 </script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Artificial Intelligence in Education

-
 The Transformative Power of Artificial Intelligence in Education Artificial Intelligence (AI) is revolutionizing the education sector, offering opportunities for personalized learning, enhanced student engagement, and improved administrative efficiency. As AI continues to evolve, it's essential to explore its applications, benefits, and future prospects in education. One of the most significant advantages of AI in education is its ability to provide personalized learning experiences. By analyzing student data, AI can tailor educational content to individual strengths, weaknesses, and learning styles. This approach encourage a more inclusive educational environment, where students can learn at their own pace and focus on areas that need improvement. AI-powered intelligent tutoring systems offer real-time feedback and support, enhancing the learning process and nurturing critical thinking and problem-solving skills. These systems can provide individualized attention to students, hel...
Read more

Puran Poli – The Sweet Soul of Maharashtrian Tradition

-
Image
  Puran Poli – The Sweet Soul of Maharashtrian Tradition When it comes to traditional Indian sweets that carry both flavor and emotion, Puran Poli holds a special place. Popular in Maharashtra and several parts of South India, this soft, sweet flatbread is more than just a festive dish—it is a symbol of celebration, warmth, and family traditions passed down through generations. What is Puran Poli? Puran Poli is a delicious stuffed flatbread made with a sweet filling called puran . The filling is typically prepared using cooked chana dal (split Bengal gram) mixed with jaggery , flavored with cardamom and sometimes nutmeg . This sweet mixture is stuffed inside a thin wheat flour dough and roasted on a hot griddle with ghee until golden and aromatic. The result is a soft, slightly crispy, melt-in-the-mouth treat that perfectly balances sweetness and richness. A Dish Rooted in Culture In Maharashtra, Puran Poli is strongly associated with festivals and special occasions. It is tradi...
Read more

Future of AIML Engineering

-
Image
  The Future of AI/ML Engineering: Transforming Industries and Shaping Tomorrow Artificial Intelligence (AI) and Machine Learning (ML) are changing the world faster than we imagined. These technologies are now everywhere—healthcare, finance, retail, and even agriculture. For AI/ML engineers, this growth opens new doors and big opportunities. They’re the people building the tools that make machines smarter and solve complex problems. This article explores what’s next for AI/ML engineering. We'll look at some key trends, career paths, new tech, ethical issues, and real-world examples that show the power of AI. The Current State of AI/ML Engineering Overview of AI/ML Technologies in 2023 In 2023, AI and ML keep breaking new ground. Deep learning algorithms help computers recognize images and speech better than ever. Natural language processing (NLP) now powers chatbots and voice assistants that sound more human. Computer vision is improving so much that driverless cars can see and...
Read more