php - notes

(1)

(2)

HTML

HTML is a not a scripting language or programming language

But it is a simply markup language .this markup language with the pair of markup tags. The first Tag is known as opening tag (or) starting tag. The second tag is known as closing (or) end tag. HTML are used to describe the web pages

HTML can be written in notepad, notepad++, dream viewer, adov and cs5 HTML file can be saved with .html as its extension

The look end of an web page should be same on the all browsers. If it is not same the cross browser compatibility

Tags in html:

-Heading tags are h1, h2...h6

Ex: - <h1>welcome to html</h1>

. .

<h6> welcome to html</h6>

<hr>: - this tag is used for horizontal line <br>: - this tag is used for break

<p>: - this tag is used for paragraph content <b>: - this tag is used for bold content <i>: - this tag is used for italic content

<link>: - this tag is used for connect the style sheets <script>: - this tag is used for JavaScript

<big>: - this tag is used for big content <strong>: - this tag is used for strong content <blink>: - this tag is used for blink content

(3)

<del>: - this tag is used for delete the content <strike>: - this tag is used for strike

<u>: - this tag is used for underline content <ins>: - this tag is used for insert content <q>: - this tag is used for quotation content <sup>: - this tag is used for super content Ex: - (a+b) <sup> 2</sup>

<sub>: - this tag is used for subscript content Ex: - h<sub>2</sub>o

Entities:

-Entities are used to describe the symbols (or) special characters on to the web page. We have certain symbols are not available on the keyboard. So such symbols can be inserting through entities. We have mainly two types of entities they are

1. Named Entity 2. Number Entity

1. Named Entity:

-Syntax: - Ampersand + entity name + semicolon Ex: -&dollar;

2. Number Entity:

-Syntax: - Ampersand + hash + ascci value+ semicolon

Ex: - A =>A

 =>Trademark: tm

List Tags:

-List tags are two types

1. Order list: - Grouping of elements in the form of order wise through number, upper alpha

(A) lower alpha (a), upper roman, lower roman is known as order list

(4)

<html> <head> <title>List Tags</title> </head> <body> <h3>Ordered List</h3> <ol type='a' start='25'>

<li>Nokia</li> <li>Mototola</li> <li>LG-Mobile</li> <li>Sony</li> </ol> </body> </html>

2. Unorder list: - Grouping of elements in the form of disk, square circle are known as unorder

list

Ex: - unorder list.html

<html> <head> <title>List Tags</title> </head> <body> <h3>Unordered List</h3> <ul type='square'> <li>PHP</li> <li>HTML</li> <li>JOOMLA</li>

(5)

<li>MySQL</li> </ul>

<hr>

<h3>Defination List</h3> <dl>

<dt>Terms & Conditions</dt>

<dd><small><small>some large text matter write here </small></small></dd> </dl>

</body> </html>

Definition list: - this is used to maintain the heading the description on to the <dl> tag this is dl Definition term: - definition term creates the heading

Definition description: -which holds to the description of the content this is dd

Dt and dd tags are both child tags of DL

Meta tag: - Meta tag is used generate the traffic on to your web page. Meta tags can be embed

into the head tag using Meta tag

 Meta tag helps in search engine ranking on Google page and PTC(pay to click)

Ex: - Meta.html <html> <head> <title>Meta Tags</title> <meta name='keyword' content='PHP,HTML,JQUERY,CSS,HYDERABAD,Institute,Ameerpet'/>

(6)

<body>

<h2>We have changed our Website Name from UTI Bank to AXIS Bank ... Sorry for incontinent Please wait for 5 sec it would be Automatically be Redirected</h2> </body>

</html>

Link tags: - links are used to navigate from one page to another page using inter (or) external

links

The attributes we can pass are Target = “-blank” // new web page Target = “-new” // new web page Target = “-self” // open on same page

Links can also we target to mails and also we search the link on same page Ex: - linktag.html <html> <head> <title>Link Tags</title> </head> <body> <h3>Links Navigation</h3>

<a href='http://www.google.com' target="_blank">Google page</a> || <a href='http://www.facebook.com' target='_self'>Facebook Page</a> || <a href='Tags.html' target="_new"> Tags Content</a>

<hr>

<h3>Mail Concept</h3>

<a href='mailto:[email protected]'>Contact Us</a><br> <a href='mailto:[email protected],[email protected]?

[email protected]&[email protected]&subject=Please Rectify my Issue&body=Not resolved Raise the Ticket'>Contact Support & Admin</a>

(7)

<hr>

<h3>Navigating to Search the Link</h3> <h1><a name='top'>FAQ</a></h1>

<a href='#q1'>what is html ?</a><br> <a href='#q2'>what is php ?</a><br> <a href='#q3'>what is joomla ?</a><br> <a href='#q4'>what is ajax ?</a><br> <a href='#q5'>what is mysql ?</a><br> <a href='#q6'>what is jquery ?</a><br> <a href='#q7'>what is java script ?</a><br> <hr>

<p><b><a name='q1'>Answer 01: </a></b> write here some large text matter <a href='#top'>Back to Top</a>

</p>

<p><b><a name='q2'>Answer 02: </a></b> write here some large text matter <a href='#top'>Back to Top</a>

</p>

<p><b><a name='q3'>Answer 03: </a></b>write here some large text matter</p> <p><b><a name='q4'>Answer 04: </a></b>write here some large text matter </p> <p><b><a name='q5'>Answer 05: </a></b> write here some large text matter</p> </body>

</html>

Image tags: - images can be embed into the body tag using image tag. Images have extension

of jpg, png, gif etc

Placing on image on to the web page can be done by two types they are

1. Absolute path: - working from the working directory you can call the image from any ware

(8)

Ex:-<html> <head> <title>image tags</title> </head> <body> <h3><center>image tags</center></h3> <h2>absolute path</h2>

</body>

2. Relative path: - using relative path you can work with images on to the same current

working directory (or) sub folders did not out of your parent directory

Ex: -<html> <head> <title>image tags</title> </head> <body> <h3><center>image tags</center></h3> <h2>relation tags</h2>

(9)

</html>

Tables create: - tables are used to put down content in tabular structure. Table tag can be embed

into your body tag using <table>

<tr> table row</tr>

<td> table data (or) content</td> </table>

 The general attributes that we can pass in tables are Border = “<num>”

Width = “<num>” Height = “<num>” Cell padding = “<num>” Cell spacing = “<num>” Align = left/center/right Background = “image path”

