javascript tutorial part 5

 Mouseover hide/show Elements in Javascript

So far, we have seen onclick events, let's try some mouseover effects.

We shall consider onmouseout and onmouseover.

Mouseover to hide/show an image

Complete code for form:

<html>

 <head>

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

 </head>

 <body>

 <form name='frm'>

 <img src='myimage.jpg'  id='mydiv'  onmouseover='Hide()' onmouseout='Show()' alt='Let's play hide and seek'/>

 </form>

 </body>

 </html>

Code explained:

onmouseover='Hide()':

• onmouseover triggers an event when mouse is hovered on image.
• Hide() function is called to hide image.

onmouseout='Show()':

• onmouseout triggers an event when mouse is no longer focused on image.
• Show() function is called to show image again.
• 
  

Javascript Functions (mouseover.js)

Hide() Function:

function Hide()

{

   document.getElementById('mydiv').style.visibility='Hidden';

}

Show() Function:

function Show()

{

    document.getElementById('mydiv').style.visibility='visible';

}

javascript part 4

 Show/Hide HTML elements in Javascript

Hide HTML element:

• Create a div with id 'mydiv' with text 'Hide Me!' .

            <div id='mydiv'>Hide Me!</div>

•  Create Button with value set as 'Enable Visibility'.

            <input type='button' name='btn' value='Enable Visibility'/>

• Create Javascript function Hide().

            function Hide()

                      {

                         document.getElementById('mydiv').style.visibility='hidden';

                       }

• Call Javascript function Hide() when 'Enable Visibility' button is clicked.

             <input type='button' name='btn' value='Enable Visibility' onclick='Hide()'/>

Note:
For hiding an element visibility is set to 'hidden';
For showing an element, it is set to 'visible' as follows:(document.getElementById('mydiv').style.visibility='visible';). 

javascript Tutorials Part 3

 Displaying contents in a Div

This tutorial will teach you how to display a text,image and a link in a div using javascript.
For this we will introduce the use of  innerHTML.

What is innerHTML?

• innerHTML sets or returns a content inside/within an html tag.
• It can be used to set/return contents such as a link,image and text.
• 
  

Example 1:

Displaying Text in a div:

The form appears as shown in screenshot on left.

Clicking Show Text button displays the text in a div.(see screenshot on right).

Complete Code for Form:

<html>

 <head>

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

 </head>

 <body>

 <form name='frm'>

 <div style='border:solid;1px;width:170px;height:30px;' id='mydiv'></div>

 <p>&nbsp;&nbsp;&nbsp;<input type='button' name='btnshow' value='Show Text' onclick='ShowText()'/></p>

 </form>

 </body>

 </html>

Code Explained:

• The id of the div is set.In our case,it is 'mydiv'; highligted in red. 
• The button 'Show Text' calls the Javascript function  ShowText() on click.
• The external.js is included between head tag.

Complete Code for external.js:

function ShowText()

{

     document.getElementById('mydiv').innerHTML="Am a text displayed in a div";

}

Code Explained:

innerHTML sets/returns  the text "Am a text displayed in a div" within the HTML tag with id mydiv.

Example 2:

Displaying Image in a div:

The form appears as shown in screenshot on left.

Clicking Show Image button displays the Image in a div.(see screenshot on right).

Complete Code for Form:

<html>

 <head>

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

 </head>

 <body>

 <form name='frm'>

 <div style='border:solid;1px;width:60px;height:60px;' id='mydiv'></div>

 <p>&nbsp;&nbsp;&nbsp;<input type='button' name='btnshow' value='Show Image'  onclick='ShowImage()'/></p>

 </form>

 </body>

 </html>

Complete Code for external2.js:

function ShowImage()

{

     document.getElementById('mydiv').innerHTML="<img src='myimage.jpg' alt='image'/>";

}

Download myimage.jp here(right-click and save as)

Example 3:

Displaying Link in a div:

Complete Code for Form:

