javascript program example
In this article, today learn javascript program example.javascript is a scripting language. it is the use of basic HTML and javascript create a program for javascript so let a javascript programming list start now.
1. Javascript first program how to run a javascript program:
Web browsers are built to understand HTML and CSS and convert those languages into a visual display on the screen. The part of the web browser that understands HTML and CSS is called the layout or rendering engine. But most browsers also have something called a JavaScript interpreter. That’s the part of the browser that understands JavaScript and can execute the steps of a JavaScript program. The web browser is usually expecting HTML, so you must specifically tell the browser when JavaScript is coming by using the <script> tag.
The <script> tag is regular HTML. It acts like a switch that in effect says “Hey, web browser, here comes some JavaScript code; you don’t know what to do with it, so hand it off to the JavaScript interpreter.” When the web browser encounters the closing </script> tag, it knows it’s reached the end of the JavaScript program and can get back to its normal duties.
Much of the time, you’ll add the <script> tag in the web page’s <head> section, like this:
2. javascript hello word program:
<doctype html>
3. javascript input date program:
<!DOCTYPE html>
<p>Click the button to create a Date field.</p>
<button onclick="myFunction()">Click Here</button><br>
<script>
</body>
4. javascript input number program:
<!DOCTYPE html>
<p>Click the button to create a Number field.</p>
<button onclick="myFunction()">Click Here</button>
<script>
</body>
5.javascript no validation program:
<!DOCTYPE html>
<body>
</body>
6.javascript json program:
<!DOCTYPE html>
<h2>Store and retrieve data from local storage.</h2>
<p id="demo"></p>
<script>
//Storing data:
//Retrieving data:
</body>
7.how to display lable in javascript:
<!DOCTYPE html>
<p>A label element is displayed like this:</p>
<label for="male">Male</label>
</body>
8.javascript leap year program:
!DOCTYPE html>
<head>
<body>
</html>
9.javascript odd even program:
<html>
10.javascript pallindrom no program:
<html>
no=Number(document.getElementById("no_input").value);
b=no;
11.javascript password validation program:
<!DOCTYPE html>
if(firstpassword==secondpassword){
<form name="f1" action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return matchpass()">
</body>
12.javascript add two no programs:
<html>
13.how to create alert dialog box in javascript:
<html>
14.javascript armstrong no program:
html>
temp=num;
15.how to create checkbox in javascript:
<!DOCTYPE html>
<p>Display some text when the checkbox is checked:</p>
Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED!</p>
<script>
</body>
16.how to create circle in javascript:
<!DOCTYPE html>
<div style="text-align:center">
</body>
17.how to display image in javascript program:
!DOCTYPE html>
<h3>A demonstration of how to access an IMG element</h3>
<img id="myImg" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<p>Click the button to get the URL of the image.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
</body>
18.javascript email validation program:
<html>
19.javascript factorial no program:
<html>
var i, no, fact;
20. how to create a popup box in javascript:
<html>
javascript program example
In this article, today learn javascript program example.javascript is a scripting language. it is the use of basic HTML and javascript create a program for javascript so let a javascript programming list start now.
1. Javascript first program how to run a javascript program:
Web browsers are built to understand HTML and CSS and convert those languages into a visual display on the screen. The part of the web browser that understands HTML and CSS is called the layout or rendering engine. But most browsers also have something called a JavaScript interpreter. That’s the part of the browser that understands JavaScript and can execute the steps of a JavaScript program. The web browser is usually expecting HTML, so you must specifically tell the browser when JavaScript is coming by using the <script> tag.
The <script> tag is regular HTML. It acts like a switch that in effect says “Hey, web browser, here comes some JavaScript code; you don’t know what to do with it, so hand it off to the JavaScript interpreter.” When the web browser encounters the closing </script> tag, it knows it’s reached the end of the JavaScript program and can get back to its normal duties.
Much of the time, you’ll add the <script> tag in the web page’s <head> section, like this:
The <script> tag is regular HTML. It acts like a switch that in effect says “Hey, web browser, here comes some JavaScript code; you don’t know what to do with it, so hand it off to the JavaScript interpreter.” When the web browser encounters the closing </script> tag, it knows it’s reached the end of the JavaScript program and can get back to its normal duties.
Much of the time, you’ll add the <script> tag in the web page’s <head> section, like this:
<html>
<head>
<title>My Web Page</title>
<script type="text/javascript">
</script >
</head >
2. javascript hello word program:
<doctype html>
<html>
<head>
<script>
function hello()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="hello()">Click Me</button></br></br>
</body>
</html>
3. javascript input date program:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a Date field.</p>
<button onclick="myFunction()">Click Here</button><br>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "date");
x.setAttribute("value", "2019-02-09");
document.body.appendChild(x);
}
</script>
</body>
</html>
4. javascript input number program:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a Number field.</p>
<button onclick="myFunction()">Click Here</button>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "number");
x.setAttribute("value", "12345");
document.body.appendChild(x);
}
</script>
</body>
</html>
5.javascript no validation program:
<!DOCTYPE html>
<html>
<head>
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value only";
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form name="myform" action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return validate()" >
Number: <input type="text" name="num"><span id="numloc"></span><br/>
<input type="submit" value="submit">
</form>
</body>
</html>
6.javascript json program:
<!DOCTYPE html>
<html>
<body>
<h2>Store and retrieve data from local storage.</h2>
<p id="demo"></p>
<script>
var myObj, myJSON, text, obj;
//Storing data:
myObj = { "name":"John", "age":31, "city":"New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);
//Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
</script>
</body>
</html>
7.how to display lable in javascript:
<!DOCTYPE html>
<html>
<head>
<style>
label {
cursor: default;
}
</style>
</head>
<body>
<p>A label element is displayed like this:</p>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other">
</body>
</html>
8.javascript leap year program:
!DOCTYPE html>
<html>
<head>
<title>
JavaScript to check leap year
</title>
</head>
<body>
Input Year:<input type="text" id = "year"/>
<input type="button" id="button" onClick="isLeapYear()"
value="Check Leap Year">
<p id="GFG"> </p>
<script>
function isLeapYear() {
var year= document.getElementById("year").value;
document.getElementById("GFG").innerHTML
= (year % 100 === 0) ? (year % 400 === 0)
: (year % 4 === 0);
}
</script>
</body>
</html>
9.javascript odd even program:
<html>
<head>
<script>
function odd_even(){
var no;
no=Number(document.getElementById("no_input").value);
if(no%2==0)
{
alert("Even Number");
}
else
{
alert("Odd Number");
}
}
</script>
</head>
<body>
Enter Any Number:<input id="no_input"><br />
<button onclick="odd_even()">Click me</button>
</body>
</html>
10.javascript pallindrom no program:
<html>
<head>
<script>
function palin()
{
var a,no,b,temp=0;
no=Number(document.getElementById("no_input").value);
b=no;
while(no>0)
{
a=no%10;
no=parseInt(no/10);
temp=temp*10+a;
}
if(temp==b)
{
alert("Palindrome number");
}
else
{
alert("Not Palindrome number");
}
}
</script>
</head>
<body>
Enter any Number: <input id="no_input">
<button onclick="palin()">Check</button></br></br>
</body>
</html>
11.javascript password validation program:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
</head>
<body>
<form name="f1" action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
</body>
</html>
12.javascript add two no programs:
<html>
<head>
<script>
function add(){
var a,b,c;
a=Number(document.getElementById("first").value);
b=Number(document.getElementById("second").value);
c= a + b;
document.getElementById("answer").value= c;
}
</script>
</head>
<body>
Enter the First number : <input id="first">
Enter the Second number: <input id="second">
<button onclick="add()">Add</button>
<input id="answer">
</body>
</html>
13.how to create alert dialog box in javascript:
<html>
<head>
<script type = "text/javascript">
<!--
function Warn() {
alert ("This is a warning message!");
document.write ("This is a warning message!");
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "Warn();" />
</form>
</body>
</html>
14.javascript armstrong no program:
html>
<head>
<script>
function armstr()
{
var arm=0,a,b,c,d,num;
num=Number(document.getElementById("no_input").value);
temp=num;
while(temp>0)
{
a=temp%10;
temp=parseInt(temp/10); // convert float into Integer
arm=arm+a*a*a;
}
if(arm==num)
{
alert("Armstrong number");
}
else
{
alert("Not Armstrong number");
}
}
</script>
</head>
<body>
Enter any Number: <input id="no_input">
<button onclick="armstr()">Check</button></br></br>
</body>
</html>
15.how to create checkbox in javascript:
<!DOCTYPE html>
<html>
<body>
<p>Display some text when the checkbox is checked:</p>
Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction()">
<p id="text" style="display:none">Checkbox is CHECKED!</p>
<script>
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</body>
</html>
16.how to create circle in javascript:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dot {
height: 100px;
width: 100px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
</style>
</head>
<body>
<div style="text-align:center">
<h1>Round Dots / Circles</h1>
<span class="dot"></span>
</div>
</body>
</html>
17.how to display image in javascript program:
!DOCTYPE html>
<html>
<body>
<h3>A demonstration of how to access an IMG element</h3>
<img id="myImg" src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<p>Click the button to get the URL of the image.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myImg").src;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
18.javascript email validation program:
<html>
<body>
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2> =x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
</body>
</html>
19.javascript factorial no program:
<html>
<head>
<script>
function show(){
var i, no, fact;
fact=1;
no=Number(document.getElementById("num").value);
for(i=1; i<=no; i++)
{
fact= fact*i;
}
document.getElementById("answer").value= fact;
}
</script>
</head>
<body>
Enter Num: <input id="num">
<button onclick="show()">Factorial</button>
<input id="answer">
</body>
</html>
20. how to create a popup box in javascript:
<html>
<head>
<script type="text/javaScript">
function see()
{
var c= confirm("Click OK to see Google Homepage or CANCEL to see Bing Homepage");
if (c== true)
{
window.location="http://www.google.co.in/";
}
else
{
window.location="http://www.bing.com/";
}
}
</script>
</head>
<body>
<center>
<form>
<input type="button" value="Click to chose either Google or Bing" onclick="see()">
</form >
</center>
</body>
</html>
No comments:
Post a Comment