Monday, March 30, 2015

How to detect if JavaScript is disabled ?


Nowadays almost all web pages using JavaScript programming language . It makes web pages functional for specific purpose and if disabled for some reason, the content or some functionality of the web page will not work as expected.  

Lets take one example :

     Here we have basic form validation :                                               
     
In the Name textbox input  we will have three events onfocus, onkeyup, onblur like below:

<input id="txtname"type="text"onfocus="validateIfEmpty('txtname') onblur="validateIfEmpty('txtname')" onkeyup="validateIfEmpty('txtname')"></input>

      Similarly in Gender textbox also will have same three events. validateIfEmpty is a javaScript function that will be call onfocus , onblur , onkeyup of the textbox.

Events :
onfocus -- The onfocus event occurs when an element gets focus. 

onblur -- The onblur event occurs when an object loses focus.

onkeyup -- The onkeyup event occurs when the user releases a key (on the keyboard).

Below script is  validateIfEmpty :

function(controlId) {
    var control = document.getElementById(controlId);
    if(control.value === ""){
        control.style.background = "red";
    }else{
        control.style.background = "white";
    }

In that method we will pass 'id' attribute of the textbox . If the textbox value is null then will show background color as red else white.

How to check the JavaScript is disabled ?

The <noscript> tag defines an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support script.

We just place the code that we want to display when Javascript is not supported between noscript tags and the enclosed code will only be included in browsers that either don't recognise script or noscript tags (and therefore ignore both tags just displaying what is between them instead) or which recognise the tag and also identifies that Javascript has been turned off.

Example :

<noscript>Javascript  is disabled</noscript>

 Real Example pageTry it yourself

  In the above example at first you will able to see the form validation textbox , once you disabled the JavaScript in your browser setting you will see the following text message .

"It seems that you have disabled JavaScript, please enable JavaScript"

How to disable the JavaScript in chrome browser:

Steps to disable in chrome :

  1. On the web browser menu click on the "Customize and control Google Chrome" and select "Settings".
  2. In the "Settings" section click on the "Show advanced settings..."
  3. Under the the "Privacy" click on the "Content settings...".
  4. When the dialog window opens, look for the "JavaScript" section and select "Do not Allow all sites to run JavaScript ".
  5. Click on the "OK" button to close it.
  6. Close the "Settings" tab.
After steps completed click the Run with JS button in the jsBin example page.

  
Unknown Software Engineer

No comments:

Post a Comment