<html>

 <head>

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

 </head>

 <body>

 <form name='frm'>

 <div style='border:solid;1px;width:170px;height:30px;' id='mydiv'></div>

 <p>&nbsp;&nbsp;&nbsp;<input type='button' name='btnshow' value='Show Link'  onclick='ShowLink()'/></p>

 </form>

 </body>

 </html>

Complete Code for external3.js:

      function ShowLink()
{
               document.getElementById('mydiv').innerHTML="<a href='https://www.facebook.com'>
              Go to  Facebook!</a>";
}

Javascript Tutorial part 2

 Enabling and Disabling elements using Javascript

We will be using a javascript function  to enable and disable a textfield.

How it will work?

• The form will consist of two buttons; enable and disable button.
• On load, the Textfield and Disable button  is disabled/inactive; only enable button will  be active/enabled(see screenshot on left).
• Clicking the Enable button will  activate/enable  the Textfield and also activate/enable the Disable button; disabling the Enable button(see screenshot on Right)
• Clicking the Enable button will  activate/enable  the Textfield and also activate/enable the Disable button.(that is reset everything-see screen on left).

Code for the Form:

 <html>
 <head>
 <script type='text/javascript' src='external.js'></script>
 </head>
 <body onload='Disable()'>
 <form name='frm'>
 <div style='border:solid;1px;width:260px;height:230px;'>
 <br/><br/><br/>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input type='text' name='txt-fld' value='You can disable me!' id='txtfld'/><br/><br/>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input type='button' name='submit' value='Enable' id='btnenable' onclick='Enable()'/>
 &nbsp;&nbsp;&nbsp;
 <input type='button' name='submit' value='Disable'  id='btndisable' onclick='Disable()'/>
 </div>
 </form>
 </body>
 </html>

The Javascript function:


We will use an external one, external.js. It will contain 3 functions:
DisableEnable(),Enable(),Disable().


Function DisableEnable()

• This function will check if textfield is enabled or disabled. If Textfield is disabled; the Button Enable shall be active and Button Disabled shall be inactive and vice versa.

Complete code for DisableEnable() Function:

function DisableEnable()

{

if(document.getElementById('txtfld').disabled==true) //checks if textfield is disabled

{

document.getElementById('btnenable').disabled=false;

                          //enable Button with id  

btnenable

document.getElementById('btndisable').disabled=true;

                        //disable Button with id btndisable

}

else // if 

textfield is not disabled

{

document.getElementById('btnenable').disabled=true;

                          //disable Button with id  btnenable

document.getElementById('btndisable').disabled=false;

                          //enable Button with id  btnenable

}

}

Function Enable()

This function will activate the textfield and decide which button to enable or disable by calling the function DisableEnable(). 

Complete code for function Enable():

         function Enable()

{

 document.getElementById('txtfld').disabled=false; //Activate Textfield

 DisableEnable(); //call function to enable/disable appropriate buttons

}

Function Disable():

This function will deactivate the textfield and decide which button to enable or disable by calling the function DisableEnable().  

   function Disable()

{

document.getElementById('txtfld').disabled=true; //Deactivate Textfield

DisableEnable();//call function to enable/disable appropriate buttons

}

 External.js

      function DisableEnable()

{

if(document.getElementById('txtfld').disabled==true)

{

document.getElementById('btnenable').disabled=false;

document.getElementById('btndisable').disabled=true;

}

else

{

document.getElementById('btnenable').disabled=true;

document.getElementById('btndisable').disabled=false;

}

}//end of function

function Enable()

{

            document.getElementById('txtfld').disabled=false; 

            DisableEnable(); 

}//end of function

function Disable()

{

        document.getElementById('txtfld').disabled=true; 

        DisableEnable();

}//end of function








Note:  

• All elements should have a unique id,else there will be conflicts.
• Other ways of setting  an element to disabled=true/false exists.

• Example 1:
•  Within the html tags itself.
• <input type='text' name='txt-fld' value='You can disable me!' id='txtfld' disabled='true' />

• Example 2: 
• Instead of using getElementByid() to disable an element we could use:
•          document.Form.ID.disabled=false/true; 
• 
  
• For instance to disable the Enable Button which has id  btnenable,we would use:
•         document.frm.btnenable.disabled=true; 

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