You are on page 1of 43

Submitted To:

Mrs. Taranjeet Mam

Submitted By:
Manpreet Kaur
Grewal
Pupin
No.10506000106
Class Roll no. 711
B.A 3rd
Dashmesh Girls College
Badal
2010
INDEX
Sr.n Topic Remarks
o.
1. Inroduction to java
Scripting
 Java Programing
Form Processing
Function with augment
Even and odd numbers
String programming
Nest of while statement
Maximum of numbers

 Inroduction to java
Scripting
 Nested list
 Link list
 Font size
 Form
 Unordered list
 Frames
 Working with text

 CSS
Introduction to java
scripting
Java script is event driven and based on the
concept the of event handler. JavaScript
provide valuable experience in this imported
technology area. JavaScript is free and it
provides a very valuable
Capability for persons seeking success in the
high teck marketplace
of today and it is based on the latest concepts
in programming such as objects and events.In
order to write programs with javaScript it is
necessary to have knowledge of HTML.

Programs consist of statements


that are executed by the
Computer.There are two varieties of JavaScript

JAVASCRIPT

CLIENT SIDE SERVER SIDE

Client side JavaScript statements are


embedded in HTML documents. The Browser
extracts those statements from the HTML and
causes them to be executed.
An HTML documents consists of one or
more elements
the worlds inside the matching angle
brackets are commonly
refer to as tags. Comments always begin with
“<!-“and end
with “->”. In java script, write () method is a
special kind of
function that is associated with an object. In
this case
document are the object.
SCRIPTING

The most way to use java script in an HTML


documents is to write the JavaScript
statements between a pair of matching
<script>
</script> tags. Browser will extract the
statement and attempt to
Interpret and execute them.

EXAMPLE:-
<HTML>
<HEAD>
</HEAD>
<BODY>
<p> hello from HTML
<br>
<script language=”javascript1.2”>
<!-begin hiding java script in a comment
Document. Write (“hello from java script”)
//end hiding JavaScript in a comment ->
</script>
</body>
</HTML>
JAVASCRIPT
PROGRAMING

DATA TYPES:

Java is very particular about data types. Java


script is a loosely typed language and the
programmer dose not need to have too much
concern about data type. JavaScript recognized
and support the following types of data.
• Numbers
• Boolean types
• String types
• Null
LITERAL

Literals are fixed value that we provide in our


scripts
• Integer literals
• Floating point literals
• Boolean literals
• Strings literals
VARIABLES
Variables are symbolic name or references to
memory locations where you will store specific
values. Variables must conform to the naming
rules for identifiers
Example : X=10 & var X=10
JavaScript recognized the variable as local
or global. Local variables are declared inside a
function. Global variables are declared out side
a function.

EXAMPLE:
<HTML>
<HEAD>
<script language =”javascript1.2”>
<!-hide script //define the function
named area()
Function cal area®
{
Var a=3.14*r*r’
Return a;
}
//ending hiding->
</script>
</head>
</body>
<Script>
Var area;
Area= cal area (4.25);
Document. Write (“Area is “=area);
</script>
</body>
<HTML>
EXPRESSIONS

An expression is any valid combination of


literals, variables, and operators ‘functions call
and sub expressions that evaluates to a single
value. The resulting value can be a number, a
string or a logical value. Some expressions are
used to assign a value to a variable.

EXAMPLE:

My var=10
My var=((6+x0)+m*function(y))

Java script supports three types of expressions

• Arithmetic expressions
• String expression
• Logical expression

OPERATORS
An operator is said to operate on an operand.
JavaScript
provides a set of operators that can used to
perform an action on
one or two operands.

Arithmetic operators

Operator Description
+ Addition
- Subtraction
* Multiplication
% Modulas
/ Division
++ Return the value then
increment
-- Return the value then
decrement

Logical operator

Operator && // !
Descriptio Logical Logical OR Logical
n AND Not
Comparison Operator
== Equal
!= Not Equal
< Less than
> Greater than
=== Strictly Equal to
!== Strictly not Equal to
<= Less than or equal to
>= Greater than or equal to

DHTML
DEFINITION:- DHTML stands for Dynamic
Hypertext Markup Language. It consists of a
set of tags that define how a page should be
displayed on the browser. In early days of the
web, these tags were based on the structure
and content, which means that user machine,
could interpret the tags in the best way it
could. DHTML means a web page can react to
the user without relying on the server or
depending on an embedded program. DHTML
can change itself. This is pretty big leap for the
static web page. With DHTML, the document
takes on a structure of its own which is called
the Document Object Model

