JAVA/J2EE: HTML TUTORIAL

HTML: HTML is a Markup language which is used to presenting web page.

Marquee Tag for Right direction

<html>

<body>

This is an example of a scrolling marquee...</MARQUEE></FONT>

</body>

</html>

Marquee Tag for Upward Direction:

EX: <marquee width="100%" behaviour="scroll" Direction="up" color:Red Bgcolor="yellow" loop="3">Hello</marquee>

<html>

<marquee width="100%" behaviour="scroll" Direction="zigzag" color:Red Bgcolor="yellow" loop="3">Hello</marquee>

<!..Hi this is a comment..>

</html>

DOCTYPE: Doctype is nothing but which version HTML document uses. It is useful for SGML Validators.

HTML Comment Tag:

	<html>
	<marquee width="100%" behaviour="scroll" Direction="zigzag" color:Red Bgcolor="yellow" loop="3">Hello</marquee>
	<!..Hi this is a comment..>
	</html>

List: List means group of elements. List divided into Three types those are

1. Un Ordered Lists

2. Ordered Lists

3. Definition List

1. Unordered Lists: Unordered List never contains element numbers.

EX:

<html>

<body>

<h4>An Unordered List:</h4>

<ul>

<li>Coffee</li>

</ul>

</body>

</html>

2. Ordered Lists: Which contains list with element numbers.

EX:

<html>

<body>

<h4>An Ordered List:</h4>

<ol>

<li>Coffee</li>

</ol>

Different types of Ordered Lsits:

EX:

<html>

<body>

<h4>Numbered list:</h4>

<ol>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Letters list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Lowercase letters list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Roman numbers list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Lowercase Roman numbers list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

</body>

</html>

</body>

</html>

Different Types of Unordered Lists:

EX:

<html>

<body>

<h4>Disc bullets list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>Circle bullets list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h4>Square bullets list:</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

</body>

</html>

Nested Lsit:

EX:

<html>

<body>

<h4>A nested List:</h4>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ul>

</body>

</html>

3. Definition Lists:

EX:

<html>

<body>

<h4>A Definition List:</h4>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

</body>

</html>

Formatting Tags:

<b>: Defines bold Text

<big>: Cotains big Text

<small>: Defines small text

<i>: Defines italic text

<em>: Defines Emphasize Text

<strong>: Defines Strong Text

<Sub>: Defines Subscript Text

<Sup>: Defines Superscript Text.

<ins> and <del>: These tags used to strike of one and display another.

EX:

<html>

<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>

</body>

</html>

Table: Table means collection of rows and columns

Tables with noborders

	<html>
	<body>
	<h4>This table has no borders:</h4>
	<table border="1">
	<tr>
	<td>100</td>
	<td>200</td>
	<td>300</td>
	</tr>
	<tr>
	<td>400</td>
	<td>500</td>
	<td>600</td>
	</tr>
	</table>

	<h4>And this table has no borders:</h4>
	<table border="0">
	<tr>
	<td>100</td>
	<td>200</td>
	<td>300</td>
	</tr>
	<tr>
	<td>400</td>
	<td>500</td>
	<td>600</td>
	</tr>
	</table>

	</body>
	</html>

Tables with headers:

<html>

<body>

<h4>Table headers:</h4>

<tr>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

</tr>

<tr>

<th>Telephone:</th>

</tr>

</table>

</body>

</html>

Table with a caption:

<html>

<body>

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</table>

</body>

</html>

Table with more than one span:

<html>

<body>

<h4>Cell that spans two columns:</h4>

<tr>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>Cell that spans two rows:</h4>

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Tags inside the Table:

<html>

<body>

<tr>

<td>

<p>This is a paragraph</p>

<p>This is another paragraph</p>

</td>

<td>This cell contains a table:

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>This cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

</body>

</html>

Cell padding:

<html>

<body>

<h4>Without cellpadding:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With cellpadding:</h4>

<table border="1"

cellpadding="10">

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

Cell spacting:

<html>

<body>

<h4>Without cellspacing:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With cellspacing="0":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With cellspacing="10":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

Table with Frame attribute

<html>

<body>

<p>

If you see no frames/borders around the tables below, your browser does not support

