javascript programing 1

8/8/2019 Javascript Programing 1

1/43

Submitted To:Mrs. Taranjeet Mam

Submitted By:Manpreet Kaur

GrewalPupin

No.10506000106Class Roll no. 711B.A 3rd


2/43

Dashmesh Girls CollegeBadal2010


3/43

INDEXSr.no.

Topic Remarks

1. Inroduction to javaScripting

Java Programing

Form Processing

Function with augment

Even and odd numbers

String programming

Nest of while statement

Maximum of numbers

Inroduction to javaScripting

Nested list

Link list

Font size

Form

Unordered list

Frames Working with text

CSS


4/43

Introduction to javascripting

Java script is event driven and based on theconcept the of event handler. JavaScriptprovide valuable experience in this importedtechnology area. JavaScript is free and itprovides a very valuableCapability for persons seeking success in the

high teck marketplaceof today and it is based on the latest conceptsin programming such as objects and events.Inorder to write programs with javaScript it isnecessary to have knowledge of HTML.

Programs consist of statements

that are executed by theComputer.There are two varieties of JavaScript

Client side JavaScript statements areembedded in HTML documents. The Browserextracts those statements from the HTML andcauses them to be executed.

JAVASCRIPT

SERVER SIDECLIENT SIDE


5/43

An HTML documents consists of one ormore elements

the worlds inside the matching angle

brackets are commonlyrefer to as tags. Comments always begin with

. In java script, write () method is a

special kind offunction that is associated with an object. In

this case

document are the object.


6/43

SCRIPTING

The most way to use java script in an HTML

documents is to write the JavaScriptstatements between a pair of matching tags. Browser will extract thestatement and attempt toInterpret and execute them.

EXAMPLE:-

hello from HTML

//end hiding JavaScript in a comment ->


7/43

JAVASCRIPTPROGRAMING

DATA TYPES:

Java is very particular about data types. Javascript is a loosely typed language and theprogrammer dose not need to have too muchconcern about data type. JavaScript recognizedand support the following types of data.

Numbers

Boolean types

String types

Null

LITERAL

Literals are fixed value that we provide in ourscripts

Integer literals Floating point literals

Boolean literals

Strings literals

VARIABLESVariables are symbolic name or references tomemory locations where you will store specificvalues. Variables must conform to the namingrules for identifiersExample : X=10 & varX=10


8/43

JavaScript recognized the variable as localor global. Local variables are declared inside afunction. Global variables are declared out sidea function.

EXAMPLE:

named area()Function cal area{Var a=3.14*r*rReturn a;}//ending hiding->

Var area;Area= cal area (4.25);Document. Write (Area is =area);


9/43

EXPRESSIONS

An expression is any valid combination ofliterals, variables, and operators functions call

and sub expressions that evaluates to a singlevalue. The resulting value can be a number, astring or a logical value. Some expressions areused to assign a value to a variable.

EXAMPLE:

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

Java script supports three types of expressions

Arithmetic expressions String expression

Logical expression

OPERATORS


10/43

An operator is said to operate on an operand.JavaScript

provides a set of operators that can used toperform an action onone 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 && // !Description

LogicalAND

Logical OR LogicalNot


11/43

Comparison Operator

= = Equal! = Not Equal

< Less than> Greater than= = = Strictly Equal to! = = Strictly not 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


12/43

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 theircontents utilizes the Document Object

Models, Which uncover everything for

change.

2. Positioning Elements:- Using the

tag and a form element usercan 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.


13/43

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. Usemethod 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. Itmay consist of a graphic change.


14/43

CASCADING SYSTEMSHEETS

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 accomplishedwith the.Tag (attribute: value)..


15/43

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 usedto 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


16/43

special code included to control the lay out &

appearance of the text.

HTML is a character based method firdescribing and expressing the content. Thecontent is picture, text sound and videoclips.

It deliver the content to multiple platforms

It links document components ordocuments together to compose

documents

STRUCTURE OF HTMLDOCUMENT

HTML generally has two parts and on codeand off code, which contains the text to be,define. Few tags dont require and off-code.Syntax:


17/43

The most important thing to keep in mind

about HTML is that its 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 codethat define the element in an HTML file, suchas 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


18/43

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 = valueE.g.: align=center

Starting your page documents tags: all HTML

file should include at east these tags.

The HTML tag the

title tagThe head tag the

body tag


19/43

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:

...

The Head Tag: this tag contains information

about yours HTML file. It may also containother tags that help you to identify your HTML

file to the outside world. The head tag is nested

within the HTML tag.

Syntax:


20/43

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

browsers title bar does not appear as part of

the page.

Syntax:

Your title: describe yours title.


21/43

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:

My first web page

..

STRUCTURE OF WEB PAGE


22/43

You can use heading to organize your web intohierarchical levels. Headding also act asseparators in a word processing documents.The top level heading (HI) actually is the title

for yours web page, i.e., it is appears inabrowser 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 majordivision in your page.