Fames = “box/group/lhs/rhs/above/below/vsides/hsides Rules = all/middle/bottom

Colspan =“<num>” Rowspan = “<num>” Bgcolor = “color name”

Ex: -<html> <head> <title>table creat</title> </head> <body>

<td>employee detailsl</td> </tr>

(10)

<td>s.no</td><td>Name</td><td>designation</td> </tr> <tr> <td>1</td><td>suresh</td><td>php programmer</td> </tr> </body> </html>

Cell padding: - cell padding is used to maintain the distance between its content and from its

wall (or) border

Cell spacing: - cell spacing is used to increase the wall (or) the border

Frame set: - frame set we can divide the body into no of divisions that are passed as an

argument based on rows (or) cols working with frame set you should ensure that body tag in not given

Note: - frame set is a depreciated tag and would be working with feature versions Ex: -<html> <head> <title>Frameset Tags</title> </head> <frameset cols='30%,25%,*'>

<frame src = 'links.html' scrolling='no' > <frame src = 'entities.html' > <frame src = 'list.html' > </frameset> </html> Iframes: Ex:

(11)

-<html> <head>

<title>Iframes Tags</title> </head>

<body>

<p align='center'><a href='list.html' target='x'>List Page</a> | <a href='links.html' target='x'>Links Page</a><br><br>

</html>

Created registration form: - registration.html

<title>Register Form</title> </head>

<body>

<tr><th colspan='3'>New Registration Form</th></tr> <tr>

<td>First name</td><td>:</td><td><input type='text' name='fname' id='Fldfname' value='Rajesh' readonly></td>

</tr> <tr>

(12)

<td>Password</td><td>:</td><td><input type='password' name='pwd' id='Fldpwd'></td></tr> <tr>

<td><label for='Fldcpwd'>Confirm Password</label></td><td>:</td><td><input type='password' name='cpwd' id='Fldcpwd'></td></tr>

<tr>

<td>Gender *</td><td>:</td><td><input type='radio' name='gender' checked value='m' id='Fldgendm'/> <label for='Fldgendm'>Male</label> <input type='radio' name='gender' value='f' id='Fldgendf'/> <label for='Fldgendf'>Female</label> </td>

</tr> <tr>

<td>Hobbies</td><td>:</td><td><input type='checkbox' name='hobb[]' value='p'

id='Fldhobbp'/> Playing <input type='checkbox' name='hobb[]' value='r' i8d='Fldhobbr'/> Reading <input type='checkbox' name='hobb[]' value='s' id='Fldhobbs' disabled /> Singing</td> <tr>

<td>Country</td><td>:</td><td><select name='country'> <option value=''>Please select</option>

<option value='91'>INDIA</option> <option value='001'>USA</option>

<option value='215'>United Kingdom</option> </select></td>

</tr> <tr>

<td>Address</td><td>:</td><td><textarea name='addr' rows='5' cols='30'></textarea></td></tr>

<tr>

<td>Image Upload</td><td>:</td><td><input type='file' name='img' size='16' id='Fldimg'/></td></tr>

<tr>

(13)

(14)

(15)

Css

Css stands for cascading style sheet. Css is used to put some styles (or) colors on to the web page. Css can be embed into the html head tag using style tag. There are mainly 3 different flavors to attach this style on to the web page. Which are mainly

1. Internal style sheet 2. External style sheet 3. in-line style sheet

1. Internal style sheet:

-An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this: <head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

2. External style sheet:

-An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

(16)

hr {color:sienna;} p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

3. inline style sheet:

-An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a

paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p> We have one more style which is given by default by browsers which is not editable External style sheet can be saved with .css as its extension

Syntax:

-(Attributes) element (or) class (or) id {property: value ;} CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style. Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