the "frame" attribute.

</p>

<h4>With frame="border":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With frame="box":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With frame="void":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With frame="above":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With frame="below":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With frame="hsides":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With frame="vsides":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With frame="lhs":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With frame="rhs":</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

Image: Image is a graphical representation. We can use images in HTML documents. The syntax for image is

SYN:

<img src=”image name.extension name” alt=”alternative name” height =”numerical value”

Widh =”numerical value”>

EX:

<html>

<body>

</body>

</html>

Hyperlink: A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

(OR)

Hyperlink allows us to read the data in internet web pages.

Hyperlink Syntax:

EX:

<html>

<body>

<h1>

<a href="new.html" target ="A">About</a><br>

<a href="new1.html" target ="B"> Reigster</a><br>

<a href="new2.html" target ="C">Material</a><br>

</h1>

</body>

</html>

Creating Image as Hyperlink:

<html>

<body>

</body>

</html>

Image Map:

<html>

<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

</map>

</body>

</html>

Forms: HTML Forms are used to pass data over server.

1. Text Box: Text Box is used to represent text in fields.

EX: <HTML>

First Name=<input type="text" name="First Name">

Last Name=<input type="text" name="Last Name">

</form>

</HTML>

EX2: Text boxes with pre defined text.

First Name=<input type="text" name="First Name" value="First Name">

Last Name=<input type="text" name="Last Name" value="Last Name">

</form>

</HTML>

2. Password: If we give input as password it automatically take password like’……..’.

EX:

<HTML>

First Name=<input type="text" name="First Name"><br>

Password=<input type="password" name="Last Name">

</form>

</HTML>

3. Radio Buttons: Radio Button is one user can select one value.

EX: <HTML>

Male<input type="radio" name="sex" value="male">

Female<input type="radio" name="sex" value="female">

</form>

</HTML>

4. Check Boxes: Checkboxes let a user select ONE or MORE options of a limited number of choices.

EX: <HTML>

Car<input type="Checkbox" name="car" value="car">

Bike<input type="Checkbox" name="bike" value="bike">

</form>

5. Button: Button is used to click. After clicking it performs action.

EX: <form name="">

First Name=<input type="text" name="First Name" value="First Name"></br>

Last Name=<input type="text" name="Last Name" value="Last Name"></br>

</form>

</HTML>

6. Drop Downlist:

EX:

<option value="Volvo" >volvo</option>

<option value="Volvo" >Totyota</option>

<option value="Volvo" >Hundai</option>

<option value="Volvo" >Maruti</option>

</form>

</HTML>

7. Dropdown List With Pre selected values:

EX:

<HTML>

<option value="Volvo" >volvo</option>

<option value="Volvo" >Totyota</option>

<option value="Volvo" selected ="selected">Hundai</option>

<option value="Volvo" >Maruti</option>

</form>

</HTML>

EX:2

	<html>
	<form name="">
	<select name="cars">
	<option >volvo</option>
	<option >Totyota</option>
	<option >Hundai</option>
	<option >Maruti</option>
	</form>
	</html>

8. Textarea:

EX:

The cat was playing inside the garden

</textarea>

</form>

</HTML>

EX2:

	<form name="">
	<textarea >
	The cat was playing inside the garden
	</textarea>
	</form>
	</HTML>

9. Fieldset: Fielsedset means which displays a border line around the data in the document.

EX:

<HTML>

<option value="Volvo" >volvo</option>

<option value="Volvo" >Totyota</option>

<option value="Volvo" selected ="selected">Hundai</option>

<option value="Volvo" >Maruti</option>

</form>

</fieldset>

</HTML>

10. Fieldset With Legend Text:

EX:

<HTML>

<legend> Bhargav<//legend>

<option value="Volvo" >volvo</option>

<option value="Volvo" >Totyota</option>

<option value="Volvo" selected ="selected">Hundai</option>

<option value="Volvo" >Maruti</option>

</form>

</fieldset>

</HTML>

Frame: Frame is a mechanism we can create more than one HTML documents in the web page. Each document is called frame. Each frame independent to others.

EX:

<html>

<body>Your browser does not handle frames!</body>

</noframes>

