1. Using HTML Generate a Student Registration Form.
<html>
<head><title> Student Registration Form </title></head>
<body>
<form action="#" name="StudentRegistration" onsubmit="#">
<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center" cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Gender</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input id="password" maxlength="50" name="password"type="password" /></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
2. Using HTML Generate your Time Table.
<html>
<head><title> Generate Time Table </title></head>
<body>
<table cellpadding="1" cellspacing="2" border="1" cellspacing="0" cellpadding="0"
bordercolor="#0000FF">
<tr bgcolor="#00CCFF">
<td width="123" valign="top"><p>Day / Time</p></td>
<td width="123" valign="top"><p>10:00 – 10:55</p></td>
<td width="123" valign="top"><p>10:55 – 11:50</p></td>
<td width="123" valign="top"><p>11:50 – 12:45</p></td>
<td width="123" valign="top"><p>1:30 – 2:10</p></td>
</tr>
<tr>
<td width="123" valign="top" ><p>MON</p></td>
<td width="123" valign="top"><p>OR</p></td>
<td width="123" valign="top"><p>SE</p></td>
<td width="123" valign="top"><p>COAS</p></td>
<td width="123" valign="top"><p>DCCN</p></td>
</tr>
<tr>
<td width="123" valign="top"><p>TUE</p></td>
<td width="123" valign="top"><p>OR</p></td>
<td width="123" valign="top"><p>SE</p></td>
<td width="123" valign="top"><p>DCCN</p></td>
<td width="123" valign="top"><p>COAS</p></td>
</tr>
<tr>
<td width="123" valign="top"><p>WED</p></td>
<td width="123" valign="top"><p>OR</p></td>
<td width="123" valign="top"><p>COAS</p></td>
<td width="247" colspan="2" valign="top"><p align="center">JAVA LAB</p></td>
</tr>
<tr>
<td width="123" valign="top"><p>THU</p></td>
<td width="123" valign="top"><p>OR</p></td>
<td width="123" valign="top"><p>DCCN</p></td>
<td width="247" colspan="2" valign="top"><p align="center">IWD LAB</p></td>
</tr>
<tr>
<td width="123" valign="top"><p>FRI</p></td>
<td width="123" valign="top"><p>DCCN</p></td>
<td width="123" valign="top"><p>COAS</p></td>
<td width="123" valign="top"><p>SEMINAR</p></td>
<td width="123" valign="top"><p>LIBRARY</p></td>
</tr>
<tr>
<td width="123" valign="top"><p>SAT</p></td>
<td width="123" valign="top"><p>SE</p></td>
<td width="123" valign="top"><p>SE</p></td>
<td width="247" colspan="2" valign="top"><p align="center">JAVA LAB</p></td>
</tr>
</table>
</body>
</html>
3. Using HTML Generate Frame.
TEST.HTML – First Frame
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="200, *">
<frame src="/html/menu.html" name="menu_page" />
<frame src="/html/main.html" name="main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
MENU.HTML
<html>
<body bgcolor="#4a7d49">
<a href="http://www.google.com" target="main_page">Google</a>
<br /><br />
<a href="http://www.microsoft.com" target="main_page">Microsoft</a>
<br /><br />
<a href="http://news.bbc.co.uk" target="main_page">BBC News</a>
</body>
</html>
MAIN.HTML
<html>
<body bgcolor="#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>
4. Use HTML for the below given operation.
(a) Write a paragraph
(b) Use font attributes
(c) Embed image in background
(d) Use ordered list and unordered list
<html>
<head><title>Using Tagst</title></head>
<body>
<p>HTML is a <strong>markup</strong> language for <strong>describing</strong> web
documents (web pages).</p>
<font face="Arial" color="#99CC66">
<ul>
<li>HTML stands for <strong>H</strong>yper <strong>T</strong>ext <strong>M</strong>arkup
<strong>L</strong>anguage</li>
<li>A markup language is a set of <strong>markup tags</strong></li>
<li>HTML documents are described by <strong>HTML tags</strong></li>
<li>Each HTML tag <strong>describes</strong> different document content</li>
</ul>
</font>
<p>
<font face="Georgia" size="-1" color="#0099FF">
<ol>
<li>The <strong>DOCTYPE</strong> declaration defines the document type to be HTML</li>
<li>The text between <strong><html></strong> and <strong></html></strong>
describes an HTML document</li>
<li>The text between <strong><head></strong> and <strong></head></strong>
provides information about the document</li>
<li>The text between <strong><title></strong> and <strong></title></strong>
provides a title for the document</li>
<li>The text between <strong><body></strong> and <strong></body></strong>
describes the visible page content</li>
<li>The text between <strong><p></strong> and <strong></p></strong> describes
a paragraph</li>
</ol>
</font>
</p>
<p><img src="pic_mountain.jpg" alt="Mountain View” style="width:304px;height:228px;"></p>
</body></html>
5. Adding two number using JavaScript.
<html>
<body>
<h1>JavaScript Variables</h1>
<p id="demo"></p>
<script>
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
6. Adding Two Strings Using JavaScript
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Add "John" + " " + "Doe":</p>
<p id="demo"></p>
<script>
var x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
7. Adding two strings together using the concatenating (+) operator
<html>
<body>
<h1>JavaScript Operators</h1>
<p>The + operator concatenates (adds) strings.</p>
<p id="demo"></p>
<script>
var txt1 = "What a very";
var txt2 = "nice day";
document.getElementById("demo").innerHTML = txt1 + txt2;
</script>
</body>
</html>
8. Adding two strings together using the += operator
<html>
<body>
<h1>JavaScript Operators</h1>
<p>The assignment operator += can concatenate strings.</p>
<p id="demo"></p>
<script>
txt1 = "What a very ";
txt1 += "nice day";
document.getElementById("demo").innerHTML = txt1;
</script>
</body>
</html>
9. Declare an object using JavaScript
Notes:
var length = 16; // Number
var lastName = "Johnson"; // String
var cars = ["Saab", "Volvo", "BMW"]; // Array
var x = {firstName:"John", lastName:"Doe"}; // Object
<html>
<body>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
10. Declaration of function using JavaScript
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</head>
<body>
<p>When you click "Try it", a function will be called.</p>
<p>The function will display a message.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>
11. Declaration A function with an argument
<html>
<head>
<script>
function myfunction(txt) {
document.getElementById("demo").innerHTML = txt
</script>
</head>
<body>
<p>When you click on one of the buttons, a function will be called. The function will
display the argument that is passed to it.</p>
<form><input type="button" onclick="myfunction('Good Morning!')" value="In the Morning">
<input type="button" onclick="myfunction('Good Evening!')" value="In the Evening"></form>
<p id="demo"></p>
</body>
</html>
12. Write a function that converts Fahrenheit to Celsius
<html>
<body>
<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
document.getElementById("demo").innerHTML = toCelsius(32);
</script>
</body>
</html>
13. Show the current time and date using an onclick event using javascript.
<html>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
14. Using JavaScript Convert a string to upper case
<html>
<body>
<p>Convert string to upper case:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toUpperCase();
</script>
</body>
</html>
15. Convert string to lower case
<html>
<body>
<p>Convert string to lower case:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toLowerCase();
</script>
</body>
</html>
16. Concatenate two arrays using JavaScript
<html>
<body>
<p>Click "Try it" to display all my children:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);
document.getElementById("demo").innerHTML = myChildren;
</script>
</body>
</html>
Output:
Cecilie,Lone,Emil,Tobias,Linus
17. Push new elements to the end of an array.
<html>
<body>
<p>The push method appends a new element to an array.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.push("Kiwi")
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>
18.Reverse the order of the elements in an array - reverse()
<html>
<body>
<p>The sort() method sorts an array alphabetically.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.sort();
fruits.reverse();
document.getElementById("demo").innerHTML = fruits;
</script>
</body>
</html>
19. Compare two number using JavaScript
<html>
<body>
<p>Assign 5 to x, and display the value of the comparison (x === 5):</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = 5;
document.getElementById("demo").innerHTML = (x === 5);
</script>
</body>
</html>
Output:
True
20. Display 0 to 9 using While Loop.
<html>
<body>
<p>Click the button to loop through a block of code as long as i is less than 10.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var text = "";
var i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Output:
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
21. Write a Switch Statement to know the present day.
<html>
<body>
<p id="demo"></p>
<script> var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
document.getElementById("demo").innerHTML = "Today is " + day;
</script></body></html>
Output: Today is Thursday
23. Writing into an window alert box Using JavaScript.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
24. Use Math.random() to return a random number between 0 and 1 Using JavaScript.
<html>
<body>
<p>Math.random() returns a random number between 0 and 1.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
</script>
</body>
</html>
