Scribd
Upload
35 views22 pages

Css-Internal and External Programs_2024

Uploaded by

korekashinath69
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views22 pages

Css-Internal and External Programs_2024

Uploaded by

korekashinath69
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

CSS Programs for Internal and External exam

1. Write a JavaScript program which accepts N as input and print first N odd numbers.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fun(str)
{
var num=Number(str);
var i,j,k,count;
document.write("<h3>"+" The odd numbers are..."+"</h3>");
for(i=0;i<=num;i++)
{
if(i%2!=0)
document.write(" "+i);
}
}
</script>
</head>
<body>
<script type="text/javascript">
var input_str=prompt("Enter some number","");
fun(input_str);
</script>
</body>
</html>
2. Write a JavaScript for sorting the array elements.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script>
var a = ["Sanjay","Aman","Rehman","Karan"];

document.write(a + "<br><br>");
a.sort();
document.write(a);
</script>
</head>
<body>
</body>
</html>
3. Develop JavaScript to implement Strings (any 4 methods).

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script>
var str = "JavaScript is a Great is Language";
var str2 = "Hello";
var str3 = 50;
document.write("Original string::"+str+"<br>");
var a = str.charAt(3); /* CharAt Method */
document.write("char at method 3::"+ a + "<br>");

var b = str.charCodeAt(4); /* CharCodeAt Method ,returns unicode*/


document.write("char code at 4::"+ b + "<br>");

var d = str.concat(str2); /* Concat Method */


document.write("string concatenation::"+ d + "<br>");

var e = str.split(" "); /* Split Method */


document.write("String split::"+ e + "<br>");

var f = str.repeat(2); /* Repeat Method */


document.write("String repeat::" + f + "<br>");

var g = str.slice(3,10); /* Slice Method */


document.write("Slice method::"+ g + "<br>");

var h = str.substr(2,5); /* Substr Method */


document.write("Substr method ::"+ h + "<br>");

var i = str.substring(2,5); /* Substring Method */


document.write("Substring Method::"+ i + "<br>");

var j = str3.toString(); /* Tostring Method */


document.write("Tostring Method::"+j + 20 + "<br>");

var k = str.valueOf(); /* Valueof Method */


document.write("Valueof Method::"+ k + "<br>");
</script>
</head>
<body>
</body>
</html>
4. Develop JavaScript to demonstrate function call from html

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function A()

alert("Inside the function A");

</script>

</head>

<body onload="A()">

</script>

</body>

</html>

Note- or Any other code


5. Design student registration form that contains name, address, contact number, class,
gender and subject you like. Use proper form controls and submit it

<!DOCTYPE html>

<html >

<head>

<title>My Page</title>

<h3 align="center">Registration form</h3>

</head>

<body>

<form>

<b>Student Name:</b><input type="text" size="20" value=""><br/><br/>

<b>Address:</b><input type="text" size="35" value=""><br/><br/>

<b>Contact No:</b><input type="text" size="20" value=""><br/><br/>

<b>Select Gender:</b><br/><br/>

<input type="radio" name="gender" value="male">MALE<br/><br/>

<input type="radio" name="gender" value="female">Female<br/><br/>

<b>Select Class:</b><br/><br/>

<input type="radio" name="class" value="fyco">FYCO<br/><br/>

<input type="radio" name="class" value="syco">SYCO<br/><br/>

<input type="radio" name="class" value="tyco">TYCO<br/><br/>


<div align="left"><br>

Select the subject(s) of your choice<br/>

<input type="checkbox" name="option1" value="css" checked="checked">CSS<br/>

<input type="checkbox" name="option2" value="osy">OSY<br/>

<input type="checkbox" name="option3" value="ajp">AJP<br/>

</div>

<br/><br/><br/>

<input type="submit" value="Submit"/>

<input type="reset" value="Clear"/>

</form>

</body>

</html>
6. Write JavaScript that demonstrate mouse events.

<html>

<title>mouse click demo</title>

<body>

<form>

<input type="submit" value="submit" onclick="my_fun()">

</form>

<script>

function my_fun()

alert("You clicked mouse")

</script>

</body>

</html>

Or

<!DOCTYPE html>

<html>

<body>

<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over


this text</h1>

</body>

</html>
Or

<html>

<head>

<script> function myFunction(elmnt, clr)

