JAVASCRIPT
Simple Javascript Example-1
<!DOCTYPE html>
<html>
<head>
<title>Java Script Example</title>
</head>
<body>
<pre>
<script>
document.writeln("Hello World!");
document.writeln("Have a nice day!");
</script>
</pre>
</body>
</html>
Simple Javascript Example-2
<!DOCTYPE html>
<html>
<head>
<title>Java Script Example</title>
</head>
<body>
<p id="demo"></p>
<pre>
<script>
fname=window.prompt("Enter First Name:");
lname=window.prompt("Enter Last Name:");
name=fname+lname;
document.write(name);
</script>
</pre>
</body>
</html>
Simple Javascript Example-3
<html>
<head>
<title>Java Script Example</title>
<script>
function Hello()
{
window.alert("Hello");
}
</script>
</head>
<body>
<script>
Hello();
</script>
</body>
</html>
Javascript Function Example
<!DOCTYPE html>
<html>
<head>
<script>
function add()
{
a=window.prompt("Enter Name");
b=window.prompt("Enter Age");
c=parseInt(a)+parseInt(b);
console.log("Result:"+c);
}
</script>
</head>
<body>
<button onclick="add()">Add</button>
</body>
</html>
<html>
<head>
<script>
function add()
{
a=window.prompt("Enter Name");
b=window.prompt("Enter Age");
c=parseInt(a)+parseInt(b);
console.log("Result:"+c);
}
</script>
</head>
<body>
<button onclick="add()">Add</button>
</body>
</html>
Javascript DOM Example
<!DOCTYPE html>
<html>
<head>
<script>
myText = "This is new text is added to the page dynamically.";
function addText(location)
{
elementNode = document.createElement("h3");
textNode = document.createTextNode(myText);
elementNode.appendChild(textNode);
docElement = document.getElementById(location);
docElement.appendChild(elementNode);
}
</script>
</head>
<body>
<p>
<a href="#" onclick="addText('thisLocation');">Click to add new text to the current page</a>
</p>
<p id="thisLocation">New text will appear below here</p>
<p>Some further text in the page</p>
</body>
</html>
Addition of Two Number using Javascript and HTML Form
<!DOCTYPE html>
<html>
<head>
<title>Addition of Two Number</title>
</head>
<body>
<form name="myform" method="get">
<input type="text" name="val1"><br><br>
<input type="text" name="val2"><br><br>
<input type="button" value="Add" onclick="add()">
</form>
<br>
<div id="res"></div>
<script>
function add()
{
a=document.myform.val1.value;
b=document.myform.val2.value;
c=parseInt(a)+parseInt(b);
document.getElementById("res").innerHTML="Result:"+c;
}
</script>
</body>
</html>
Javascript onmouseover and onmouseout Event Example
<!DOCTYPE html>
<html>
<head>
<title>on-event Example</title>
<script>
function change1()
{
document.getElementById("msg").style.color="red";
document.getElementById("msg").style.fontSize="25px";
document.getElementById("msg").innerHTML="How are you";
}
function change2()
{
document.getElementById("msg").style.color="initial";
document.getElementById("msg").style.fontSize="initial";
document.getElementById("msg").innerHTML="Welcome";
}
</script>
</head>
<body>
<p id="msg" onmouseover="change1();" onmouseout="change2();">Welcome</p>
</body>
</html>
<head>
<title>on-event Example</title>
<script>
function change1()
{
document.getElementById("msg").style.color="red";
document.getElementById("msg").style.fontSize="25px";
document.getElementById("msg").innerHTML="How are you";
}
function change2()
{
document.getElementById("msg").style.color="initial";
document.getElementById("msg").style.fontSize="initial";
document.getElementById("msg").innerHTML="Welcome";
}
</script>
</head>
<body>
<p id="msg" onmouseover="change1();" onmouseout="change2();">Welcome</p>
</body>
</html>
Date Object Example
<!DOCTYPE html>
<html>
<head>
<title>Date Object Example</title>
</head>
<body>
<pre>
<script>
d=new Date();
document.writeln(d);
document.writeln("getDate() return:"+d.getDate());
document.writeln("getDay() returns:"+d.getDay());
document.writeln("getFullYear() returns:"+d.getFullYear());
document.writeln("getHours() returns:"+d.getHours());
document.writeln("getMinutes() returns:"+d.getMinutes());
document.writeln("getSeconds() returns:"+d.getSeconds());
document.writeln("getMilliseconds() returns:"+d.getMilliseconds());
</script>
</pre>
</body>
</html>
Array Object Example
<!DOCTYPE html>
<html>
<head>
<title>Array Object Example - Methods and Properties</title>
</head>
<body>
<h1>Welcome</h1>
<p id="res"></p>
<pre>
<script>
a=new Array(3);
a.push(10);
a.push(30);
a.push(20);
document.writeln(a.pop());
document.writeln(a.pop());
document.writeln(a.pop());
b=[20,10,15];
document.writeln("Before Sorting:"+b);
b.sort();
document.writeln("After Sorting:"+b);
document.writeln("Length:"+b.length);
document.writeln("Constructor:"+b.constructor);
document.writeln(b.shift());
alpha = ["a", "b", "c"];
numeric = [1, 2, 3];
alphaNumeric = alpha.concat(numeric);
document.writeln("alphaNumeric : " + alphaNumeric );
document.writeln("Reverse of alpha: " + alpha.reverse());
document.getElementById("res").innerHTML=alpha;
</script>
</pre>
</body>
</html>
Javascript User Defined Object Example
<!DOCTYPE html>
<html>
<head>
<title>Javascript Object Example</title>
</head>
<body>
<p id="name"></p>
<p id="age"></p>
<script>
var person =
{
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue",
fullName:function()
{
return this.firstName+ " " + this.lastName;
}
};
document.getElementById("name").innerHTML="Full Name:"+person.fullName();
document.getElementById("age").innerHTML="Age:"+person.age;
</script>
</body>
</html>
Javascript RegExp Object Example
<!DOCTYPE html>
<html>
<head>
<title>Regular Expression Example</title>
</head>
<body>
<pre>
<script>
pass=window.prompt("Enter your password");
patt=new RegExp("[a-z0-9]");
res=patt.test(pass);
if(res)
{
document.writeln("Password is Strong");
}
else
{
document.writeln("Password is Weak");
}
</script>
</pre>
</body>
</html>
Math Object Example
<!DOCTYPE html>
<html>
<head>
<title>Math Object Example</title>
</head>
<body>
<pre>
<script>
document.writeln("PI="+Math.PI);
document.writeln("3 to the Power of 2="+Math.pow(3,2));
</script>
</pre>
</body>
</html>
String Object Example
<!DOCTYPE html>
<html>
<head>
<title>String Object Example</title>
</head>
<body>
<script>
msg="Welcome to Javascript";
document.writeln("String Length:"+msg.length);
document.writeln("<br>Position of script:"+msg.search("script"));
document.writeln("<br>String Before Replace:"+msg);
document.writeln("<br>String After Replace:"+msg.replace("Java","Perl"));
</script>
</body>
</html>
Event Handling
Inline Event Example
<!DOCTYPE html>
<html>
<head>
<title>JS Inline Event Example</title>
</head>
<body>
<button onclick="alert('Hello, this is inline event handler!');">
Press me
</button>
</body>
</html>
On-Event Example
<!DOCTYPE html>
<html>
<head>
<title>on-event Example</title>
<script>
function change1()
{
document.getElementById("msg").style.color="red";
document.getElementById("msg").style.fontSize="25px";
document.getElementById("msg").innerHTML="How are you";
}
function change2()
{
document.getElementById("msg").style.color="initial";
document.getElementById("msg").style.fontSize="initial";
document.getElementById("msg").innerHTML="Welcome";
}
</script>
</head>
<body>
<p id="msg" onmouseover="change1();" onmouseout="change2();">Welcome</p>
</body>
</html>
addEventListener Example
<!DOCTYPE html>
<html>
<head>
<title>addEventListener Example</title>
</head>
<body>
<button>Press me</button>
<p id="msg"></p>
<script>
const btn=document.querySelector('button');
function sayHello()
{
document.getElementById("msg").innerHTML="Hello, This is addEventListener Example";
}
btn.addEventListener('click',sayHello);
</script>
</body>
</html>
Form Validation Example-1
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function myFunction()
{
//var x, text;
x = document.getElementById("aadhar").value;
if (isNaN(x) || x.length!= 12)
{
text = "Invalid Number";
}
else
{
text = "Input OK";
}
document.getElementById("status").innerHTML = text;
}
</script>
</head>
<body>
<p>Please Enter Your Aadhar Number:
<input id="aadhar">
<button type="button" onclick="myFunction()">Submit</button></p>
<p id="status"></p>
</body>
</html>
Form Validation Example-2
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function myFunction()
{
//var x, text;
x = document.getElementById("age").value;
if (isNaN(x) || x < 1 || x > 120)
{
text = "Invalid Age";
}
else
{
text = "Input OK";
}
document.getElementById("status").innerHTML = text;
}
</script>
</head>
<body>
<p>Please Enter Your Age:
<input id="age">
<button type="button" onclick="myFunction1()">Submit</button></p>
<p id="status"></p>
</body>
</html>
onchange event example
<!DOCTYPE html>
<html>
<head>
<title>onchange event example</title>
<script>
function myFunction()
{
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You have selected " + x;
}
</script>
</head>
<body>
<p>Select Your Department:
<select id="mySelect" onchange="myFunction()">
<option value="CSE">CSE</option>
<option value="EEE">EEE</option>
<option value="ECE">ECE</option>
<option value="MECH">MECH</option>
</select></p>
<p id="demo"></p>
</body>
</html>
onselect event example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("msg").innerHTML="You selected some text!";
}
</script>
</head>
<body>
<p>Select some of the text: </p><textarea onselect="myFunction()">
</textarea>
<p id="msg"></p>
</body>
</html>
JSON
JSON.parse() and JSON.stringfy() Example
<!DOCTYPE html>
<html>
<head>
<title>Stringfy() Example</title>
</head>
<body>
<div id="json1"></div>
<div id="json2"></div>
<script>
var obj = {
"fruit": "Apple",
"types": ["Small", "Medium", "Large"],
"quantity": 1000
};
var json_string = JSON.stringify(obj);
document.getElementById("json1").innerHTML = json_string;
try
{
var obj = JSON.parse(json_string);
document.getElementById("json2").innerHTML = obj.fruit + ", [" + obj.types + "], "
+ obj.quantity;
}
catch (e)
{
alert("Cannot parse given string");
}
</script>
</body>
</html>
JSON Function Files Example
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>
<script>
function myFunction(arr)
{
var out="";
for(i = 0; i<arr.length; i++)
{
out += arr[i].name +" "+ arr[i].department+"<br>";
}
document.getElementById("content").innerHTML = out;
}
</script>
<script src="myjson.js"></script>
</body>
</html>
myjson.js
myFunction([
{
"name": "Madan",
"department": "cse"
},
{
"name": "Suresh",
"department": "ece"
},
{
"name": "Muthu",
"department": "eee"
},
]);
JSON HttpRequest Example
Note: Run these programs from webserver
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if(this.readyState == 4 && this.status == 200)
{
var msg = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", "student.txt", true);
xmlhttp.send();
function myFunction(arr)
{
var out="";
for( var i = 0; i<arr.length; i++)
{
out += arr[i].name +" "+ arr[i].department+"<br>";
}
document.getElementById("content").innerHTML = out;
}
</script>
</body>
</html>