P) Creation of web page splitting into the different parts according the user requirement

<html>

</frameset>

</html>

Reg.html

<html>

<body>

<h1>

<a href="new.html" target ="A">About</a><br>

<a href="new1.html" target ="B"> Reigster</a><br>

<a href="new2.html" target ="C">Material</a><br>

</h1>

</body>

</html>

Frameset: Defines the set of frames.

No Frames: This is specially developed for non graphical browsers. If any browser doessn’t support graphics it display alternative text.

Note: We never specify <FRAMESET> tag in body. If we specify it in body it will show nothing.

Nested Frames

<html>

</frameset>

</html>

P) write a HTML Program which will display different pages in single frame.

Frames.html

<html>

</frameset>

</html>

Reg.html

<html>

<body>

<h1>

<a href="hello1.html" target="A">hello1</a><br>

<a href="hello2.html" target="A"> hello2</a><br>

<a href="hello3.html" target="A">hello3</a><br>

</h1>

</body>

</html>

hello1.html

<html>

<body>

<h2> hello1</h2>

</body>

</html>

Like this htllo2.html and hello3.html

How to get default vertical scroll bars in Frame :

Note: This will useful for the file which is so small for example hello1 file. For large files scroll bars will come automatically. Here Scroll bars will come but those are in active mode.

Just modify Frames.html code like this

How to load a page in same window with large size:

Modify reg.html like this

<html>

<body>

<h1>

<a href="hello1.html" target="_top">hello1</a><br>

<a href="hello2.html" target="A"> hello2</a><br>

<a href="hello3.html" target="A">hello3</a><br>

</h1>

</body>

</html>

How to load a page in another window

Frames.html

<html>

</frameset>

</html>

reg.html

<html>

<body>

<h1>

<a href="hello1.html" target="A">hello1</a><br>

<a href="hello2.html" target="B"> hello2</a><br>

<a href="hello3.html" target="C">hello3</a><br>

</h1>

</body>

</html>

If we give target values of reg.html and frame name’s of frames.html different it takes it like this.

If we won’t specify target in reg.html then the page will load in left side frame

Iframes:

<html>

<body>

<p>Some older browsers don't support iframes.</p>

<p>If they don't, the iframe will not be visible.</p>

</body>

</html>

Style Sheets: Stylesheet is a mechanism by using the stylesheet we can format or represent text in different manner in the webpages.

There are three types of style sheets. Those are

1. Inline Style sheets

2. Embedded Style sheets or Internal Style sheets

3. Cascading or external style sheets

1. Inline Stylesheets: Whenever a stylesheet is provided for “Particular occurrence of an HTML tag” is called as Inline Style sheet. The style sheets can be provided to the HTML tags by using style attribute.

EX:

	<html>
	<body>
	<h1 style="background-color:yellow;color:red">Sathya Technologies" </h1>
	<h2>Ameerpet</h2>
	<h1>Registrationform</h1>

	</body>

</html>

EX2:

<html>

<body>

<h1 style="background color:blue;text-align=center">Registration Form </h1>

<h2 style="background color:indigo;color:yellow">Sathya Technologies</h2>

</body>

</html>

In the above example only sathya technologies will be printed with background color as yellow that is this yellow color is not applied to the next occurrence of h1 tag these types of Stylesheets are called as inline Stylesheets.

2. Embedded Stylesheets: If a stylesheet is applied for multiple occurrences of an HTML tag with in a web page then those sheets are called as embedded style sheets.

For creating embedded style sheets <Style> must be used in the <head>.

Example on embedded stylesheet:

	<html>
	<head>
	<style>
	h1
	{
	background-color:yellow;
	color:red;
	text-align:center;
	}
	h2
	{
	background-color:aqua;
	color:blue;
	text-align:center;

	}
	</style>
	</head>
	<body>
	<h1> Sathya Technologies</h1>
	<h2> Ameerpet</h2>
	<h1>Registration form</h1>
	<h2> Login Form</h2>

	</body>
	</html>

EX2:

	<html>
	<head>
	<style>
	h1,h2,h3
	{
	font-style:bold;
	color:red;
	}
	</style>
	</head>
	<body>
	<h1>Sathya Technologies</h1>
	<h2>Ameerpet</h2>
	<h3>Hyderabad</h3>
	</body>
	</html>

