Client-side development 1 - jQuery

Client-side development 1 - jQuery

a library - a collection of functions which are useful when writing web apps. Your code is in charge and it calls into the library when it sees fit. 

                                    E.g., jQuery.

A framework is something that usually forces a certain way of implementing a solution,

whereas jQuery is just a tool to make implementing what you want to do easier. jQuery: The Write Less,

Do More, JavaScript Library. For sure, it's a JavaScript library. ... And jQuery is just a single library 

Then jQuery is not a framework.

frameworks - a particular implementation of a web application, where your code fills in the details. 

                                    The framework is in charge and it calls into your code when it needs 

The purpose of jQuery is to make it much easier to use JavaScript on your website.

The features provided by jQuery

jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid

web development. jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code.

a. Change content (based on user’s actions) 

b. Change CSS 

c. Reveal GUI elements

d. Ajax

How the jQuery handles the issues related to partial page loads to the browser

Through an extraordinary amount of hard work, jQuery effectively provides cross-browser compatibility

for DOM traversal and manipulation, Event handling and delegation, XHR/Ajax logic, Element selection

and document queries, Element attribute, and data management, as well as simple object management

utilities. It does so without modifying the browser's native javascript implementation by providing a

comprehensive abstraction layer.

The disadvantages of jQuery

One of the main disadvantages of jQuery is the large number of published versions in the short time. It does not matter if you are running the latest version of jQuery, you will have to host the library yourself (and update it constantly), or download the library from Google(attractive, but can bring incompatibility problems with the code).

In addition to the problem of the versions, other disadvantages that we can mention:

jQuery is easy to install and learn, initially. But it’s not that easy if we compare it with CSS

If jQuery is improperly implemented as a Framework, the development environment can get out of control.

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector

The jQuery element selector selects elements based on the element name.

Common Selectors Overview

Example	Classification	Explanation
h1	Type Selector	Selects an element by its type
.tagline	Class Selector	Selects an element by the class attribute value, which may be reused multiple times per page
#intro	ID Selector	Selects an element by the ID attribute value, which is unique and to only be used once per page

Child Selectors Overview

Example	Classification	Explanation
article h2	Descendant Selector	Selects an element that resides anywhere within an identified ancestor element
article > p	Direct Child Selector	Selects an element that resides immediately inside an identified parent element

Sibling Selectors Overview

Example	Classification	Explanation
h2 ~ p	General Sibling Selector	Selects an element that follows anywhere after the prior element, in which both elements share the same parent
h2 + p	Adjacent Sibling Selector	Selects an element that follows directly after the prior element, in which both elements share the same parent

Attribute Selectors Overview

Example	Classification	Explanation
a[target]	Attribute Present Selector	Selects an element if the given attribute is present
a[href="http://google.com/"]	Attribute Equals Selector	Selects an element if the given attribute value exactly matches the value stated
a[href*="login"]	Attribute Contains Selector	Selects an element if the given attribute value contains at least once instance of the value stated
a[href^="https://"]	Attribute Begins With Selector	Selects an element if the given attribute value begins with the value stated
a[href$=".pdf"]	Attribute Ends With Selector	Selects an element if the given attribute value ends with the value stated
a[rel~="tag"]	Attribute Spaced Selector	Selects an element if the given attribute value is whitespace-separated with one word being exactly as stated
a[lang|="en"]	Attribute Hyphenated Selector	Selects an element if the given attribute value is hyphen-separated and begins with the word stated

The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.

The Document Object Model originated as a specification to allow JavaScript scripts and Java programs to be portable among web browsers. Dynamic HTML was the immediate ancestor of the Document Object Model, and it was originally thought of largely in terms of browsers. However, when the Document Object Model Working Group was formed, it was also joined by vendors in other domains, including HTML or XML editors and document repositories. Several of these vendors had worked with SGML before XML was developed; as a result, the Document Object Model has been influenced by SGML Groves and the HyTime standard. Some of these vendors had also developed their own object models for documents in order to provide programming APIs for SGML/XML editors or document repositories, and these object models have also influenced the Document Object Model. 

Benefits of using jQuery

* Search Engine Optimized – While search engines are getting better at being able to read content within some Flash, everything within jQuery is setup as text. This means it is completely readable to all the search engines, exposing all your keyword rich content.

* Save Time – Five lines of jQuery are equivalent to 25 lines of conventional JavaScript code. This means smaller files and faster loading web pages.

* Plug-ins – There are an abundance of plug-ins on the web that make creating special effects simple and fast for web developers.

* Help? – With an abundance of plug-ins comes with an abundance of help. There is a large helpful support community on the web to help you quickly remedy any bug issues.

* That was easy! – jQuery has easy implementation for web developers in comparison to other applications.

* Cross Browser Friendly – jQuery is currently the most popular JavaScript library and works in all browsers.

* FREE! – free, open source software.

* Mobile Devices – jQuery is supported by any mobile device whose web browser supports JavaScript.A lot of mobile devices like iPads and iPhones don’t run Flash at all.

Simplifies AJAX

* Wow Factor – Web developers use jQuery to make web pages more exciting, interactive, cleaner, and more user friendly. Make your users go WOW!

JavaScript libraries

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

Advanced Plugin Concepts

linkProvide Public Access to Default Plugin Settings

An improvement we can, and should, make to the code above is to expose the default plugin settings.This is important because it makes it very easy for plugin users to override/customize the plugin with minimal code. And this is where we begin to take advantage of the function object.

Provide Public Access to Secondary Functions as Applicable

This item goes hand-in-hand with the previous item and is an interesting way to extend your plugin(and to let others extend your plugin). For example, the implementation of our plugin may define a function called "format" which formats the hilight text. Our plugin may now look like this, with the default implementation of the format method defined below the hilight function:

Keep Private Functions Private

The technique of exposing part of your plugin to be overridden can be very powerful. But you need to think carefully about what parts of your implementation to expose. Once it's exposed, you need to keep in mind that any changes to the calling arguments or semantics may break backward compatibility. As a general rule, if you're not sure whether to expose a particular function, then you probably shouldn't.

So how then do we define more functions without cluttering the namespace and without exposing the implementation? This is a job for closures. To demonstrate, we'll add another function to our plugin called "debug". The debug function will log the number of selected elements to the console. To create a closure, we wrap the entire plugin definition in a function (as detailed in the jQuery Authoring Guidelines).

Do You See The Problem?

It's not really about how many options your plugin has; but what options it has!

Bob has gone a little over the top. The level of customization he's offering, while it may seem high, is actually quite low, especially considering all the possible things one might want to control when using this plugin. Bob has made the mistake of offering a lot of ridiculously specific options, rendering his plugin much more difficult to customize!

A Better Model

So it's pretty obvious: Bob needs a new customization model, one which does not relinquish control or abstract away the necessary details.

The reason Bob is so drawn to this high-level simplicity is that the jQuery framework very much lends itself to this mindset. Offering a previousButtonTextColor option is nice and simple, but let's face it, the vast majority of plugin users are going to want way more control!

Here are a few tips which should help you create a better set of customizable options for your plugins:

Don't Create Plugin-specific Syntax

Developers who use your plugin shouldn't have to learn a new language or terminology just to get the job done.

Bob thought he was offering maximum customization with his delay option (look above). He made it so that with his plugin you can specify four different delays, "quite short," "very short," "quite long," or"very long":