Debugging in JavaScript - Programming: Java, JavaScript Coding For Beginners – Learn In A Day (2015)

Programming: Java, JavaScript Coding For Beginners – Learn In A Day (2015)

Chapter 3. Debugging in JavaScript

There are many chances of making a mistake while writing a program.

Such mistakes in a script are referred as bugs.

Debugging is a process of fixing bugs. In the development process debugging is a normal part.

The code we write might have logical errors or syntax errors, which are difficult to identify. Many times, nothing will happen when JavaScript code contains errors. No messages will indicate that there’s an error in the program.

Using a JavaScript Validator:

If one wants to check code for bugs, then one must make sure that it is a valid code and check it if follows the official syntax rules of the language by running it using a program called Validating parsers, or in short, just Validators. They often come with JavaScript editors and commercial HTML editors.

After visiting the web page, click on the jslint button once you paste the code in the text area. This program will parse through our JavaScript code to ensure that all variables and function definitions are in correct syntax.

Adding Debugging Code to Your Programs:

The alert() or document.write() methods helps in debugging your code. For example:

var debugging = true;

var whichImage = "widget";

if( debugging )

alert( "Calls swapImage() with argument: " + whichImage );

var swapStatus = swapImage( whichImage );

if( debugging )

alert( "Exits swapImage() with swapStatus=" + swapStatus );


*

Using a JavaScript Debugger:

A debugger is an application which gives the programmer a control over the execution of the script.

Debugger facilitates the user to examine the flow control. The script is run line by line and can be instructed to stop at particular breakpoints. The programmer can check the script’s state and the variables after the execution completes.

Form Validation

After the client enters the required information and clicks the submit button, form validation occurs. The server must send all the data again to the user and request the user to resubmit the form with correct or valid information. This occurs, if the user fails to enter all of the required information or if he enters invalid data.

Before sending the form to the web browser, JavaScript facilitates the validation of the form’s data on the client’s computer itself.

Two functions will be generally performed by the form validation.

· Basic Validation - To ensure that the data has been provided into every mandatory field, first the form needs to be checked. To check the data, it needs to loop through each field.

· Validation of the Data Format –This is to check if correct or valid data has been entered in the form.

Basic Form Validation:

Let us see how a basic form validation is performed. We call the validate() function to validate data to validate data whensubmit event occurs.

Validate() function is implemented as follows:

<script type="text/javascript">
<!--
//
Form validation code will come here
.


function validate()
{

if( document.myForm.Name.value == "" )
{
alert( "

Please enter your name

!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "
Please enter your Email id!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{
alert( "
Please enter the
a zip in the format

#####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please enter your country name!" );
return false;
}
return( true );
}
//-->
</script>

Data Format Validation:

Validation of the data can be done before submission of the data to the web server

Validating an email id means the email id should contain an @ sign and a dot (.), can be seen in the below given example.

Also, the last dot should be minimum one character after the @ sign, and the email address shouldn’t begin with an @ symbol.

<script type="text/javascript">
<!--

function validateEmail()
{

var emailID = document.myForm.EMail.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("
Please enter a valid email ID
")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>