Member Avatar for ausmaya

Hi,
i have started to learn javascript.
To run javascript.. browser window and notepad is enough
or i need to load java s/w

also, i'm not getting output for this coding..can any one help me pls???
<!DOcTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>first java script example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
function calculateArea(Width,Height)
{
area=Width*Height
return (area);
}
</script>
</head>
<body>
<form name="frmArea action="#">
enter the width and height:<br/>
width:<input type="text" name="txtWidth" size=5 /><br/>
height:<input type="text" name="txtHeight" size=5 /><br/>
<input type="button" value="calculate area" onclick="alert(calculateArea(document.frmArea.txtWidth.value,document.frmArea.txtHeight.value))"/>
</form>
</body>
</html>

  • 4 Contributors
  • 3 Replies
  • 122 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for Graphix

>> Always put code within code tags:

<!DOcTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>first java script example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
function calculateArea(Width,Height)
{
area=Width*Height
return (area);
}
</script>
</head>
<body>
<form name="frmArea" action="#">
enter the width and height:<br/>
width:<input type="text" name="txtWidth" size=5 /><br/>
height:<input type="text" name="txtHeight" size=5 /><br/>
<input type="button" value="calculate area" onclick="alert(calculateArea(document.frmArea.txtWidth.value,document.frmArea.txtHeight.value))"/>
</form>
</body>
</html>

>> To explain the code:

As you can see in the code part (highlighted red in the above code), there is a function that calculates the surface of a square. It requires 2 arguments: the width and the height of the square. The function's output is the width multiplied with the height.

Then there is a onclick event in the button-input (highlighted green), that calls a alert() function that shows the output of the calculateArea() function with the values entered within the form as the paramaters.

>> You forgot " at the opening tag of the form

~G

Edited by Graphix because: n/a
Member Avatar for harrierdh

Try it this way instead.

<!DOcTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>first java script example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
function calculateArea() {
	var Width = document.getElementById("txtWidth").value;
	var Height = document.getElementById("txtHeight").value;
	area=Width*Height
	return (area);
}
</script>
</head>
<body>
<form name="frmArea action="#">
enter the width and height:<br/>
width:<input type="text" name="txtWidth" id="txtWidth" size=5 /><br/>
height:<input type="text" name="txtHeight" id="txtHeight" size=5 /><br/>
<input type="button" value="calculate area" onclick="alert(calculateArea())"/>
</form>
</body>
</html>
Member Avatar for almostbob

As an aside from the code question,
notepad and a browser is enough, but notepad is text only
notepad replacements(code highlighting editors) like notepad2 notepad++ codepad,
or an IDE with code highlighting
work like notepad, but mark up the code produced like the [code]

[/code] tags above, it makes 'headslap errors' like a mising '/}) very easy to find, and helps make coding simpler
an ide allows you to code and view changes in the same software

The <form> code is unneccessary for this example, but is used where the form is going to be submitted somewhere.
corrected doctypes for valid xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>edited javascript example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
function calculateArea() { area = document.getElementById("txtWidth").value * document.getElementById("txtHeight").value
 return (area); }
</script></head>
<body><p>enter the width and height:<br/>
width:<input type="text" name="txtWidth" id="txtWidth" size='5' /><br/>
height:<input type="text" name="txtHeight" id="txtHeight" size='5' /><br/>
<input type="button" value="calculate area" onclick="alert('area is\n'+ calculateArea())"/></p>
</body></html>
Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.