In the above example the same type of style sheet is provided for multiple <HTML> tags.

3. Cascading Stylesheets: If a stylesheet is applied for different web pages present in a website then those Stylesheets are called as cascading Stylesheets. When we using cascading Stylesheets, these Stylesheets must be specified with in separate file that is .CSS file.

EX1:

Creating .CSS file:

{

background-color:red;

color:blue;

}

{

background-color:blue;

color:red;

}

Making use of above file from the webpage

	<html>
	<head>
	<link rel="stylesheet" href="first.css">
	</head>
	<body>
	<h1> Sathya Technologies</h1>
	<h2> login form</h2>

	</body>
	</html>

EX2:

	<html>
	<head>
	<link rel="stylesheet" href="first.css">
	</head>

	<body>
	<h1>Sathya Technologies</h1>

	<marquee>
	This is a login form </marquee>
	</body>
	</html>

EX3:

	<html>
	<head>
	<link rel="stylesheet" href="first.css">
	</head>

	<body>
	<marquee><h1>Sathya Technologies</h1> <marquee>

	<marquee>
	This is a login form </marquee>
	</body>
	</html> Client side Scripting: The logic that is executed at the client side is called as client side scripting. Server side Scripting: The logic that is executed of server is called server side scripting. Need of Client side Scripting: If there are hundred clients then the same logic need to be proceeded by the web server for all the hundred clients which increased the burden on the web server and also decreases the performance of web server. For example checking the format of the email id can’t contain any security constraint and also there is no need of checking with the database values.

Java Scripting:

1. Java script is called as a scripting language.

2. Java script code is executed by the web browser.

3. Web browser is a software which provides collection of services

4. The services are HTML interpreter, Scripting language interpreter, XML Parser.

5. Java Script does not contain any data types.

6. Java Script contains much number of Objects.

7. The conditional statements, selection statements and control statements available in C language are also available in java script.

8. The java script coding must written in <Script> tag.

9. Syn: <script language=”javascript/vbscript”>

---------------

--------------- à Java Script code

----------------

</script>

Q) Can Java Script use for server side applications?

A) Yes

Syn:

----------

</script>

Document Object: This is an object used for printing the messages with in the browser. This object contains a method called as write () which is used printing messages.

P) Create a webpage to print a message with in the browser by using the document Object.

<html>

document.write("This is Bhargav");

</script>

</html>

Example for if else statement:

<html>

a=10

b=5

if(a<b)

document.write(a+"is big")

else

document.write(b+"is big")

</script>

</html>

Prompt Function: This is a function used for reading the values from the keyboard into the variables.

EX: x=prompt(“enter any value”)

P) Write a java Script loading to print the multiplication table for the given number by using while loop.

Note: By default prompt function will read String value. So need to convert String value into numberical value using eval().

<html>

n=prompt("enter any number")

i=1

while(i<=10)

{

k=eval(n)*i

document.write("<h1>"+n+"*"+i+"="+k+"</h1>")

i++

}

</script>

</html>

NOTE: No need to specify eval (). The browser automatically converts String type to another type.

<html>

i=2

{

document.write("<h1>"+i+"</h1>")

i=i+2

}

while(i<=20)

</script>

</html>

Example on for loop:

<html>

for(i=10;i>=1;i--)

document.write(i+" ")

</script>

</html>

Defining the arrays within the java script: An array is a collective name which has given to a collection of memory locations of similar data types.

Syntax: <object name> =new Array(<size>)

Note: Here A should be upper case because java script is case sensitive language.

P) Write a java script to read the elements into an array and print the accepted elements.

<html>

<body>

mycars = new Array(5);

for (i=0;i<5;i++)

mycars[i]=prompt("enter values")

for (i=0;i<5;i++)

document.write(mycars[i] + "<br />");

</script>

</body>

</html>

Methods and properties available within the array object.

1. Sort(): This method is used for sorting the elements present within the array in ascending order.

2. Reverse(): This method is used for getting the element present within the array in the reverse order.

3. toString(): This is the method used for converting the entire elements within the array into a string.

