Javascript Tutorials

Javascript for beginners

• What is javascript?
• A client-side scripting language.
• Js works on the most browsers,opera,chrome,Mozilla.
• Js is used to add interactivity in HTML pages.
• For Js to work on any browser, it first needs to be enabled.

• How to get started?
• Ensure that you have  notepad++ or Notepad; you need no special software to run Javascript. It can be interpreted by your browser. 

This short tutorial will cover the following:

• Displaying message in an alert box.
• Using internal Javascript function
• Using external Javascript function

Displaying message in an alert box.

Step 1:

• We will create a simple form with a button "Show alert" as shown below.
• Open notepad,copy paste code below and save as Alert.html

         <html>

         <head>

         </head>

         <body>

         <form name='frm_alert'  action='' method='post'>

         <input type='submit' name='submit' value='Show Alert'/>

         </form>

         </body>

          </html>

Step 2:

• We will now create the JS function(ShowAlert()) that will display "Hello" in an alert box when Show Alert button is clicked.
• ShowAlert() function is created as shown:

     function ShowAlert()

     {

         //codes in here

     }

• To create alert box,we use

          alert('Message to be displayed');

        In our case it will be,

             alert('Hello');

• Complete ShowAlert() function :

         function ShowAlert()

          {

                alert('Hello');

           }

Did we miss out something? Actually yes, all Javascript functions should be placed within the <script type='text/javascript'></script> tags.

          <script type='text/javascript' >

              function ShowAlert()

             {

                   alert('Hello');

              }

          </script>

Step 3:

• Modify Alert.html and add the JS codes between the head tags. Almost done!

Step 4:

• Now we need to call the Js function.
• We specify which action shall trigger the JS to be executed. To  execute  ShowAlert() on click we alter the input tag as such:

<input type='submit' name='submit' value='Show Alert' onclick='ShowAlert()'/>

Here is the complete code:

<html>

          <head>

                   <script type='text/javascript' >

                   function ShowAlert()

                   {

                             alert('Hello');

                   }

                   </script>

          </head>

          <body>

          <form name='frm_alert'  action='' method='post'>

          <input type='submit' name='submit' value='Show Alert' onclick='ShowAlert()'/>

          </form>

          </body>

</html>

---

• The above demonstrates the use of an internal JS function. Let's now repeat the above using an external JS.

Step 1:

• Copy the ShowAlert() function in a notepad and save as Alert.js.(Note: we do not include the <script></script> tags)

           function ShowAlert()

                   {

                             alert('Hello');

                   }

Step 2:

• Modify Alert.html;remove previous js codes  and replace them with the code below. 

<script type='text/javascript' src='Alert.js'></script>

• The part highlighted in red is really important,it specifies the source of the javascript. For example: If we saved Alert.js in a folder 'Javascript' and Alert.html outside that folder,src would be 'Javascript/Alert.js'

• The complete code:

          <html>

          <head>

          <script type='text/javascript' src='Alert.js'></script>

          </head>

          <body>

          <form name='frm_alert'  action='' method='post'>

          <input type='submit' name='submit' value='Show Alert' onclick='ShowAlert()'/>

          </form>

          </body>

          </html>

To summarize:

• Javascript is a client-side scripting language;that is it is interpreted by the browser.

• A javascript function can be internal or external. 

• Internal js function: Requires <script></script> tags.

• External js: Requires 

 no <script></script> tags, to include the js we use <script type='text/javascript' src='src.js'></script>

 Additional Note:

• Many functions can be bundled within the 

<script></script> tags

<script type='text/javascript'>function x(){}function y(){}function z(){}</script>

• It is desirable to have all js scripts as external  for better  maintenance and performance.
.