Javascript Tutorial For Beginners 

JavaScript and Java:

Java and Javascript is not same, The JavaScript language resembles Java but does not have Java's static typing and strong type checking. JavaScript supports most Java expression syntax and basic control-flow constructs. Some of the differences are outlined in the following table.

JavaScript

Java

Interpreted (not compiled) by client.

Compiled bytecodes downloaded from server, executed on client.

Object-based. Uses built-in, extensible objects, but no classes or inheritance.

Object-oriented. Applets consist of object classes with inheritance.

Code integrated with, and embedded in, HTML.

Applets distinct from HTML (accessed from HTML pages).

Variable data types not declared (loose typing).

Variable data types must be declared (strong typing).

Dynamic binding. Object references checked at runtime.

Static binding. Object references must exist at compile-time.

Cannot automatically write to hard disk.

Cannot automatically write to hard disk.

Embedding JavaScript in HTML

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>

Specifying a file of JavaScript code

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>

The SRC attribute can specify any URL, relative or absolute. For example:

<SCRIPT SRC="http://home.netscape.com/functions/jsfuncs.js">

External JavaScript files cannot contain any HTML tags: they must contain only JavaScript statements and function definitions.

Using JavaScript expressions as HTML attribute values

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 :

An HTML Form with a JavaScript Event Handler Defined

 

<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,



Sandeep Joshi
Mathematics, Technology and Programming are my passion. I am a part of Java Ecosystem and through this blog, I contribute to it. I am here to blog about my interests, views and experiences.
I am on Google+ and Facebook.
I feel proud to be listed as a "National Memory Record Holder" in the Limca Book of Records, 2009 and have attempted for an International Memory record in the Guiness Book of Records. I can remember the value of PI upto 10,000 digits after the decimal (3.1415.....). You can contact me on javagenious.com(At)gmal.com ; I would like to hear from you :)