FEATURES OF DHTML
1. Changing tags and content:- The
capability to change the tag and their
contents utilizes the Document Object
Models, Which uncover everything for
change.
2. Positioning Elements:- Using the
<layer> tag and a form element user
can change the original picture with
another set of text and graphic.

3. Changing Font Styles: - The Font


property belongs to the style object and
has following values-style---> font--->
size, face.
4. Changing Font Size:- With Dynamic
style, a method same to the one used to
alter font style can be used to
dynamically manipulated the font size of
the element on web page.
5. Changing Font color:- The color of the
font can also be changed.
6. Hiding Elements:- The user could hide
the element on web page and only
reveal them when he passes mouse
pointer over a specific area.
7. Moving Elements:- User can move
element from one page to another. Use
method tag, the selected text continued
to move of the page endless.
8. Voiceovers:- It is extremely popular
with user. It takes place when an object
changes as the mouse pointer over it. It
may consist of a graphic change.
CASCADING SYSTEM
SHEETS
Style Sheets are powerful mechanism for
adding style (font, color, and spacing) to
web documents; they enforce standards and
uniformity throughout a website and provide
numerous attributes to create dynamic effects.
With style sheet, text and images formatting
properties can be predefined in a single list.
HTML elements on a web page can then be
bound to the style sheet. Its advantage is the
ability to mark global changes to all documents
from a signal location.

The style assignment process is accomplished


with the
<STYLE>….
<STYLE Type=”text/css”>
Tag (attribute: value…)
…………..
</STYLE>

C LASS

Style sheets support class or sets of style


changes for a document. A class can be
defined the style in specific way for any
elements. It is applied to classes and be used
to identify the logical sets style changes that
might be different for different html elements.

Are lost of web sites like YAHOO.COM


&REDIFF.COM, which provide web space for
your personal website.

In HTML your will be learning how to use to first


and HYPERLINK text in your documents. TIM
BERNERS-LEE developed HTML in early 1990 at
CERN, the European Particle Physics Laboratory
in Geneva Switzerland.
HTML is a method where ordinary text
can be converted info hypertext. It is set of
special code included to control the lay out &
appearance of the text.

• HTML is a character based method fir


describing and expressing the content. The
content is picture, text sound and video
clips.
• It deliver the content to multiple platforms
• It links document components or
documents together to compose
documents

STRUCTURE OF HTML
DOCUMENT
HTML generally has two parts and on –code
and off code, which contains the text to be,
define. Few tags don’t require and off-code.
Syntax: <tag name>…</tag name>
The most important thing to keep in mind
about HTML is that it’s purpose is not to specify
the exit formatting or layout of web page, but
rather to define and specify the specify
element that make up a page such as the body
of the text element and so on. User can use
HTML to define the Composition of web page
not the appearance.
Switching between your editor and browser
1.Load any editor. (ex: Notepad)
2.Create the HTML file and saved it with
extension. HTML Or .HTML.
3.View it in any browser .(ex: internet
explorer or Netscape Navigator)
Tag or Tag element: refers to the HTML code
that define the element in an HTML file, such
as heading, images, paragraphs and list.
There are two kinds of tags.
• The container tag
• Empty tag

CONTAINER TAG: these tags which brackets


or contain text or other tag elements are called
Container Tags. These actually consist of two
tags, START TAG & AN END TAG which
encloses the text they affect.
EMPTY TAGS: these are stand alone and do
not Brackets or contain text or any other tag
elements. An empty tag function is the stand
alone elements within an HTML documents and
does not brackets or contains any thing else.
ATTRIBUTE: allows the user to specify how
web browser should treat a particular tag. An
attribute is included with in the actual tag,
either with in start tag or an empty tag. End
tag should not contain attributes.
Syntax: attribute =” value”
E.g.: align=”center”
Starting your page documents tags: all HTML
file should include at east these tags.
The HTML tag the
title tag
The head tag the
body tag
THE HTML TAG: this tag defines the top
most elements, identifying it as an HTML
document. It is a container tag that has a start
and an end tag and all the other tags and texts
are nested within it.

