Javascript Tutorial For Beginners
There are many ways to embed a Javascript in HTML .Some are outlined here with examples
Using <Script> tag
Here is a simple script which embed the JavaScript inside the HTML. document.
The optional LANGUAGE attribute in the <SCRIPT> tag specifies the scripting language and JavaScript version:
<SCRIPT LANGUAGE="JavaScript"> specifies JavaScript for Navigator 2.0. <SCRIPT LANGUAGE="JavaScript1.1"> specifies JavaScript for Navigator 3.0.
We can use two separate versions of a JavaScript document, one for JavaScript 1.0 and one for JavaScript 1.1 in a single HTML document. We have place the script inside the comment tags because the browser which are not recognize the Javascript ignore JavaScript code. See the example "First Script".
<HTML>
<HEAD>
<TITLE>A First Script</TITLE>
</HEAD>
<BODY>
<!--<SCRIPT LANGUAGE = JavaScript>
document.write("Hello World")
</SCRIPT>
<SCRIPT LANGUAGE = JavaScript1.1>
document.write("<h2>Table of Factorials</h2>"); for(i = 1, fact = 1; i < 10; i++, fact *= i) { document.write(i + "! = " + fact);
document.write("<br>"); }
</SCRIPT>-->
</BODY>
</HTML>
The SRC attribute of the <SCRIPT> tag lets you specify a file as the JavaScript source (rather than embedding the JavaScript in the HTML). For example:
<HTML>
<HEAD>
<TITLE>A First Script</TITLE>
</HEAD>
<BODY>
<!--<SCRIPT LANGUAGE = JavaScript1.1 SRC="common.js">
document.write("<h2>Table of Factorials</h2>"); for(i = 1, fact = 1; i < 10; i++, fact *= i) { document.write(i + "! = " + fact);
document.write("<br>"); }
</SCRIPT>-->
</BODY>
</HTML>
Using JavaScript entities, you can specify a JavaScript expression as the value for an HTML attribute. Entity values are evaluated dynamically.
Following are some Javascript examples :
<HTML>
<HEAD> <SCRIPT>
<!--- Hide script from old browsers
function compute(f) {
if (confirm("Are you sure?"))
f.result.value = eval(f.expr.value)
else
alert("Please come back again.")
}
// end hiding from old browsers -->
</SCRIPT> </HEAD>
<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr" SIZE=15 >
<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">
<BR>
Result:
<INPUT TYPE="text" NAME="result" SIZE=15 >
</FORM>
</BODY></HTML>
Validating form input
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function isaPosNum(s) {
return (parseInt(s) > 0)
}
function qty_check(item, min, max) {
var returnVal = false
if (!isaPosNum(item.value))
alert("Please enter a postive number" )
else if (parseInt(item.value) < min)
alert("Please enter a " + item.name + " greater than " + min)
else if (parseInt(item.value) > max)
alert("Please enter a " + item.name + " less than " + max)
else
returnVal = true
return returnVal
}
function validateAndSubmit(theform) {
if (qty_check(theform.quantity, 0, 999)) {
alert("Order has been Submitted")
return true
else {
alert("Sorry, Order Cannot Be Submitted!")
return false
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="widget_order" ACTION="lwapp.html" METHOD="post">
How many widgets today?
<INPUT TYPE="text" NAME="quantity" onChange="qty_check(this, 0, 999)">
<BR>
<INPUT TYPE="button" VALUE="Enter Order" onClick="validateAndSubmit(this.form)">
</FORM>
</BODY></HTML>
Some of the Shortcomings of JavaScript
JavaScript has a list of capabilities. Note, however, that they are confined to browser-related and HTML-related tasks. Since JavaScript is used in a limited context, it does not have features that would be required for standalone languages:
- JavaScript does not have any graphics capabilities, except for the ability to format and display HTML.
- For security reasons, client-side JavaScript does not allow the reading or writing of files. Obviously, we wouldn't want to allow an untrusted program from any random web site to run on our computer and rearrange our files!
- JavaScript does not support networking of any kind, except--an important exception!--that it can cause a web browser to download the contents of arbitrary URLs.
- Finally, JavaScript doesn't have any multithreading capabilities,