this is a top level-heading this is second level-heading this is a third level-heading..................this is a sixth level-heading


23/43

PARAGRAPH AND LINE BREAK TAGS: -P

(Paragraph) and BR (break) tags user to insertblock and lines of text on user page. The p tagis a container element, but with an impliedending. User dose not have to include the
end tag. The BR (link break) tag is an empty orstands alone, tag that simply inserts a linebreak.
EX:

for further details contact

MATHE
MANIPAL
KARNATAKA

ADDING COMMENTS: - The comment tag is astand-alone tag that enables you to includemessage for your own or anyone elses future

reference. A Comment always begins with a.

Example:

ADDING COMMENTS: - Using italic, andunderline, highlighting: HTML has two ways toinclude italic, bold and underline text on yourweb page. The first way involves using literalstags: the B (bold tags, I (Italic) and U(Underline).


24/43

Block Quotes: The black quote (Block quote)tag double-increaser block of text.

Preformatted text:- The pre tag is used todisplay a block of preformatted text in amoonscape, fixed-pitch font. One of theprimary uses of the PRE tag is to display text ina tabular or columnar format in which you want

to mark sure that the columns remain properlyaligned.

CREATING LISTS: - You can crate two types oflist:ordered and unordered. An ordered list is anumbered list, and an unordered list is abulleted list. The OL tag defines a sequentiallynumbered list of items. It is used in conjunctionwith the LI (list item) tag, which is used to tagthe individual list item in a list. The UL(unordered list tag defines bulleted list ofitems. The LI tag is inside the UL tag anddefines each item within the list.

CREATING DEFINATION LIST:- The DL (definitionlist) tag allows you to create glossaries or fistof terms tag elements: a tag to define the list(DL) a tag to be defined the term (DT) and atag to define the definition (DD).


25/43

CREATING HYPERTEXT LINKS: - One of the mainreasons to create a web page is to create linksto other pages.To do that, you need the A (Anchor) tag.

INSERTING INLINE IMAGE: - The IMG (image)tag allows you to display inline images andyour web page. The IMG tag is an empty orstand-alone, document element.

Syntax: The SRC (source) attributes is a requiredattribute that identifies the full or partial

address (URL) or just the name of the file todisplay.

HORIZONTAL RULES:- the HR (horizontal rule)tag is a stand-alone or empty, documentelement that allows you to add horizontal rulesto your web page.

There are various other features of HTML. Fore.g. User can change the size and color of fontand user can also changes the backgroundcolor. User can create form using from method.


26/43

BA333

function with arguments

Function funs (str){documents . write();document . write(argument passed tofunc() +\t\t\t=\t=+str=\n);


27/43

document . write (typeof(+str+)+\t\t\t=+tyoeof(str));document . write();document . write(;);

}func(hello world);func(true);func(123);

func(123.45);

BA3C from processing

basic form processing


28/43

Name : -


29/43

for (i=0; i< len; i++){num= document . form [i] . element. Lengthdocument . write( form+i+ has +num+

elements \n\n}document . write (


30/43

even and odd numbers

EVEN AND ODD NUMBERS document . write(even\t\t odd);

document . write(
);var i:for (i=1; i


31/43

strings example1

working with stringdocument . write (
)var str1,str2,str3;

str1= hello;str2=worldStr3-str1+str2;document . write (str1 = +str1+
);document . write(str2-+str2+
);document . write (str1 + ++str2 + =+str3+
);

document . write(str1 + ++str2 + -+(str1+ str2));


32/43

nested while statement

nested while loop

Var j=0, j=0, i=1While (I


33/43

frames


34/43

FORM

I HAVE A HOUSE
I HAVE A CAR

MALE

When a user click on a radio button thatbutton become checked and all other buttonwith the same name become unchecked.

CentroastraOPTION VALUE=MATIZ>matiz


35/43

HTML is the base of all scripting languages

Personal information

HIGHTWEIGHT< INPUT TYPE =TEXT SIZE=11>


36/43

Unordered List(UL Tag)

******** UnorderedList********
Computer Concepts Ms- windows Ms- Excel
Ms- Word Foxpro word pad Power point


37/43

WORKING WITH TEXT

\\\\ THIS IS REGULAR TEXT\\\\. USE SUP FOR SUPERSCRIPT. THIS IS REGULAR TEXT USE SUP FOR SUBSCRIPT. THISIS REGULAR TEXT USE U FOR UNDERLINE. THIS IS

REGULAR TEXT. USE FOR STRIKE FORSTRIKETHROUGH


38/43

font size

WATCH OUT THE TEXT KOMAL

JASMEEN

EKAM
MANPREET
SHEIJ

ABHI
RANA
DILRAJ


39/43

html> link list

courses DCAPGDCA


40/43

India

type=I> haryana punjab assam Pakistan


41/43

Ram krishan


42/43

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);}}


43/43

ConstructorsClass 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);}}

javascript programing 1

Documents