4. Length: This is a property which is used for getting the length of the array.

P) Write a java script to represent methods and properties.

<html>

<body>

mycars = new Array(5,10,9)

document.write(mycars.reverse()+"<br>")

document.write(mycars.sort()+"<br>")

document.write(mycars.length)

</script>

</body>

</html>

Jagged Arrays: In the case of two dimensional arrays every row must contain same number of columns in case of jagged arrays every row can contain the variation in the no of columns. A jagged array is collection of single dimension arrays jagged are specially used foe eliminating the wastage of memory space.

0 1 2 3 4

0 1 2 3

0 1 2

Examples for Jagged Arrays:

<html>

x=new Array[10,20,30,40,50]

y=new Array[10,20,30,40]

z=new Array[10,20,30]

k=new Array(x,y,z)

for(i=0;i<k.length;i++)

for(j=0;j<k[i].length;j++)

document.write(k[i][j])

</script>

</html> (This program not executed)

Functions in JavaScript:

1. Functions are specially used specifying the reusable code that is instead of repeating the same logic multiple times within application we can write that logic within a function whenever it is require we can invoke a function.

2. Function reduces the no of lines of coding with in an application.

3. Javascript the function can be created by using function keyword.

4. In javascript every function is related can be called as an Object.

Syntax:

Function<function name> (<arguments list>)

{

Statement 1;

Statement 2;

---------------

----------------

Statement n;

}

All the javascript functions need to be placed with in <head> and these functions need to be invoked from body tag.

P) Create javascript function for adding the given two numbers.

<html>

<head>

function Add()

{

x=prompt("enter first value")

y=prompt("enter second value")

z=eval(x)+eval(y)

document.write(z)

}

</script>

</head>

<body>

Add()

</script>

</body>

</html>

Passing the arguments to a function:

p) Write a java script to add the two numbers by passing the arguments to a function.

<html>

<head>

function Add(a,b)

{

res=a+b

document.write(res)

}

</script>

</head>

<body>

Add(10,20)

Add(10,20.5)

</script>

</body>

</html>

With the above example we can conformed that javascript supports the concept of function overloading.

Function Overloading:

1. The function changes its behavior according to the circumstances called as function.

2. In the above example the function add() is overloaded based on the type of arguments

3. A function can also be overloaded based on the variation in the number of arguments also.

P) Write a javascript overloading a function on the variation in number of arguments

<HTML>

<head>

function Add()

{

sum=0

for(i=0;i<Add.arguments.length;i++)

sum=sum+Add.arguments[i]

document.write(sum)

}

</script>

</head>

<body>

Add(10,20)

Add(23,2,45)

Add(7.3,3)

</script>

</body>

</HTML>

Returning a value from a function:

In java script any type of values by using return statement.

EX:

<html>

<head>

function Add()

{

x=10

y=20

z=x+y

return z

}

</script>

</head>

<body>

z=Add()

document.write(z)

</script>

</body>

</html>

Working with events:

Ø The actions that are performed on the controls are called events. Whenever an event is fired certain logic need to be executed which must be written in a JavaScript function

Ø The events will be specified for the controls in the form of attributes.

P) Create a webpage to read the values into the text boxes and perform the addition and subtraction of those values where the buttons are checked and place the result with in the third text box.

<HTML>

<head>

function Add()

{

x=f.t1.value

y=f.t2.value

z=eval(x)+eval(y)

f.t3.value=z

}

function Sub()

{

x=f.t1.value

y=f.t2.value

z=eval(x)-eval(y)

f.t3.value=z

}

</script>

<body>

<tr>

<th> Enter the first value</th>

</tr>

<tr>

<th> Enter Second Value</th>

</tr>

<tr>

<th> Enter Result</th>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</HTML>

P) Write a program which changes the background color of the browser when double click on the buttons.

<HTML>

<head>

function f1()

{

document.bgColor="Green"

}

function f2()

{

document.bgColor="Blue"

}

function f3()

{

document.bgColor="Red"

}

</script>

</head>

<body>

</form>

</body>

</HTML>

Date Object: This is an object for getting the current date and time.

The date object can be created as

Obj=new Date()

