JavaScript (and its pop-ups)

Hated and loved by scripters and programmers, JavaScript has been around for a while – and I have to say, it can do some nice tricks. As long as a website doesn’t rely too heavily on it and the usage is suitable the type of website, then I find it’s ok.

What does JavaScript do for you?
The scripts on a webpage are not constantly running in the background the whole time a users is browsing. The actions are triggered through an event that they specifically are set to listen for. These events can be a timer going off, the mouse hovering over a specific part of the website or a click. If you have ever experienced going to a website where there after a couple of minutes pops up an question if you want to subscribe to a newsletter, this is an event that might have been triggered by a timer set long enough for you to get an impression of the webpage. (These things are like the plague these days, especially US websites – I feel I can’t read anything anymore without clicking away such a pop-up.)

The logic is that if you have stayed on their website for X amount of time, you might be interested in more, so this is the time to reach you. You can assign several events to the same listener. If you have to take into consideration several browser’s DOM for this it might be an idea to create a function.  (DOM: Document Object Model, what allows scripts and programs to update a website through a browser.) (Deitel, P.J., Deitel, H.M, 2008) The pop-ups that I feel are the least disruptive are the ones that react when my mouse pointer goes up to the close-tab cross. In other words, they wait until I’m done and then asks me – if I don’t want to join their mailing list, I can just close the tab as I planned to. I don’t need to click away the pop-up in order to continue reading.

Let’s get techy:

What is a JavaScript library?

A JavaScript library is a collection of pre-made code snippets in which programmers can use to save time writing the code themselves. They can «borrow» pre-made code and embed it inside of their own webpages to create powerful web-applications. There are many libraries out there but jQuery is one of the most popular and readily used. There is safety in knowing that many of the Internet’s largest companies use it (Microsoft, Google, IBM, and Netflix) and that it is very extendable. (w3Schools, n.d.)

In order to use jQuery you can either download the file locally for development or have a product version (compressed) on your website. Alternately, you can also simply link it in from a Content Delivery Network (CDN). Google and Microsoft host jQuery and you can link to this source inside of your webpages. (w3Schools, n.d.) Example: <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js>

jQuery is useful for:
The following statements are based on information from the following sources:
(jquery.com, n.d., Chaffer, Swedberg and Resig, 2011, w3Schools, n.d.)

HTML/DOM manipulation
Without a library, developers might need to write many lines of code to traverse the DOM tree to get to particular HTML elements. jQuery allows for quick retrieval of the exact part of the document wanted and can alter it accordingly. Example: $(‘div.content’).find(‘p’);

CSS manipulation
jQuery can change the classes or styles of the document even after the page has rendered. jQuery also bridges gaps between various browsers. Example: $(‘ul > li.first’).addClass(‘active’);

HTML event methods
jQuery handles a variety of events without cluttering the HTML with event handlers. The event-handling API also covers most browser inconsistencies. Example: $(‘button.show-details’).click(function() {$(‘div.details’).show();});

Effect and animations
jQuery has many effects such as fades and wipes and other visual interactive behaviours. Example: $(‘div.details’).slideDown();

AJAX
Originally an acronym for «Asynchronous JavaScript and XML», Ajax is now a collection of many technologies that allows for client-server communication. jQuery bridges the browser-specific gap here as well. Example: $(‘div.details’).load(‘more.html #content’);

Utilities
jQuery enhances classic JavaScript with constructs such as iteration and array manipulation. Example: $.each(obj, function(key, value){total += value;});

Many plugins available
jQuery prides itself on being a community with many contributors. In addition to jQuery’s own features, hundreds of plug-ins are developed to extend its functionality, and the number is growing.

Example usage:
A website needs to develop a shopping-cart function for their shop. jQuery has some very useful interactive functions that could be good for this, particularly their UI API. Their “draggable” and “droppable” widgets allow the users to click on the product they want and drop it into the shopping cart somewhere on the site. (jqueryui.com, n.d.) Using jQuery they can also be assured that their shopping cart will work with the most common browsers, even older versions, so that all their customers will be getting the same shopping experience. A live example can be seen at vadendesign.com. (vadendesign.com, 2014)

Summary – the DOM and libraires:
Browsers support different DOMs at different stages – some browsers are faster at adapting and supporting new standards than others. A library could help you with this in the way that if a browser doesn’t support your DOM, it can use a fallback code to perform the same result. This will be a slower execution but you will get the intended result. Instead of writing this fallback code yourself the library will have it ready for you to use. The DOM you originally wanted to use has been made for a reason, in other words the old-style fallback code will be fairly encompassing and the library will be a great help. (Deitel, P.J., Deitel, H.M, 2008)

 

 

Bibliography

Chaffer, J., Swedberg, K. and Resig, J. (2011) Learning jQuery. [electronic book] : create better interaction, design, and Web development with simple JavaScript techniques. Birmingham, England : Packt Pub., 2011; 3rd ed. [EBSCO].

Deitel, P.J., Deitel, H.M. (2008) Internet & World Wide Web, How to Program. 4th Edition. Pearson Education Inc. pp.1373.

jquery.com. (n.d.) jQuery [Online] Available from: http://jquery.com/ (Accessed: 26.12.2016).

jqueryui.com. (n.d.) Draggable Widget | jQuery UI API Documentation [Online] Available from: http://api.jqueryui.com/draggable/#option-appendTo (Accessed: 26.12.2016).

vadendesign.com. (2014) jQuery Drag and Drop Shopping Cart | Vaden Design Roanoke VA [Online] Available from: http://vadendesign.com/portfolio/jquery-cart.php (Accessed: 26.12.2016).

w3Schools. (n.d.) jQuery Get Started [Online] Available from: http://www.w3schools.com/jquery/jquery_get_started.asp (Accessed: 26.12.2016).

Shaun the sheep as a pop-up Jack in the box; Image source: Alexas_Fotos, Pixabay, CC0 Public licence. https://pixabay.com/en/sheep-box-funny-animal-soft-toy-1649212/