Category Archives: Reference

How to Debug JavaScript Functions

These days, scripting has now become a complete class of web development on its own. With the modern day libraries available, most HTML/CSS developers are taking great interest in coding JavaScript. This can be quite challenging for programmers to handle, particularly when it comes to JavaScript code debugging. The true skills of a programmers can be measured by how he/she deals with errors and bugs.

debug javascript

There is a great probability that a programmer will make a mistake when writing his/her program. This mistake in the script is known as a bug. The process of finding and even fixing these bugs is what is known as debugging and it is a normal part of your development process.

For those who are just starting out in the programming industry, checking out the various tutorials available can be quite daunting. This is because the same technique may not work at all times. However, programmers need to be patient as the debugging process will be much easier and clearer with lots of practice. These guidelines will help you achieve what you want.

For you to debug the JavaScript function, you should first invoke it and stop the execution of JavaScript inside the function’s body. You should set up a breakpoint at the start of the function’s body, you can achieve this by clicking in the line number that is on the left side. If the breakpoint is properly set up, a blue marker will appear around that line number.

Perform a specific action that causes the function to launch, for example, you can click on the button on the web form, which is directly linked to the function.Some functions are not linked to a specific web element, however, they tend to be interconnected to a web page body or a global script. In such a case, you only need to press F5 so as to reload the webpage.

You can also invoke the function manually from the JavaScript console by typing the arguments and its name. You should look at the blue line and the red marker at the break point as this is an indication that you have entered your JavaScript function successfully.

debug javascript

You should then resume the execution of the script by clicking on the “Pause/Resume script execution”. This button is located on the top-right position of the Web Inspector window and it is below the field marked “Search Scripts”.

To execute your current JavaScript line you should click on the “Step over next function call” icon that is below the “Search Scripts” field. You can also click on the “Step out of current function” for you to get back to the parent function on the stack that invoked the function where the execution is stopped. To check out all the functions you can click on the “Call Stack” icon. This will display the function name, code line and module name where the execution was stopped.

You can also open and even inspect the JavaScript Console by clicking on the icon at the bottom of your Web Inspector window. This will allow you to check out the debugger messages, warnings and code errors. You can also set up additional breakpoints and continue drilling through your JavaScript functions even if the execution has already been stopped.

Image credits: Nathan SmithDmitry Baranovskiy

jQuery Plugins To Work With Date

As a developer, there is a necessity to contemplate a number of factors when developing a website. An application or a web may handle special date data such as a user’s birthday, an item’s purchase date and last log in date just to mention a few. Due to such variety of data and a developer’s preference, he may prefer to use a unique jQuery plugin to suit his need.

jquery plugins date

One of the well-known jQuery plugins to work with Date is DatePicker which was developed by Stefan Petre. His code provides very diverse methods of date customizations based on the user’s preference where a user can start at any date, month or year. Not only does DatePicker provide a possibility to limit the choices a user can make by passing distinct parameters into a jQuery function, but also the code is exceedingly lightweight such that initial code can be done with a single line of code. For example:

jQuery(‘datetimepicker’).datetimepicker();

Stefan didn’t vacate after developing DatePicker. He reproduced an extension of it that brings out stunning styles; the jQuery UI Bootstrap designed to convey exquisiteness and ease-of-use of Twitter Bootstrap to jQuery widgets.

The Zebra_Datepicker is built using Boilerplate plugin. It’s small in size and weighs around 21KB. Also, despite it providing a mechanism to disable dates and date ranges, it’s compact and also offers an intuitive interface and easy navigation. It also supports internationalism and customization of weekend days for countries.

ptTimeSelect plugin is based on Stefan Petre’s DatePicker code with added contributions taken from Andrew Rowls and Jdewit. It is used for input fields that displays a pop up widget that allows a user to define time which is written back to an input field.

jquery plugins date

A jQuery Mobile DateBox plugin is a simple yet high intuitive plugin that enriches user interaction with dates on a given form. When clicked, it shows a popup calendar where users will only have to make a selection.

The jQuery UI Datepicker plugin supports animation effects when closing of opening datepicker. There’s a dropdown menu that enables you to select your fancy animation. There are also a variety of effects that the users can select from.

Also,among the jQuery plugins to work with Date is the jQuery ClockPicker. A clock-styled time picker plugin that supports both desktop and mobile devices. Also it supports nearly all touchscreen devices.

Mobiscroll jQuery UI Datepicker supports touchscreen devices also. It comprises of a wheel-scroller user control to easily scroll and select date or time.

A smaller and simpler jQuery plugin is the glDatePicker which automatically jumps to respective month upon selection. Apart from offering stylized current date and selected date, it also enables offset days of the week, for example, making Thursday to be the first day of the week. As a user, you can customize month names and days of the week names.

Mobi Pick has been yet another date picker widget for jQuery Mobile designed to support the Android Operating System and uses XDate date library. Mobi Pick allows progressive enhancement for date input fields using Modernizr.

Image credits: sandeep1657tacchini

refresh-a-page-using-jQuery

Refresh a page using jQuery

Imagine you want to refresh the current page after a certain user action. In fact, you don’t need any special jQuery handling for this. Plain Javascript has location.reload(); function that you can use in your event handler.

Example:

$('#refresh_button').click(function()
{
location.reload();
});

Note, however that this may load the page from cache. If you want to do a “full refresh” that fell fetch the page from the server again, do

$('#refresh_button').click(function()
{
location.reload(true);
});

format-a-date-jquery-1

Format a date using jquery

There are many ways to format an a date to display on a page. In this tutorial we will see how to format a date using jQuery.

Using jquery-dateFormat plugin

This plugin is especially useful when you have a pre-selected date display format. jquery-dateFormat makes it easy to format the date based on a format string.
Here is a sample:

document.write($.format.date(new Date(), "Today: dd/MM/yyyy"));

The code above prints the date like this:

Today: 18/12/2014

Here is the link to the format pattern reference.

Pretty date formatting

prettyDate() function gives you the relative date that you often see in social media sites.
for example:

jQuery.format.prettyDate(new Date())

returns “just now”

This is useful in certain cases where the relative time reference is makes more sense, like the time of a comment. The date will be displayed like this

“1 minute ago”
“2 days ago”
etc.

Taking it global

When you have audience from different cultures and languages, you need to format the date, time, currency and numbers according to those cultures. In those scenarios, it is not advisable to use a fixed date format. You have to format the date according to the user’s locale.

Globalize.js is perfect for this purpose.
Using Globalize.js you can format the date according to user’s locale preference.
See why globalization

Globalize.format() function takes the date and formats it based on user preference and locale.
You don’t have to worry whether it is dd/mm or mm/dd

more on globalize date format.