HTML Notes

HTML: HTML is a Markup language which is used to presenting web page.
Marquee Tag for Right direction <html> <body> <MARQUEE WIDTH=100% BEHAVIOR=SCROLL Direction=Right BGColor=yellow LOOP=3> This is an example of a scrolling marquee...</MARQUEE></FONT> </body> </html> Marquee Tag for Upward Direction: EX: <marquee width="100%" behaviour="scroll" Direction="up" color:Red Bgcolor="yellow"
loop="3">Hello</marquee> <html> <marquee width="100%" behaviour="scroll" Direction="zigzag" color:Red Bgcolor="yellow" loop="3">Hello</marquee> <!..Hi this is a comment..> </html>
DOCTYPE: Doctype is nothing but which version HTML document uses. It is useful for SGML Validators. HTML Comment Tag:
<html> <marquee width="100%" behaviour="scroll" Direction="zigzag" color:Red Bgcolor="yellow" loop="3">Hello</marquee> <!..Hi this is a comment..> </html>
List: List means group of elements. List divided into Three types those are EX: Un Ordered Lists Ordered Lists Definition List Unordered Lists: Unordered List never contains element numbers.
<html> <body>
<h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> EX: <html> <body> Ordered Lists: Which contains list with element numbers.
<h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> Different types of Ordered Lsits: EX: <html> <body>
<h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
<h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
<h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
<h4>Roman numbers list:</h4>
<ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
<h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html> </body> </html> Different Types of Unordered Lists: EX: <html> <body>
<h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li>
<li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>
<h4>Circle bullets list:</h4> <ul type="circle"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>
<h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> </body> </html> Nested Lsit: EX: <html> <body>
<h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html> EX: <html> <body> <h4>A Definition List:</h4> <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> </body> Definition Lists:
</html>
Formatting Tags: <b>: Defines bold Text <big>: Cotains big Text <small>: Defines small text <i>: Defines italic text <em>: Defines Emphasize Text <strong>: Defines Strong Text <Sub>: Defines Subscript Text <Sup>: Defines Superscript Text. <ins> and <del>: These tags used to strike of one and display another. EX: <html> <body> <p>My favorite color is <del>blue</del> <ins>red</ins>!</p> <p>Notice that browsers will strikethrough deleted text and underline inserted text.</p> </body> </html> Table: Table means collection of rows and columns Tables with noborders <html> <body> <h4>This table has no borders:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr>
<tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>And this table has no borders:</h4> <table border="0"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>
Tables with headers: <html> <body>
<h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr>
<tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
<h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table>
</body> </html>
Table with a caption: <html> <body>
<table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table>
</body> </html>
Table with more than one span:
<html> <body>
<h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
<h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td>
</tr> <tr> <td>555 77 855</td> </tr> </table>
</body> </html> Tags inside the Table: <html> <body>
<table border="1"> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr>
<td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table>
</body> </html> Cell padding: <html> <body>
<h4>Without cellpadding:</h4>
<table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With cellpadding:</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
</body>
</html> Cell spacting: <html> <body>
<h4>Without cellspacing:</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With cellspacing="0":</h4> <table border="1" cellspacing="0"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td>
<td>Row</td> </tr> </table>
<h4>With cellspacing="10":</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
</body> </html> Table with Frame attribute <html> <body> <p> <b>Note:</b> If you see no frames/borders around the tables below, your browser does not support the "frame" attribute.
</p>
<h4>With frame="border":</h4> <table frame="border"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With frame="box":</h4> <table frame="box"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With frame="void":</h4> <table frame="void"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With frame="above":</h4> <table frame="above"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With frame="below":</h4> <table frame="below"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With frame="hsides":</h4> <table frame="hsides"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With frame="vsides":</h4>
<table frame="vsides"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With frame="lhs":</h4> <table frame="lhs"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
<h4>With frame="rhs":</h4> <table frame="rhs">
<tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>
</body> </html>
Image: Image is a graphical representation. We can use images in HTML documents. The syntax for image is SYN: <img src=image name.extension name alt=alternative name height =numerical value Widh =numerical value> EX: <html> <body> <img src="sunset.jpg" alt ="Sunset" height="300" width ="300"></img> </body> </html> Hyperlink: A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a
new document or a new section within the current document.
(OR) Hyperlink allows us to read the data in internet web pages. Hyperlink Syntax: <a href="url">Link text</a> EX: <html> <body> <h1> <a href="new.html" target ="A">About</a><br> <a href="new1.html" target ="B"> Reigster</a><br> <a href="new2.html" target ="C">Material</a><br> </h1> </body> </html> Creating Image as Hyperlink: <html> <body> <a href="new.html"> <img src="sunset.jpg" alt="sunset" height="300" width="300"></img></a> </body> </html> Image Map: <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="waterfalls.jpg" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sunset.jpg" /> </map> </body> </html> Forms: HTML Forms are used to pass data over server. Text Box: Text Box is used to represent text in fields.
EX: <HTML> <form name=""> First Name=<input type="text" name="First Name"> Last Name=<input type="text" name="Last Name"> </form> </HTML> EX2: Text boxes with pre defined text. <form name=""> First Name=<input type="text" name="First Name" value="First Name"> Last Name=<input type="text" name="Last Name" value="Last Name"> </form> </HTML> EX: <HTML> <form name=""> First Name=<input type="text" name="First Name"><br> Password=<input type="password" name="Last Name"> </form> Password: If we give input as password it automatically take password like...
</HTML>
Radio Buttons: Radio Button is one user can select one value.
EX: <HTML> <form name=""> Male<input type="radio" name="sex" value="male"> Female<input type="radio" name="sex" value="female"> </form> </HTML> Check Boxes: Checkboxes let a user select ONE or MORE options of a limited number of
choices.
EX: <HTML> <form name=""> Car<input type="Checkbox" name="car" value="car"> Bike<input type="Checkbox" name="bike" value="bike"> </form> Button: Button is used to click. After clicking it performs action.
EX: <form name=""> First Name=<input type="text" name="First Name" value="First Name"></br> Last Name=<input type="text" name="Last Name" value="Last Name"></br> <input type="button" value="submit"> </form> </HTML> </HTML> EX: <form name=""> Drop Downlist:
<select name="cars"> <option value="Volvo" >volvo</option> <option value="Volvo" >Totyota</option> <option value="Volvo" >Hundai</option> <option value="Volvo" >Maruti</option> </form> </HTML> EX: <HTML> <form name=""> <select name="cars"> <option value="Volvo" >volvo</option> <option value="Volvo" >Totyota</option> <option value="Volvo" selected ="selected">Hundai</option> <option value="Volvo" >Maruti</option> </form> </HTML> EX:2 <html> <form name=""> <select name="cars"> <option >volvo</option> <option >Totyota</option> <option >Hundai</option> <option >Maruti</option> </form> </html> Dropdown List With Pre selected values:
EX:
Textarea:
<form name=""> <textarea rows="30" cols="30"> The cat was playing inside the garden </textarea> </form> </HTML> EX2: <form name=""> <textarea > The cat was playing inside the garden </textarea> </form> </HTML>
EX:
Fieldset: Fielsedset means which displays a border line around the data in the document.
<HTML> <fieldset> <form name=""> <select name="cars"> <option value="Volvo" >volvo</option> <option value="Volvo" >Totyota</option> <option value="Volvo" selected ="selected">Hundai</option> <option value="Volvo" >Maruti</option> </form>
</fieldset> </HTML> EX: <HTML> <fieldset> <legend> Bhargav<//legend> <form name=""> <select name="cars"> <option value="Volvo" >volvo</option> <option value="Volvo" >Totyota</option> <option value="Volvo" selected ="selected">Hundai</option> <option value="Volvo" >Maruti</option> </form> </fieldset> </HTML> Fieldset With Legend Text:
Frame: Frame is a mechanism we can create more than one HTML documents in the web page. Each document is called frame. Each frame independent to others. EX: <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" />
<noframes> <body>Your browser does not handle frames!</body> </noframes> P) Creation of web page splitting into the different parts according the user requirement <html> <frameset rows="30%,70%"> <frame name="f1" src="first.html"></frame> <frameset cols="40%,60%"> <frame name="f2" src="reg.html"></frame> <frameset rows="30%,40%,30%"> <frame name="A"></frame> <frame name="B"></frame> <frame name="C"></frame> </frameset> </frameset> </frameset> </html> Reg.html <html> <body> <h1> <a href="new.html" target ="A">About</a><br> <a href="new1.html" target ="B"> Reigster</a><br> <a href="new2.html" target ="C">Material</a><br> </h1> </body> </html> Frameset: Defines the set of frames. No Frames: This is specially developed for non graphical browsers. If any browser doessnt support graphics it display alternative text. Note: We never specify <FRAMESET> tag in body. If we specify it in body it will show nothing. Nested Frames <html>
<frameset rows="50%,50%"> <frame src="frame_a.htm" /> <frameset cols="25%,75%"> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </frameset> </html> P) write a HTML Program which will display different pages in single frame. Frames.html <html> <frameset rows="30%,70%"> <frame name="f1" src="first.html"></frame> <frameset cols="40%,60%"> <frame name="f2" src="reg.html" ></frame> <frame name="A"></frame> <frame name="A"></frame> <frame name="A"></frame> </frameset> </frameset> </html> Reg.html <html> <body> <h1>
<a href="hello1.html" target="A">hello1</a><br> <a href="hello2.html" target="A"> hello2</a><br> <a href="hello3.html" target="A">hello3</a><br> </h1> </body> </html> hello1.html <html> <body> <h2> hello1</h2> </body> </html> Like this htllo2.html and hello3.html How to get default vertical scroll bars in Frame : Note: This will useful for the file which is so small for example hello1 file. For large files scroll bars will come automatically. Here Scroll bars will come but those are in active mode. Just modify Frames.html code like this <frame name="A" scrolling=yes></frame> <frame name="B"></frame> <frame name="C"></frame>
How to load a page in same window with large size: Modify reg.html like this <html> <body>
<h1> <a href="hello1.html" target="_top">hello1</a><br> <a href="hello2.html" target="A"> hello2</a><br> <a href="hello3.html" target="A">hello3</a><br> </h1> </body> </html> How to load a page in another window Frames.html <html> <frameset rows="30%,70%"> <frame name="f1" src="first.html"></frame> <frameset cols="40%,60%"> <frame name="f2" src="reg.html" ></frame> <frame name="f3" src="hello1.html" ></frame> <frame name="f4" src="hello2.html"></frame> <frame name="f5" src="hello3.html"></frame> </frameset> </frameset> </frameset> </html>
reg.html <html>
<body> <h1> <a href="hello1.html" target="A">hello1</a><br> <a href="hello2.html" target="B"> hello2</a><br> <a href="hello3.html" target="C">hello3</a><br> </h1> </body> </html> If we give target values of reg.html and frame names of frames.html different it takes it like this. If we wont specify target in reg.html then the page will load in left side frame Iframes: <html> <body> <iframe src="demo_iframe.htm" width="200" height="200"></iframe> <p>Some older browsers don't support iframes.</p> <p>If they don't, the iframe will not be visible.</p> </body> </html> Style Sheets: Stylesheet is a mechanism by using the stylesheet we can format or represent text in different manner in the webpages. There are three types of style sheets. Those are Inline Style sheets Embedded Style sheets or Internal Style sheets Cascading or external style sheets
Inline Stylesheets: Whenever a stylesheet is provided for Particular occurrence of an HTML tag is called as Inline Style sheet. The style sheets can be provided to the HTML tags by using style attribute.
EX: <html> <body> <h1 style="background-color:yellow;color:red">Sathya Technologies" </h1> <h2>Ameerpet</h2> <h1>Registrationform</h1> </body> </html> EX2: <html> <body> <h1 style="background color:blue;text-align=center">Registration Form </h1> <h2 style="background color:indigo;color:yellow">Sathya Technologies</h2> </body> </html> In the above example only sathya technologies will be printed with background color as yellow that is this yellow color is not applied to the next occurrence of h1 tag these types of Stylesheets are called as inline Stylesheets. Embedded Stylesheets: If a stylesheet is applied for multiple occurrences of an HTML tag with in a web page then those sheets are called as embedded style sheets.
For creating embedded style sheets <Style> must be used in the <head>. Example on embedded stylesheet: <html> <head> <style> h1 { background-color:yellow; color:red; text-align:center; }
h2 { background-color:aqua; color:blue; text-align:center; } </style> </head> <body> <h1> Sathya Technologies</h1> <h2> Ameerpet</h2> <h1>Registration form</h1> <h2> Login Form</h2> </body> </html> EX2: <html> <head> <style> h1,h2,h3 { font-style:bold; color:red; } </style> </head> <body> <h1>Sathya Technologies</h1> <h2>Ameerpet</h2> <h3>Hyderabad</h3> </body> </html> In the above example the same type of style sheet is provided for multiple <HTML> tags. Cascading Stylesheets: If a stylesheet is applied for different web pages present in a website then those Stylesheets are called as cascading Stylesheets. When we using cascading Stylesheets, these Stylesheets must be specified with in separate file that is .CSS file.
EX1:
Creating .CSS file: h1 { background-color:red; color:blue; } h2 { background-color:blue; color:red; } Making use of above file from the webpage <html> <head> <link rel="stylesheet" href="first.css"> </head> <body> <h1> Sathya Technologies</h1> <h2> login form</h2> </body> </html> EX2: <html> <head> <link rel="stylesheet" href="first.css"> </head> <body> <h1>Sathya Technologies</h1> <marquee> This is a login form </marquee>
</body> </html>
EX3: <html> <head> <link rel="stylesheet" href="first.css"> </head> <body> <marquee><h1>Sathya Technologies</h1> <marquee> <marquee> This is a login form </marquee> </body> </html> Client side Scripting: The logic that is executed at the client side is called as client side scripting. Server side Scripting: The logic that is executed of server is called server side scripting. Need of Client side Scripting: If there are hundred clients then the same logic need to be proceeded by the web server for all the hundred clients which increased the burden on the web server and also decreases the performance of web server. For example checking the format of the email id cant contain any security constraint and also there is no need of checking with the database values.
Java Scripting: Java script is called as a scripting language. Java script code is executed by the web browser. Web browser is a software which provides collection of services The services are HTML interpreter, Scripting language interpreter, XML Parser.
Java Script does not contain any data types. Java Script contains much number of Objects. The conditional statements, selection statements and control statements available in C language are also available in java script. The java script coding must written in <Script> tag. Syn: <script language=javascript/vbscript> ----------------------------- Java Script code ---------------</script>
Q) Can Java Script use for server side applications? A) Yes
Syn: <script language=javascript run at=server> ------------------</script> Document Object: This is an object used for printing the messages with in the browser. This object contains a method called as write () which is used printing messages. P) Create a webpage to print a message with in the browser by using the document Object. <html> <script language="javascript"> document.write("This is Bhargav"); </script> </html>
Example for if else statement: <html> <script language="javascript"> a=10 b=5 if(a<b) document.write(a+"is big") else document.write(b+"is big") </script> </html>
Prompt Function: This is a function used for reading the values from the keyboard into the variables. EX: x=prompt(enter any value) P) Write a java Script loading to print the multiplication table for the given number by using while loop. Note: By default prompt function will read String value. So need to convert String value into numberical value using eval(). <html> <script language="javascript"> n=prompt("enter any number") i=1 while(i<=10) { k=eval(n)*i
document.write("<h1>"+n+"*"+i+"="+k+"</h1>") i++ } </script> </html> NOTE: No need to specify eval (). The browser automatically converts String type to another type. <html> <script language="javascript"> i=2 do { document.write("<h1>"+i+"</h1>") i=i+2 } while(i<=20) </script> </html> Example on for loop: <html> <script language="javascript"> for(i=10;i>=1;i--) document.write(i+" ") </script> </html>
Defining the arrays within the java script: An array is a collective name which has given to a collection of memory locations of similar data types. Syntax: <object name> =new Array(<size>) Note: Here A should be upper case because java script is case sensitive language. P) Write a java script to read the elements into an array and print the accepted elements. <html> <body> <script language="text/javascript"> mycars = new Array(5); for (i=0;i<5;i++) mycars[i]=prompt("enter values") for (i=0;i<5;i++) document.write(mycars[i] + "<br />"); </script> </body> </html> Methods and properties available within the array object. Sort(): This method is used for sorting the elements present within the array in ascending order. Reverse(): This method is used for getting the element present within the array in the reverse order. toString(): This is the method used for converting the entire elements within the array into a string. Length: This is a property which is used for getting the length of the array.
P) Write a java script to represent methods and properties. <html> <body>
<script type="text/javascript"> mycars = new Array(5,10,9) document.write(mycars.reverse()+"<br>") document.write(mycars.sort()+"<br>") document.write(mycars.length) </script> </body> </html> Jagged Arrays: In the case of two dimensional arrays every row must contain same number of columns in case of jagged arrays every row can contain the variation in the no of columns. A jagged array is collection of single dimension arrays jagged are specially used foe eliminating the wastage of memory space. 10 0 20 1 30 2 40 3 50 4
10 0
20 1
30 2
40 3
10 0
20 1
30 2
Examples for Jagged Arrays: <html> <script language="javascript"> x=new Array[10,20,30,40,50] y=new Array[10,20,30,40] z=new Array[10,20,30]
k=new Array(x,y,z) for(i=0;i<k.length;i++) for(j=0;j<k[i].length;j++)
document.write(k[i][j]) </script> </html> (This program not executed)
Functions in JavaScript: Functions are specially used specifying the reusable code that is instead of repeating the same logic multiple times within application we can write that logic within a function whenever it is require we can invoke a function. Function reduces the no of lines of coding with in an application. Javascript the function can be created by using function keyword. In javascript every function is related can be called as an Object.
Syntax: Function<function name> (<arguments list>) { Statement 1; Statement 2; -----------------------------Statement n; } All the javascript functions need to be placed with in <head> and these functions need to be invoked from body tag.
P) Create javascript function for adding the given two numbers. <html> <head> <script language="javascript"> function Add() { x=prompt("enter first value") y=prompt("enter second value") z=eval(x)+eval(y) document.write(z) } </script> </head> <body> <script language="javascript"> Add() </script> </body> </html> </html> Passing the arguments to a function: p) Write a java script to add the two numbers by passing the arguments to a function. <html> <head> <script language="javascript">
function Add(a,b) { res=a+b document.write(res) } </script> </head> <body> <script language="javascript"> Add(10,20) Add(10,20.5) </script> </body> </html> With the above example we can conformed that javascript supports the concept of function overloading. Function Overloading: The function changes its behavior according to the circumstances called as function. In the above example the function add() is overloaded based on the type of arguments A function can also be overloaded based on the variation in the number of arguments also.
P) Write a javascript overloading a function on the variation in number of arguments <HTML> <head> <script language="javascript">
function Add() { sum=0 for(i=0;i<Add.arguments.length;i++) sum=sum+Add.arguments[i] document.write(sum) } </script> </head> <body> <script language="javascript"> Add(10,20) Add(23,2,45) Add(7.3,3) </script> </body> </HTML>
Returning a value from a function: In java script any type of values by using return statement. EX: <html> <head> <script language="javascript"> function Add()
{ x=10 y=20 z=x+y return z } </script> </head> <body> <script language="javascript"> z=Add() document.write(z) </script> </body> </html> </html>
Working with events: The actions that are performed on the controls are called events. Whenever an event is fired certain logic need to be executed which must be written in a JavaScript function The events will be specified for the controls in the form of attributes.
P) Create a webpage to read the values into the text boxes and perform the addition and subtraction of those values where the buttons are checked and place the result with in the third text box. <HTML> <head>
<script language="javascript"> function Add() { x=f.t1.value y=f.t2.value z=eval(x)+eval(y) f.t3.value=z } function Sub() { x=f.t1.value y=f.t2.value z=eval(x)-eval(y) f.t3.value=z } </script> <body> <form name="f"> <br><br><br><br><br> <table border="3" cellspacing="40" align="center"> <tr> <th> Enter the first value</th> <td><input type="text" name="t1"></td> </tr> <tr>
<th> Enter Second Value</th> <td><input type="text" name="t2"></td> </tr> <tr> <th> Enter Result</th> <td><input type="text"name="t3"></td> </tr> <tr> <td><input type="Button" value="ADD" onclick="Add()"></td> <td><input type="Button" value="SUB" onclick="Sub()"></td> </tr> </table> </form> </body> </HTML>
P) Write a program which changes the background color of the browser when double click on the buttons. <HTML> <head> <script language="javascript"> function f1() { document.bgColor="Green" }
function f2() { document.bgColor="Blue" } function f3() { document.bgColor="Red" }
</script> </head> <body> <form name="f"> <input type="Button" value="Green" ondblclick="f1()"> <input type="Button" value="Blue" ondblclick="f2()"> <input type="Button" value="Red" ondblclick="f3()"> </form> </body> </HTML> Date Object: This is an object for getting the current date and time. The date object can be created as Obj=new Date() This date object contains different methods. Those are getHours(): This method is used for getting the current hour. getMinutes():This method is used for getting the current Minutes.
getSeconds():This method is used for getting the current Seconds. getMonth():This method is used for getting the current Month. getDate():This method is used for getting the current Date. getYear():This method is used for getting the current Year.
P) Create a webpage to print the dynamic time. <HTML> </head> <meta http-equiv="refresh" content="1"> <body> <script language="javascript"> obj =new Date() document.write(obj.getHours()+":"+obj.getMinutes()+":"+obj.getSeconds()) </script> </body> </HTML> String Object: A String object can store any type of String value. A String Object can be created as Str=new String(hello) This String object contains different methods those are toLowerCase(): This method is used for converting letters upper case to lowercase. toUpperCase():This method is used for converting letters lower case to uppercase. charAt():This method is used for character from the specified position.
EX: str= H E L L Bold(): This method is used for specifying String with bold. O
Italics(): This method is used for specifying String value with italics fontSize(): This method is used for increasing the font size of the string. substring(): This is the method used for getting the substring of the specified string.
Str R A M C H A R A N
Example on the String method: <HTML> <script language="javascript"> str="Sathya Technologies" with(document) { write(str.toLowerCase()+"<br>") write(str.toUpperCase()+"<br>") write(str.charAt(3)+"<br>") write(str.substring(4)+"<br>") write(str.substring(4,8)+"<br>") write(str.bold()+"<br>") write(str.italics()+"<br>") write(str.indexOf('T')+"<br>") }
</script> </html> </HTML> In the above example instead of specifying document.write() each time we specifier with statement. Alert: Alert is a function which is used for printing an alert message or message box on to the web page. The alert message will be printed in the form of the dialog box. Performing Validations in Java Script: The main advantage of using Client side scripting is performing the validations of the input that is provided by different clients. Ensuring the proper entry of data is called a validation.
Examples for validations are: Textbox cant empty. Textbox must be enter with numerical value. Proper entry of email indication format e.t.c.,
Email Validations: For performing the email id validations we can perform different condition checking. EX: <HTML> <head> <script language="javascript"> function check() { str=f.t1.value k1=str.indexOf("@") k2=str.indexOf(".") d=k2-k1
k3=str.indexOf(" ") if(d==1||k1<=0||k3>=0) { alert("Please Provide Correct emailid")
f.t1.focus() } } </script> </head> <body> <form name="f"> email id:<input type="text" name="t1" onblur="check()"><br> Password:<input type="password" name="t2"> <input type="Submit" name="b1" value="submit"> <input type="reset" name="b2" value="clear"> </form> </body> </html> OUTPUT:
onblurr it is an even which will be fired as soon as the text box uses the focus. P) Create a web page to perform the addition of two numbers but performing the validations on the text boxes about whether text boxes of empty or not. </head> <body> <form name="f"> x value=<input type="text" name="t1"><br> y value=<input type="text" name="t2"><br> result=<input type="text" name="t3"><br> <input type="button" name="b1" value="add" onclick="Add()">
</form>
</body> </html> OUTPUT:
In the above web page we entered only x value. We didnt enter y value so alert window opened Java script file:
Web browser Java Script File
Every web page contains the designing and logic generally in real time the designing will be performed by web designer and logic will be written by the web developer. The web pages that are created upto now contains designing and logic with in the same file that is HTML file. So single HTML file must be used by web designer and web developer this makes development of the web page slower and also security will not be available for the logic that is written by the web developer. To overcome this problem the logic can be separated from the designing and any web page. In these cases java script file can be used. The designing can be placed HTML file and logic can be written with in a java script file. HTML file will be used by web designer and java script file can be used by web developer. Since parallel development of designing and logic will be performed at a time. The development of web pages becomes more faster and also security logic is provided and also the java script file can reused with in different web pages. An HTML file can contain HTML tags client side scripting tags on server side. A Java Script file can contain only the java script functions. A java script file must contain extension .js.
Creating a java script file: function Check(t) { if(t.value=="")
{ alert("text box can't be empty") t.focus() } } Save the above file with validate.JS Creating a HTML file <html> <head> <script language="javascript" src="validate.js"> </script> </head> <body> <form name="f"> email id:<input type="text" name="t1" onblur="Check(f.t1)"> password:<input type="password" name="t2"> </form> </body> </html>
OUTPUT:
P) Write a javascript and HTML file for emailed validation. Javascript separate File: function check(t) { str=f.t1.value; k1=str.indexOf("@") k2=str.indexOf(".") d=k2-k1 k3=str.indexOf("") if(d=1||k1<=0||k3>=0) { alert("please enter valid emailid") } f.t1.focus()
} HTML File: <HTML> <head> <script language="javascript"> function check() { str=f.t1.value k1=str.indexOf("@") k2=str.indexOf(".") d=k2-k1 k3=str.indexOf(" ") if(d==1||k1<=0||k3>=0) { alert("Please Provide Correct emailid")
f.t1.focus() } } </script> </head> <body> <form name="f"> email id:<input type="text" name="t1" onblur="check()"><br> Password:<input type="password" name="t2">
<input type="Submit" name="b1" value="submit"> <input type="reset" name="b2" value="clear"> </form> </body> </html> Here we tried to leave email id field empty so it displayed above message. Window Object: This object represent current browser window this object can be used for opening new browser window, closing the browser windows, setting the interval time e.t.c., This object contains five methods. Those are Open() Close() Focus() Set interval() Clear interval()
Open(): This is a method opening new browser window. Syn: object name = open(<webpage name>,<window name> EX: obj = open(hello.html,win);
Close(): This is a method for closing a browser window. Syn: objectname.close()
Focus(): This is a method used for activating browser window. Syn: objectname.focus()
Set interval(): This method is used to executing the java function repetitively every time. Syn: <object name>= set Interval<function name>,<interval time>) with the above example the function f, will be executed automatically for every one second.
Note: The time interval must be specified in the form of milliseconds. Clear Interval(): This is a method used clearing the interval that is provided with set Interval method. Syn: clear Interval(<object name>) Ex: clear Interval(obj) P) Create a web page with three buttons and when clicked one button a new browser must be activated and when clicked on the display button certain text need to be printed with in the browser window and when clicked on the close button then new browser window must be closed. <html> <head> <script language="javascript"> function fopen() { obj=open("","win") } function fclose() { obj.close() } function fdisplay() { obj.focus() obj.document.write("sathya Technologies") } </script> </head> <body> <form name="f"> <input type="button" name="b1" value="OPEN" onclick="fopen()"> <input type="button" name="b2" value="Display" onclick="fdisplay()"> <input type="button" name="b3" value="Close" onclick="fclose()"> </form> </body> </html>
P) Create a webpage to provide printing facility for the client.
<html> <head> <script language="javascript"> function fprint() { window.print() } </script> </head> <body> <form name="f"> <input type="button" name="b1" value="Print" onclick="fprint()"> </form> <h1> This is the information for printing </h1> </form> </body> </html>
In the above example when clicked on the print button a print dialogue will be activated which can be used for taking printouts by the clients. Load Event and Unload Event: Load Event will be executed automatically as soon as the web page loaded into the browser unload event will be executed automatically before unloading web page from the browser. These two events must be used with the body tag.
Example for load and unload Event: Open the file with in the browser now automatically load event will be fixed. Open a web page within the browser then automatically unload event will be fixed. EX: <html>
<head> <script language="javascript"> function f1() { alert("web page loaded") } function f2() { alert("web page un loaded") } </script> </head> <body onload= "f1()" onunload= "f2()"> <h1> Hi and Bye</h1> </body> </html> Password Length Validatation: <html> <script language="javascript"> function fin() { if(f.t1.value.length<=5) { alert("Please more than six characters") }
} </script> <form name="f"> UserName: <input type="text" name="t2"> Password:<input type="password" name="t1"> <input type="button" value="submit" onclick="fin()">
</form> </html>
To Obtain various text fields by clicking new button: <html> <head> <script> function generatenew() { var d=document.getElementById("div"); d.innerHTML+="<p><input type='text' name='food'>"; } </script> </head> <body> <form name='abc' method="post" action=""> <div id="div"></div> <b><font color="red">
<font size="4">NEW</font></font></b> <input type="button" value="new" onclick="generatenew()"> </form> </body> </html> To giving String only validation: <html> <script language="javascript"> function fin() { f.t1.value=eval(f.t1.value)
if(f.t1.value=String) {
alert("please enter Integer value only") } } </script> <form name="f">
Password:<input type="password" name="t1"> <input type="button" value="submit" onclick="fin()">
</form>
</html> Only enter Integer value: <html> <head> <script type="text/javascript"> function check(id) { field = document.getElementById(id)
if (isNaN(field.value)) { alert('not a number'); } } </script> </head> <body> <form> <input type="text" id="f1"/> salary:<input type="button" value="submit" onclick="check('f1');"/> </form> </body> </html> P) Write a HTML program for Password strong or not? <HTML>
<HEAD>
<script language="javascript"> function isStrongPassword() {
var control = document.form1.password; var myString= control.value;
var Stringlen = myString.length; var ValidateDigits = /[^0-9]/g; var ValidateSpChar = /[a-zA-Z0-9]/g; var ValidateChar = /[^a-zA-Z]/g;
var digitString = myString.replace(ValidateDigits , ""); var specialString = myString.replace(ValidateSpChar, ""); var charString = myString.replace(ValidateChar, "");
if(Stringlen < 8) { alert("Passwords must be at least 8 characters"); control.value=""; control.focus();
return false; } if(specialString < 1) { alert("Passwords must include at least 1 special (#,@,&,$ etc) characters"); control.value=""; control.focus(); return false; } if(digitString < 1) { alert("Passwords must include at least 1 numeric characters"); control.value=""; control.focus(); return false; } return; } </script>
</HEAD> <BODY>
<P><h2>Registration</h2> <form id=form1 name=form1>
<table> <tr><td>Login:</td> <td><INPUT id=login name=login size="20"></td> </tr> <tr><td>Password:</td> <td><INPUT id=password name=password size="20"></td> </tr> </table> <P><INPUT id=register type=button value=Register name=register onclick='javascript:isStrongPassword()'></P> </form> </BODY> </HTML> P) Write a HTML Program for Checkbox Validation? <html> <head> <script language="javascript"> function validate() { var chks = document.getElementsByName('colors[]'); var hasChecked = false; for (var i = 0; i < chks.length; i++) { if (chks[i].checked) {
hasChecked = true; break; } } if (hasChecked == false) { alert("Please select at least one."); return false; } return true; } </script> </head> <body> <form name="form1" > Your colors are <br> <input type="checkbox" name="colors[]" value="blue" id="blue">Blue <br> <input type="checkbox" name="colors[]" value="red" id="red">red <br> <input type="checkbox" name="colors[]" value="green" id="green">green <br> <input type="checkbox" name="colors[]" value="yellow" id="yellow">yellow <br> <input type="checkbox" name="colors[]" value="voilet" id="voilet">voilet <br> <input type="checkbox" name="colors[]" value="grey" id="grey">grey <br> <br> <input type="Button" value="submit" name="submit" onclick="validate()"/> </form>
</body> </html> P) Program for copying one Place to another place without specifying again and again. <html> <head> <title></title>
<script type="text/javascript"> function data_copy() {
if(document.form1.copy[0].checked){ document.form1.add12.value=document.form1.add1.value; document.form1.add22.value=document.form1.add2.value; document.form1.city2.value=document.form1.city.value; for(i=document.form1.state.options.length-1;i>=0;i--) { if(document.form1.state.options[i].selected) document.form1.state2.options[i].selected=true; }
}else{ document.form1.add12.value=""; document.form1.add22.value=""; document.form1.city2.value="";
document.form1.state2.options[0].selected=true;
</script> </head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000"> <table width='400' border='0' cellspacing='1' cellpadding='0'> <form name=form1 method=post action='http://www.plus2net.com'> <tr><td colspan=2><b>Ofice Address</b></td></tr> <tr><td >Address 1</td><td><input type=text name=add1></td></tr> <tr><td >Address 2</td><td><input type=text name=add2></td></tr>
<tr><td >City</td><td><input type=text name=city></td></tr> <tr><td >State</td><td><SELECT NAME="state" > <Option value="One">One</option> <Option value="Two">Two</option> <Option value="Three">Three</option> <Option value="Four">Four</option>
</SELECT>
</td></tr> <tr><td > <b>Residence Address</b></td><td><input type=radio name=copy value='yes' onclick="data_copy()";>Same as above <input type=radio name=copy value='no' onclick="data_copy()";>Not Same </td></tr> <tr><td >Address 1</td><td><input type=text name=add12></td></tr>
<tr><td >Address 2</td><td><input type=text name=add22></td></tr> <tr><td >City</td><td><input type=text name=city2></td></tr> <tr><td >State</td><td><SELECT NAME="state2" > <Option value="One">One</option> <Option value="Two">Two</option> <Option value="Three">Three</option> <Option value="Four">Four</option>
</SELECT> </td></tr>
<tr><td colspan=2 align=center><input type=submit value=Submit> </form></td></tr> </table> </body> </html> P) Add One TextArea text into Another Text Area.
<html> <head> <script language="javascript" type="text/javascript"> function addtext() { var newtext = document.myform.inputtext.value; if (document.myform.placement[1].checked) { document.myform.outputtext.value = ""; } document.myform.outputtext.value += newtext; } </script> </head> <body> <form name="myform"> <table border="0" cellspacing="0" cellpadding="5"><tr> <td><textarea name="inputtext"></textarea></td> <input type="radio" name="placement" value="append" checked> Add to Existing Text<br> <td><p><input type="radio" name="placement" value="replace"> Replace Existing Text<br> <input type="button" value="Add New Text" onClick="addtext();"></p> </td> <td><textarea name="outputtext"></textarea></td> </tr></table> </form> </body>

HTML Notes

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML Notes

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML: HTML is a Markup language which is used to presenting web page.

<h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Roman numbers list:</h4>

<ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

<h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li>

<li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

Tables with headers: <html> <body>

<h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr>

<tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>

Table with a caption: <html> <body>

Table with more than one span:

</tr> <tr> <td>555 77 855</td> </tr> </table>

</body> </html> Tags inside the Table: <html> <body>

</body> </html> Cell padding: <html> <body>

</html> Cell spacting: <html> <body>

<td>Row</td> </tr> </table>

<h4>With frame="rhs":</h4> <table frame="rhs">

<tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table>

Q) Can Java Script use for server side applications? A) Yes

P) Write a java script to represent methods and properties. <html> <body>

k=new Array(x,y,z) for(i=0;i<k.length;i++) for(j=0;j<k[i].length;j++)

document.write(k[i][j]) </script> </html> (This program not executed)

function f2() { document.bgColor="Blue" } function f3() { document.bgColor="Red" }

k3=str.indexOf(" ") if(d==1||k1<=0||k3>=0) { alert("Please Provide Correct emailid")

</body> </html> OUTPUT:

Web browser Java Script File

Creating a java script file: function Check(t) { if(t.value=="")

Close(): This is a method for closing a browser window. Syn: objectname.close()

P) Create a webpage to provide printing facility for the client.

alert("please enter Integer value only") } } </script> <form name="f">

Password:<input type="password" name="t1"> <input type="button" value="submit" onclick="fin()">

<script language="javascript"> function isStrongPassword() {

var control = document.form1.password; var myString= control.value;

if(Stringlen < 8) { alert("Passwords must be at least 8 characters"); control.value=""; control.focus();

<P><h2>Registration</h2> <form id=form1 name=form1>

<script type="text/javascript"> function data_copy() {

}else{ document.form1.add12.value=""; document.form1.add22.value=""; document.form1.city2.value="";

Anda mungkin juga menyukai