Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
16 views

UNIT 5 DHTML,CSS& JAVASCRIPT

Uploaded by

sanketmahindrakar514
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

UNIT 5 DHTML,CSS& JAVASCRIPT

Uploaded by

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

UNIT V: DHTML, CSS & JavaScript

 Introduction of DHTML:

It is a collection of technologies used together to create dynamic web sites by using a


combination of a HTML, a client-side scripting language (such as JavaScript, VBScript), a
CSS (Cascading Style Sheet) for designing, and the DOM (Document Object Model).

DHTML is not a language, it is a combination of:

DHTML = HTML + Scripting Language + CSS + DOM

1. HTML
2. JavaScript - the Web's standard scripting language
3. Cascading Style Sheets (CSS) – Making web page more attractive.
4. Document Object Model (DOM) -- a means of accessing a document's individual elements

- The application of DHTML was introduced by Microsoft with the release of Internet Explorer
4 in 1997.

We put HTML tags (paragraphs, images, etc.) in a specific order in the source code. The
browser always showed all elements in this order. Positioning and styling was done by
tables, div's and such aids. If we wanted to change the order or the positioning of the
elements, we had to rewrite the HTML.

DHTML gives us the chance to re-organize our pages. In fact, we can take some tags out of
the natural flow (Default behavior) of the page. The natural flow of the page is the page as
the browser first shows it. It calculates the tables and paragraphs and other things we put
in the page, then displays them in the best possible way, one by one, from the beginning
to the end of the HTML document.

It provides a richer, more dynamic experience on web pages, making them more like
dynamic applications and less like static content.
 Ramification/Components of DHTML:
DHTML depends on these four component and these are:

1) HTML: we have been using attributes, tags, and generating HTML in a structured fashion.
HTML defines the structure of a Web page, using such tags as headings, forms, tables,
paragraphs and links.
each of the button’s states—inactive, active, and unavailable.

To run this concept we need three images, a sample set of rollover image is shown here:

Step 1: Create three images as shown below and give name as shows.

Image First

Image1.jpg
Click
Here
Image Second

Image2.jpg

Image Third

Image3.jpg

Step 2: Take <a>tag and place <img> tag inside <a> tag then apply onmouseover and
onmouseout event in <a> tag.

Step 3: In order to add this rollover image to the page, simply use the <IMG> tag like
another image it will display image1.jpg.

The idea is to swap the image in and out when the user move mouse cursor over the image
the onmouseover event will occur and image2.jpg will appear and when mouse pointer
switch back from the image onmouseout event will occur and image3.jpg will appear. By
literally swapping the value of the SRC attribute, you can achieve the rollover effect. This
will happen dynamically without manually change any code and refresh or reload a web
page.
Output Effect: This will show effect as like image of ABOUT will blink as per action from
white background to black background but technically image is not blinked but two individual
images are swapping on action.
Program for Rollover Buttons:

<html>
<head><title> Rollover Buttons without using javascript </title></head> <body>
<a href='Destination URL' target="_top" onmouseover="document.
Rollover.src='path/image2.jpg'" onmouseout="document.
Rollover.src='path/image3.jpg'">

<img src="path/image1.jpg" width="281" height="55" border="0"


alt="Move your mouse over me" name="Rollover"> </a>
</body>
</html>
 Introduction to Cascading Style Sheets
(CSS):

Cascading Style Sheets, commonly referred to as CSS, it is a simple design


language used to simplify the process of making web pages presentable.

CSS handles the look and feel/designing part of a web page. Using CSS, you
can control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images or
colors are used, layout designs, and variations in display for different devices
and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with
the markup languages HTML.

Advantages of CSS

1) CSS saves time –

You can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML tags and apply it to as
many Web pages as you want.

2) Pages load faster –


If you are using CSS, you do not need to write HTML tag attributes
every time.

Just write one CSS rule of a tag and apply it to all the occurrences of
that tag. So less code means faster webpage download times.

3) Easy maintenance –
To make a global change, simply change the style, and all tags in all
the web pages will be updated automatically.

4) Superior styles to HTML –

CSS has a lot of attributes than HTML, so you can give a best look to
your HTML page in comparison to HTML attributes.
5) Multiple Device Compatibility –
Style sheets allow content to be displayed for Mobiles, Tablets,
laptops, Desktop Computers, etc.

6) Global web standards – Css supported by World Wide Web


Standards.

7) Platform Independence –

The CSS Script offer consistent platform independence and can


support latest browsers as well as all operating systems.

 Types of CSS:
There are three types of CSS:

1. Embedded CSS Styles


2. Inline CSS Styles
3. External CSS Styles

1) Embedded CSS Styles:


- Embedded style always used inside <HEAD> tag, for using embedded css
you have to use <style> tag inside <head> tag, then insert css code in
to <style> tag.

- This type of css applies for complete webpage and for all tags, suppose
you write a css code for h1, h2, p tag then all h1, h2 and p tags are
available inside that web page are applied by css effect.

