CSS – Cascading Style Sheets

What is CSS?
• CSS stands for Cascading Style Sheets
• CSS are basically used for styling of a web page.
• CSS handles the look and feel part of a web page.
• CSS is the preferred way for setting the look and feel of a website.
• CSS is combined with the markup languages HTML or XHTML.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• CSS gives the developer more control over the page styling or layout of the web page.
• CSS is easy to provide powerful control over the presentation of an HTML document.
• CSS is a simple design language planned to simplify the process of making web pages
presentable.
• 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 of screen sizes as well as other effects.
• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media

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 element 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 download times.

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

4. Superior styles to HTML − CSS can give a better look to your HTML page in
comparison to HTML attributes.

1
5. Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages
to make them compatible to future browsers.

6. Offline Browsing − CSS can store web applications locally with the help of an of+line
catche. Using of this, we can view offline websites. The cache also ensures faster
loading and better overall performance of the website.

7. Platform Independence − The Script offer consistent platform independence and

can support latest browsers as well.

8. Quick Loading: The style sheet is loaded only once and is stored in the cache
memory. This way the pages load faster.

9. Ability to position elements anywhere: With CSS, you can position the elements
anywhere in the web page. Thus you can ask the developer to change the position of a
particular element if it does not go well with the way you had wanted it to be.

10. Print friendly web pages: Another important feature of CSS is that it provides print
friendly web pages. This is to say that the web pages can be easily printed. The colors,
images and other things which are difficult to print can be eliminated and printed
easily.

11. Search engine friendly: The CSS style sheets make it easier for a website to feature in
major search engine results. Since it allows elements to be positioned anywhere, the
user can project the main contents first, so that it is easily captured by web spiders. It
also provides cleaner HTML codes thus cutting down the job of web spider to search
the real content from junk code.

Role of CSS -

1. Improves Website Presentation –

• The CSS is the added design flexibility and interactivity it brings to web development.
• Developers have control over the layout allowing them to make accurate section-wise
changes.
• As customization through CSS is much easier than plain HTML, web developers are
able to create different looks for each page.

2. Makes Updates Easier -

• CSS works by creating rules. These rules are simultaneously applied to multiple
elements within the site.

2
• Eliminating the repetitive coding style of HTML makes development work faster,
errors are also reduced.
• Content is separated from the design, changes across the website can be implemented
all at once.

3. Helps Web Pages Load Faster -

• Improved website loading is important benefit of CSS.
• Browsers download the CSS rules once and cache them for loading all the pages of a
website.
• It makes browsing the website faster and improves the overall user experience.
• This feature comes in helpful in making websites work smoothly at lower internet
speeds.

4. Multiple Device Compatibility –

• Style sheets allow content to be optimized for more than one type of device.
• By using the same HTML document, different versions of a website can be presented
for handheld devices such as PDAs and cell phones.

5. Portability :
• CSS also provide portability to the content.
• With the help of CSS, you can make separate style sheets for different media.
• Thus the content can be presented in a flexible way.

6. Customization :
• CSS sheets allow the users to customize the web page.
• A number of modern browsers give the liberty of defining their own style sheets to the
users. Thus a user can change font properties etc easily.

7. Multiple Browsers Compatible :

• CSS is friendly with all web browsers. Therefore, a website based on CSS will appear
similar in all the web browsers.

3
 CSS Rules, Structure and Syntax –
A CSS comprises of style rules that are interpreted by the browser and then applied to
the corresponding elements in your document. A style rule is made of three parts −
• Selector − A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.
• Property - A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
• Value - Values are assigned to properties. For example, color property can have
value either red or #F1F1F1 etc.

CSS Style Rule Syntax as follows –

selector { property: value }

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.

Example –
<HTML>
<HEAD>
<TITLE> CSS Example </title>
<STYLE>
P{background-color:red; text-align:center;}
</STYLE>
<BODY>
<P> BCA First Year </P>
</BODY>
</HTML>

4
 Types of CSS –

1. Internal CSS –
Internal style sheet can be defined internally within the web page.
To define CSS into HTML code <STYLE> tag is used with <HEAD> tag.
Example –
<html>
<head>
<style>
B { font-family:forte; background-color: yellow; }
H1 { color: maroon; margin-left: 40px;}
</style>
</head>
<body>
<B> India </h1>
<H1> Maharashtra </p>
</body>
</html>

2. External CSS –
External style sheet is useful when the style is applied to many pages.
In this method style definitions are stored in a separate file with extension .CSS.
Link the file with the HTML documents using <LINK> tag within <HEAD> tag.
This file is load faster, required minimum code and it acquired minimum space.
Example –

File Name demo.css

H1 { color: red; text-decoration: underline; }

MARQUEE { background-color:yellow }

File Name File1.html

<HTML>
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="demo.css">
</HEAD>

<BODY>
<H1>India</H1>
<MARQUEE> Maharashtra </MARQUEE>
</BODY>
</HTML>