This date object contains different methods. Those are

1. getHours(): This method is used for getting the current hour.

2. getMinutes():This method is used for getting the current Minutes.

3. getSeconds():This method is used for getting the current Seconds.

4. getMonth():This method is used for getting the current Month.

5. getDate():This method is used for getting the current Date.

6. getYear():This method is used for getting the current Year.

P) Create a webpage to print the dynamic time.

<HTML>

</head>

<body>

obj =new Date()

document.write(obj.getHours()+":"+obj.getMinutes()+":"+obj.getSeconds())

</script>

</body>

</HTML>

String Object:

1. A String object can store any type of String value.

2. A String Object can be created as

Str=new String(“hello”)

3. This String object contains different methods those are

1. toLowerCase(): This method is used for converting letters upper case to lowercase.

2. toUpperCase():This method is used for converting letters lower case to uppercase.

3. charAt():This method is used for character from the specified position.

EX: str=

4. Bold(): This method is used for specifying String with bold.

5. Italics(): This method is used for specifying String value with italics

6. fontSize(): This method is used for increasing the font size of the string.

7. substring(): This is the method used for getting the substring of the specified string.

Str

Example on the String method:

<HTML>

str="Sathya Technologies"

with(document)

{

write(str.toLowerCase()+"<br>")

write(str.toUpperCase()+"<br>")

write(str.charAt(3)+"<br>")

write(str.substring(4)+"<br>")

write(str.substring(4,8)+"<br>")

write(str.bold()+"<br>")

write(str.italics()+"<br>")

write(str.indexOf('T')+"<br>")

}

</script>

</html>

</HTML>

In the above example instead of specifying document.write() each time we specifier with statement.

Alert: Alert is a function which is used for printing an alert message or message box on to the web page. The alert message will be printed in the form of the dialog box.

Performing Validations in Java Script:

1. The main advantage of using Client side scripting is performing the validations of the input that is provided by different clients.

2. Ensuring the proper entry of data is called a validation.

Examples for validations are:

1. Textbox can’t empty.

2. Textbox must be enter with numerical value.

3. Proper entry of email indication format e.t.c.,

Email Validations: For performing the email id validations we can perform different condition checking.

EX:

<HTML>

<head>

function check()

{

str=f.t1.value

k1=str.indexOf("@")

k2=str.indexOf(".")

d=k2-k1

k3=str.indexOf(" ")

if(d==1||k1<=0||k3>=0)

{

alert("Please Provide Correct emailid")

f.t1.focus()

}

</script>

</head>

<body>

email id:<input type="text" name="t1" onblur="check()"><br>

Password:<input type="password" name="t2">

</form>

</body>

</html>

OUTPUT:

onblurr it is an even which will be fired as soon as the text box uses the focus.

P) Create a web page to perform the addition of two numbers but performing the validations on the text boxes about whether text boxes of empty or not.

</head>

<body>

x value=<input type="text" name="t1"><br>

y value=<input type="text" name="t2"><br>

result=<input type="text" name="t3"><br>

</form>

</body>

</html>

OUTPUT:

In the above web page we entered only x value. We didn’t enter y value so alert window opened

Java script file:

Web browser

Java Script

File

1. Every web page contains the designing and logic generally in real time the designing will be performed by web designer and logic will be written by the web developer.

2. The web pages that are created upto now contains designing and logic with in the same file that is HTML file.

3. So single HTML file must be used by web designer and web developer this makes development of the web page slower and also security will not be available for the logic that is written by the web developer.

4. To overcome this problem the logic can be separated from the designing and any web page.

5. In these cases java script file can be used. The designing can be placed HTML file and logic can be written with in a java script file.

6. HTML file will be used by web designer and java script file can be used by web developer. Since parallel development of designing and logic will be performed at a time.

7. The development of web pages becomes more faster and also security logic is provided and also the java script file can reused with in different web pages. An HTML file can contain HTML tags client side scripting tags on server side.

8. A Java Script file can contain only the java script functions.

9. A java script file must contain extension .js.

Creating a java script file:

function Check(t)