Selector: - selector are identifiers which give styles based on elements, class (denoted by period

‘.’), id (denoted by ‘#’) based on selectors we have  Element selector

(17)

 Class with element selector  Id selector

 Id with element selector  Attribute selector  Pseudo selector Element selector: -Ex: - element.html <html> <head> <title>Element Selector</title> <style> h1{color:green;} </style> </head> <body> <h1>Welcome to my Website</h1> </body> </html> Class selector:

-The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "."

(18)

Ex: classselector.html & Class with element selector:

-<html> <head>

<title>Element Selector</title> <style>

h1{color:green;} //element selector .x{color:red;} // class selector //.x{font-family:impact;}

p.x{font-size:20pt;color:black;} // Class with element selector

</style> </head> <body>

<h1>Welcome to my Website</h1> <h1 class='x'>This is new Website </h1> <h1>hello This is my next line</h1> <p class='x'>Hello my next page</p> <p>Rajesh</p>

</body> </html>

Id selector:

-The id selector is used to specify a style for a single, unique element.

(19)

The style rule below will be applied to the element with id="para1":

Ex: - id-selector.html & id with element selector

<title>Element Selector</title> <style>

h1{color:green;} //element selector .x{color:red;} // class selector //.x{font-family:impact;}

p.x{font-size:20pt;color:black;} // Class with element selector #g{background:green;} //id selector

p#g{text-transform:uppercase;} //id with element selector </style>

</head> <body>

<h1>Welcome to my Website</h1> <h1 class='x'>This is new Website </h1> <h1>hello This is my next line</h1> <p class='x'>Hello my next page</p> <p class='x' id='g'>Rajesh</p> <h2 class='x' id='g'>Amith</h2> <h2 class='x' id='g'>David</h3>

(20)

<p class='x' id='g'>Praveen</p> <p class='x' id='g'>Karthik</p> </body> </html> Attribute selector: -Ex: - attribute.html <html> <head> <title>Element Selector</title> <style> .x{ color:deeppink; font-family:impact; } input[type='text']{ color:deeppink; } </style> </head> <body>

Name : <input type='text' name='name' class='x'><br> username : <input type='text' name='uname'><br>

(21)

</body> </html> Pseudo selector: -Ex: -pseudo.html <html> <head> <title>Element Selector</title> <style> p:first-letter{ font-size:30pt; color:deeppink; font-family:arial black; } p:first-line{ color:orange; } </style> </head> <body>

<p>This is my first email to all you guys his is my first email to all you guys his is my first email to all you guys his is my first email to all you guys his is my first email to all you guys</p>

(22)

</html> Ex2: -pseudo2.html <html> <head> <title>Element Selector</title> <style> a{font-size:20pt;font-weight:bold;} a:link{ color:red; } a:visited{ color:green; } a:active{ color:blue; } a:hover{ color:deepskyblue; text-decoration:none; } </style> </head> <body>

<center><a href='class-selector.html'>Selector</a> | <a href='element.html'>Elements</a></center>

</body> </html>

(23)

Css ex:

-<html> <head>

<h1> welcome to my web site </h1>

<p style = ‘color.red;’> some large text matter </p> <b> this is my next element </b>

</body> </html>

Css sheat sheet: - Font-styles :-

font-style : italic,normal

font-variant : small-caps,narmal,small,caps(capital letters)

font-weight : normal,lighter,bold, bolder, number(100->light, 900->bolder) font-size : <num> px;

font-family : family of font

Ex:

-<html> <head>

(24)

//.y{font:normal normal 100 20pt courier new;} </style>

</head> <body>

<p class='x'>some large text matter </p> <p class='y'> some large text matter </p> </body> </html> Text properties:- 1. letter-spacing : <num>px 2. word-spacing : <num>px 3. line-height : <num>px

4. text-align : left/center/right/justify ->order from left (or) right 5. text- decoration : name, blink,underline,overline,line-through

6. text-transform : capitalize(upper case/lower case(everything convert)) 7.text-indent : : <num>px (distance from line to first letter)

 The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned to the left or right, or justified. When text-align is set to "justify",

(25)

each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

 The decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes:  The text-transform property is used to specify uppercase and lowercase letters in a text.It

can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

 The text-indentation property is used to specify the indentation of the first line of a text.

Ex: -text.html <html> <head> <title>First CSS Page</title> <style> .x{ letter-spacing:1px; word-spacing:3px; line-height:1.1em; text-indent:80px; text-align:justify; text-decoration:none; text-transform:capitalize; } </style> </head> <body>

(26)

</body> </html>

Background property: -CSS background properties are used to define the background effects of an element.

background-color : ‘color name’;

CSS background properties are used to define the background effects of an element.

background-image : url(image path name);

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

background-repeat : no-repeat,reapt-x,reapt-y,repeat(*);

By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange, like this:

background-attachment : fixed,scroll;

background-position :{x,y}left,center,right,bottom,top

When using a background image, use an image that does not disturb the text. Showing the image only once is specified by the background-repeat property: //background : order wise

Ex: -<html> <head> <title>First CSS Page</title> <style> /*body{

(27)

background-color:silver; background-image:url(2.png); background-repeat:no-repeat; background-attachment:fixed; background-position:280px 80px; }*/ body{

background:gold url(2.png) no-repeat fixed right bottom; }

</style> </head> <body>

<h1> some large text matter </h1> <h1> some large text matter.</h1> <h1> some large text matter.</h1> <h1> some large text matter.</h1> <h1> some large text matter.</h1> </body>

</html>

List properties:

-list-style-type : none,disk,circle,square,decimal,upper-alpha,lower-alpha,upper-roman,lower-roman;

list-style-position : outside (*) / inside; list-style-image:url(image path name);

Ex: - listproperties.html

(28)

<title>First CSS Page</title> <style> ul.x{ background:#ccc; list-style-type:none; list-style-position:outside; list-style-image:url(tick.png); } ul.x li{ background:gold; padding:5px; margin:2px; } ul.x li.c{ list-style-image:url(cross.png); } </style> </head> <body> <ul class='x'>

<li>We Train PHP</li>

<li>We Train CMS that is Joomla,Drupal</li> <li>We Train SAP</li>

<li class='c'>We don't Train .NET</li>

<li class='c'>We don't Train Ruby on Rails</li> </ul>

(29)

</body> </html>

Box properties: - Padding : inside element

Margin auto = center

Overflow = visible (*), hidden, auto, scroll

Ex: -<html> <head> <title>BOX properties</title> <style> //body{margin:0px;} p{text-align:center;} .z{ background:#ccc; padding:15px; width:50%; height:80px; margin:auto; overflow:auto; text-align:justify; } </style> </head> <body> <p>

(30)

<input type='checkbox' name='t&c' />Terms & Conditions <p class='z'>

Some large text matter</p> </p> </body> </html> Border: -border-width : <num>px; border-style : solid,groove,inset,outset,double,dotted,dashed; border-color : <color name>

//border: order wise

Ex: -border.html <html> <head> <title>BOX properties</title> <style> .a{ border-width:5px; border-style:solid; border-color:gold; }

.b{border:10px dashed red;padding:10px;} .c{

border-bottom:5px double black; padding:10px;

(31)

</style> </head> <body> <p class='a'>

This is a place for social network where people would have the choices to vote there views </p>

This is a place for social network where people would have the choices to vote there views </p>

This is a place for social network where people would have the choices to vote there views </b>

</body> </html>

Div tag: - div tag stand for division tag div tag is the block level element. A block level element

creates a block with coming left and right breaks in it

Ex:- div tag, p tag, h1 to h6, table tag, ul and li tags

In-line element: - these particular elements will take the content span only and does not have

breaks init

Span tag is the natural tag

Ex: -<html> <head> <title>in-line element</title> <style> h1 {

(32)

} b {

Background: gold; }

a.{text-align : center; background : yellow; display : block; } </style> </head> <body> <h1>hello</h1><b>hello</b><i>hello</i><p>hello</p> <hr>

<span class = ‘a’>hello</span> <div class = ‘a’>hello</div> <hr>

<h3> converting block & inline & respectively<h3> <h1> hello</h1>

</bold> </html>

Display property:

-Visibility : - we have visible (or) hidden Display: - none, in-line, block;

Padding : - <num>px all sides

Padding: top left 0px 0px Bottom right

(33)

Margin: <num> all sides

Margin : top right bottom left 0px 0px 0px 0px Ex: -<html> <head> <title>display property</title> <style> div{ background:blue;color:#fff;padding:10px;font-size:20pt;margin:2px; } .h{visibility:hidden;} .v{visibility:visible;} //.n{display:none;background:#ddd} //.i{display:inline;} </style> </head> <body> <div>Normal Element</div>

<div class='h'>Hidden Element</div> <div class='v'>Visible Element</div> <hr><br><br>

<div>Display Element</div>

<div class='n'>Please Pay the Bill to avoid late payment charges</div> <div class='i'>Display Inline Element</div>

(34)

</body> </html>

Templates:

-Position properties: - position in css we have absolute relative and fixed position

Relative position: - working from the current position we can move the element any ware on to

the web page but cannot be moved on the top of the position place

Absolute & fixed position: - placing from the current position we can move the element to all

corner of the web page and also one top of the position place .once an element declare as fixed (or) absolute this will turn to in-line element and this will also carry ‘7’ index init

Ex: -position.html <html> <head> <title>Position properties</title> <style> div{background:blue;color:#fff;font-size:17pt; font-weight:bold;padding:10px;margin:4px;} .r{background:gold;color:#000;position:relative;left:30px;top:120px;} .a{background:blue;position:absolute;top:50px;left:6px;} .f{background:deeppink;color:#000;position:fixed;bottom:0px;right:0px;} </style> </head> <body> <div>Normal Position</div>

<div class='a'>Absolute Position</div> <div class='r'>Relative Position</div>

(35)

<div class='f'>Fixed Position</div> <h1>some large text matter </h1> <h1> some large text matter </h1> <h1> some large text matter </h1> <h1> some large text matter </h1> </body> </html> Hmenu: -Ex: -hmenu.html <html> <head> <title>Position properties</title> <style> ul#hmenu{ list-style-type:none; text-align:center; margin-top:50px; } ul#hmenu li{ display:inline; margin:0px -2px; } ul#hmenu li a{ text-decoration:none; font-size:17pt;

(36)

padding:10px 20px; font-weight:bold; }

ul#hmenu li a:link,ul#hmenu li a:visited,ul#hmenu li a:active{ background:#000; color:#fff; } ul#hmenu li a:hover{ background:#ddd; color:#000; } </style> </head> <body> <ul id='hmenu'> <li><a href='#'>Home</a></li> <li><a href='#'>About-Us</a></li> <li><a href='#'>Products</a></li> <li><a href='#'>Contact Us</a></li> <li><a href='#'>Login</a></li> </ul> </body> </html> Vmenu: -Ex: -vmenu.html <html>

(37)

<head> <title>Position properties</title> <style> ul#vmenu{ list-style-type:none; padding:0px; background:gold; width:120px; margin:0px; } ul#vmenu li a{ text-decoration:none; } </style> </head> <body> <ul id='vmenu'> <li><a href='#'>Home</a></li> <li><a href='#'>About-Us</a></li> <li><a href='#'>Products</a></li> <li><a href='#'>Contact Us</a></li> <li><a href='#'>Login</a></li> </ul>

</body> </html>

(38)

-Ex:- aboutus.html <html> <head> <title>Web Layout</title> <style> body{margin:0px;} div{background:brown;color:#fff;} .h{text-align:center;} .l{background:green;width:150px;float:left;} .r{background:green;width:150px;float:right;} .m{background:#fff;color:#000;margin:0px 150px;padding:20px;text-align:justify;} div.m img#img1{float:right;} div.m img#img2{float:right;padding:10px;clear:both;} </style> </head> <body> <div class='h'>Heading</div> <div class='l'> <ul id='vmenu'> <li><a href='layout.html'>Home</a></li> <li><a href='aboutus.html'>About-Us</a></li> <li><a href='#'>Products</a></li>

<li><a href='#'>Contact Us</a></li> <li><a href='#'>Login</a></li> </ul>

(39)

<div class='r'>Right Content</div>

<div class='m'><h2>We Are in About us Page</h2> </div> </body> </html> Layout: Ex: -<html> <head> <title>Web Layout</title> <style> body{margin:0px;} div{background:brown;color:#fff;} .h{text-align:center;} .l{background:green;width:150px;float:left;} .r{background:green;width:150px;float:right;} .m{background:#fff;color:#000;margin:0px 150px;padding:20px;text-align:justify;} div.m img#img1{float:right;} div.m img#img2{float:right;padding:10px;clear:both;} </style> </head> <body> <div class='h'>Heading</div> <div class='l'> <ul id='vmenu'> <li><a href='layout.html'>Home</a></li>

(40)

<li><a href='aboutus.html'>About-Us</a></li> <li><a href='#'>Products</a></li>

<li><a href='#'>Contact Us</a></li> <li><a href='#'>Login</a></li> </ul>

</div>

<div class='r'>Right Content</div>

<div class='m'>some large text matter write here </div> </body>

</html>

(41)

JavaScript

 JavaScript is client side scripting language.  JavaScript is the case sensitive.

 JavaScript can be used for AJAX integration and validation.

 JavaScript can be embed into the head tag and body tag using script tag  JavaScript can be saved with .js as its extension.

(42)

Content:

 Variables  Datatypes

 Operators (Assignment, Arthamatic, Post/Pre [Inc/Dec], Comparission, Relational, Conditional, Logical,Ternary)

 Alert,prompt,confirm

 Built in Functions (Arrays,Date,Math,String)  DOM (Document Object Module)

 Navigator,images,screen,location,history

 Document – (getElementById, getElementsByTagName, getElementsByName)  Events :

 General Events (onclick(), ondblclick(), onload(), onunload(), onreset(), onsubmit(), onfocus(), onblur(), onchange())

 Mouse Events (onmouseover(), onmousemove(), onmousedown(), onmouseout() )

 Key Board Events – (onkeyup() , onkeydown() )

Document. write (): - document.write is the printing method in javascript.which will output

statement to the browser

Ex: -first.html

<script src='ext.js' type='text/javascript' language='javascript'></script> <script>

document.write('This is Called from Head Tag<br>'); </script>

</head> <body>

<h1>Welcome</h1> <script>

(43)

document.write('This is Called from Body Tag<br>'); </script>

</body> </html>

ext.js:-document.write('<h1>This is called from External Page</h1>');

Variables: - variable are case sensitive. Declaring a variable in JavaScript we have used with

var variable name = value;

Variables are "containers" for storing information.

Ex: - var a = 10; var = default

The correct method to declare are Var a = 10;

Var_a = 10;

Var first-name = ‘suresh’; Var firstName = ‘suresh’; Var $name = ‘suresh’;

Wrong

method:-Var #name = ‘suresh’; Var 1a = 10;

Var first name = ‘suresh’;

Ex: -variables.html

(44)

document.write('This is Called from Head Tag<br>'); firstName = 10;

document.write('<h1>The Value of a is :'+firstName+'</h1>'); </script> </head> <body> <h1>Welcome</h1> </body> </html> Data types:

-String: - collection of characters inside a single (or) double cotation are known as string

working with single cotation and adding double cotation in it is valid.but adding single cotation inside a single cotation is not valid

Ex: -datatypes.html <html> <head> <script> var a = 10; document.write('<h1>'+a); document.write(' - '); document.write(typeof(a)); document.write('<br>');

(45)

var f = 10.25; document.write(f); document.write(' - '); document.write(typeof(f)); document.write('<br>'); firstname = 'Rajesh'; document.write(firstname+' - '+typeof(firstname)+'<br>'); firstname = firstname+' Kumar';

document.write(firstname+' - '+typeof(firstname)+'<br>'); firstname += 'B';

document.write(firstname+' - '+typeof(firstname)+'<br>'); document.write('<hr>String Methods<hr>');

document.write('i\'ll Pay the Bill Tomorrow'); </script> </head> <body> <h1>Welcome</h1> </body> </html>

Operators:-Assignment operator: - = is used to assign values.

(46)

Assignment operators are used to assign values to JavaScript variables. Ex:-<html> <head> </head> <body> <script>

document.write('<h1 align="center">Assignment Operator</h1>'); var x = 10;

document.write("The Value is : "+x); </script>

</body> </html>

Arithmetic operator: - The arithmetic operator + is used to add values together.

Arithmetic operators are used to perform arithmetic between variables and/or values.

Ex: -<html> <head> </head> <body> <script>

document.write('<h1 align="center">Arthamatic Operator</h1>'); a = 5; b = 3;

(47)

document.write("Addition : "+(a+b)+'<br>'); document.write("Multiplication : "+(a*b)+'<br>'); document.write("Division : "+(a/b)+'<br>'); document.write("Minus : "+(a-b)+'<br>'); document.write("Modulus : "+(a%b)+'<br>'); </script> </body> </html>

Comparison operator: - Comparison operators are used in logical statements to determine

equality or difference between variables or values.

Ex: -<html> <head> </head> <body> <script>

ocument.write('<h1 align="center">comparision Operator</h1>'); if(10 != '10'){

document.write('<h2>Correct</h2>'); } else {

document.write('<h2>Not Correct</h2>'); }

(48)

m = 10;

n = (m++)+(++m)+(m++)+(++m);

document.write('The Value of m is : '+m+'<br>The Value of n is : '+n+'<br>'); </script>

</body> </html>

Relational operator: - < , > , <= , >= Logical operator: - &&(and) -- ||(or) Ternary operator: -

Syntax: -

Var a= 10;

Type = (a%2 == 0)? ‘even number’: ‘odd number’; //document.write(“the value you entered is : ”+type); document.write(type); Ex: - ternary.html <html> <head> </head> <body> <script> var x = 11;

type = (x%2==0)?'Even Number':'Odd Number';

(49)

student = 'kalpana'; perc = 35;

gender = 'f';

status = (perc>55)?'Pass':'Fail';

document.write(student+' you have '+status+'ed the Exam. '+((gender == 'm')?'He':'She')+' Has got '+perc+'% in the Exam');

</script> </body> </html> Ex of pay bill: -<html> <head> <style> .x{background:#ddd;color:deeppink;font-weight:bold;font-family:arial black;letter-spacing:5px;margin:auto;width:60%;padding:10px;text-align:justify;} </style> </head> <body> <script> credit = 101; curr_date = 15; pay_date = 13;

(50)

document.write("<div class='x'>Please Pay the Bill to avoide Late Payment Charges</div>");

}

</script>

<p>some large text write here </p> </body>

</html>

Conditions:

-If else: - whenever a condition is ‘if’ it is true that part of the constructor will be excuted.if

condition is fail else part would get executed

 Conditional statements are used to perform different actions based on different conditions

 use this statement to execute some code if the condition is true and another code if the condition is false Syntax: If (cond) { //code } else { // code };

(51)

If else if: - if else if (or) ladder condition will take more than one condition (or) multiple

conditions. If all the conditions fail in if else if constructor then only else part get executed  use this statement to select one of many blocks of code to be executed

Syntax: If(cond) { //code } else if (cond) { //code } else if (cond) { //code } . . . else {

(52)

//default value; }

Switch: - use the case in-order wise. this is main concept in switch case

 use this statement to select one of many blocks of code to be executed

 Conditional statements are used to perform different actions based on different conditions.

 Use the switch statement to select one of many blocks of code to be executed.

Syntax:

switch(n) {

case 1

execute code block 1 break;

case 2:

execute code block 2 break;

default:

code to be executed if n is different from case 1 and 2 } Ex: -<script> type = 'ddlj'; switch (type){ case 'Ravan':

document.write('This is a good Movie ... Review Rating is : 5 star<br>'); break;

case 'Titanic':

(53)

break; case 'don':

case 'rambo':

case 100:

document.write('This is a 100 good Movie ... Review Rating is : 3 star<br>'); break;

case 1:

case 2:

default:

document.write('Movie information is not Available<br>'); break;

}

</script>

Looping methods:

(54)

Syntax: Syntax:

Initialize method Initialize While (cond) do { {

//code //code

} }

While: - Working with while loops it will first check the initialize part and checks the

condition. If condition is true it will get into the constructor and takes place until condition fail and comes out of the constructor.

 loops through a block of code while a specified condition is true

Do-while: -this will also checks the initialize part .but for only first time it will get into the

constructor and execute the code and checks the conditions later and if condition is true looping takes place (or) else it come out of the constructor with at least single time execution code

For-loop: - for loop first initialize condition an inc/dec will be done on same (single) line for

the every first time it will initialize with part them check within condition if condition is true the constructor will get excuted.condition fail will come out of the for loop (constructor)

 Loops execute a block of code a specified number of times, or while a specified condition is true.

Syntax:

For (initialize; condition; inc/dec )

{

//code }

(55)

-<script>

document.write("Day - <select name='Day'>"); document.write("<option value=''>Day</option>"); day = 1; while(day<=31){ document.write("<option>"+day+"</option>"); day++; } document.write("</select>");

document.write(" Month - <select name='Month'>"); document.write("<option value=''>Month</option>"); month = 1; do{ document.write("<option>"+month+"</option>"); month++; } while(month<=12); document.write("</select>");

document.write(" Year - <select name='Year'>"); document.write("<option value=''>YYYY</option>"); for(year=2012;year>=1920;year--){

document.write("<option>"+year+"</option>"); }

(56)

document.write("</select>"); </script>

Array: - a variable which can hold more than one value is none as array (or) super variable as

array can be defined is JavaScript as

Var a = new Array (values); // a->super variable

 To fined the length of the array we can go with length = array name.length;

 If the array index is been initialize more than the current index++ then memory is vested in JavaScript

 In arrays initializing string index the printing method will not work in JavaScript

Ex: - document.write() (or) looping method will not able to print string indexes

 While, do-while , for-loop will not print string indexes in JavaScript so to print string indexes we can go with

Syntax: - for (var name in Array name)

 For it is key word in JavaScript which will print the string index  The Array object is used to store multiple values in a single variable.

 An array is a special variable, which can hold more than one value, at a time. Create an Array

An array can be defined in three ways.

The following code creates an Array object called myCars:

1: var myCars=new Array(); // regular array (add an optional integer myCars[0]="Saab"; // argument to control array's size)

myCars[1]="Volvo"; myCars[2]="BMW";

2: var myCars=new Array("Saab","Volvo","BMW"); // condensed array 3: var myCars=["Saab","Volvo","BMW"]; // literal array

(57)

var a = new Array(10,20,30,40);

document.write('The Array is : '+a+'<br>');

document.write('Length of Array : '+a.length+'<br>'); document.write('Index at 2 : '+a[2]+'<br>');

a[2] = a[2]*2;

document.write('The Array is : '+a+'<br>'); a[4] = 'New Value';

document.write('The Array is : '+a+'<br>'); var b = new Array();

b[0] = 100; b[1] = 200; b[2] = 300; b[3] = 400; b['Name'] = 'Rajesh'; b['Age'] = 30; b[7] = 700; b[10] = 1000;

document.write('<hr>Single string Index : '+b['Name']+'<hr>'); document.write('The Array is : '+b+'<br>');

for(i=0;i<b.length;i++){

(58)

} document.write('<hr>'); for(c in b){ document.write(c+' = '+b[c]+'<br>'); } document.write('<hr>'); var d = [10,20,30]; document.write('The Array in d is : '+d+'<br>'); document.write('The Array in d is : '+d.length+'<br>'); document.write('<hr>');

var e = {'Name':'Rajesh','Age':30,10:20,'Status':'Active'}; document.write('The Array in d is : '+e+'<br>');

for(i=0;i<e.length;i++){

document.write('Index at : '+i+' = '+e[i]+'<br>'); }

for(c in e){

document.write(c+' = '+e[c]+'<br>'); }

</script>

Double dimensional array: -an array can have more than one array is called double

dimensional array

Ex: - douledimensionarray.html

(59)

<head> <script> var a = [[1,'Ajay',[45,62,49,72,55,84]],[2,'Rajesh',[48,62,94,72,38,62]],[3,'Suresh', [48,63,82,97,45,28]]]; //document.write(a[1][1]); document.write('Name is : '+a[2][1]);

document.write("<table border='1' align='center' width='60%' >");

document.write("<tr><th colspan='9'>Student Marks Memo Report</th>");

document.write("<tr><td rowspan='2'>Roll No</td><td rowspan='2'>Name</td><td colspan='6' align='center'>Subjects</td><td rowspan='2'>Pass/Fail</td></tr>");

document.write("<tr><td>English</td><td>Hindi</td><td>Telugu</td><td>Maths</td><td>Sc ience</td><td>Social</td></tr>"); document.write("<tr><td>"+a[0][0]+"</td></tr>"); </script> </head> <body> <tr><td><script>document.write(a[1][0]);</script></td><td><script>document.write(a[1] [1]);</script></td></tr> </table> </body> </html> Array builtin:

-Join: - join is the pre-defined key-word in the JavaScript .which will convert the given array

(60)

Concat: - concat is joining more than array in single array is called concat

Reverse: - reverse in JavaScript the array last being is first. First is last without (descending

order) the original array will also get affected. If we use reverse function

Sort: - sort is nothing but given the order is ascending order

Unshipt: - unshipt will add the value at the starting of the array. The variable use for unshift

will holds the length of the array and the original array would get affected

Shift: - shift function will not hold any arguments should will remove the starting value of the

array. The variable unshift will hold the remove the value

Push: - push is nothing but insert the value into the array at the end of array is called push Pop: - pop is nothing but remove the last value in the array is called the pop

Ex: -arraybuiltin.html

var a = new Array('This','is','my','new','car');

document.write('The Original Array is : '+a+'<br>'); b = a.join(' ');

document.write('Join Method : '+b+'<br>'); var a = new Array(10,20,30);

var b = new Array(40,50); var c = new Array(60,70,80);

document.write("Concat Two Arrays : "+a.concat(b)+"<br>");

document.write("Concat All Given Array : "+a.concat(b.concat(c))+"<br>"); var a = new Array('Ajay','Raju','Amith','Zebra','Arjun');

(61)

document.write("Reverse of an Array : "+b+'<br>'); document.write("Original Array : "+a+'<br>');

var a = new Array('Ajay','Raju','Amith','Zebra','Arjun'); b = a.sort();

document.write("Assending Order : "+b+'<br>'); document.write("Original Array : "+a+'<br>'); b = a.reverse();

document.write("Reverse With Desending Order : "+b+'<br>'); document.write("Original Array : "+a+'<br>');

var x = new Array(10,20,30); b = x.unshift(5);

document.write("Unshift Method : "+x+'<br>'); document.write("The Value Stored in B : "+b+'<br>'); var x = new Array(5,10,20,30);

b = x.shift();

document.write("shift Method : "+x+'<br>');

document.write("Removed Value is stored B : "+b+'<br>'); var x = new Array(5,10,20,30);

b = x.push(40);

document.write("Push last Value to Array Method : "+x+'<br>'); document.write("B holds the length of the Array: "+b+'<br>'); var x = new Array(5,10,20,30);

(62)

b = x.pop();

document.write("Pop Removes last Value in Array : "+x+'<br>'); document.write("B holds the Removed Value: "+b+'<br>');

</script>

Functions:-functions in javascript are case sensitive once declare a function name and try to

re-declare. The same function name will overwrite preview function name. Functions are used to debug the code and analyze the errors easily. Working with length of the code will be reduced. We have mainly 4 types of the functions in JavaScript that is

1. Function without arguments and return value 2. Function with arguments and no return value 3. Function with return value and no arguments 4. Function with arguments and return value

Syntax:

-Function function name (arguments, arg) {

//code }

1. Function without arguments and return value Ex:

-<script> test();

function test(){

(63)

document.write('This is my function Content<br>'); }

function test1(){

document.write('Overwritten is done on the previous printing methods<br>'); } test(); test(); </script> <body> <script> test(); </script> </body>

2. Function with arguments and no return value

Ex:-<style> .error{background:gold;color:green;padding:10px;margin:auto;width:60%;font-size:18pt;} .success{background:black;color:#fff;padding:10px;margin:auto;width:60%;font-size:18pt;} </style> <script> function welcome(name){ document.write("Welcome ! "+name+'<br>');

(64)

} welcome('Rajesh'); welcome('Amith'); function statement(type,message){ document.write("<div class='"+type+"'>"+message+"</div>"); } //statement("error","Welcome Guest ! "); statement("success","Welcome Rajesh"); </script>

3. Function with return value and no arguments Ex: -<script> function test(){ document.write('This is line 01<br>'); document.write('This is line 01<br>'); return 10 2; document.write('This is line 01<br>'); document.write('This is line 01<br>'); } test(); var x = test(); document.write('The Value in x is : '+x+'<br>');

(65)

</script>

4. Function with arguments and return value

Ex:-<script>

function square(num){ return num*num; }

document.write('The Square root of 5 is : '+square(5)+'<br>');

document.write('The Square root of 5 is : '+square(square(5))+'<br>'); </script>

Math built-in function: - in JavaScript we have mainly seven kinds of math object which are

pre-defined and can be called respective key-words. Which are included in JavaScript library

Ex: -math.html

document.write('<h2>'+txt+'</h2>') }

r("<u>Javascript Predefined Math Constant Object </u>"); r('Eulers Constant : '+Math.E);

r('Pi Value : '+Math.PI);

r('SQRT OF 2 : '+Math.SQRT2); r('Natural Log 2: '+Math.LN2); r('Natural Log 10 : '+Math.LN10);

(66)

r('Log base 2 of Eulers : '+Math.LOG2E); r('Log base 10 of Eulers : '+Math.LOG10E);

r("<u>Javascript User - defined Math Object </u>"); r('Max Value : '+Math.max(10,20,30));

r('Min Value : '+Math.min(10,20,30)); r('Sqrt Value : '+Math.sqrt(25)); r('2 pow 4 : '+Math.pow(2,4)); r('Absolute Value : '+Math.abs(-9)); r('Ceil Value : '+Math.ceil(2.11111)); r('floor Value : '+Math.floor(2.9999)); r('round Value : '+Math.round(2.5111111)); r('Random Number : '+Math.random());

r('Number Between 1 to 1000 : '+Math.round(Math.random()*1000)); </script>

String builtin function: -Ex: - stringbuilt.html

document.write(txt+'<br>'); }

var str = "lamp Institute"; r('String Value = '+str);

(67)

r("Length of the String = "+str.length); r("Color of String = "+str.fontcolor('green')); r('Upper Case = '+str.toUpperCase()); r('Lower Case = '+str.toLowerCase()); r('Big Font = '+str.big());

r('Bold Font = '+str.bold()); r('Small Font = '+str.small()); r('Italic Font = '+str.italics()); r('Superscript = '+str.sup()); r('sub script = '+str.sub());

r('<hr><h2><u>Slice Function([begin, stop]) </u></h2>'); r('Slice(4) = '+str.slice(4));

r('Slice(4,8) = '+str.slice(4,8)); r('Slice(-9) = '+str.slice(-9)); r('Slice(-9,8) = '+str.slice(-9,8)); r('Slice(-9,-3) = '+str.slice(-9,-3));

r('<hr><h2><u>Substring Function([From, to]) </u></h2>'); r('substring(4) = '+str.substring(4));

r('substring(4,8) = '+str.substring(4,8)); r('substring(4,2) = '+str.substring(4,2)); //r('substring(-9) = '+str.substring(-9));

(68)

r('substr(4) = '+str.substr(4)); r('substr(5,8) = '+str.substr(5,8)); r('substr(-9) = '+str.substr(-9)); r('substr(-9,2) = '+str.substr(-9,1)); r('CharAt(0) = '+str.charAt(1));

r('charCodeAt(1) = '+str.charCodeAt(1)); //ascill Value of Index mob = 'Z123456789'; r('charCodeAt = '+mob.charCodeAt(0)); r('Indexof = '+str.indexOf('T'));//-1 r('lastIndexof = '+str.lastIndexOf('t')); r('indexOf = '+str.indexOf('t',9)); r('Search = '+str.search('z'));//-1 r('Match = '+str.match('z'));//null </script> Mobile function: -Ex: -mob.html <script> function r(txt){ document.write(txt+'<br>'); } mob = "8855644045";

(69)

r(isValidMobile(mob)); function isValidMobile(val){

if(val.length != 10){

return "Please Enter 10-Digit Mobile Number"; }

f = val.charAt(0);

if(f == '7' || f == '8' || f == '9'){ } else {

return 'Please Check the First Digit of Number & try Again'; } return isNumeric(val); } function isNumeric(val){ for(i=0;i<val.length;i++){ ascii = val.charCodeAt(i); if(ascii < 48 || ascii >57){

return 'Only Numbers Allowed Please Check again'; }

}

return 'Valid Mobile Number'; }

(70)

Date function: - date function can be defined with variable is equal to new date. This function

is pre-defined in JavaScript which will explain the system timing (or) running the domain it will capture the running domain

Get time (): -this is unique time constant which is created find generate number of milliseconds

right from night jan 1 1970

Ex: -date.html

document.write(txt+'<br>'); }

var d = new Date(); r('The value in d is : '+d);

r('Unix Time Constant that is Midnight Jan 01,1970 (no of millseconds : ) '+d.getTime()); r('Date : '+d.getDate());

r('Day : '+d.getDay());

r('Month : '+(d.getMonth()+1));// 0 -11 r('Year : '+d.getYear());//works only in ie... r('FullYear : '+d.getFullYear()); r('Hours : '+d.getHours()); r('Minutes : '+d.getMinutes()); r('Seconds : '+d.getSeconds()); r('Time is : '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds()); </script>

(71)

DOM : dom is contain this layers

IMAGES LOCATIONS

SCREEN---> Get Element ById DOCUMENTS---> GetElementByTagName NAVIGATOR--- > GetElementByName EMBED Ex: -dom.html <script> function dochange(){

document.testForm.fname.value = alert("Please Enter"); document.testForm.fname.value = 'Enter Name';

document.testForm.lname.style.border="2px solid red"; document.testForm.lname.style.width="200px";

} </script> <body>

First Name : <input type='text' name='fname' /><br> Last Name : <input type='text' name='lname'/><br>

(72)

</body>

Get Element ById:- this particular function will match the id of the element and that particular

matching function will get executed

Ex: -getElementById.html <script> function dochange(){ var x = document.getElementById('test').value; document.getElementById('test').value = x.toUpperCase(); document.getElementById('test').style.color = 'red'; } </script> <body> <form name='testForm'>

First Name : <input type='text' name='fname' id='test' onblur="dochange();"/><br> First Name : <input type='text' name='lname' id='fldtest' onkeyup="dochange();"/> </form>

</body>

GetElementByTagName:- this particular function will match tag name and excute the function

which we are passing as a tag name

Ex: -getElementsByTagName.html

function dochange(){

(73)

for(i=0;i<a.length;i++){

a[i].style.width = '400px'; a[i].style.background = '#ddd'; a[i].style.border = '4px dotted green'; }

}

</script>

<body onmouseover='dochange();'> <h1>Welcome to My Web Page</h1> <p>This is my First Page</p>

<p>This is my First Page</p> <p>This is my First Page</p> <p>This is my First Page</p> <div>What is Social Hub</div> </body>

GetElementByName:- this particular function will match element name and that part of the

function will get excutes

Ex: -getElementsByName.html <script> function dochange(){ var a = document.getElementsByName('x'); for(i=0;i<a.length;i++){ a[i].style.width = '400px';

(74)

a[i].style.background = '#ddd'; a[i].style.border = '4px dotted green'; }

}

</script>

<body onmouseover='dochange();'> <h1>Welcome to My Web Page</h1> <p>This is my First Page</p>

<p>This is my First Page</p> <p>This is my First Page</p> <p>This is my First Page</p> <div>What is Social Hub</div> </body>

NOTE1:- as ids are unique we have singular matching so we can getElementById as singular

NOTE2:-GetElementByTagName & ByName works the array format and these are plural

Events: - whenever an event is trigger and then that particular matching function will excuted innerHTML:-innerHTML is used to push the dynamic values on to the HTML page

set Interval: - setInterval is pre-defined key-word in JavaScript which takes 2 arguments the

first argument can be express (or) function the second argument can be no of milliseconds

Alert: - alert gives you a single button option until it is click It will allowed all you navigate on

the server

Ex: -alert.html

(75)

alert("Please Agree with Our Terms & condition"); </script>

<body> Welcome </body>

Confirm: -confirm is used two options until something is being click. It won’t allowed to

navigate the server and if it is click based on the values it will moved to the respect pages

Ex: -confirm.html

var x = confirm("Are You legally 18+ then enter to site"); if(x == true){

document.write("Welcome to my Terrorist Site"); } else {

document.write("Thank You for leaving Please <a href='http://www.google.com'>Click Here</a>");

}

</script> <body> </body>

Eval: -eval is pre-defined function JavaScript which will evaluate the given function in between

the JavaScript (function)

parseINT: -this is pre-defined function in JavaScript which will convert the floating value into

integer value

(76)

parseFLOOR:-Ex: - innerHTML & set Interval time.html <script> function r(txt){ document.write(txt+'<br>'); } function currTime(){ var d = new Date();

var time = timeFormat(d.getHours())+':'+timeFormat(d.getMinutes()) +':'+timeFormat(d.getSeconds());

return 'Present Time : '+time; }

function timeFormat(val){

return ((val<10)?'0':'')+val; }

function writeTime(id){

return document.getElementById(id).innerHTML = currTime(); }

</script> <body>

r(currTime());

(77)

</script> </div> </body> Prompt: -Ex: - prompt.html <script>

var x = prompt("Please Enter User Name"); document.write("Welcome ! "+x+'<br>'); </script> <body> <h1>Welcome to my webpage</h1> </body> Calculating: - parseINT Ex: - calculating.html <script> function sumcal(){

if(confirm("Are You Shore")){

document.testForm.result.value = parseInt(eval(document.testForm.count.value));

} else {

alert("Please Try Again"); }

(78)

</script> <body>

<Strong>Please Enter the Expression</strong><br><br>

Calculate the Given Value : <input type='text' name='count' value='2+2'/><br><br> <input type='button' value='Calculate !' onclick="javascript:sumcal();"/><br><br> <big><b>Result</b></big> : <input type='text' name='result' value=''/><br> </form> </body> Limit text: -Ex: -limittext.html <script> function limitText(){ var s = document.testForm.Msg.value; len = s.length; c = 10 - len; if(len>10){ m = s.substr(0,10); document.testForm.Msg.value = m; c = 0; } document.testForm.count.value = c;

(79)

} </script>

Gallery create: -Ex: - gallery.html

<body>

<div class='header'>Gallery Thumb View</div> <div class='thumb'> <img src='1.jpg' onclick="alterImage('b',this.src);"/> <img src='2.jpg' onmouseover="alterImage('b',this.src);"/> <img src='3.jpg' ondblclick="alterImage('b',this.src);"/> <img src='4.jpg' onclick="alterImage('b',this.src);"/> </div>

(80)

<input type='button' class='buto' value='Zoom In' onclick="zoom('b','+');"/> <input type='button' class='buto' value='Normal' onclick="zoom('b','0');"/> <input type='button' class='buto' value='Zoom Out' onclick="zoom('b','-');"/> </div> <img src='1.jpg' id='b'/> </div> </body> </html> Gallery.css: -body{ background:lightblue; margin:0px; } .header{ background:darkblue; height:80px; color:#fff; text-align:center; font-size:18pt; font-family:courier new;

(81)

letter-spacing:5px; font-weight:bold; line-height:70px; } .thumb{ text-align:center;margin:20px 0px 10px 0px; } .thumb img{ width:120px; height:100px; cursor:pointer; } .big{ text-align:center; } .big img{ width:400px; height:300px; } .butob{ margin-bottom:10px; }

(82)

.buto{ font-size:18pt; padding:8px 20px; background:#000; color:#fff; } .buto:hover{ background:#ddd; color:#000; cursor:pointer; } gallery.js: -function alterImage(id,source){ document.getElementById(id).src = source; } function zoom(id,type){ var min_W = 120; var min_H = 100; var max_W = 1000; var max_H = 900; var n_W = 400; var n_H = 300;

(83)

img = document.getElementById(id); var curr_W = parseInt(img.width); var curr_H = parseInt(img.height); switch (type){ case '+': new_W = curr_W+(curr_W*.1); new_H = curr_H+(curr_H*.1); break; case '-': new_W = curr_W-(curr_W*.1); new_H = curr_H-(curr_H*.1); break; case '0': new_W = n_W; new_H = n_H; break; }

if((new_W<min_W || new_H<min_H) || (new_W>max_W || new_H>max_H)){ } else {

img.style.width = new_W; img.style.height = new_H; }