Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
144 views

02 - HTML and Javascript Intro

The document provides examples of using HTML and JavaScript to create dynamic web pages. It includes examples of: 1. Embedding JavaScript code in HTML pages to manipulate elements, write output, and handle events. 2. Using JavaScript to validate form input before submission to check for empty fields or invalid values. 3. Changing images and content on mouse events using JavaScript. 4. Opening new windows and including external JavaScript files in HTML pages. 5. Creating a timer to continuously update the displayed time using the JavaScript setTimeout() function.

Uploaded by

kannas_777
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
144 views

02 - HTML and Javascript Intro

The document provides examples of using HTML and JavaScript to create dynamic web pages. It includes examples of: 1. Embedding JavaScript code in HTML pages to manipulate elements, write output, and handle events. 2. Using JavaScript to validate form input before submission to check for empty fields or invalid values. 3. Changing images and content on mouse events using JavaScript. 4. Opening new windows and including external JavaScript files in HTML pages. 5. Creating a timer to continuously update the displayed time using the JavaScript setTimeout() function.

Uploaded by

kannas_777
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Deccansoft Software Services

HTML Example

Html / Javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Form Demo</title> </head> <body> <form name="MyForm" action="Form.html" method="post" enctype="multipart/form-data"> Name: <input type="text" maxlength="10" size="6" tabindex="1" name="txtName" value="Deccansoft"/><br/> Password: <input type="password" name="txtPassword" value="test"/><br/> Gender<br/> <input type="radio" name="rbnGender" checked="checked"/>Male <input type="radio" name="rbnGender"/>Female<br/> Hobbies<br/> <input type="checkbox" id="chkMusic" name="chkMusic" checked="checked" value="1"/> <label for="chkMusic">Music</label> <input type="checkbox" name="chkDance"/>Dance<br/> Address:<br/> <textarea rows="6" cols="50">This is <b>Deccansoft</b></textarea><br/> How do you rate my site: <select name="rating" size="3" multiple="multiple" > <option value="A">Good</option> <option value="B" selected="selected">Average</option> <option value="C">Poor</option> </select><br/> My Image: <input type="file" name="fileMyImage"/><br/> <input type="button" name="btnHello" value="Hello"/> <input type="reset" value="Reset Button"/> <input type="submit" value="Submit"/> <input type="image" src="demo.gif " /> <img src="demo.gif " /> </form> </body> </html>

Deccansoft Software Services


Javascript
1. 2. 3. 4. 5.

Html / Javascript

Javascript is an Interpreted language and its executed by the interpreter built in within the web browser on all platforms. Its a specification by initially Netscape and is acknowledge by ECMA (European Computer Manufacturers Association) It is Object based (doesnt support inheritance) and is case sensitive language. It is very loosely typed. i.e it doesnt have any datatypes. Javascript language together with HTML DOM (Document Object Model) API is used to make the web page dynamic or interactive. Also we can do client side validations of data before the form is submitted to server.

Steps for Debugging Javascript 1. Browser Tools Internet Options... Advanced 2. Uncheck - Disable Script Debugging (Internet Explorer) OK 3. Close the browser and start a new instance. 4. In javascript code, to start debugging write the statement: debugger; 5. Open the page the in brower 6. When the statement "debugger" is executed, browser shows a dialog for selecting the debugger... 7. Select the already exiting Visual Studio Instance --> OK 8. Continue Debugging using Debug toolbar (right click on menubar and select debug)

Embedding Javascript in Page BODY Example 1: Add to <html> <body> <script type="text/javascript"> var i; for(i=0;i<100;i++) document.write("This is line number: " + i + "<br>"); </script> </body> </html>

Example 2: <html> <body> <table border="1"> <script type="text/javascript"> var n; n = prompt("Please enter a number", 10); if (!isNaN(n)) for(i=1;i<=10;i++) {

Deccansoft Software Services


document.write("<tr>") document.write(" document.write(" document.write(" document.write(" document.write(" <td>" + n + "</td>") <td>*</td>") <td>" + i + "</td>") <td>=</td>") <td>" + n*i + "</td>")

Html / Javascript

document.write("</tr>") } </script> </table> </body> </html>

Example 3 <html> <body> <select name="day"> <script type="text/javascript"> var dt = new Date(); //dt is set to system date of client. for(i=1; i<=31; i++) if (dt.getDate() == i) //True for today. document.write("<option SELECTED value=\"" + i + "\">" + i + "</option>") else document.write("<option value=\"" + i + "\">" + i + "</option>") </script> </select> </body> </html>

