|
|
|
|
JAVA SCRIPTING
Java script examples
<HTML>
<HEAD>
<TITLE>Javascript Example</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--alert("Thank you for visiting my web site!")
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Result is shown in Fig. 1 below.
Fig. 1
Note we can embed JavaScript code/instructions in the plain HTML
code with the help of <script> and
</script> tags. In the above example ‘alert’ is the
function/method of a predefined browser object that is,
window object, and is used to create alert boxes or popup
messages on the window. ‘//’ is used in
JavaScript to provide comments. Here, we use ‘//’ so that old
browsers that do not support JavaScript treat
information within the Script tag as comments.
Writing on the page
<HTML>
<HEAD>
<TITLE>example-writing on the page</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
document.write("Hello! Thank you for visiting my web site.")
//-->
</SCRIPT>
</BODY>
58
</HTML>
Result is shown in Fig. 2 below.
Fig. 2
Here, ‘document’ is a browser object and ‘write’ is its function
which is used to write text on the page.
Browser objects are loaded by a JavaScript capable browser to
provide access to the web page and the
HTML elements it contains. These objects are used to update and
interact with the loaded web page.
Operators in java script
Mathematical operators ‘+’ For addition of two values ‘-‘ for
subtraction of two values ‘*’ for multiplication
‘/’ for division ‘%’ modulus (for calculating the remainder)
‘++’ for increment ‘--‘ for decrement Logical
operators ‘&&’ for logical and ‘||’ for logical or ‘!’ for
logical not
Comparison operators
‘==’ for Equal
‘!=’ for not equal
‘< ‘ for Less than
‘<=’ for less than equal
‘>’ for Greater than
‘>=’ for Greater than equal
Functions in javascript
A variable in JavaScript can be defined using the keyword ‘var’
and a function by the
Keyword ‘function. A function can be defined in the following
format: function myfunction() { // some
code }
Here, ‘myfunction’ is the name of the function.
Creating a calculator in JavaScript
<HTML>
<HEAD><Title> My Simple Calculator</Title>
</HEAD>
<script language="JavaScript">
<!--
function Addit()
{ var num1=document.Calform.One.value; var
num2=document.Calform.Two.value;
alert(parseFloat(num1)+parseFloat(num2));
}
function minus()
{ var num1=document.Calform.One.value; var
num2=document.Calform.Two.value;
alert(parseFloat(num1)-parseFloat(num2));
}
//-->
</script>
<BODY>Add and Subtract Calculator
<FORM name="Calform">
<P>
First Number:<INPUT TYPE="TEXT" NAME="One" maxlength="3">
59
<P>
Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3">
<P>
<INPUT TYPE="button" NAME="Add" VALUE="Add Them!!"
onclick="Addit()">
<INPUT TYPE="button" NAME="Minus" VALUE="Subtract Them!!"
onclick="minus()">
<INPUT TYPE="RESET" VALUE="Reset!">
</FORM>
</BODY>
</HTML>
In the above example, we have defined two functions, Addit ()
and minus() using JavaScript. With the help
of an event handler ‘onclick’ the control is shifted to any of
the said functions and the code contained in the
functions is accordingly executed.
For example, if a user adds no. 3 in the first text box and 9 in
the second, then on clicking the button ‘Add
them!!’ the addition of these two nos. would be displayed in an
alert box due to the use of ‘alert’ function in
the code.
Result is shown in Fig. 3 below.
Fig. 3
Result is shown in Fig. 4 below
if the user clicks at the button ‘Subtract
Them!!’ instead of ‘Add Them!!’.
Fig. 4
To get the result in a text box, you need a slight change in the
code contained in the
functions Addit() and minus(), as shown below.
<HTML>
<HEAD><Title> My Simple Calculator</Title>
</HEAD>
60
<script language="JavaScript">
<!--
function Addit()
{
var num1=document.Calform.One.value; var
num2=document.Calform.Two.value;
document.Calform.result.value=parseFloat(num1)+parseFloat(num2);
//alert(parseFloat(num1)+parseFloat(num2));
}
function minus()
{ var num1=document.Calform.One.value; var
num2=document.Calform.Two.value;
document.Calform.result.value=parseFloat(num1)-parseFloat(num2);
//alert(parseFloat(num1)-
parseFloat(num2));
} //-->
</script>
<BODY>Add Subtract Calculator
<FORM name="Calform">
<P>
First Number:<INPUT TYPE="TEXT" NAME="One" maxlength="3">
<P>
Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3">
<P>
Result:<INPUT TYPE="TEXT" NAME="result" maxlength="9" Disabled>
<P>
<INPUT TYPE="button" NAME="Add" VALUE="Add Them!!"
onclick="Addit()">
<INPUT TYPE="button" NAME="Minus" VALUE="Subtract Them!!"
onclick="minus()">
<INPUT TYPE="RESET" VALUE="Reset!">
</FORM>
</BODY>
</HTML>
Result is shown in Fig. 5
below in a text box, if you type nos. 125 and 66
in the two text
boxes, respectively, and click ‘Add them!!’.
|
|
|
|
|