Syntax: <HTML>
... …
<HTML>
The Head Tag: this tag contains information
about yours HTML file. It may also contain
other tags that help you to identify your HTML
file to the outside world. The head tag is nested
within the HTML tag.
Syntax: <Html>
<Head>
……
</Head>
</Html>
Usually the only tag contained with in the head
tag is the title tag. Other tag also can be
contained within the head tag but they are
used lass often.

The Title Tag: this tag is nested within the


head tag. It ideates your page to the rest of the
world the tag output is displayed on yours
browser’s title bar does not appear as part of
the page.

Syntax: <HTML>
<HEAD>
<TITLE>
Your title: describe yours title.
</Title>
</Head>
</Html>
Title tag is a require element that you should
include in each and every HTML document.

The Boday Tag: This tag is the complement


of the tag and contains all the tags and
elements that a browsers actually displays as
the body of yours HTML document. Both the
tag and body tag are nested within the HTML
tag. Body tag comes after the head tag. They
denote a seprate part of the HTML document.

Syntax: <html>
<Head>
<Title>
My first web page
</Title>
</Head>
</Body>
……..
</Html>

STRUCTURE OF WEB PAGE


You can use heading to organize your web into
hierarchical levels. Headding also act as
separators in a word processing documents.
The top level heading (HI) actually is the title
for yours web page, i.e., it is appears ina
browser window at the top of the web page.
There are 6 levels of heading.
You can also use a second-level heading
(denoted by the H2 tag) to define a major
division in your page.
<Body>
<h1> this is a top level-heading </h1>
<h2> this is second level-heading </h2>
<h3> this is a third level-heading</h3>
<h4>……………………….........</h4>
<h5>……………………….........</h5>
<h6>this is a sixth level-heading </h6>
</body>
PARAGRAPH AND LINE BREAK TAGS: -
P
(Paragraph) and BR (break) tags user to insert
block and lines of text on user page. The p tag
is a container element, but with an implied
ending. User dose not have to include the </p>
end tag. The BR (link break) tag is an empty or
stands alone, tag that simply inserts a line
break.

EX: <p> for further details contact <BR>


MATHE<BR> MANIPAL<BR>
KARNATAKA

ADDING COMMENTS: - The comment tag is a


stand-alone tag that enables you to include
message for your own or anyone else’s future
reference. A Comment always begins with a
<….and ends with a->.

Example: <!-type your comments here->

ADDING COMMENTS: - Using italic, and


