Java Script
Decision and Looping, Array, Function, Event, Object
Exampe:1
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script>
var num,k,c;
var i=1;
var ch="A";
var num=10;
for(k=1; k<=num; k++)
{
for(c=1; c<=k; c++)
{
if(k%2==0)
{
document.write(ch++);
}
else
{
document.write(i++);
}
}
document.writeln("</br");
}
</script>
</body >
</html>
Exampe:2
<!DOCTYPE html>
<html>
<head>
<script>
function search(myform)
{
var s=myform.fname.value;
//var s=document.myform.fname.value;
//var s=document.getElementById("demo").myform.fname.value;
var n=prompt("enter the word to be search");
alert(n);
var temp=s.split(" ");
for(var i=0;i<temp.length;i++)
{
if(temp[i]==n)
{
alert("the word is at position"+(i+1));
}
}
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="fname" id="fname"></br>
<input type="button" value="Click me" onclick="search(myform)">
</form>
</body >
</html>
Example:3
<!DOCTYPE html>
<html<head>
<title>JavaScript
function</title>
</head>
<body>
<div
id="h"></div>
<script>
var v = 0, f = 1,t="Gec
Bhavnagar",color;
function a()
{
if(f==1)
v+=5,color="red";
else
v-=5,color="blue";
document.getElementById("h").innerHTML
= "<h1 style=\"font-size: "+v+"px ; margin: 0px; color :
"+color+"\"><b>
"+t+"</b></h1>";
if(v==50)
f = 0, t="Gec Bhavnagar";
if(v==5)
f = 1, t="Gec
Bhavnagar";
c();
}
function c()
{
setTimeout(a,300);
}
c();
</script>
</body>
</html>
Example :4
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Event</title>
</head>
<body>
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()"> Welcome </h1>
<div class="container">
<p class="Current_Time"></p>
<input type="button" value="Time" onclick="time()">
</div>
<script>
function mouseOver()
{
document.getElementById("demo").style.color="red";
}
function mouseOut()
{
document.getElementById("demo").style.color="black";
}
function time()
{
var date = new Date();
var day = date.getDate();
window.confirm('Are you sure?')
document.write(date).style.color="red";
}
</script>
</body>
</html>
Example :5
<!DOCTYPE html>
<html>
<head>
<title>Java Script-Event-GECBVN/title>
<script language="JavaScript">
document.write("hello world");
function message(element)
{
alert("You clicked the " + element +
" element!");
}
function myFunction() {
alert("hello");
var x =
document.frm.length;
alert(x);
}
</script>
</head>
<body>
<form name="frm">
<input type="radio"
name="Radio" onClick="message('Radio Button 1')">Option
1<br>
<input type="radio"
name="Radio" onClick="message('Radio Button 2')">Option
2<br>
<input type="checkbox"
onClick="message('Check Button')">Check Button<br>
<input type="submit"
value="Send" onClick="message('Send Button')">
<input type="reset"
value="Reset" onClick="message('Reset Button')">
<input type="button"
value="Mine" onClick="message('My very own Button')">
<input type="submit" value="no of
ele" onclick="myFunction()" />
</form>
</body>
</html>
Example 6:
<!DOCTYPE html>
<html>
<head>
<title>Java Script-String Method-GECBVN/title>
<script language="JavaScript">
var str=prompt("enter string");
var strlen=str.length;
alert(strlen);
var frstletter = str.charAt(0);
var lastletter =
str.charAt(strlen);
alert(frstletter);
if(frstletter=='a' ||
lastletter=='a' )
{
document.write("string
is in proper format");
}
for(var index = 0;index < strlen;index++)
{
if(str.charAt(index)!='a'
&& str.charAt(strlen)!='a' )
{
var
str1 = str.charAt(index);
alert(str1);
document.write("<br/>"+str1);
}
}
</script>
</head>
<body>
</body>
</html>
Example 7:
<!DOCTYPE html>
<html>
<head>
<title>Java Script-Event-GECBVN/title>
<script
type="text/javascript">
function
showdttime()
{
document.getElementById("demo").innerHTML
= Date();
}
function
changebackground(val)
{
if(val=='red')
{
document.body.style.background="red";
}
else if(val=='green')
{
document.body.style.background="green";
}
}
</script>
</head>
<body>
<p
id="demo"></p>
<input
type="button" onclick="showdttime()"
value="finddatetime" />
<input
type="button" id="rbtn"
onclick="changebackground('red')" value="redbutton"/>
<input
type="button"
id="gbtn"onclick="changebackground('green')"
value="greenbutton"/>
</body>
</html>
Example 8:
<!DOCTYPE html>
<html>
<head>
<title>Java Script-Event-GECBVN/title>
<script type="text/javascript">
window.onkeyup = changebgcolor;
function myKeyPress(e){
var keynum;
if(window.event){ // IE
keynum
= e.keyCode;
}else
if(e.which){ // Netscape/Firefox/Opera
keynum
= e.which;
}
var char1=String.fromCharCode(keynum);
//for vovel
if(char1=='a' || char1=="e" ||
char1=='i' || char1=='o' || char1=='u')
{
alert("you
have pressed vovel");
}
alert("you
pressed "+char1 +" & keycode for that is "+ keynum);
}
function changebgcolor()
{
document.getElementById("txt1").style.backgroundColor
= "blue";
}
</script>
</head>
<body>
<form>
<input type="text" id="txt1"
onkeyup="changebgcolor()"
onkeypress="myKeyPress(event)"/>
</form>
</html>
Example :9
<html>
<head>
<title>Java Script-Date Method-GECBVN/title>
<script type="text/javascript">
var month = parseInt(prompt("enter your birth month
(1-12)","") - 1);
var day = parseInt(prompt("enter your birth day(1-31)",
""));
var birthday = new Date();
var currentdate = new Date();
var one_day=1000*60*60*24;
birthday.setDate(day);
birthday.setMonth(month);
birthday = birthday.getTime();
currentdate = currentdate.getTime();
var theDate = birthday - currentdate;
document.write(theDate+"<br/>");
theDate = (theDate / one_day);
document.write("days left are " + theDate.toFixed(0) + " in
your birthday ");
</script>
</head>
</html>
Example 10:
<html>
<head>
<title>Java Script-String Method-GECBVN/title>
</head>
<body>
<script
type="text/javascript">
var str =
prompt("enter string");
var
srchword=prompt("enter word to search in string");
var copyword=0;
var temp = new
Array();
temp =
str.split(" ");
alert(temp.length);
for (var i = 0;i
< temp.length; ++i)
{
if(srchword.match(temp[i]))
{
copyword=srchword.match(temp[i]);
var pos = temp.indexOf(srchword);
document.write(srchword+" found
in your array at "+ pos +" position" );
copyword=-1;
}
}
if(copyword==0)
{
document.write(srchword+" not
found in your array");
}
</script>
</body
onload=containsAny()>
</html>