{

if(t.value=="")

{

alert("text box can't be empty")

t.focus()

}

Save the above file with validate.JS

Creating a HTML file

<html>

<head>

</script>

</head>

<body>

email id:<input type="text" name="t1" onblur="Check(f.t1)">

password:<input type="password" name="t2">

</form>

</body>

</html>

OUTPUT:

P) Write a javascript and HTML file for emailed validation.

Javascript separate File:

function check(t)

{

str=f.t1.value;

k1=str.indexOf("@")

k2=str.indexOf(".")

d=k2-k1

k3=str.indexOf("")

if(d=1||k1<=0||k3>=0)

{

alert("please enter valid emailid")

}

f.t1.focus()

}

HTML File:

<HTML>

<head>

function check()

{

str=f.t1.value

k1=str.indexOf("@")

k2=str.indexOf(".")

d=k2-k1

k3=str.indexOf(" ")

if(d==1||k1<=0||k3>=0)

{

alert("Please Provide Correct emailid")

f.t1.focus()

}

</script>

</head>

<body>

email id:<input type="text" name="t1" onblur="check()"><br>

Password:<input type="password" name="t2">

</form>

</body>

</html>

Here we tried to leave email id field empty so it displayed above message.

Window Object: This object represent current browser window this object can be used for opening new browser window, closing the browser windows, setting the interval time e.t.c.,

This object contains five methods. Those are

1. Open()

2. Close()

3. Focus()

4. Set interval()

5. Clear interval()

1. Open(): This is a method opening new browser window.

Syn: object name = open(“<webpage name>”,”<window name>

EX: obj = open(“hello.html”,”win”);

2. Close(): This is a method for closing a browser window.

Syn: objectname.close()

3. Focus(): This is a method used for activating browser window.

Syn: objectname.focus()

4. Set interval(): This method is used to executing the java function repetitively every time.

Syn: <object name>= set Interval”<function name>”,<interval time>) with the above example the function f, will be executed automatically for every one second.

Note: The time interval must be specified in the form of milliseconds.

5. Clear Interval(): This is a method used clearing the interval that is provided with set Interval method.

Syn: clear Interval(<object name>)

Ex: clear Interval(obj)

P) Create a web page with three buttons and when clicked one button a new browser must be activated and when clicked on the display button certain text need to be printed with in the browser window and when clicked on the close button then new browser window must be closed.

<html>

<head>

function fopen()

{

obj=open("","win")

}

function fclose()

{

obj.close()

}

function fdisplay()

{

obj.focus()

obj.document.write("sathya Technologies")

}

</script>

</head>

<body>

</form>

</body>

</html>

P) Create a webpage to provide printing facility for the client.

<html>

<head>

function fprint()

{

window.print()

}

</script>

</head>

<body>

</form>

<h1> This is the information for printing </h1>

</form>

</body>

</html>

In the above example when clicked on the print button a print dialogue will be activated which can be used for taking printouts by the clients.

Load Event and Unload Event: Load Event will be executed automatically as soon as the web page loaded into the browser unload event will be executed automatically before unloading web page from the browser. These two events must be used with the body tag.

Example for load and unload Event:

Open the file with in the browser now automatically load event will be fixed. Open a web page within the browser then automatically unload event will be fixed.

EX:

<html>

<head>

function f1()

{

alert("web page loaded")

}

function f2()

{

alert("web page un loaded")

}

</script>

</head>

</body>

</html>

Password Length Validatation:

<html>

function fin()