Handling Events in Javascript <html> <head> <title>Events Examples</title> <script language="javascript" type="text/javascript"> function SayHello() { window.alert("Hello " + document.forms[0].txtName.value); } </script> </head> <body> <form name="form1">

Deccansoft Software Services


<input type="text" name="txtName"> <input type="button" value="Say Hello" onclick="javascript:SayHello()"> </form> </body> </html>

Html / Javascript

Using Dropdown List (Select tag) <html> <head> <script type="text/javascript"> function Calculate() { var n1 = document.form1.txtN1.value; var n2 = document.form1.txtN2.value; var ddl = document.form1.selOperation var opt = ddl.options[ddl.selectedIndex]; //returns selected option switch (opt.value) { case "+": document.form1.txtResult.value = parseInt(n1) + parseInt(n2); break; case "-": document.form1.txtResult.value = n1-n2; break; case "*": document.form1.txtResult.value = n1*n2; break; case "/": document.form1.txtResult.value = n1/n2; break; } } </script> </head> <body> <form name="form1"> <input type="text" name="txtN1" /> <select name="selOperation" onchange="Calculate()"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option>

Deccansoft Software Services


<option value="/">/</option> </select> <input type="text" name="txtN2" /> = <input type="text" name="txtResult" readonly="readonly" /> </form> </body> </html>

Html / Javascript

To Show / Hide a Block Using Style <html> <head> <title>JS Demo</title> <script type="text/javascript"> function r1_click() { if (document.form1.r1[0].checked) document.getElementById("spn").style["display"] = ""; else document.getElementById("spn").style["display"] = "none"; } function ShowHTMLOutput(ta) { spn.innerHTML = ta.value } </script> </head> <body> <form name="form1" action=""> <input type="radio" name="r1" value="show" checked="checked" onclick="r1_click()" />Show <input type="radio" name="r1" value="hide" onclick="r1_click()" />Hide <span id="spn">This is some text...</span> <textarea name="taDemo" rows="5" cols="20" onchange="ShowHTMLOutput(this)"></textarea> </form> </body> </html> Note: If we have more than one element with same name, automatically an array with name of that element is created in form. In the example, r1 array is created in form.

Deccansoft Software Services


Example to Show Image Changing and using this <html> <head> <title>Image Page</title> <script type="text/javascript"> function changeImage() { document.images["img1"].src = "Hover.jpg" } function restoreImage() { document.images[0].src = "Main.jpg" } </script> </head> <body>

Html / Javascript

<img src="Main.jpg" alt="Demo" name="img1" onmouseover="changeImage()" onmouseout="restoreImage()" width="100" height="100" /> <img src="Main.jpg" alt="Demo" onmouseover="this.src='Hover.jpg' onmouseout="this.src='Main.jpg'" width="100" height="100" /> </body> </html>

To open a new Window window.open("JS1.htm","wn","menubar=no,width=200,height=300,scrollbars=yes,resizable=yes,location=yes")

To include Javascript in multiple files: <script type="text/javascript" src="MyLibrary.js"></script>

Deccansoft Software Services


Performing Client side validations before the form is submitted to server <html> <head> <title>Validation On Submit</title> <script language="javascript"> function validate() { n1 = document.Form1.txtN1.value n2 = document.Form1.txtN2.value if (n1 == "" || n2 == "") { alert("Please enter all the values") return false; //Form is not Submitted } return true; //Form is Submitted } function div_Click() { if (document.Form1.txtN2.value == "0") { alert("Denominator cannot be zero"); return false; //Form is not Submitted } return true; //Form is Submitted } </script> </head> <body> <form name="Form1" onsubmit="return validate()"> N1 <input type="text" name="txtN1" /><br /> N2 <input type="text" name="txtN2" /><br /> <input type="submit" value="Add" /> <input type="submit" value="Sub" /> <input type="submit" value="Mul" /> <input type="submit" value="Div" onclick="return div_Click()"/> <input type="submit" value="Delete" onclick="return confirm('Are you sure')" /> </form> </body> </html>

Html / Javascript

If either OnSubmit event handler of Form or OnClick event handler of Submit button returns false, then the form is not submitted to server.

Deccansoft Software Services


Timer Demo <html> <head> <script language="javascript"> function showClientTime () { var dt = new Date() spnTime.innerHTML = dt.toLocaleTimeString(); setTimeout("showClientTime ()",1000); } </script> </head> <body onload="showClientTime()"> <span id="spnTime"></span> </body> </html>

Html / Javascript

You might also like