underline, highlighting: HTML has two ways to
include italic, bold and underline text on your
web page. The first way involves using literals
tags: the B (bold tags, I (Italic) and U
(Underline).
Block Quotes: The black quote (Block quote)
tag double-increaser block of text.

Preformatted text:- The pre tag is used to


display a block of” preformatted” text in a
moonscape, fixed-pitch font. One of the
primary uses of the PRE tag is to display text in
a tabular or columnar format in which you want
to mark sure that the columns remain properly
aligned.

CREATING LISTS: - You can crate two types of


list:
ordered and unordered. An ordered list is a
numbered list, and an unordered list is a
bulleted list. The OL tag defines a sequentially
numbered list of items. It is used in conjunction
with the LI (list item) tag, which is used to tag
the individual list item in a list. The UL
(unordered list tag defines bulleted list of
items. The LI tag is inside the UL tag and
defines each item within the list.

CREATING DEFINATION LIST:- The DL (definition


list) tag allows you to create glossaries or fist
of terms tag elements: a tag to define the list
(DL) a tag to be defined the term (DT) and a
tag to define the definition (DD).
CREATING HYPERTEXT LINKS: - One of the main
reasons to create a web page is to create links
to other pages.
To do that, you need the A (Anchor) tag.

INSERTING INLINE IMAGE: - The IMG (image)


tag allows you to display inline images and
your web page. The IMG tag is an empty or
stand-alone, document element.

Syntax: <IMG SRC=”image file “>


The SRC (source) attributes is a required
attribute that identifies the full or partial
address (URL) or just the name of the file to
display.

HORIZONTAL RULES:- the HR (horizontal rule)


tag is a stand-alone or empty, document
element that allows you to add horizontal rules
to your web page.

There are various other features of HTML. For


e.g. User can change the size and color of font
and user can also changes the background
color. User can create form using from method.
BA333
<html>
<head>
<title> function with arguments </title>
<script language =” Javascript”>
Function funs (str)
{
documents . write(“<pre>”);
document . write(“argument passed to
func() “+”\t\t\t=”\t=”+str=”\n”);
document . write (“typeof
(“+str+”)”+”\t\t\t=”+tyoeof(str));
document . write(“<hr>”);
document . write(“</pre>;”);
}
</script>
</dead>
<script language =”javascript”>
func(“hello world”);
func(“true”);
func(123);
func(123.45);
</script>
</body>
</html>

BA3C
<heml>
<head>
<title> from processing </title>
</head>
<body>
<h2 align = “center”> basic form processing
</h2></hr>
<form>
Name : - <input type =”text” Name=”text1”
size=”15”
<br> <br>
password :- <input type =”password”
Name=”pass1”
size=”8”<br> <br>
</form>
<hr>
<form>
Hobbies: - <input type=”Checkbox”
name=”check1”
Value=”reading” CHECKED > reading
<input type=”checkbox” name=”check1”
value =”music”> music
<input type=”checkbox” name=”check1”
value =”trekking”>trekking
</form>
<hr>
<input type=”radio” name=”radio1” value =”
male” checked> mail
<input type=”radio” name=”radio1” value
=”female”> female <br>
<input type=”button” name=”but1” value
=”click here V”> <br>
</form>
<hr>
<script language =”javascript”>
Len=document. forms. Length
document . write(<pre>”)
document . write (“thereare”+ len+”form in
this document “+”/n /n”)
document . write (“<hr> \n”)
for (i=0; i< len; i++)
{
num= document . form [i] . element. Length
document . write( “form”+i+” has “+num+”
elements \n\n”
}
document . write (“<\pre>”
</script>
</body>
</html>
<html>
<head>
<title> even and odd numbers </title>
</head>
<body>
<h1 ALIGN = “CENTER”>
EVEN AND ODD NUMBERS <H1>
<HR>
<PRE>
<SCRIPT LANGUGAE – “JAVASCRIPT”>
document . write(even\t\t odd”);
document . write(“<br>”);
var i:
for (i=1; i<=12; i++)
{
If((I%2) = =0 )
{
document . write (i);
document . write(“<br>”);
}
Else
{
document . write (“\t\t”+i);
document . write (“<br>”);
}
}
</Script>
</Pre>
</Body>
</HTML>
<html>
<head>
<title> strings – example1 </title>
</head>
<body>
<H1 ALIGN = “CENTER”> working with string
</h1>
<HR>
<Script Language= “JavaScript”>
document . write (“<BR>”)
var str1,str2,str3;
str1= “hello”;
str2=”world”
Str3-str1+str2;
document . write (“str1 = “+str1+”<br>”);
document . write(“str2-“+str2+ “<br>”);
document . write (“str1” + “+”+”str2” + “=”
+str3+”<br>”);
document . write(“str1” + “+”+”str2” + “-”+
(str1+ str2));
</script>
</body>
</html>
<HTML>
<Head>
<title> nested while statement </title>
</head>
</body>
<h1 align= “center” > nested while loop
</center>
</hi>
<pre>
<hr>
<script language =”java script”>
Var j=0, j=0, i=1
While (I<5)
{
document .write(“<u><b>”+”section
“+I+”</b></u>\n);
j=1;
while (j<4)
{
document .write( “\t\t<b> <i> “ + “ section + i
+ “ + j + “ </i> </br> \n”);
j++;
{
I++;
}
</script>
</pre>
</body>
</html>
<html>
<head>
<title> frames </title>
</head>
<frameset Rows=”48%,52%”>
<frame src=”NIJHER BRAR2. html”>
<frame cols=”50%, %50”>
<frame src=” NIJHER BRAR3. html”>
<frame rows=”40%, 56%”>
<frame src=” NIJHER BRAR4. html”
</noframes>
<body>
</noframes>
</frameset>
</body>
</html>
<HTML>
<HEAD>
<TITLE>FORM</TITLE>
</HEAD>
<BODY BGCOLOR=”PINK”>
<FORM1>
I HAVE A HOUSE
<INPUT TYPE=”CHECK BOX “NAME=”NIJHER
BRAR HOUSE”>
<BR>
I HAVE A CAR
<INPUT TYPE=”CHECK BOX” NAME= ICON
CAR”>
</FORM1>
<FORM2>
MALE
<INPUT TYPE=”RADIO “NAME=”SEX”
VALUE=”MALE”>
<BR>
<INPUT TYPE=”RADIO”NAME =”SEX
VALUE=”FEMALE’>
</form2>
<p> When a user click on a radio button that
button become checked and all other button
with the same name become unchecked.<p>
<FORM3>
<SELECT NAME=”VEHICLE”>
<OPTION VALUE=”CENTRO”> Centro
<OPTION VALUE=”ASTRA”>astra
OPTION VALUE=”MATIZ”>matiz
</SELECT>
</FORM3>
<TEXT AREA ROWS=”4” COLS=”3.5”>
HTML is the base of all scripting languages
</TEXT AREA>
<FORM4>
<INPUT TYPE=”BUTTON” VALUE=”CLICK ME”>
</FORM4>
<FIELDSET>
<LEGEND>
Personal information
</LEGEND>
<FORM5>
HIGHT<INPUT TYPE =”TEXT” SIZE=”9”>
WEIGHT< INPUT TYPE =”TEXT” SIZE=”11”>
</FORM>
</FIELD SET>
</BODY>
</HTML>
<html>
<head>
<title> Unordered List(UL Tag)</title>
</head>
<body bgcolor=”Aqua”>
<p><marquee>******** Unordered
List******** </marquee></p>
<ul>
<li> Computer Concepts
<li> Ms- windows
<li> Ms- Excel
<li> Ms- Word
<li> Foxpro
<li> word pad
<li> Power point
</ul>
</body>
</Html>
<html>
<head>
<title> WORKING WITH TEXT</title>
</head>
<Body Bgcolor=”TEAL”>
<P><Marquee>\\\\ THIS IS REGULAR TEXT\\\\.
<SUP> USE SUP FOR SUPERSCRIPT. </SUP>
THIS IS REGULAR TEXT
<SUB> USE SUP FOR SUBSCRIPT. </SUP> THIS
IS REGULAR TEXT
<U> USE U FOR UNDERLINE. </U> THIS IS
REGULAR TEXT.
<STRIKE> USE FOR STRIKE FOR
STRIKETHROUGH </STRIKE></Marquee>
</Body>
</HTML>
<html>
<head>
<title> font size</title>
</head>
<Body>
<marquee behavior=”slide” direction=”left”
width=”550”
bg color=”purple”>
WATCH OUT THE TEXT
<font size=”23”><font color= “red”> KOMAL
</font><br>
<font size=”24”><font color= “golden”>
JASMEEN </font><br>
<font size=”33”><font color= “lime”> EKAM
</font><br>
<font size=”23”><font color= “orange”>
MANPREET </font><br>
<font size=”25”><font color= “yellow”> SHEIJ
</font><br>
<font size=”26”><font color= “olive”> ABHI
</font><br>
<font size=”27”><font color= “FUCHIA”>
RANA</font><br>
<font size=”23”><font color= “green”>
DILRAJ </font><br>
</marquee>
</body>
</html>
html>
<head>
<title> link list</title>
</head>
<Body>
<h2> courses </h2>
<ul>
<li><a herf=”PAMMI.HTML”>DCA</a>
<li><a herf=”PAMMI.HTML”>PGDCA</a>
</ul>
</body>
</html>
<html>
<body>
<ol>
<Li> India <li>
<ol> type=”I”>
<il> haryana </il>
<il> punjab </il>
<il> assam </il>
<ol>
<li> Pakistan </il>
<ol type = </il>
<il> Lahore </il>
<il> islamabad </il>
<ol>
</ol>
</body>
</html>
<html>
<body background =”d:\
software\photos\aish7.jpeg>
<ol>
<il> Ram krishan </il>
</ol>
</body>
</html>
Static Members
Class Mathoperation
{
Static float mul (float x , float y)
{
Return x*y;
}
Static float divide (float x , float y)
{
Return x/y;
}
}
Class abc
{
Public static void main (String args[ ])
{
Float a = Mathoperation . mul (4.0f,5.0f);
Float a = Mathoperation . divide (4.0f,2.0f);
System. Out. Println (“b= “+b);
}
}
Constructors
Class rectangle
{
Int l, w;
Rectangle(int x, int y)
{
L=x;
W=y;
}
Int rectarea ()
{
Return (l*w);
}
}
Class abc
{
Public static void main (String args [])
{
Rectangle rect 1 =new rectangle (15,10);
Int area1 =rect1 . rectarea ();
System . out. Println (“area =”+area1);
}
}