{

if(f.t1.value.length<=5)

{

alert("Please more than six characters")

}

</script>

UserName: <input type="text" name="t2">

Password:<input type="password" name="t1">

</form>

</html>

To Obtain various text fields by clicking new button:

<html>

<head>

function generatenew()

{

var d=document.getElementById("div");

d.innerHTML+="<p><input type='text' name='food'>";

}

</script>

</head>

<body>

</form>

</body>

</html>

To giving String only validation:

<html>

function fin()

{

f.t1.value=eval(f.t1.value)

if(f.t1.value=String)

{

alert("please enter Integer value only")

}

</script>

Password:<input type="password" name="t1">

</form>

</html>

Only enter Integer value:

<html>

<head>

function check(id)

{

field = document.getElementById(id)

if (isNaN(field.value))

{

alert('not a number');

}

</script>

</head>

<body>

<form>

salary:<input type="button" value="submit" onclick="check('f1');"/>

</form>

</body>

</html>

P) Write a HTML program for Password strong or not?

<HTML>

<HEAD>

function isStrongPassword()

{

var control = document.form1.password;

var myString= control.value;

var Stringlen = myString.length;

var ValidateDigits = /[^0-9]/g;

var ValidateSpChar = /[a-zA-Z0-9]/g;

var ValidateChar = /[^a-zA-Z]/g;

var digitString = myString.replace(ValidateDigits , "");

var specialString = myString.replace(ValidateSpChar, "");

var charString = myString.replace(ValidateChar, "");

if(Stringlen < 8)

{

alert("Passwords must be at least 8 characters");

control.value="";

control.focus();

return false;

}

if(specialString < 1)

{

alert("Passwords must include at least 1 special (#,@,&,$ etc) characters");

control.value="";

control.focus();

return false;

}

if(digitString < 1)

{

alert("Passwords must include at least 1 numeric characters");

control.value="";

control.focus();

return false;

}

return;

}

</script>

</HEAD>

<BODY>

<P><h2>Registration</h2>

<table>

<tr><td>Login:</td>

</tr>

<tr><td>Password:</td>

</tr>

</table>

</form>

</BODY>

</HTML>

P) Write a HTML Program for Checkbox Validation?

<html>

<head>

function validate()

{

var chks = document.getElementsByName('colors[]');

var hasChecked = false;

for (var i = 0; i < chks.length; i++)

{

if (chks[i].checked)

{

hasChecked = true;

break;

}

if (hasChecked == false)

{

alert("Please select at least one.");

return false;

}

return true;

}

</script>

</head>

<body>

Your colors are <br>

<input type="checkbox" name="colors[]" value="green" id="green">green <br>

<input type="checkbox" name="colors[]" value="yellow" id="yellow">yellow <br>

<input type="checkbox" name="colors[]" value="voilet" id="voilet">voilet <br>

<br>

</form>

</body>

</html>

P) Program for copying one Place to another place without specifying again and again.

<html>

<head>

function data_copy()

{

if(document.form1.copy[0].checked){

document.form1.add12.value=document.form1.add1.value;

document.form1.add22.value=document.form1.add2.value;

document.form1.city2.value=document.form1.city.value;

for(i=document.form1.state.options.length-1;i>=0;i--)

{

if(document.form1.state.options[i].selected)

document.form1.state2.options[i].selected=true;

}

}else{

document.form1.add12.value="";

document.form1.add22.value="";

document.form1.city2.value="";

document.form1.state2.options[0].selected=true;

}

</script>

</head>

<tr><td colspan=2><b>Ofice Address</b></td></tr>

<tr><td >Address 1</td><td><input type=text name=add1></td></tr>

<tr><td >Address 2</td><td><input type=text name=add2></td></tr>

<tr><td >State</td><td><SELECT NAME="state" >

<Option value="Three">Three</option>

</SELECT>

</td></tr>

<b>Residence Address</b></td><td><input type=radio name=copy value='yes' onclick="data_copy()";>Same as above

<input type=radio name=copy value='no' onclick="data_copy()";>Not Same

</td></tr>

<tr><td >Address 1</td><td><input type=text name=add12></td></tr>

<tr><td >Address 2</td><td><input type=text name=add22></td></tr>

<tr><td >State</td><td><SELECT NAME="state2" >

<Option value="Three">Three</option>

</SELECT>

</td></tr>

</table>

</body>

</html>

P) Add One TextArea text into Another Text Area.

<html>

<head>

function addtext() {

var newtext = document.myform.inputtext.value;

if (document.myform.placement[1].checked) {

document.myform.outputtext.value = "";

}

document.myform.outputtext.value += newtext;

}

</script>

</head>

<body>

<input type="radio" name="placement" value="append" checked> Add to Existing Text<br>

<td><p><input type="radio" name="placement" value="replace"> Replace Existing Text<br>

</td>

</tr></table>

</form>

</body>

JAVA/J2EE

Friday, December 20, 2013

HTML TUTORIAL

No comments:

Post a Comment