- Embedded css is easy way to apply designing for all tags with short and
one time written code. That means you have to write only once as css
code in style tag and it applies for all tags so it’s a short cut method to
write designing code.

- Suppose after developing a web page, customer wants to make changes


as like color of a h1 then you can easily change the code of css and fulfill
the requirement of customer.

2) Inline CSS Styles:


- Inline Styles can be applied directly to tags in the body of a document.
Rather than set <style> tag for the <H1> element inside <Head>, that
means you should not write <style>tag inside <Head> tag.

- Inline style applies css code inside the tag, we can say it is a tag specific
css. It is a single tag oriented css code, which does not disturb the other
same tags. it is possible to set the style for an individual tag.

- For using this css you have to write style attribute inside a start tag of any
valid HTML tag, then apply css code as shown below in example.

<H1 STYLE=”font-size: 48pt; font-family: Arial; color: green”> CSS


Test Text
</H1>

- Consider you have a webpage which contain more than one <H1> tag,
and the css design code apply only one <H1> tag among them all tags,
so css design effect apply only for that H1 tag which has above example
css code, remaining H1 does not give css output effect.

3) External CSS Styles:


- External css means css code present externally in individual file as
style.css and applied in webpage which is html code where <LINK> tag is
present inside of <head> tag.

- CSS can be used as external style sheet linked to a document or a set of


document, as shown in the following example. Linked information should
be placed inside the <HEAD> tag with the help of <LINK> tag.

EXAMPLE:

<LINK REL="stylesheet" TYPE="text/css" HREF="newstyle.css">

Procedure Steps for External CSS:

Step1: h1
{ font-size: 40pt;
Open notepad application and write css code there,
fontfamily: Arial; color:
then use Save As option and give filename style.css. In
green;
this way you created a css code file. Following code is
present in that style.css file. }



 Introduction of JavaScript:

• Javascript is a dynamic computer programming language. It is


lightweight and most commonly used as a part of web pages,
whose implementations allow client-side script to interact with
the user and make dynamic pages. It is an interpreted
programming language with object-oriented capabilities.

• JavaScript was originally developed in 1995 by Brendan Eich.

• The general-purpose core of the language has been embedded


in Netscape, Internet Explorer, and other web browsers.

• Supported to and integrated with Java.

• Supported to and integrated with HTML.

• Open and cross-platform (works well with all browsers and


operating systems)

 Advantages of JavaScript:

1. Less server interaction − you can validate user input before


sending the page off to the server. This saves server traffic,
which means fewer loads on your server. Wrong data can’t
send to server.
2. Immediate feedback to the visitors − they don't have to
wait for a page reload to see if they have forgotten to enter
something.
3. Increased interactivity − you can create interfaces that
react when the user hovers over them with a mouse or
activates them via the keyboard.

4. Richer interfaces − you can use JavaScript to include such


items as drag-and-drop components and sliders to give a Rich
Interface to your site visitors.

 Disadvantages of JavaScript:

1. JavaScript cannot be used for networking applications because


there is no such support available.
2. JavaScript doesn't have any multithreading or multiprocessor
capabilities.

Client-side JavaScript:
 The script should be included in or referenced by an HTML
document for the code to be interpreted by the browser.

 It means that a web page need not be a static HTML, but can
include programs that interact with the user, control the
browser, and dynamically create HTML content.

 The JavaScript client-side mechanism provides many feature


For example, you might use JavaScript to check if the user has
entered a valid e-mail address in a form field.

 The JavaScript code is executed when the user submits the


form, and only if all the entries are valid, they would be
submitted to the Web Server.

JavaScript Development Tools:


For development various vendors provide some JavaScript editing
tools and they are as follows.
 Microsoft FrontPage
 Macromedia

Dreamweaver MX 

Macromedia

HomeSite 5

How to Create a Simple JavaScript?


JavaScript can be implemented using JavaScript statements that
are placed within the <script>... </script> HTML tags in a web
page. You can place the <script> tags, containing your JavaScript,
anywhere within you web page, either in <head> and <body>

The script tag takes two important attributes −


you are using. Typically, its value will be javascript.

• Type − This attribute is what is now recommended to indicate


the scripting language in use and its value should be set to
"text/javascript". an optional HTML comment that surrounds
our JavaScript code. This is to save our code from a browser
that does not support JavaScript.
The comment ends with a "//-->". Here "//" signifies a comment in
JavaScript, so we add that to prevent a browser from reading the
end of the HTML comment as a piece of JavaScript code. Next, we
call a function document.write which writes a string into our HTML
document.

This function can be used to write text, HTML, or both. Take a look
at the following code.

<html>

<head>
<title>Javascript Example</title>

</head>

<body>

<h1>This is javascript Example</h1>


<script language="javascript" type="text/javascript">
document.write("Hello World") alert(“This is
alert window”);

</script>
</body>