5
3. Inline CSS –
The Inline style is specific to the tag itself.
The inline style uses the HTML "style" attribute to style a specific tag.
The Inline style is good for one an individual CSS change that you do not use
repeatedly through the site.
For Example –
<html>
<body>
<H1 style="color:blue; font-family:arial"> BCA </h1>
</body>
</html>

Working with Classes and ID Selector –

The role of a selector is to tell the browser to which style is applied to a specific Tag/
element in an HTML document.
Selectors are patterns used to select the HTML tags that you want to style.
These patterns may range from simple element names to rich related patterns.

1. CLASS –
The Class selector in CSS, which references the class attribute used on HTML
elements.
The Class selector begins with a dot (.) and followed by a class name which you
choose.
Use a class when you want to consistently style multiple elements throughout the
page/site.
Classes are useful when have used more than one Tag/element that shares the same
style.
Class represents a group of different or same elements. We can give same Class name
to two or more different HTML Elements.
• Example –
<<html>
<head>
<style>
.BCA { background-color: yellow; font-family:arial; text-
decoration:underline}
</style>
</head>
<body>
<H1 class="BCA"> I Love my India </H1>

6
 </body>
</html>

2. ID Selector –
ID selectors in CSS allow you to target elements (Tags) by their ID values.
The ID of an element should be unique within a page.
To reference an ID, you precede the ID name with a hash (#).
The CLASS selector can be used to share the same format.
Example 1 -
<html>
<head>
<style type="text/css">
#headingcolor {color: red;}
</style>
</head>
<body>
<h1 id="headingcolor"> India </h1>
<h1> Maharashtra </h1>
</body>
</html>

• Example 2 -
<html>
<head>
<style type="text/css">
#BBA {color: red;}
</style>
</head>
<body>
<h1 id="BBA"> India </h1>
<h1> Maharashtra </h1>
</body>
</html>

7
 Introduction of Java Script :

JavaScript is a very powerful client-side scripting language.

Java Script was invented Netscape Corporation.
JavaScript is a cross-platform, object-oriented scripting language.
JavaScript code is written into an HTML page.
JavaScript is used mainly for attractive the interaction of a user with the webpage.
You can use it to check or modify the contents of forms, change images, open new
windows and write dynamic page content.
Java Scripts only execute on your browser window.
JavaScript program are run by an interpreter built into the user’s web brewers.

Advantages of Java Script :

1. Client-Side Execution - JavaScript execute always on client machine to save a
bandwidth and make execution process fast.

2. Event-Based Programming: JavaScript is an event-based language. It means that

different code segment are executed when certain event occur.

3. Platform Independence : JavaScript is platform independent language. Any

JavaScript-enabled browser can understand and interpreted JavaScript code. Any
JavaScript code is executed on different types of hardware a JavaScript program.

4. Interpreted languages: JavaScript is an interpreted language. It requires no

compilation process so NO Compiler is required. The browser interprets JavaScript
as it HTML tags.

5. Procedural Capabilities: JavaScript provides all capabilities of a procedural

language. It provides condition checking, loops and branching facilities that can be
executed in a web page.

6. Server Load - Being client-side reduces the demand on the website server.

7. User Interface Interactivity : JavaScript used to fill web page data dynamically.
Another one is Form validation, missing/incorrect fields you can alert to a users using
alert box.

8. Browser Compatible : The biggest advantages to a JavaScript having a ability to

support all modern browser and produce the same result.

9. Quick Development : JavaScript syntax's are easy and flexible for the developers.

8
10. Easy to learn - The syntax of JavaScript is very easy. Any person can learn it very
easily and use it to develop dynamic and attractive websites.

11. Versatility - JavaScript plays nicely with other languages and can be used in a huge
variety of applications. JavaScript can also be used inside scripts written in other
languages such PHP.

12. Speed - JavaScript is very fast because any code functions can be run immediately
instead of having to contact the server and wait for an answer.

Types of Scripting Languages :

1. JavaScript -

JavaScript is a very powerful client-side scripting language.

Brendan Eich founded JavaScript and NetScape Developed it.
JavaScript works only at client side.
JavaScript is case sensitive language.
It runs on the all browser.
JavaScript is used for client side validation.
JavaScript supports only functions and uses curly braces for starting and ending
function.
JavaScript syntax is derived from C language.
JavaScript is default scripting language almost in all browsers.
File Extension in JavaScript is .js

2. VBScript –

VBScript (Visual Basic Script) is the Active Scripting Language, lightweight &
designed for fast interpreter.
Microsoft Developed VBScript.
VBScript works at both client side and server side.
VBScript is not case sensitive language.
It runs only on Internet Explorer (IE) browser.
VBScript is used for server side validation.

9
 VBScript supports functions & subroutines and uses function and end function for
starting and ending function.
VBScript Syntax is derived from BASIC language.
VBScript is not the default scripting language, but can be made by specifying in
scripting language.
File extension in VBScript is .vba or .vbs

3. ASP -

ASP stands for Active Server Pages.

ASP is Microsoft's first server side scripting engine that enables you to make
dynamic and interactive web pages.
ASP pages are run on the web server.
ASP is usually run on Microsoft web server, Internet Information Server (IIS).
ASP is a scripting technology and it is actually language-independent.
Most common scripting languages supported to ASP such as VBScript and Jscript.

4. PERL -
PERL stands for Practical Extraction and Report Language.
Perl is programming language developed by Larry Wall in 1987.
Perl is a high-level, interpreted, dynamic programming language.
Perl is a programming language specially designed for text editing.
It is now widely used for a variety of purposes including Linux system
administration, network programming, web development, etc.

5. PHP -

PHP stands for Hypertext Pre-processor, earlier stood for Personal Home Pages.
PHP is a server side scripting language.
PHP is used to develop Static websites or Dynamic websites or Web applications.
PHP scripts can only be interpreted on a server that has PHP installed.
The client computers accessing the PHP scripts require a web browser only.
A PHP file contains PHP tags and ends with the extension ".php".

10
 Introduction Data Types :

JavaScript is dynamic language.

JavaScript provides different data types to hold different types of values. There are two
types of data types in JavaScript.
JavaScript is a dynamic type language, means you DON'T NEED TO SPECIFY type of the
variable because it is dynamically used by JavaScript engine.
You need to use VAR here to specify the data type. It can hold any type of values
such as numbers, strings etc.
For Example - var a=40;//holding number or var b="bca";//holding string

1. Boolean - A Boolean represents only one of two values: true, or false.

Example - var a = true;
var b = false;

2. Number - There is only one type of Number in JavaScript. Numbers can be written
with or without a decimal point.
Example - var num1 = 32;

3. String - String data type represent textual data surrounding to single/double quotes.
Strings are used for storing text.
Example - var str1 = 'This is BCA First Year';

4. Null - Null has one value: null. It is explicitly nothing.

Example - var nothing = null;

5. Undefined - JavaScript uninitialized variables value are undefined. Uninitialized

variable (value undefined) equal to null. A variable that has no value is undefined.
Example - var testVar;
console.log(testVar); // undefined
6. Array - JavaScript Array is a collection of values that are belonging to a same data type.
Array values must be belonging opening or closing bracket. Array value separated by
comma. rray values you can access by array indexing. Index value 0, starting from first
value of the array.
Example - var myarray = [ ]; // Create empty array.
var multiarray = ["a", "b", "c", "d"]; // Create array with values
document.writeln('multiarray[0] ', multiarray[0]);
document.writeln('multiarray[4] ', multiarray[4]);

11
 Literals :
JavaScript object literal is a comma-separated list of name-value pairs wrapped in curly
brackets.
Object literals summarize data, enclosing it in an organized package.
This minimizes the use of global variables which can cause problems when combining
code.
Example –
var myObject = {
sProp: 'some string value',
numProp: 2,
bProp: false
};

Creating Variable :

Like many other programming languages, JavaScript has variables.

JavaScript variables are containers for storing data values.
Before you use a variable in a JavaScript program, you must declare it.
Variables are declared with the var keyword.
• Global Variables − A global variable has global scope which means it can be
defined anywhere in your JavaScript code.
• Local Variables − A local variable will be visible only within a function where it
is defined. Function parameters are always local to that function.
1. Declaration: Variable is registered using given name within the corresponding scope.
2. Initialization: When you declare a variable it is automatically initialized, which
means memory is allocated for the variable by the JavaScript engine.
3. Assignment: This is when a specific value is assigned to the variable.
Syntax –

var varname1 [= value1] [, varname2 [= value2] ... [, varnameN [=

valueN]]];

Example –
<html>
<head>

12
 <script type="text/javascript">
myText = "Have a nice day!";
myNum = 5;
document.write(myText);
document.write("My favourite number is "+ myNum);
</script>
</head>
</html>

What is Array in JavaScript -

Arrays are container-like values that can hold more than one value at a time.
The values inside an array are called elements.
The Array object that’s store multiple values in a single variable.
It stores a fixed-size sequential collection of elements of the same type.
The Array parameter is a list of strings or integers.

Arrays have their own built-in variables and functions, also known
as properties and methods.

Properties of Array –
1. Index - The property represents the zero-based index of the match in the string
2. Length - Reflects the number of elements in an array.
3. Prototype – It allows you to add properties and methods to an object.

Method of Array –
1. concat() - this array joined with other array and/or value.
2. join() - Joins all elements of an array into a string.
3. forEach() - Calls a function for each element in the array.

13
4. reverse() - Reverses the order of the elements of an array -- the first becomes the
last, and the last becomes the first.
5. sort() - Sorts the elements of an array

Example :- var breakfast = ["coffee", "Tea"];

breakfast;
Output :- ["coffee", "Tea"]

Program 1 : Program 2 :
<html> <html>
<body> <body>
<script> <script>
var f, len, i; var f, len, i;
f = [2,4,6,8,10,12]; f = [2,4,6,8,10,12];
document.write(f[2]); len = f.length;
</script> for (i = 0; i < len; i++)
</body> {
</html> document.write( f[i] + "<br>");
}
</script>
</body>
</html>

Operators & Expressions :

JavaScript operators are used to assign values, compare values, perform arithmetic
operations, and more.
JavaScript has both binary and unary operators.
A unary operator requires a single operand, either before or after the operator
Syntax - operator operand or operand operator
Example - ++x x++
A binary operator requires two operands, one before the operator and one after the
operator.
Syntax - operand1 operator operand2
Example - 3+4

14
Arithmetic operator – An arithmetic operator takes numerical values as the operands
and will return a single numerical value.

A. Increment (++) : It increments any number by one.

Example:

B. Decrement (--) : It decrements any number by one.

Example:

C. Unary (+) : Converts the operand to a number if it is not a number.

Example :

D. Remainder (%) : This is a binary operator and it returns the integer remainder of
dividing the two operands.

Logical operator – These operators are used to determine the logic between the values.
In given examples : a=1 and b=2

A. && (AND) : It Returns true only if both its first and second operands are evaluated
to true..
Example: a < 3 && b > 5 Result: returns false as b > 5 is false

B. || (OR) : Returns true if one of the two operands are evaluated to true, returns false if
both are.
Example: a < 3 || b > 5 Result: returns true as a < 3 is true

C. ! (NOT) : Unary operator that simply inverts the Boolean value of its operand..
Example: !(b>5) Result: returns true as a < 3 is true

Comparison Operators -

Operator and Description

1 = = (Equal)
Checks if the values of two operands are equal or not, if yes, then the condition
becomes true.
Ex: (A == B) is not true.

2 != (Not Equal)
Checks if the values of two operands are equal or not, if the values are not equal,
then the condition becomes true.
Ex: (A != B) is true.

3 > (Greater than)

Checks if the value of the left operand is greater than the value of the right operand,
if yes, then the condition becomes true.
Ex: (A > B) is not true.

15
4 < (Less than)
Checks if the value of the left operand is less than the value of the right operand, if
yes, then the condition becomes true.
Ex: (A < B) is true.

5 >= (Greater than or Equal to)

Checks if the value of the left operand is greater than or equal to the value of the
right operand, if yes, then the condition becomes true.
Ex: (A >= B) is not true.

6 <= (Less than or Equal to)

Checks if the value of the left operand is less than or equal to the value of the right
operand, if yes, then the condition becomes true.
Ex: (A <= B) is true.

Assignment Operators –

Operator and Description

1 = (Simple Assignment )
Assigns values from the right side operand to the left side operand
Ex: C = A + B will assign the value of A + B into C

2 += (Add and Assignment)

It adds the right operand to the left operand and assigns the result to the left operand.
Ex: C += A is equivalent to C = C + A

3 −= (Subtract and Assignment)

It subtracts the right operand from the left operand and assigns the result to the left
operand.
Ex: C -= A is equivalent to C = C - A

4 *= (Multiply and Assignment)

It multiplies the right operand with the left operand and assigns the result to the left
operand.
Ex: C *= A is equivalent to C = C * A

5 /= (Divide and Assignment)

It divides the left operand with the right operand and assigns the result to the left
operand.
Ex: C /= A is equivalent to C = C / A

6 %= (Modules and Assignment)

It takes modulus using two operands and assigns the result to the left operand.
Ex: C %= A is equivalent to C = C % A

16
Example –
Arithmetic Operator Program –
<html>
<body>
<script type="text/javascript">
var a = 33;
var b = 10;

document.write("a + b = "); result = a + b;

result = a + b; document.write("a + b = " +result+ ”<br>”);
document.write(result+”<br>”);

document.write("a - b = ");
result = a - b;
document.write(result+”<br>”);

document.write("a / b = ");
result = a / b;
document.write(result+”<br>”);

document.write("a % b = ");
result = a % b;
document.write(result+”<br>”);

a = ++a;
document.write("++a = ");
result = ++a;
document.write(result+”<br>”);

b = --b;
document.write("--b = ");
result = --b;
document.write(result+”<br>”);

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

17
 For Loop in JavaScript -
The 'for' loop is the most compact form of looping. It includes the following three
important parts −
The loop initialization where we initialize our counter to a starting value. The
initialization statement is executed before the loop begins.
The test statement which will test if a given condition is true or not. If the
condition is true, then the code given inside the loop will be executed, otherwise
the control will come out of the loop.
The iteration statement where you can increase or decrease your counter.
You can put all the three parts in a single line separated by semicolons.
Flow Chart - The flow chart of a for loop in JavaScript would be as follows −

Example of For Loop -

<html>
<body>
<script type="text/javascript">
var i;
for(i=1;i<=10;i++)
{
document.write(i+"<br>");
}
</script>
</body>
</html>

18
While Loop in JavaScript -

The purpose of a while loop is to execute a statement or code block repeatedly as long
as an expression is true.
Once the expression becomes false, the loop terminates.
Flow Chart - The flow chart of while loop looks as follows −

While Loop –
<html>
<body>
<script type="text/javascript">
var i;
i=1;
while(i<=10)
{
document.write(i+"<br>");
i=i+1;
}
</script>
</body>
</html>

If… Else statement in JavaScript -

JavaScript supports conditional statements which are used to perform different
actions based on different conditions.
The IF statement is the fundamental control statement that allows JavaScript to make
decisions and execute statements conditionally.

19
Program 1 : If… then… Else –
<html>
<body>
<script type="text/javascript">
var result;
result=35;
if(result>=35)
{
document.write("Pass");
}
else
{
document.write("Fail");
}
</script> </body> </html>

Program 2 : IF… else using prompt :

<html>
<body>
<script type="text/javascript">
function test()
{
var result;
result=prompt("ënter the number");
if(result>=35)
{
document.write("Pass");
}
else
{
document.write("Fail");
}
}
test();
</script> </body> </html>

Program 3 : IF… else using Form and event :

<html>
<body>
<script type="text/javascript">
function test()
{
var result;
result=document.f1.number.value;
if(result>=40)
{

20
document.write("Pass");
}
else
{
document.write("Fail");
}
}
</script>
<body>
<form name ="f1">
Enter the number<input type="text" name="number"><br>
<input type="button" value="Show" onClick="test()">
</form> </body> </html>

Function in JavaScript -
A function is a group of reusable code which can be called anywhere in your program.
This eliminates the need of writing the same code again and again.
Functions allow a programmer to divide a big program into a number of small and
manageable functions.

Function Definition
The most common way to define a function in JavaScript is by using
the function keyword, followed by a unique function name, a list of parameters (that
might be empty), and a statement block surrounded by curly braces.

Syntax –
<script type=”Text/Javascript”>
<!--
Function functionname(parameter-list)
{
Statement
}
//-->
</script>

Program 1 :
<html>
<body>
<script>
function demo()
21
 {
document.write("Wel-come");
}
demo()
</script>
</body>
</html>

Program 2 :
<html>
<body>
<script>
var a,b,c;
function demo()
{
a=100;
b=200;
c=a+b;
document.write("Your Addition is = " +c);
}
demo()
</script>
</body>
</html>

Output = 300

Events in JavaScript -
When the page loads, it is called an event.
When the user clicks a button, that click too is an event.
Other examples include events like pressing any key, closing a window, resizing a
window, etc.
Developers can use these events to execute JavaScript coded responses, which cause
buttons to close windows, messages to be displayed to users, data to be validated, and
virtually any other type of response imaginable.

Attribute Trigger
onblur Element loses focus
onchange Element gets changed / modified
onclick Element gets clicked
22
ondblclick Element gets double clicked
onfocus An element received focus
onkeydown A key was pressed when an element has focus
onkeypress A keystroke was received by the element
onkeyup A key was released when the element has focus
onload An element was loaded
onmousedown The mouse button was pressed on the element
onmousemove The mouse pointer moves while inside the element
onmouseout The mouse pointer was moved outside the element
onmouseover The mouse pointer was moved onto the element
onmouseup The mouse button was released on the element.
onreset The form's reset button was clicked.
onresize The containing window or frame was resized
onselect Text within the element was selected
onsubmit A form is being submitted
onscroll The user scrolls (in any direction and with any means).

Event Program :
<html>
<body>
<script type="text/javascript">
function test()
{
document.bgColor="red";
}
function test1()
{
document.bgColor="blue";
}
function test2()
{
document.bgColor="green";
}
function test3()
{
document.bgColor="pink";
}
function test4()
{
alert("On Blur event is generated");

23
}
</script>

<body>
<form name ="f1">
<input type="button" value="Click Me" onClick="test()">
<input type="button" value="Mouse OVER" onMouseOver="test1()">
<input type="button" value="Mouse OUT" onMouseOut="test2()">
<input type="text" onblur="test4()">
<input type="button" value="Mouse MOVE" onMouseMove="test3()">
</form>
</body>
</html>

What is Alert, Prompt and Confirm –

Alert Dialog Box -

Alert() is a simple function to display a message to a dialog box (also called alert box).
Alert dialog box is mostly used to give a warning message to the users.
Alert box can still be used for friendlier messages.
Alert box gives only one button "OK" to select and proceed.

Program 1:
<html>
<body>
<script>
alert("This is a alert box");
</script>
</body>
</html>

Program 2:
<html>
<script>
<body>
<button onclick="myFunction()"> Try it </button>
function myFunction()
{
alert("I am an alert box!");
}
</script>
</body>
</html>

24
 Confirm Dialog Box -

A confirm dialog box is mostly used to take user's consent on any option.
It displays a dialog box with two buttons: OK and Cancel.
If the user clicks on the OK button, the window method confirm() will return true.
If the user clicks on the Cancel button, then confirm() returns false.

Program 1:
<html>
<body>
<script type="text/javascript">
function test()
{
var a = window.confirm("Your choice?");
if(a)
{
alert("Yes");
}
else
{
alert("No");
}
}
</script>
<form name ="f1" >
<input type ="button" value="Click me" onClick="test()">
</form>
</body> </html>

Program 2:
<html>
<body>
<script>
function demo()
{
var txt;
if (confirm("Confirm Notification press Yes/Cancel "))
{
document.write("Wel Come!");
}
else
{
document.write("are you sure to cancel it");
}
}
demo();
25
 </script>
</body>
</html>

Prompt Dialog Box -

The prompt dialog box is very useful when you want to pop-up a text box to get user
input.
It enables you to interact with the user.
The user needs to fill in the field and then click OK.
This dialog box is displayed using a method called prompt() which takes two
parameters:
(i) a label which you want to display in the text box and
(ii) a default string to display in the text box.
This dialog box has two buttons: OK and Cancel.
If the user clicks the OK button, the window method prompt() will return the
entered value from the text box.
If the user clicks the Cancel button, the window method prompt()returns null.

Prompt Program –
Program 1 :
<html>
<body>
<script type="text/javascript">
var a = parseInt(window.prompt("enter the number"));
var b= parseInt(window.prompt("enter the second number"));
c=a+b;
alert(c);
</script>
</body>
</html>

Program 2 :
<html>
<body>
<script type="text/javascript">
function test()
{
var fvalue = parseInt(window.prompt("enter the number"));
var svalue= parseInt(window.prompt("enter the second number"));
c=fvalue+svalue;
alert(c);
}

26
</script>
<form name ="f1" >
<input type ="button" value="click me" onClick="test()">
</form>
</body>
</html>

String Functions in Java Script –

String Methods Descriptions

substr(start, [length]) Returns the characters in a string beginning at “start” and
through the specified number of characters, “length”.
Example - var text="Welcome to India"
document.write(text.substring(0,5));
Output – Welco
toLowerCase() Returns the string with all of its characters converted to
lowercase.
Example - var abc = 'WELCOME TO INDIA';
abc = abc.toLowerCase();
document.write(abc);
Output – welcome to india
toUpperCase() Returns the string with all of its characters converted to
uppercase.
Example - var abc = 'welcome to india';
abc = abc.toLowerCase();
document.write(abc);
Output – WELCOME TO INDIA
charAt(x) Returns the character at the “x” position within the string.
Example - var myString = 'india';
document.write(myString.charAt(3));
Output - d
charCodeAt(x) Returns the Unicode value of the character at position “x”
within the string.
Example - var myString = 'india';
document.write(myString.charCodeAt(3));
Output – 105
concat(v1, v2,…) Combines one or more strings into the existing one and
returns the combined string.
Example - var message="BCA"
var final=message.concat(" FIRST"," YEAR")
document.write(final);

27
 Output – BCA FIRST YEAR
fromCharCode(c1, c2,...) Returns a string created by using the specified sequence of
Unicode values.
Example -
document.write(String.fromCharCode(97,98,99,121,122)+"<br>")
document.write(String.fromCharCode(72,69,76,76,79))
Output – abcyz
HELLO
indexOf(substr, [start]) Searches and (if found) searched character within the
string. If not found, -1 is returned. (String index starts from
Zero)
<html>
<body>
<script>
var a="Hi, This is BCA Class"
if (a.indexOf("BCA")!=-1)
{
alert("Your text is available");
}
else
{
alert("Your text is NOT available ");
}
</script>
</body>
</html>
Output - Your text is available
lastIndexOf(substr, Searches and (if found) returns the index number of the
[start]) - searched character within the string.
Example - var myString = 'rcp imrd, shirpur';
alert(myString.lastIndexOf('r'));
Output – 16

28
 Differences between Client Side Scripting & Server Side Scripting

Client Side Scripting Server Side Scripting

A Script that is interpreted by the browser A Script that is interprets by the web server
itself is called client side scripting language is called server side script.

A client side script is an insertion set, but it Server side script is instruction set that is
is not processed by the web server instead processed by the server and which general
it is sent to the browser and is processed by create its HTML
the browser.

The client script is processed after the web Server side script is before page has being
page has being downloading on web downloading on web browser.
browser.

Client side scripting is when all the code is Server side scripting is when the users
already on the user’s browser and the page browser make a request back to the server
change best on user input. and script create the dynamic page best on
number of condition.
Example – JavaScript, VBScript etc.
Example – PHP, ASP etc.

Client side scripting cannot be use to Server side scripting is use to connect the
connect database on the web server. database on the web server.

Response from client side script is faster as Response from server side script is slower
compared server side script because because this processed on web server.
processed on the local computer

Example of Client side – JavaScript, VBScript Example of Server side – PHP, ASP, Pert,
etc. ASP.Net, ruby etc.

29
 String Objects -

• The String object lets you work with a series of characters.

• As JavaScript automatically converts between string primitives and String objects,
• You can call any of the helper methods of the String object on a string primitive.
• Syntax -
var abc = new String(string);

String Properties –
1. constructor – Returns a reference to the String function that created the object.
<html>
<body>
<script type="text/javascript">
var abc = new String( "This is string" );
document.write("str.constructor is:" + abc.constructor);
</script>
</body>
</html>

2. length – Returns the length of the string.

<html>
<body>
<script type="text/javascript">
var abc = new String( "This is string" );
document.write("str.length is:" + abc.length);

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

3. prototype – The prototype property allows you to add properties and methods to an
object

String Method –
String Methods Descriptions
substr(start, [length]) Returns the characters in a string beginning at “start” and
through the specified number of characters, “length”.
Example - var text="Welcome to India"
document.write(text.substring(0,6));
Output – Welcom
toLowerCase() Returns the string with all of its characters converted to
lowercase.
Example - var abc = 'WELCOME TO INDIA';

30
 abc = abc.toLowerCase();
document.write(abc);
Output – welcome to india
toUpperCase() Returns the string with all of its characters converted to
uppercase.
Example - var abc = 'welcome to india';
abc = abc.toLowerCase();
document.write(abc);
Output – WELCOME TO INDIA
charAt(x) Returns the character at the “x” position within the string.
Example - var myString = 'india';
document.write(myString.charAt(3));
Output - d
charCodeAt(x) Returns the Unicode value of the character at position “x”
within the string.
Example - var myString = 'india';
document.write(myString.charCodeAt(3));
Output – 105
concat(v1, v2,…) Combines one or more strings into the existing one and
returns the combined string.
Example - var message="BCA"
var final=message.concat(" FIRST"," YEAR")
document.write(final);
Output – BCA FIRST YEAR
fromCharCode(c1, c2,…) Returns a string created by using the specified sequence of
Unicode values.
Example -

document.write(String.fromCharCode(97,98,99,121,122)+"<br>")
document.write(String.fromCharCode(72,69,76,76,79))
Output – abcyz
HELLO
indexOf(substr, [start]) Searches and (if found) searched character within the
string. If not found, -1 is returned. (String index starts from
Zero)
<html>
<body>
<script>
var a="Hi, This is BCA Class"
if (a.indexOf("BCA")!=-1)
{
alert("Your text is available");

31
 }
else
{
alert("Your text is NOT available ");
}
</script>
</body>
</html>
Output - Your text is available
lastIndexOf(substr, Searches and (if found) returns the index number of the
[start]) - searched character within the string.
Example - var myString = 'rcp imrd, shirpur';
alert(myString.lastIndexOf('r'));
Output – 16
big() Returns the string with the tag <BIG> surrounding it.
bold() Returns the string with the tag <B> surrounding it.
italics() Returns the string with the tag <I> surrounding it.
small() Returns the string with the tag <SMALL> surrounding it.
strike() Returns the string with the tag <STRIKE> surrounding it.
sub() Returns the string with the tag <SUB> surrounding it.

Array Object -

• Arrays are used to store a series of related data items.

• An Array object is used to store a set of values in a single variable name.
• Each value is an element of the array and has an associated index number.
• The index number starts at zero.
• You create an instance of the Array object with the "new" keyword.
The Most Common Methods
Methods Explanation

Length() Returns the number of elements in an array. This property is

assigned a value when an array is created

reverse() Returns the array reversed

slice() Returns a specified part of the array

sort() Returns a sorted array

32
• Example –
<html>
<body>
<script type="text/javascript">
var city=new Array(5)
city [0]="Mumbai"
city [1]="Nashik"
city [2]="Jalgaon"
city [3]="Dhule"
city [4]="Shirpur"
for (i=0; i<5; i++)
{
document.write(city[i] + "<br>")
}
</script>
</body>
</html>

Math Object -

• The built-in Math object includes mathematical constants and functions. You do not
need to create the Math object before using it.
• JavaScript math object is a top-level, a predefined object for mathematical constants
and functions.
• Cannot be created by the user. It is a predefined object.
• Mathematical properties and functions can be calculated by math.property or
math.method.

Methods Explanation
max(x,y) Returns the number with the highest value of x and y
<html>
<body>
<script type="text/javascript">
document.write(Math.max(2,4));
</script>
</body>
</html>
min(x,y) Returns the number with the lowest value of x and y
<script type="text/javascript">
document.write(Math.min(2,4));
</script>

33
random() Returns a random number between 0 and 1
<script type="text/javascript">
document.write(Math.random());
</script>
round(x) Rounds x to the nearest integer
<script type="text/javascript">
document.write(Math.round(7.25));
</script>

Math Property -
Properties Explanation
abs(x) Returns absolute value of x.
Example – var value=Math.abs(-1);
document.write(value); Output - 1
var value=Math.abs(null);
document.write(value); Output - 0
var value=Math.abs(20);
document.write(value); Output - 20

max(a, b) Returns the larger of a and b.

Example - var a=Math.max(10,20,50,100);
document.write(a); Output - 100

min(a, b) Returns the lesser of a and b.

Example - var a=Math.min(10,20,50,100);
document.write(a); Output - 10

sin(x) Returns the Sin of x, where x is in radians.

Example - var a=Math.sin(90);
document.write(a); Output – 0.479425538

sqrt(x) Returns the square root of x.

Example - var a=Math.sqrt(81);
document.write(a); Output - 9

ceil() Returns the smallest integer greater than or equal to a number.

Example - var value=Math.ceil(45.95);
document.write(value); Output 46
var value=Math.ceil(45.25);
document.write(value); Output 45

34
35
 Date & Time Object –

Method Description

Date() Javascript Date() method returns today's date and time and does not
need any object to be called. Returns today's date and time
Example - <script type=”text/javascript”>
var a=Date()
document.write(“date and Time :”+a);
</script>
Output - Date and Time : Sat Mar 17 2018 14:28:11

getDate() getDate() method returns the day of the month for the specified date
according to local time. The value returned by getDate() is an integer
between 1 and 31.
Example - <script type=”text/javascript”>
var a=new Date(“March 17, 2018”);
document.write(a.getDate());
</script>
Output – 17

getDay() getDay() method returns the day of the week for the specified date
according to local time. The value returned by getDay() is an integer
corresponding to the day of the week: 0 for Sunday, 1 for Monday, 2
for Tuesday, and so on.
Example - <script type=”text/javascript”>
var a=new Date(“March 17, 2018”);
document.write(a.getDay());
</script>
Output – 6

getFullYear() getFullYear() method returns the year of the specified date

according to local time.
Example - <script type=”text/javascript”>
var a=new Date(“March 17, 2018”)
document.write(a.getFullYear());
</script>
Output – 2018

getHours() getHours() method returns the hour in the specified date according
to local time. The value returned by getHours() is an integer
between 0 and 23.
Example - <script type=”text/javascript”>
var a=new Date(“March 17, 2018 23:15:00”);
document.write(a.getHours());
</script>
Output – 23

36
getMilliseconds() getHours() method returns the hour in the specified date according
to local time. The value returned by getHours() is an integer
between 0 and 23.
Example - <script type=”text/javascript”>
var a=new Date()
document.write(a.getMilliseconds());
</script>
Output – 798

getMinutes() getMinutes() method returns the minutes in the specified date

according to local time. The value returned by getMinutes() is an
integer between 0 and 59.
Example - <script type=”text/javascript”>
var a=new Date(“March 17, 2018 23:15:00”);
document.write(a.getMinutes());
</script>
Output – 15

getMonth() getMonth() method returns the month in the specified date

according to local time.
Example - <script type=”text/javascript”>
var a=new Date(“March 17, 2018 23:15:00”);
document.write(a.getMonth());
</script>
Output – 02 ** starting month from 0 (Zero)

getSeconds() This method returns the seconds in the specified date according to
local time. The value returned by getSeconds() is an integer between
0 and 59.
Example - <script type=”text/javascript”>
var a=new Date(“March 17, 2018 23:15:20”);
document.write(a.getSeconds());
</script>
Output – 20

getTime() getTime() method returns the numeric value corresponding to the

time for the specified date according to universal time. (calculate
milliseconds since January 1, 1970)
Example - <script type=”text/javascript”>
var a=new Date(“March 17, 2018 3:15:20”);
document.write(a.getTime());
</script>
Output – 1521236720000

37
 Form Objects -

1. action : action property of form object is used to access the action attribute
present in HTML associated with the <form> tag.
2. elements[] : elements property of form object is an array used to access any
element of the form. It contains all fields and controls present in the form.
3. length : length property of form object is used to specify the number of elements in
the form.
4. method : method property of form object is used to access the method attribute
present in HTML associated with the <form> tag.
5. name : name property of form object denotes the form name.
6. target : This property denotes the name of the target window to which form it is to
be submitted into.
7. fileUpload : FileUpload property of form object denotes the file upload field placed
in the form.
8. text : text property of form object denotes the text field placed in the form.
9. textarea : textarea property of form object denotes the text area field placed in the
form.
10. password : password property of form object denotes the object that is placed as a
password field in the form.
11. hidden : The hidden property of form object denotes the hidden field placed in the
form.
12. checkbox : checkbox property of form object denotes the checkbox field placed in
the form.
13. radio : radio property of form object denotes the radio button field placed in the
form.
14. button : The button property of form object denotes the button GUI control placed in
the form.
15. submit : submit property of form object denotes the submit button field that is
placed in the form.
16. reset : As the name implies, the reset property of form object denotes the object
placed as reset button in the form.
17. select : select property of form object denotes the selection list object placed in the
form.

38