{ elmnt.style.color = clr;

</script>

</head>

<body>

<h2 onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">


hi how r u?

</h2>

</body>

</html>
7. Write a JavaScript to create three categories - Fruit, Flower and Color. Based on the
selection of category, the item, in the option list must get changed.

<html>

<head>

<script type="text/javascript">

function MySelection(val)

with(document.forms.myform)

if(val==1)

choices[0].text="Mango"

choices[0].value=1

choices[1].text="Orange"

choices[1].value=2

choices[2].text="Banana"

choices[2].value=3

if(val==2)

choices[0].text="Rose"

choices[0].value=1

choices[1].text="Jasmine"

choices[1].value=2
choices[2].text="Lotus"

choices[2].value=3

if(val==3)

choices[0].text="Red"

choices[0].value=1

choices[1].text="Green"

choices[1].value=2

choices[2].text="Blue"

choices[2].value=3

</script>

</head>

<body>

<h4>Select the Desired Category</h4>

<form name="myform">

<input type="radio" name="items" checked="true" value=1


onclick=MySelection(this.value)>Fruit

<input type="radio" name="items" value=2 onclick=MySelection(this.value)>Flower

<input type="radio" name="items" value=3 onclick=MySelection(this.value)>Colour

<br/><br/>
<select name="choices">

<option Value=1>Mango

<option Value=2>Orange

<option Value=3>Banana

</select>

</form>

</body>

</html>

8 Write a JavaScript to create a pull – down menu with three options [Google,MSBTE,
Yahoo] once the user will select one of the options then user will be Redirected to
that site.
<!DOCTYPE>
<html>
<head>
<title>Pull Down Menu</title>
<script language="Javascript">
function Display(Ch)
{
MyPage = Ch.options[Ch.selectedIndex].value
if (MyPage != "")
{
window.location = MyPage
}
}

</script>
</head>
<body onload="document.Form1.MyMenu.selectedIndex=0">
<form action="" name="Form1">
<select name="MyMenu" onchange="Display(this)">
<option>Select option</option>
<option value="https://www.google.com/">Google</option>
<option value="https://msbte.org.in/"> MSBTE</option>
<option value="https://in.search.yahoo.com/?fr2=inr"> Yahoo</option>
</select>
</form>
</body>
</html>

9. Develop JavaScript that demonstrates key events.


<html>
<head>
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<input type="text" onkeydown="myFunction()">
</body>
</html>
Note-Or any other key event program
10. Write a program that will demonstrate disable elements
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function EnableFunction()
{
document.forms.myform.name.disabled=false
}
function DisableFunction()
{
document.forms.myform.name.disabled=true
}
</script>
</head>
<body>
<form name="myform">
User Name:<input type="text" name="name"/>
<br/><br/>
<input type="button" value="Disable Name Field" onclick="DisableFunction()"/>
<br/><br/>
<input type="button" value="Enable Name Field" onclick="EnableFunction()"/>
</form>
</body>
</html>
11. Write JavaScript to create, read and delete cookie.
<!DOCTYPE html>
<script>
document.cookie="sgm=mahagaon"//set cookies

var getCookie=document.cookie;

document.write(getCookie)//read cookies
document.cookie= "sgm=polytechnic;expires=Mon, 31 Oct 2022 11:00:00
UTC;"//delete cookies
document.write(getCookie)//read
console.log(getCookie);
</script>
</html>

12. Write JavaScript to create web page in new window


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function CreateFunction()
{
var mywin=window.open("","MyWindow","width=300,height=300")
mywin.document.write("<html>");
mywin.document.write("<head>");
mywin.document.write("<title>WEB SITE DEMO</title>");
mywin.document.write("</head>");
mywin.document.write("<body>");
mywin.document.write("<h2>This is a new Web Page</h2>");
mywin.document.write("<h3 style='color:red;font-size:30'>Welcome User!!!</h3>");
mywin.document.write("<a href='www.google.com'>CLick here");
mywin.document.write("</body>");
mywin.document.write("</html>");
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Create Web Page" onclick="CreateFunction()"/>
</form>
</body>
</html>
13. Write a JavaScript to demonstrate setInterval and setTimeout methods of timers.
1.setTimeout
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function MyFunction()
{
alert("Welcome User!!!");
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Click Me" onclick="setTimeout(MyFunction,4000);"/>
</form>
</body>
</html>

2.SetInterval()
<!DOCTYPE html>
<html>
<body>
<p id="ID"></p>
<script type="text/javascript">
var t=setInterval(MyFunction,2000);
function MyFunction()
{
document.getElementById("ID").innerHTML+="<p>Welcome User!!!</p>";
}
</script>
</body>
</html>
14. Write a program for mobile number validation using regular expression
<html>
<head>
<script type="text/javascript">
var re = /^[7-9][0-9]{9}$/;
function testMatch()
{
var str=textfield.value;
if(re.test(str))
{
alert("Your mobile number is " + str);
}
else
{
alert("Please enter correct mobile numebr");
}
}

</script>
</head>
<body>
<h2>Checking valid mobile number</h2>

Enter a moile number <input type="text" id="textfield"/>


<input type="button" value="Check" onclick="testMatch()">

</body>
</html>
15. Write a JavaScript in which when user rolls over the name of fruit, the
corresponding image should be displayed. For instance - if user rolls over the text
"Mango"; the image of Mango should be displayed
<!DOCTYPE html>
<html>
<head>
<title>Rollover Text</title>
</head>
<body>
<table>
<tr>
<td>
<a>
<IMG src="Mango.jpg" name="fruit">
</a>
<a onmouseover="document.fruit.src=' Mango.jpg'">
<b><u>Mango</u></b>
</a>
<br/><br/><br/><br/>
<a onmouseover="document.fruit.src='Orange.jpg'">
<b><u>Orange</u></b>
</a>
<br/><br/><br/><br/>
<a onmouseover="document.fruit.src='banana.jpg'">
<b><u>Banana</u></b>
</a>
</td>
</tr>
</table>
</body>
</html>
16. Create a slideshow with the group of four images, also simulate the next and
previous transition between slides in your JavaScript

<!DOCTYPE html>
<head>
<script language="Javascript">
MySlides=new Array('slide1.jpg','slide2.jpg','slide3.jpg','slide4.jpg')
i=0
function DisplaySlides(SlideNumber)
{
i=i+SlideNumber;
if (i>MySlides.length-1)
{
i=0;
}
if (i<0)
{
i=MySlides.length-1;
}
document.SlideID.src=MySlides[i];
}
</script>
</head>
<body>
<img src="slide1.jpg" name="SlideID" width="400" height="400" />
<br/><br/>
<input type="button" value="Back" onclick="DisplaySlides(-1)">
<input type="button" value="Forward" onclick="DisplaySlides(1)">
</body>
</html>
17. Write a suitable JavaScript to create a pull down menu.

<!DOCTYPE>
<html>
<head>
<title>Pull Down Menu</title>
<script language="Javascript">
function Display(Ch)
{
MyPage = Ch.options[Ch.selectedIndex].value
if (MyPage != "")
{
window.location = MyPage
}
}

</script>
</head>
<body onload="document.Form1.MyMenu.selectedIndex=0">
<form action="" name="Form1">
<select name="MyMenu" onchange="Display(this)">
<option>Books</option>
<option value="Fiction.html">Fiction</option>
<option value="NonFiction.html"> Non Fiction</option>
</select>
</form>
</body>
</html>
18. Create a slideshow with the group of four images, also simulate the next and
previous transition between slides in your JavaScript.
<!DOCTYPE html>
<head>
<script language="Javascript">
MySlides=new Array('slide1.jpg','slide2.jpg','slide3.jpg','slide4.jpg')
i=0
function DisplaySlides(SlideNumber)
{
i=i+SlideNumber;
if (i>MySlides.length-1)
{
i=0;
}
if (i<0)
{
i=MySlides.length-1;
}
document.SlideID.src=MySlides[i];
}
</script>
</head>
<body>
<img src="slide1.jpg" name="SlideID" width="400" height="400" />
<br/><br/>
<input type="button" value="Back" onclick="DisplaySlides(-1)">
<input type="button" value="Forward" onclick="DisplaySlides(1)">
</body>
</html>
19.Write a JavaScript that disables the right click button and displays the message
'Right click button is ‘disable'.
<!DOCTYPE html>
<html>
<head>
<title>Locking the Right Mouse Button</title>
<script language=JavaScript>
function RightClickDisable()
{
alert('Not allowed to right click');
return false;
}
function InternetExploreBrowser()
{
if (event.button==2)
{
RightClickDisable();
return false
}
}
document.oncontextmenu=new Function("RightClickDisable();return false")
</script>
</head>
<body>
<h1> This is a sample web page</h1>
<h4> Test disability of right click button by clicking right button</h4>
</body>
</html>

You might also like