</html>
This code will produce the following result –

Hello World




 JavaScript Variables:

Like many other programming languages, JavaScript has variables.


Variables can be thought of as named containers. You can place
data into these containers and then refer to the data simply by
naming the container.

- Before you use a variable in a JavaScript program, you must


declare it. Variables are declared with the var keyword as
follows.

- Storing a value in a variable is called variable initialization.


You can do variable initialization at the time of variable creation
or at a later point in time when you need that variable.

- For instance, you might create variable named money and


assign the value 100 to it. Later, for another variable, you can
assign a value with any alphabet name like Suraj.

<script type="text/javascript">
var money=100; var
name=”Suraj”;

</script>
Example program to display calculated value for variable z:
<html>
<title>Addition Using JavaScript</title>
<body>
<p>Output of variable z is as follows</p>

<script type="text/javascript"
language="javascript"> var x =
5; var y = 6; var z = x + y;
document.write(z);

</script>
</body>
</html>

Note –
1. Use the var keyword only for declaration or initialization, once
for the life of any variable name in a document. You should not
re-declare same variable twice with same name such as var
x=10; and var x=20; in same program.

2. JavaScript is untyped language. This means that a JavaScript


variable can hold a value of any data type. Unlike many other
languages, you don't have to tell JavaScript during variable
declaration what type of value the variable will hold. The value
type of a variable can change during the execution of a program
and JavaScript takes care of it automatically.



 JavaScript Variable Names Rules:
While naming your variables in JavaScript, keep the following three
rules in mind.
1) JavaScript variable names should not start with a numeral

(0-9).

They must begin with a letter.

For example: 1) 123test is an invalid

variable name 2) test123 is a valid


one.

2) You should not use any of the JavaScript reserved keywords as


a variable name.

For example, var as variable names are not valid. \

For example: Var var=100;

3) JavaScript variable names are case-sensitive.

For example, NAME and name are two different


variables.


 Input and Output statements:

 JavaScript Input Statements:


There are two types of input statements.

1) Html FORM Control


<input type="text" id="userInput">give me
input</input> For input purpose we used html form control i.e
input control.
2)Document.getElementById("userInput").value;
This statement is basically used for to take input from user in
javascript variable.

Syntax: var userInput =


document.getElementById("userInput").value;

Note: userInput is a valid JavaScript variable, for understanding


with example please look out below program.

 JavaScript Output Statements:

There are two commonly used output statements in javascript:

1) Document.write("any string message" or variable


name);

In above variable scope example this statement is used to display


value of variable a.

2) Document.getElementById("demo").innerHTML = "any
string message";

Example:
<html>
<head>
<title>Take Input from User and Give Output to
User</title>
</head>
<body>
<input type="text" id="userInput">give me
input</input>
<button onclick="test()">Submit</button>
<script type="text/javascript" language="javascript">
function test()

{
var uservalue= document.getElementById("userInput").value;
document.write(uservalue);

}
</script>
</body>
</html>

 Validating form:-
JavaScript provides a way to validate form's data on the client's
computer before sending it to the web server. Form validation
generally performs two functions.

Basic Validation − First of all, the form must be checked to make


sure all the mandatory fields are filled in. It would require just a
loop through each field in the form and check for data.

Data Format Validation − Secondly, the data that is entered must


be checked for correct form and value. Your code must include
appropriate logic to test correctness of data.

• Basic Form Validation


First let us see how to do a basic form validation. In the
above form, we are calling validate() to validate data when
onsubmit event is occurring. The following code shows the
implementation of this validate() function.

<script type = "text/javascript">


<!--
// Form validation code will come here.
function validate() {

if( document.myForm.Name.value == "" ) { alert(


"Please provide your name!" );
document.myForm.Name.focus() ; return false; }
if( document.myForm.EMail.value == "" ) { alert( "Please
provide your Email!" ); document.myForm.EMail.focus() ;
return false; }
if( document.myForm.Zip.value == "" || isNaN(
document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 ) {
alert( "Please provide a zip in the format
#####." ); document.myForm.Zip.focus() ;
return false; } if( document.myForm.Country.value
== "-1" ) { alert( "Please provide your country!" );
return false; } return( true );
}
//--> </script>

Data Format Validation:-

The following example shows how to


validate an entered email address. An email address must contain at
least a ‘@’ sign and a dot (.). Also, the ‘@’ must not be the first
character of the email address, and the last dot must at least be one
character after the ‘@’ sign.
Example
Try the following code for email validation.

<script type = "text/javascript">


<!--
function validateEmail() {
var emailID = document.myForm.EMail.value; atpos =
emailID.indexOf("@"); dotpos = emailID.lastIndexOf(".");

if (atpos < 1 || ( dotpos - atpos < 2 )) { alert("Please


enter correct email ID") document.myForm.EMail.focus() ;
return false; }
return( true );
}
//-->
</script>

----------------------------------------------THE END-----------------------------------------------

You might also like