` 350/-

Cascading Style Sheets

2 and Java script

SUMMARY
Friends,
In this chapter, we will learn the use of JavaScript and CSS using KompoZer software.
We know that HTML can be used for description of the content not for the style. Here we have discussed
how the style is used with HTML.

Thus we can say that, HTML is used to describe

2.1 Purpose of CSS the information content of the document and not
the style, while CSS describes the style of the
Cascading Stylesheets or CSS allows you to
elements in the document and not its contents.
specify styles for the visual elements of the
Using CSS, we can control the font types of font
website.
and element colors,-pad spaces, margins and
It helps us to keep the information content of a
element positions in our website.
document separate from the details of how to
display it. 2.2 Syntax of CSS
The detail of how to display the document is
The syntax of CSS consists of special symbols
known as style.
known as rules. A CSS rule has two main parts :
Styles specify the appearance of particular page
A selector and one or more declarations.
elements on the screen.
The selector is the HTML element on which you
Keeping the style separate from the content helps want to apply the style.
us to : Declaration consists of a property associated with
(i) Avoid duplication in coding the HTML element used in selector and its
(ii) Use the same content with different styles for corresponding value.
different purposes The general syntax of CSS is defined as :
(iii) Easy maintenance of code selector {property : value}
In HTML, for example, if we want contents of Figure 2.1 gives an example of one such syntax :
some paragraph tag <p> to appear in bold, then H1 { color : green }
we have to insert the bold tag <b> every time the
<p> tag appears in the source code. Selector Property Value
If the website is large, repeating the tag every Figure 2.1 : Syntax of CSS
time becomes tedious and time-consuming. We can easily add CSS using KompoZer.
But using CSS, we can set all element types to Let us learn how to add CSS to a webpage in
appear in a style as per our choice. KompoZer.
So even if we have more number of <p> tags in To make sure that KompoZer uses CSS by default,
click Edit Preferences.
the website, using CSS we can set the style for all
This will open Options dialog box as shown in
the <p> tags at once.
figure 2.2.
47
48 2. Cascading Style Sheets and Java script

KompoZer will now use the CSS styling instead

of HTML to format the text.
Example - 1 :
Assume that we want to design a website and the
heading on all the webpages should follow a
particular style.
For example, all the Headings (hl) inserted in the
webpages should follow the style as given :
Font : Times New Roman
Case : Uppercase
Alignment : Centre aligned
Background color : Light Blue
Border : Dotted Border
Follow the steps given to create the CSS for the
above heading.
Open a new file.
Give the Title name and save the file.
In the composition toolbar, select the Cascade
Figure 2.2 : Options dialog box
Select the General category on the left side of the button .
window.
Note : If the file is not saved, the Page title dialog
Select the checkbox "Use CSS styles instead of box will be opened. After giving the page title,
HTML elements and attributes" if it is not selected. save the file.

This will open the dialog box as shown in figure.

Figure 2.3 : CSS Stylesheets dialog box

Using this dialog box we will define the styles for each element.
Std.-12 : Computer Darpan – ‘Kumar’ 49

Click on the first radio button "style applied to all Click the Create Style rule button. You will see
the elements of type". that the CSS Stylesheets dialog box remains open
From the drop down menu choose an element to but the options will change.
create the style rule. Figure 2.4 shows the hl element just below the
As we want to create a style for Heading1, we have heading "internal Stylesheet" on the left pane of
selected hl (Heading l) from the drop down menu the window.
as shown in figure 2.3. For each element we add, a style rule will appear
in this list below the heading "internal
Stylesheet".
On the right side of the window, you will see
various tabs like General, Text, Background,
Borders, Box, Lists and Aural. Each of these tabs
can be used to give a specific style to the element.
But all the tabs may not be applicable to the
selector for which the style rule is created.
Now, let us create the style rule for hl selector.
Figure 2.4 : CSS Stylesheet dialog box with Select hl in the left pane of the window. Click the
options of h1 'Text' tab as shown in figure 2.5.

Figure 2.5 : Text tab

This will show various style options like Font family, Font size, Line height, Color, Case, Alignment and
many more.
We will now select the options as per the style required for hl.
In the Font family section, select the "predefined" radio button and choose "Times New Roman" from the
drop down menu.
50 2. Cascading Style Sheets and Java script

Choose "Uppercase" from the Case menu and Figure 2.8 shows the background tab after
selecting the color.
"Center" from the Alignment menu.
Figure 2.5 shows the options selected. As you
change the options, you can see the default text
in the window changes automatically according
to the styles.
To set the background color, select the
Background tab. This will open the options for
the background as shown in figure 2.6.

Figure 2.8 : Options selected in

background tab for h1
Note : If you want to keep an image in the
background then in the Image option; click on
"Choose file" and select the file for the background.
To set the border, select the Border tab. This will
open the options for the border as shown in
figure 2.9.

Figure 2.6 : Background tab

In the Color option, click the color palette
button. This opens Block Background Color
dialog box as shown in figure 2.7.
Select the color of your choice and press OK
button.

Figure 2.9 : Options selected in border tab for h1

If you want to apply the same border on all the
four sides, tick the checkbox in front of the text
"All four sides use same border style".
You will see that only one option "Top" will be
enabled and all others are disabled. This is
because; the effect made on a single side will be
applied on all the four sides.
From the drop down menu of Style, select dotted.
You can also specify the width and the color of
the border as per your choice.
We can also see the preview of the border style
used by us. Press OK button.
Figure 2.7 : Block Background color dialog box There are more options available if you select the
other tabs in the window.
Std.-12 : Computer Darpan – ‘Kumar’ 51

But in our example, we require only the selected dialog box. Choose "style rule" from the drop down
options for applying style to hl. menu.
Click on the General tab. After adding the style rule for all the elements
This will show the CSS code which is generated click OK button.
as shown in figure 2.10. Example - 2 :
If you know HTML coding you can also edit the Let us now use the CSS created for hl tag in a
code. webpage.
In Format toolbar1, select the Heading1 option to
insert a heading in the page.
When you select the Heading1 option, your
cursor will automatically be placed in the center
of the webpage (as we had applied center
alignment in CSS).
Type some text like SARASWATI VIDYAMANDAL
and to this heading gives the CSS effect and
Figure 2.10 : General tab showing the CSS code shows the CSS coding.
Thus, we have created the style to be applied to
Select Heading1 from the Formatting Toolbar1.
hl tag.
Cursor will automatically placed in the centre as
We can use the same procedure to create a style for
we have selected Center alignment for CSS.
any other element in the webpage. To add other
Now type SARASWATI VIDYAMANDAL. The
elements, click on the arrow of CSS button typed content will appear in uppercase with font
in the upper left corner of the CSS Stylesheets style "Times New Roman".

Figure 2.11 : CSS applied to the text in webpage

This is a webpage that uses Heading1 text with CSS applied to it.
So, now wherever you insert Heading1 in any of the webpages, the style will remain the same for all.
52 2. Cascading Style Sheets and Java script

Select the source tab at the bottom of the window to view the CSS stylesheet code. The figure 2.12 shows
the CSS code in the head section of the page source code.

Figure 2.12 : CSS code in the source view

Thus the webpages will load faster.

2.3 Advantages of CSS
Using CSS makes website designing quick and
From the above discussion we can say that CSS efficient.
allows us to set the format of the website without
changing the underlying structure. 2.4 Disadvantages of CSS
By separating the layout and format properties of
the website from its underlying logical structure, The CSS compatibility varies with different
we can make changes to the website without the browsers.
fear of accidentally changing the data.
This means that some of the Stylesheet features
The web designer's job is made easier as to
are not supported by the browser and the style
change the style of an element he only needs to
cannot be displayed as per the users design.
make modifications in the CSS file.
But now-a-days, the latest browser versions are
Since we have to set the style for each element
only once, the CSS has less-code compared to more standard-compliant and the compatibility
that in HTML. issue has reduced.
Std.-12 : Computer Darpan – ‘Kumar’ 53

Exam Oriented MCQs from Darpan

1) What is the full form of CSS ? 9) .......... sheet can be used to add special
(A) Computing Stylesheet characters in the website.
(B) Cascading Stylesheet (A) Spread (B) Work (C) Style (D) Main
(C) Computing Style Service 10) The syntax of CSS consists of special symbols
(D) Cascading Secure Sheet known as .......... .
2) .......... allows you to specify styles for the visual (A) regulation (B) rules
elements of the website. (C) style (D) cascade
(A) DHTML (B) HTML 11) A CSS rule has .......... main parts.
(C) CSS (D) CHS (A) 2 (B) 3 (C) 4 (D) 5
3) What is the use of CSS ? 12) CSS syntax uses .......... brackets.
(A) To arrange the visual elements (A) ( ) (B) { } (C) [ ] (D) < >
(B) To specify styles for the visual elements 13) .......... is not the part of the CSS syntax.
(C) To prepare coding of HTML (A) Selector (B) Declarations
(D) To prepare JavaScript (C) HTML details (D) None of these
4) Which is the wrong statement for CSS ? 14) .......... is taken as a selector.
(A) Specifies styles for the visual elements. (A) HTML details (B) HTML element
(B) Keeps it separate from the details of how to (C) Any name (D) Identifier
display the content. 15) Style can be applied to ......... .
(C) Specify the appearance of particular page (A) HTML element (B) Any name
elements on the screen. (C) Identifier (D) Parameter
(D) Arrange the visual elements. 16) CSS rules contain .......... part.
5) .......... is not the benefit of keeping the style (A) property
separate from the content. (B) value for the property
(A) Arrange the visual elements (C) (A) and (B) both
(B) Avoid duplication in coding (D) (A) or (B)
(C) Easy maintenance of code 17) ....... is the wrong statement for the CSS syntax.
(D) Use the same content with different styles (A) Selector must be an HTML element
for different purposes (B) CSS syntax is divided into two parts
6) ......... can be used for the information to be put (C) More than one property can be used
on internet. (D) Property and value is separated using;
(A) CSS (B) HTML 18) .......... is the correct syntax of CSS.
(C) DHTML (D) All of these (A) Selector {Property ; Value}
(B) Selector {Property : Value};
7) ........ specifies the styles for the visual elements.
(C) Selector {Property : Value}
(A) CSS (B) HTML (D) Selector [Property : Value]
(C) DHTML (D) All of these 19) As per our syllabus, using .......... software CSS
8) .......... can be done using CSS. is created.
(A) Control the font types of font and element (A) Notepad (B) KompoZer
colors (C) Gedit (D) CompoZer
(B) Background features 20) KompoZer uses .......... as default.
(C) Control the positions of elements (A) CSS (B) HTML
(D) All of these (C) DHTML (D) PHP

ANSWER (1 - B) (2 - C) (3 - B) (4 - D) (5 - A) (6 - B) (7 - A) (8 - D) (9 - C) (10 - B)
(11 - A) (12 - B) (13 - C) (14 - B) (15 - A) (16 - C) (17 - D) (18 - C) (19 - B) (20 - A)
 54 2. Cascading Style Sheets and Java script

21) Using .......... we can get confirmation that CSS (A) General
is used by default by KompoZer. (B) Number
(A) Edit Preferences (C) Text
(B) Tools Preferences (D) Box
(C) (A) or (B) 28) .......... section is used to give specific style to
the HTML element.
(D) None of these
(A) General
22) How to open option dialog box in KompoZer ?
(B) Text
(A) Edit Preferences (C) Background
(B) Tools Preferences (D) All of these
(C) (A) or (B) 29) .......... button is clicked to insert an image as
(D) View Preferences the background while preparing style.
23) .......... statement is wrong about the KompoZer (A) Choose file
software. (B) Select file
(A) CSS can be added with HTML (C) Browser
(D) Select image
(B) CSS can be added easily
30) .......... tab displays the Stylesheet rule that is
(C) KompoZer can only be used for CSS
given to the element.
(D) All of these (A) General (B) Box
24) Cascade button is on ...... toolbar of KompoZer. (C) Aural (D) Code
(A) Standard toolbar 31) How many buttons are there in CSS Stylesheets
(B) Composition toolbar to prepare style ?
(C) Format toolbar (A) 5 (B) 6 (C) 7 (D) 8
(D) Drawing toolbar 32) .......... view is selected to see the source code of
CSS Stylesheet.
25) While preparing a style, if a new file is opened
(A) Design (B) Source
and not saved by giving a filename then ..........
(C) Split (D) Normal
dialog box opens.
33) .......... is false for CSS Stylesheet.
(A) Option
(A) To modify the Stylesheet user can make
(B) Page title changes in CSS file.
(C) New (B) CSS has less-code compared to that in
(D) Save HTML.
26) The element which is used to define Stylesheet (C) The webpages will load faster.
rule that CSS Stylesheet dialog box is under (D) CSS structure makes the website slow and
.......... heading. inefficient.
(A) External Stylesheet 34) .......... is the disadvantage of CSS.
(A) CSS has less-code compared to that in
(B) Internal Stylesheet
HTML
(C) Right Stylesheet
(B) Compatibility varies with different browsers.
(D) General Stylesheet (C) Stylesheet features are not supported by the
27) .......... tab is not displayed on the right side of browser
CSS Stylesheet dialog box. (D) (B) and (C) both
ANSWER (21 - C) (22 - C) (23 - C) (24 - B) (25 - B) (26 - B) (27 - B) (28 - D) (29 - A) (30 - A)
(31 - C) (32 - B) (33 - D) (34 - D)
Std.-12 : Computer Darpan – ‘Kumar’ 55
Previously www was used only for the give and
2.5 JavaScript take of data but today it is used for entertainment,
knowledge, business etc. That is why webpage
HTML was originally used to control the should impressive and more interactive while
appearance of webpages. static webpage is not very interactive .
The webpages designed using HTML, were static We can input data in the form created in HTML
and could not be changed after the browser but can not process this data for processing data,
rendered them. programming language is required. Computer
However, with the growth of Internet, people program make the page more interactive. If some
demanded the websites to have greater elements are lacking in HTML, they are
interactivity and better visual design. programming elements. By using JavaScript with
But, HTML could only provide static webpages. HTML, its capacity can be increased which help
Thus, the demand of more interactivity created us to create a dynamic webpage.
the need for a new web programming language. Remember this :
Hence, Netscape developed JavaScript. JavaScript When the user enters wrong data or leaves a field
is a scripting language that allows you to add empty, an error message should be generated and
programming aspects to your webpages. the form should not be submitted.
A scripting language is a simple, lightweight The most common form of JavaScript application
programming language that does not contain the today is client side script which runs inside a web
advanced programming functionalities of browser.
languages like C and Java. It is used to validate the data entered in the
JavaScript is used in webpages to improve the HTML forms on the client side before sending it
design and validate the forms. It adds interactivity to the server.
to HTML pages and is inserted directly into the Using JavaScript, the form is generally checked for
HTML code. the following things :
Today, mostly all the web browsers like Mozilla Has the user left any required field empty ?
Firefox, Chrome, Safari and Internet Explorer Has the user entered a valid E-mail address ?
support JavaScript.
Check whether contents of two fields are
Using JavaScript a webpage no longer remains
same or not ?
static, but can include coding that allows
interactivity with the user, control the browser Has the user entered a valid date ?
and dynamically create HTML content. Has the user entered text in the numeric data
We learnt how to create forms using KompoZer. field ? Say for example; in the quantity field
instead of numeric data, user entered text.
When the user enters data in the form, he might
leave some of the-important fields empty or may Before starting to learn about how to validate a
enter the data in a wrong format inside the field. form, let us first learn how to write a JavaScript
code.
In such cases there must be some type of
validation provided. This validation will restrict JavaScript code runs from within the HTML
users from making mistakes. webpage. Thus, the JavaScript code can be put
directly inside the webpage code as a separate
As HTML language creates static webpage, there is
section. The JavaScript code is inserted into an
no change in the activates done by the user like
HTML page, using the <script>...</script> tag.
movement of the mouse, input process or submit
The lines between the <script> and </script> tag
the form etc. There is no change in the static
contains the JavaScript code.
webpage while as JavaScript is dynamic. Necessary
changes can be done in the original page. Remember, JavaScript is a case sensitive language.
There is no change in the static page while JavaScript can be placed inside the <body> or
loading or during the display. For e.g. If we want <head> section of an HTML page. But generally
to display today’s date on the webpage, it is not it is preferred that the code be placed in the
possible. <head> tag.
 56 2. Cascading Style Sheets and Java script

The <script> tag tells the browser to interpret all the text between the <script> tags as a script.
Example - 3 :
Using source view of KompoZer display the statement in the browser “HELLO MY DEAREST STUDENTS”.
Save the file using File Save. Give the page title to be displayed in the title bar of the browser screen and
press OK. Suppose we give the title JavaScript Example1. Save the file with proper name.
Click on source view of KompoZer or select view HTML source. Here we have to add the coding.
You can see that inside the <script> tag we have written a single statement document.write (“HELLO MY
DEAREST STUDENTS”).

Figure 2.13 : JavaScript in source view

Explanation :
Here write is a method which is a part of the document object.
The string to be displayed is passed as variable to the method document.write().
The semicolon seen in figure 2.13 at the end of the statement is optional in JavaScript.
The semicolon is used as a mark of separation rather than termination. Thus, if you place each statement
on a new line then you need not put a semicolon.
In our example, even if we remove the semicolon after the document, write statement, the result would
be same.
However, putting a semicolon is a good programming practice.
The output of the code as seen in the browser is shown in figure 2.14.

Figure : 2.14 Output in Browser

Note : JavaScript statements can be grouped together in a block. A block starts and ends with the curly
bracket { }.
Std.-12 : Computer Darpan – ‘Kumar’ 57
Example – 4 :
Let us now learn how to write a simple JavaScript for form validation.
First, we will create a simple form with two fields : a name field and submit button.
For form validation, if the user leaves the name field empty and clicks the submit button then a message
should be displayed that asks the user to enter the name.
Follow the steps given to perform the operation :
Create a new file and save it. Give the necessary title. Save the file with name js2.html.
Create a new form using Form Define Form. Give a name to the form.
In our example, we have named the form as js2. Give js2.html in Action URL and select POST in method.
As shown in figure 2.15 insert a label and input text field for the displaying name, also insert a Submit button.

Figure 2.15 : Sample Form

Note : The names given to the form, input field or any other fields created in the form should be kept
simple and easy to remember, as they will be referenced in the script frequently.

Go to Form Define Form. Click on Advanced Edit button that will open
This will open the Form Properties dialog box as Advanced Property Editor dialog box as shown in
shown in figure 2.16. figure 2.17.

Figure 2.17 : Advanced Property Editor dialog box

Select the JavaScript Events tab.
Figure 2.16 : Form Properties dialog box
58 2. Cascading Style Sheets and Java script

In the Attribute option select “onsubmit” and in the Value write “return validateForm()” as shown in figure
2.17. Press OK button.
Now, open the source view. Add the script inside the <head> tag as shown in figure 2.18.
<html>
<head>
<meta content="text/html; charset=ISO-S859-1"
http-equiv="content-type">
<title>javascript example2 far form properties</title>
<script>
function validateForm()
{
var x=document.js2.name.value;
if (x==null | | x=="")
{
alert{"Please Enter The Name");
document.js2.name.focus();
return false;
}
}
</script>
</head>
<body style="height: 142px;">
<form onsubmit="return validateForm()" method="post" action="js2.html"
name="js2"><br>
<br>
<label>Name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </label>&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;<input name="name"> <br>
&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="submit" value="submit"
type="submit"> <br>
</form>
</body>
</html>
Figure 2.18 : JavaScript in source view
As seen in the script tag of figure 2.18 we have defined :
a function validateForm() a variable x
a conditional statement if built-in function alert()
an object named document a method named focus
Give Ctrl+S.
Open the file named js2.html in Mozilla Firefox and study the output.
Std.-12 : Computer Darpan – ‘Kumar’ 59

In our example, the function validateForm() is

2.6 Study of JavaScript Elements called on the click event of the submit button.
Thus, when the user clicks the submit button,
Study of elements taken in Example-4. which is known as an event, the function is
Function : loaded and the statements inside the function
A function (also called routine) is a reusable will be executed.
block of code that performs a particular task. The function returns a false value.
A function is defined by the keyword function Events :
and the block of code is written inside the curly JavaScript is useful in creating interactive
braces “{ }”. webpages which responds to the action
Function validateForm() : performed by the user.
Here, validateForm() is a function. The interaction between the user and the
Using this function, when a particular event webpage causes the browser to generate an event.
occurs, the statements or the conditions are In other words, when the user does something an
executed. event takes place.
E.g. when user clicks the submit button, it is an Event Description
event. It will call the validateForm() function. The
abort Loading of image is cancelled
statements are executed and here it will return
false value. blur Element such as a radio button
alert() : JavaScript provides some inbuilt functions becomes inactive
such as alert(). The alert() function takes the text click User clicks on a form element
and displays it in an alert box.
change Value of a form filed is changed by the
For example,
user
function hello()
{ error Error occurs during loading of a
alert(“Hello Students”); document or image
} focus Element such as button becomes active
Here the function “hello()” when called, will
load Document or image is loaded
display an alert box with the message “Hello
Students”. mouseout Mouse moves off the element
The function will be executed by an event or mouseover Mouse moves over the element
when it is called inside a source code.
A function can be called anywhere from within reset Form fields are reset to default values
the source code. select User selects a form field
We can define the function in the head or the
submit User submits a form
body section of the HTML code.
A function is called by its name. It can also take a unload User leaves a page
value inside the parenthesis. Table 2.1 : JavaScript Events
This value is passed as a parameter to the When an event occurs, a specific JavaScript code
function. is executed in response to a given situation.
Sometimes you want the function to return a This JavaScript code is known as event handler.
value. Event handler names are kept the same as the
This is possible by using the return statement. name of the event.
The use of return statement, will stop the function For example, the click event will have an event
from executing and return the specified value. handler as onclick().
60 2. Cascading Style Sheets and Java script

Likewise, submit event will have an event handler Document Object Model :
as onsubmit(). (document.js1.name.value)
In our example, we want the validation to be Sometimes, you may want to use JavaScript to
done when the user clicks the submit button i.e. control the web browser.
on the “submit” event.
For example, you may want to change the
So, we need to use the onsubmit() event handler. webpage or control the elements of the webpage.
Therefore, in figure 2.18 we had added an event To control the web browsers window or the
handler onsubmit(). webpage we use the Browser Object Model (BOM).
This event handler will call the function All browsers are split into different parts or
validateForm(). objects that can be accessed using JavaScript,
The function will return a value either True or These parts are known as the Browser Object
False depending on whether the name field has a Model or BOM.
value or null (no value). On the top of this browser hierarchy is the
Variable : Window object as shown in figure 2.19.
In our example, inside the function
validateForm() we have a statement
var x=document.js1.name.value
We have declared a variable named x.
A variable is a container for storing data.
Remember, that the variables in JavaScript are
also case sensitive. So, a variable “x” is not the
same as variable “X”.
The variables can store numbers, strings or text.
In JavaScript, we can declare a variable using var
keyword.
Figure 2.19 : Hierarchy of browser object
For example,
It represents the hierarchy of entire browser along
var x=3; .
with the toolbar menu, status bar, webpage and
var y=”Hello”;
many more.
var z=”Hello Students”;
We can use the properties and the methods of
If statement : objects in the browser object model to change the
You must be familiar with conditional statement if. window or elements displayed in the browser.
The conditional statement if is used to change We do not have to create an object in a browser
the flow of the program. object model; they are created automatically
The if statement evaluates an expression to when the browser opens the webpage.
validate specific condition. The top level object in the browser object model
If the condition is true, then the program enters is Window object. Window object represents the
in if block and executes the statements inside it. browser window or individual frame within the
In our example, we have used the if statement to window.
check whether the variable x is having null value It is created automatically by the browser.
or not. The window object is the global object as it
If the variable x is having null value then the contains all the other objects of the browser
statements inside the if block will be executed. object model within it.
Std.-12 : Computer Darpan – ‘Kumar’ 61

For example, window object contains the Keep the Name field empty and press the Submit
document object. button. You will see an alert message as shown in
We use the methods and properties of the window figure 2.21 appear on the screen.
object to control the web browser window, while
the methods and properties of document object
are used to control the webpage.
The document object is the most important
object in the browser object model.
It is used to represent the webpage displayed in
the browser.
All the elements of the webpage like forms,
images, links and others are contained within the
Figure 2.21 : Alert Message for empty name field
document object.
The alert message is the result of the script that
For example, the form object which is used by
we had written in the source view.
JavaScript to represent forms are created using
This is the validation that we have provided in the
the <form> element within the document object.
form using JavaScript.
Just as the document object contains a form
Thus, a form having more fields can be validated
object, similarly the form object contains element
to check if the user has kept any of the fields
object.
empty.
The element object is used to reference each
You must have observed while filling forms on
element in a form. The element objects can be Internet, some fields are marked with a red color
radio, text, checkbox or any other object. asterisk mark “*”.
The Focus Method : This is an indication to the user that it is a
In the script, we have also used a method named compulsory field which should not be kept
focus. empty.
It is used to apply focus on a particular element Using JavaScript, we can check the entry in such
of the form. fields and provide the alert message to the user.
Thus, after the user gets an alert message, calling Example – 5 :
the focus method, the cursor will be placed inside Let us now add another field in the form named
the element and the particular element will be “Pincode”.
highlighted. The validations which we will apply on this field
Here the name element will be focused. are :
Let us now open the file in the browser. User should not keep the field empty.
The output as shown in figure 2.20 will be visible Only numbers are allowed (characters are not
to us. allowed).
The Pincode should be 6 digits long.
If any of the validation is violated, the user will be
displaced an alert message.
Follow the steps given to create such a validation.
In Example-4 form name is js2, open it.
In the same form insert a label and a input field
for Pincode.
Figure 2.20 : Result in Browser
62 2. Cascading Style Sheets and Java script

In the source view, add the script as shown in figure. Thus, using if statement we check if y is; empty,
not a number or not equal to six digits.
<script>
If any of the condition is violated then the alert
function validateForm()
message will be displayed to the user.
{
Open the file in the browser.
var x=document.js2.name.value;
The output will be as shown in figure 2.23.
var y=document.js2.name.value;
if(x==null || x=="")
{
alert("Please Enter the Name");
document.js2.name.focus();
return false;
}

If(y=="" || isNaN(y) || y.length>6 || y.length<6) Figure 2.23 : Output in the Browser

{
Enter the name in the name field (Do not keep
alert("Please Enter the Pincode Properly"); the name field empty, as this will again generate
document.js2.name.focus(); the alert message for it).
return false; Keep the Pincode field empty and press the
} Submit button. This will show an alert message as
} shown in figure 2.24.
</script>
Figure 2.22 : JavaScript for validating
name and pincode
As seen in the script, we have declared another
variable named y.
The variable y will hold the value of the Pincode
field.
In this if condition, we have used a function
named isNaN().
Let us understand this function.

Use of isNaN() function in

2.7 Figure 2.24 : Alert message for empty field
if condition Now, enter some characters or numeric value less
To work with numeric values, JavaScript uses than 6 digits length in the Pincode field.
built-in functions. This will generate the same alert message as
One of most commonly used numeric function is shown in figure 2.24.
isNaN(). Here, we have generated the same alert message
NaN stands for “Not a Number”. for all the three validations in the Pincode field.
The function isNaN(value) determines whether If you want that the alert message should be
the value is NaN (Not-a-Number). displayed appropriately as per the validation,
It returns true if the value is not-a-number and then we need to modify the script.
false if the value is a number. In the example, we used a single if condition for
For example, isNaN(123) returns false as the value all the three validations and gave the alert
"123" is a number. message.
isNaN(“hello”) returns true as the value “hello” is Now, to display the alert message as per the
not a number. validation, we need to add three if conditions.
Std.-12 : Computer Darpan – ‘Kumar’ 63

Figure 2.25 shows the script with three if conditions. Enter some numeric value less than 6 digits
length in the Pincode field and press the submit
<script>
button. This will show an alert message as shown
function validateForm()
in figure 2.27.
{
var x=document.js2.name.value;
var y=document.js2.pincode.value;
if (x==null || x=="")
{
alert("Please enter the Name");
document.js2.name.focus();
return false;
}
if (y=="")
{
alert("please enter the pincode properly");
document.js2.pincode.focus();
Figure 2.27 : Alert message to check length
return false;
} Example - 7 :
if (isNaN(y)) Let us take the “Registration Form” that we had
{ created in the Chapter l and add JavaScript to it.
alert("please enter a number"); To apply validations, we will make some simple
document.js2.pincode.focus();s changes in the form that are listed below :
return false;
Gender and Hobby field will not be kept initially
}
selected.
If (y.length>6 || y.length<6)
{ Address field has no initial text.
alert("please enter a six digits"); City field has an option “choose the city” whose
document.js2.pincode.focus(); value is -1.
return false; All the other options in the city field like
} Ahmedabad, Rajkot, Surat have values 1, 2, 3
} respectively.
</script> To make the above changes, open the form and
select the respective field in the form.
Figure 2.25 : JavaScript code to display
appropriate message
Open the file in the browser. Enter some
characters in the Pincode field and press the
submit button. This will show an alert message as
shown in figure.

Figure 2.26 : Alert message to check numeric value Figure 2.28 : Modified Registration Form
64 2. Cascading Style Sheets and Java script

Go to Form Form Field. This will show the <script>

properties of the respective field and make the function validateForm()
changes. {
The form after making the changes will look as var x=document.form1.firstname.value;
var y=document.form1.middlename.value;
shown in figure 2.28.
var z=document.form1.lname.value;
Go to Form Define Form. Alternatively, you var r=document.form1.address.value;
can right click in the form and select properties if(x==null || x=="")
option. {
This will open the Form Properties dialog box as alert("Please Enter the First name Properly");
document.form1.firstname.focus();
shown in figure 2.29.
return false;
}
if(y=="" || y==null)
{
alert("Please Enter the Middle name Properly");
document.form1.middlename.focus();
return false;
}
if(z=="" || z==null)
{
alert("Please Enter the Last name Properly");
document.form1.lname.focus();
return false;
}
if(r=="")
{
Figure 2.29 : Form Properties dialog box alert("Please Enter Address");
Click on Advanced Edit button. document.form1.address.focus();
return false;
This will open Advanced Property Editor dialog
}
box as shown in figure 2.30. if((document.form1.gender[0].checked==false)&
Select the JavaScript Events tab. &(document.form1.gender[1].checked==false))
In the Attribute option select “onsubmit” and {
under the Value option write “return validate alert("Please choose your Gender: Male or Female");
document.form1.gender.focus();
Form().
return false;
Press OK button. }
if((document.form1.hobby[0].checked==false)&
&(document.form1.hobby[1].checked==false)&&
(document.form1.hobby[2].checked==false))
{
alert("Please choose a hobby");
document.form1.hobby[0].focus();
return false;
}

if(document.form1.city.value=="-1")
{
alert("Please provide your city");
document.form1.city.focus();
return false;
Figure 2.30 : Advanced Property Editor }
}
Add the script shown in figure 2.31 inside the
</script>
<head> section as of the HTML.
Figure 2.31 : Validation of JavaScript
Std.-12 : Computer Darpan – ‘Kumar’ 65

As seen in the script, we have initialized four Similarly, the checkboxes for the hobby field are
variables x, y, z and r. grouped by the name “hobby”.
In the statement var x=document.form1.
Thus, hobby is an array with three elements.
firstname.value.
The term form1 refers to the form name; term Just as we checked the gender using the if
firstname refers to the element name (the name condition, we check the hobby and if all the three
given to the input field “first name”). elements are false then no option is selected and
Thus, the user is displayed the alert message to select a
variable x stores the value of first name hobby and the focus is placed on the checkbox.
variable y stores the value of middle name For the city field, we check if the value is equal to
variable z stores the value of last name –1 (Note: –1 is kept as the value for option
variable r stores the value of address “choose the city”), in that case no option is
In the script, using the if condition, selected and the user is given an alert message.
variable x checks, if the first name is empty or Figure 2.32 to 2.35 shows some of the alert
not. messages displayed after the fields are left empty.
variable y checks, if the middle name is Thus, we learnt how to use JavaScript for form
empty or not.
validation and make the webpages more
variable z checks, if the last name is empty or interactive.
not.
variable r checks, if the address is empty or
not.
Gender : The radio buttons for gender field are
grouped by the name “gender”.
Thus, gender is an array with two elements.
The first element of the gender array is checked
by using the if condition with the statement
document.form1.gender[0].checked and the
second element of the array is checked using the
statement document.form1.gender[1].checked.
If both of them are false then no option is
selected by the user.
Thus, alert message is displayed and the focus is
placed on radio button. Figure 2.32 : Final Form

Exam Oriented MCQs from Darpan

35) .......... type of webpage is static. 37) .......... is a simple, lightweight programming
(A) HTML (B) DHTML language that does not contain the advanced
(C) JAVASCRIPT (D) All of these programming functionalities of language.
36) .......... company has developed the JavaScript. (A) JavaScript (B) HTML
(A) Microsoft (C) DHTML (D) None of these
(B) ORACLE 38) .......... controls appearance of the webpage.
(C) Netscape (A) JavaScript (B) HTML
(D) Intel (C) DHTML (D) PHP
ANSWER (35 - A) (36 - C) (37 - A) (38 - B)
 66 2. Cascading Style Sheets and Java script

39) What is the use of JavaScript in a webpage ? 47) Generally it is preferred that the JavaScript
(A) To improve the design code should be placed in the .......... tag.
(B) To validate the forms. (A) <body> ..... </body> (B) <head> ..... </head>
(C) (A) and (B) both (C) <title> ..... </title> (D) <form> ..... </form>
(D) To change the modern format in a webpage 48) The .......... tag tells the browser to interpret all
40) .......... browser supports JavaScript. the text between the <script> tags as a script.
(A) Mozilla Firefox (B) Chrome (A) <body> (B) <head> (C) <script> (D) <form>
(C) Safari and Internet Explorer
49) In document.write(“HELLO DIVYAKANT SIR”),
(D) All of these
.......... is the method.
41) JavaScript can be used for a ...... in a webpage.
(A) document (B) write
(A) interactivity with the user
(C) HELLO STUDENT (D) none of these
(B) control the browser
(C) dynamically create HTML content 50) .......... is the correct command to display
(D) All of these something directly in the browser.
42) What type of a script is JavaScript ? (A) print.write ( ) (B) document.write ( )
(A) Application client side (C) display.write ( ) (D) write.document ( )
(B) Application server side 51) In document.write (“Enjoy Computer with
(C) For any webpage (D) All of these Divyakant Sir”); .......... is the object.
43) It is used to validate the data entered in the (A) document (B) write
HTML forms on the .......... before sending it to (C) saraswati (D) none of these
the server. 52) .......... symbol is optional in JavaScript.
(A) Server side (B) Client side (A) Colon(:) (B) Semicolon(;)
(C) HTML details (D) All of these
(C) Full stop(.) (D) Double quotes(“ “)
44) ....... can be checked in a form by using
53) What is the use of semicolon in JavaScript ?
JavaScript.
(A) Termination of statement
(A) Has the user left any required field empty ?
(B) Separation of statement
(B) Has the user entered a valid date ?
(C) Check whether contents of two fields are (C) Merge two statments
same or not ? (D) All of these
(D) All of these 54) Putting a ....... is a good programming practice.
45) .......... is not true for JavaScript. (A) colon (:) (B) @
(A) JavaScript is used to improve the design (C) (;) semi colon (D) #
(B) JavaScript contains the advanced 55) JavaScript statements are written in ..........
programming functionalities of languages brackets.
like C and Java. (A) < > (B) ( ) (C) { } (D) [ ]
(C) JavaScript validates the form 56) JavaScript statements can be grouped together
(D) Browsers like Chrome and Safari support in a .......... .
JavaScript (A) function (B) routine
46) .......... is true for JavaScript. (C) (A) or (B) (D) main block
(A) JavaScript is not a case sensitive language 57) Functions are defined with .......... keyword.
(B) The lines between the <script> and </script> (A) function (B) main
tag contains the JavaScript code (C) void main (D) func
(C) JavaScript is not included with HTML 58) .......... is the inbuilt function.
(D) JavaScript can not be inserted directly as an (A) Validate Form ( ) (B) alert
independent part in a webpage (C) form ( ) (D) none of these
ANSWER (39 - C) (40 - D) (41 - D) (42 - A) (43 - B) (44 - D) (45 - B) (46 - B) (47 - B) (48 - C)
(49 - B) (50 - B) (51 - A) (52 - B) (53 - B) (54 - C) (55 - C) (56 - C) (57 - A) (58 - B)
Std.-12 : Computer Darpan – ‘Kumar’ 67
59) Function is also known as .......... . 71) When user leaves a page, it is known as ...... event.
(A) routine (B) dynaset (C) task (D) procedure (A) unload (B) reset (C) error (D) blur
60) What is the use of alert() function ? 72) When mouse pointer is over the particular
(A) Accepts the content element, it is known as .......... event.
(B) Displays the content (A) select (B) mouseover
(C) (A) and (B) both (C) submit (D) load
(D) Accepts the data from the user 73) When document or image is loaded, it is known
61) .......... type of function is alert(). as .......... event.
(A) User defined (B) Built-in (A) load (B) select (C) click (D) submit
(C) Simple and easy (D) None of these 74) .......... is the event handler.
62) .......... statement is false about the function. (A) HTML Code (B) JavaScript Code
(A) Function can be called from any location in (C) DHTML Code
the source code (D) Java programming Code
75) .......... specific code is executed when a
(B) Function can only be defined in the body
particular event occurs.
section
(A) JavaScript (B) HTML
(C) Function only accepts the value given in its
(C) Java (D) DHTML
brackets
76) .......... is not an event handler.
(D) Function can be called by its name
(A) onclick( ) (B) onsubmit( )
63) Values given in the function are known as ........
(C) load( ) (D) onfocus( )
(A) variable (B) arguments 77) .......... is not an event handler.
(C) parameters (D) (B) or (C)
(A) blur (B) exit (C) reset (D) error
64) .......... statement is used to stop the execution
78) .......... is the name of event handler for the
of the function and return a specific value.
‘click’ event.
(A) end (B) exit (C) return (D) pause (A) Click( ) (B) Onclick ( )
65) When user clicks the submit button is known (C) On Click { } (D) OnClick [ ]
as .......... 79) .......... is the name of event handler for the
(A) events (B) event handler ‘submit’ event.
(C) work (D) process (A) OnSubmit() (B) Submit()
66) .......... is used to make interactive page which (C) onsubmit() (D) onSubmit()
respond to the event done by user. 80) .......... means the storage for storing values.
(A) HTML (B) DHTML (A) Variable (B) Parameter
(C) Java Programming (D) JavaScript (C) Identifier (D) All of these
67) .......... is created by the interaction of user and 81) .......... is used to declare variables in JavaScript.
webpage. (A) Var (B) var (C) VAR (D) vr
(A) Events are created 82) .......... is true for the variables in JavaScript.
(B) Event handler is created (A) Variable is case sensitive
(C) Process is done (D) Work is done (B) Number, string or characters can be stored
68) When loading of image is cancelled, it is known in variable
as .......... event. (C) Variables can be declared by using var keyword
(A) blur (B) abort (C) load (D) unload (D) All of these
69) When an error occurs while loading an image, 83) .......... is the use of if statement.
it is known as .......... event. (A) Conditional statement to change the flow of
(A) unload (B) blur (C) error (D) reset program
70) When element such as button becomes active, (B) Checks for the validation of condition
it is known as .......... event. (C) (A) and (B) both
(A) active (B) blur (C) focus (D) select (D) For non-conditional work
ANSWER (59 - A) (60 - C) (61 - B) (62 - B) (63 - D) (64 - C) (65 - A) (66 - D) (67 - A) (68 - B)
(69 - C) (70 - C) (71 - A) (72 - B) (73 - A) (74 - B) (75 - A) (76 - C) (77 - B) (78 - B)
(79 - C) (80 - A) (81 - B) (82 - D) (83 - C)
 68 2. Cascading Style Sheets and Java script

84) BOM stands for .......... . (A) Form (B) Images

(A) Browser Oriented Model (C) Links and other elements
(B) Browser Object Model (D) All of these
(C) Big Object Model (D) Big Oriented Model 95) .......... object is used to give reference to other
85) What is the use of Browser Object Model ? objects.
(A) To arrange the objects in browser (A) Element (B) Document
(B) To change the webpage (C) Link (D) All of these
(C) To control the elements of the webpage 96) .......... can be the object as the element object
(D) All of these of browser object mode.
86) All browsers are split into different parts or (A) Radio button (B) Text box
objects that can be accessed using JavaScript. (C) Check box (D) All of these
These parts are known as ......... . 97) .......... method is used to take the control to the
(A) BOM (B) BOC (C) MOB (D) OBC specific element of the form.
87) The top level object in the browser object (A) Focus
model is ......... object. (B) Alert
(A) document (B) form (C) Document
(C) window (D) link (D) Confirm
88) The window object is the .......... object in the 98) When focus() method is used ?
browser.
(A) Any time in JavaScript
(A) main (B) global (C) changer (D) normal
(B) After getting alert() message
89) Why the window object is known as the global
object ? (C) After getting confirm message
(A) Because it is common in all the browsers. (D) When the for is created
(B) Because all other browser objects are 99) In internet some fields in the form are
contained within it. displayed with red asterisk (*) is known as....
(C) Because it is the top object of BOM. (A) this field is optional.
(D) All of these (B) this field is mandatory, can’t leave it blank.
90) By .......... web browser window is controlled in (C) this field is out of the reach.
window object. (D) only correct information is to be filled up.
(A) methods (B) properties 100) .......... is used to clear the validation of the
(C) (A) and (B) Both (D) document entered data.
91) What is included in object ? (A) HTML (B) DHTML
(A) Document object (B) Form object (C) Java (D) JavaScript
(C) Radio object (D) All of these 101) .......... is not the inbuilt function.
92) .......... is the most important object in the (A) isNaN( ) (B) alert( )
browser object model. (C) if( ) (D) confirm( )
(A) Form object (B) Document object 102) .......... built in function is there to work with
(C) Radio object (D) Checkbox object numbers in JavaScript.
93) .......... object is used to display webpage in a (A) digits( ) (B) isNaN( )
browser. (C) isnan( ) (D) alert( )
(A) Location object (B) Form object 103) .......... is the most used numerical function in
(C) Document object (D) Textarea object JavaScript.
94) .......... is included in the document object of (A) isNaN( ) (B) Number( )
BOM. (C) digits( ) (D) None of these
ANSWER (84 - B) (85 - C) (86 - A) (87 - C) (88 - B) (89 - B) (90 - C) (91 - A) (92 - B) (93 - C)
(94 - D) (95 - A) (96 - D) (97 - A) (98 - B) (99 - B) (100-D) (101-C) (102-B) (103-A)
Std.-12 : Computer Darpan – ‘Kumar’ 69

104) NaN stands for .......... . 106) isNaN(“DivyakantSir”) will give .......... output.
(A) Number and Number (A) true
(B) Not a Number (B) false
(C) Not a Numeric (C) error
(D) Numeric and Number (D) hello
105) isNaN(123) will give .......... output. 107) .......... element is used to write script in HTML.
(A) true (A) <head> ... </head>
(B) false (B) <script> ... </script>
(C) error (C) <scr> ... </scr>
(D) 123 (D) <Body> ... </Body>

ANSWER (104-B) (105-B) (106-A) (107-B)

Textual Exercise
(1) State the purpose of Cascading Stylesheets. 3) Which of the following are two main parts
Ans. For answer see topic no. 2.1 of CSS rule ?
(2) Why should we keep the style and the content (A) Selector, declaration
of a webpage separate ? (B) Select, declaration
Ans. For answer see topic no. 2.1 (C) Selector, declare
(3) Explain the syntax of CSS. (D) Selection, declaration
Ans. For answer see topic no. 2.2 4) Which of the following is an HTML element
(4) State the advantages of CSS. on which style can be applied ?
Ans. For answer see topic no. 2.3 (A) Declaration
(5) List the disadvantages of CSS. (B) Selector
Ans. For answer see topic no. 2.4 (C) Select
(6) Why do we use JavaScript in HTML pages ? (D) Declare
Ans. For answer see topic no. 2.5 5) Which of the following is the syntax of CSS ?
(7) How does an HTML page identify the (A) select {property : value}
JavaScript code ? Give an example. (B) selector {value : property}
Ans. For answer see figure no. 2.13 (C) selector {property : value}
(8) Choose the most appropriate option from (D) selection {property : value}
those given below : 6) Which of the following has developed
1) Which of the following allows specifying JavaScript ?
styles for the visual elements of the website ? (A) Yahoo
(A) Cascading Stylesheets (B) Google
(B) Web page (C) Wikipedia
(C) Form (D) Netscape
(D) Animation 7) Which of the following is a scripting
2) Which of the following is known as special language that allows adding programming
symbol in the syntax of CSS ? to webpages ?
(A) Rules (B) Selector (A) Action script (B) JavaScript
(C) Declaration (D) Input (C) HTML (D) CSS
 70 2. Cascading Style Sheets and Java script

8) Which of the following is a scripting language 14) Which of the following is not an event ?
that is simple, lightweight programming (A) Abort (B) Mouseover
language that does not contain advanced
(C) Set (D) Load
programming functionalities ?
15) Which of the following is a container for
(A) JavaScript (B) HTML
storing data ?
(C) C (D) Java
(A) Variable (B) Integer
9) Which of the following tag is used to insert
JavaScript code into an HTML page ? (C) Event (D) Event handler
(A) <script>... <script> 16) Which of the following stands for BOM ?
(B) <script>... </script> (A) Browser Of Model
(C) <script>... <//script> (B) Browser Object Model
(D) </script>... </script> (C) Browser Object Modelling
10) Which of the following symbol signifies the (D) Browse Object Model
start and end of a JavaScript block ? 17) Which of the following is the top level
(A) Semicolon (B) Square bracket object in the browser object model ?
(C) Curly bracket (D) Round bracket (A) Window
11) Which of the following is a reusable block (B) Document
of code that performs a particular task ? (C) Page
(A) Array (B) Code (D) Location
(C) Program (D) Function
18) Which of the following stands for NaN ?
12) Which of the following statement is used to
(A) Not a Numeric
return a value in a function ?
(B) Not a Number
(A) Return (B) Function
(C) Not a Noun
(C) Select (D) Send
(D) Not an Numeric
13) Which of the following is generated by the
browser due to interaction between the Ans. : (1 - A), (2 - A), (3 - A), (4 - B), (5 - C),
user and the webpage ? (6 - D), (7 - B), (8 - A), (9 - B), (10 - C),
(A) Function (B) Response (11 - D), (12 - A), (13 - C), (14 - C), (15 – A),
(C) Event (D) Value (16 - B), (17 - A), (18 - B)

Laboratory Exercise
(1) Create a CSS for H1 as per the given rules and (1) Fields should not be empty.
apply it on the text. (2) Only numbers are allowed in the phone field.
(3) The phone number should be 10 digits long.
(1) Font : Times New Roman
Ans. This type of webpage has been discussed in our
(2) Color : red
example-2. So try yourself.
(3) Case : Lowercase
(1) Field should not be empty
(4) Font style : Italic (2) Only digits should be there in this field
(5) Alignment : Centre (3) Only 10 digits should be there in mobile no.
(6) Text decoration : Underline (3) Give validation to the student’s personal details
(7) Background color : Light Grey form created in chapter 1.
(8) Border : Dotted Ans. This type of webpage we have discussed in the
Ans. This type of webpage has been discussed in our chapter. So try yourself.
example-1. So try yourself. (4) Give validation to the feedback form created in
(2) Create a form with fields: name, e-mail address, chapter 1.
phone number and submit button. Give validation Ans. This type of webpage we have discussed in the
as given below : chapter. So try yourself.