Scribd
Upload
309 views

Iwd Practical Assignments

The document contains 11 code examples demonstrating various HTML and JavaScript concepts: 1. A student registration form using HTML tables 2. A time table using HTML tables 3. A basic frameset example 4. Examples of HTML tags like paragraphs, lists, and images 5. Adding two numbers with JavaScript 6. Concatenating two strings with JavaScript 7-8. Additional examples of concatenating strings with operators 9. Declaring an object in JavaScript 10. Declaring a basic function in JavaScript 11. Declaring a function that accepts a parameter

Uploaded by

SANTOSH4176
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
309 views

Iwd Practical Assignments

The document contains 11 code examples demonstrating various HTML and JavaScript concepts: 1. A student registration form using HTML tables 2. A time table using HTML tables 3. A basic frameset example 4. Examples of HTML tags like paragraphs, lists, and images 5. Adding two numbers with JavaScript 6. Concatenating two strings with JavaScript 7-8. Additional examples of concatenating strings with operators 9. Declaring an object in JavaScript 10. Declaring a basic function in JavaScript 11. Declaring a function that accepts a parameter

Uploaded by

SANTOSH4176
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 24

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>&lt;html&gt;</strong> and <strong>&lt;/html&gt;</strong>
describes an HTML document</li>
<li>The text between <strong>&lt;head&gt;</strong> and <strong>&lt;/head&gt;</strong>
provides information about the document</li>
<li>The text between <strong>&lt;title&gt;</strong> and <strong>&lt;/title&gt;</strong>
provides a title for the document</li>
<li>The text between <strong>&lt;body&gt;</strong> and <strong>&lt;/body&gt;</strong>
describes the visible page content</li>
<li>The text between <strong>&lt;p&gt;</strong> and <strong>&lt;/p&gt;</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>

You might also like