jQuery and forms

Selecting form controls with jQuery selectors

jQuery selector working with forms are not always the fastest option to select elements: when you use them remember to reduce the number of elements jQuery needs to look through. Orthewise, use common CSS selectors

Example of use of jQuery selectors for forms

/* to start, select all form descendants,
   then, use the filter() method on the initial selection */
var $formDescs = $('form *');

/* :input selects all button, input, select and textarea */
var $inputs = $formDescs.filter(':input');
  
/* :text selects input type="text" and input */  
var $text = $inputs.filter(':text'); 

/* :password selects input type="password" */
var $password = $inputs.filter(':password');   

/* :button selects button and input type='button' */
var $button = $inputs.filter(":button");  

/* :checked selects all checked inputs from group of radio and check inputs */
var checked = $inputs.filter(":checked");

/* :selected selects all selected options from drop boxes */
var selected = $inputs.filter(":selected"); 

jQuery Effects

Effects

jQuery effects includes transitions and movements

• show and hide elements
• animate elements with fade in and fade out
• animate elements with slide up and slide down

	jQuery method	method meaning
Basic Effects	$('selector').show()	set the display CSS property to element's default value
	$('selector').hide()	set the display CSS property to none
	$('selector').toggle()	toggle between showing and hiding elements
Fading Effects	$('selector').fadeOut()	make element disappear by changing both opacity and display CSS properties
	$('selector').fadeIn()	make element appear by changing both opacity and display CSS properties
	$('selector').fadeTo()	change the opacity CSS property
	$('selector').fadeToggle()	hide or show the element
Sliding Effects	$('selector').slideUp()	hide the element with sliding movement
	$('selector').slideDown()	show the element with sliding movement
	$('selector').slideToggle()	hide or show the element
Custom Effects	$('selector').delay()	delay the execution of the following method
	$('selector').stop()	stop the animation
	$('selector').animate()	create a custom animation

jQuery Traversing and Filtering

DOM Traversing

The jQuery methods for traversing the DOM allow to access other element nodes relative to the initial selection.

jQuery method	method meaning
$('selector').find('selector2')	all the elements in the current selection matching selector2
$('selector').closest('selector2')	the nearest ancestral element matching selector2
$('selector').parent()	the direct parent element of current selection
$('selector').parents()	all the parents of current selection
$('selector').children()	all the children of current selection
$('selector').next()	next sibling of current element
$('selector').prev()	previous sibling of current element

jQuery and events

Checking When a Page is Ready For Your Code

The ready() method executes its function argument when the page is ready to work

$(document).ready(function(){
  // function body
});

• Behind the scenes, the ready() method add a listener for DOMContentLoaded events or for load events (in browsers that do not support HTML5 events a load event is fired instead)

There is a shorthand code for the ready() method:

$(function(){
  // function body
});

If you do not wish to use jQuery but still run your code when the page is ready to work, place your script before the body closing tag.

Scripting DOM and CSS with jQuery

Getting and Setting Element Content

The .html() and .text() methods retrive and update the content of elements.

How To Retrieve Element Content

jQuery method	method meaning
html = $('selector').html()	get the HTML content of the first element in the jQuery selection
text = $('selector').text()	get the textual content from every element in the jQuery selection and any descendant

Introduction to jQuery Library

What is jQuery

jQuery is a javascript library you include in your web pages.
jQuery allows you to select elements using a CSS-style selector and do something with those elements by calling a jQuery method.

Selecting HTML elements with jQuery

$('p');  /* a jQuery object */

• $() works as short invocation to the jQuery() function
• $() creates a jQuery object which stores references to the selected elements

Types of JavaScript Events

W3C DOM Events

DOM Level 2 UIEvent: user interface events occur for interactions with browser's window

type	event description	target
load	Fires when HTML and all resources of a web page have finished loading	document, window
unload	Fires when web page is unloading for a new page requested	body, window
error	Fires when browser encounter a JS error or resource does not exist (inconsistent support)
resize	Fires repeatedly as browser's window is being resized	window
scroll	Fires repeatedly as user scrolls web page	document, element
Usage: The load event is commonly used to trigger scripts that access the content of a page. It can cause the page to look slow, because it is raised only when all images are fully loaded. As resize and scroll events fire repeatedly, do not use them to trigger complicated code.

JavaScript Events

Types of Events

In a browser events are dispatched to objects to signal that something has happened, such as network activity or user interaction.

• W3C DOM Events Interfaces
• UIEvent: user interface events occur for an interaction with browser's window
• FocusEvent: occur when an element (link or form field) gains or loses focus
• MouseEvent: occur when user uses mouse, touchscreen, trackpad
• KeyboardEvent: occur when user uses keyboard
• [deprecated] MutationEvent: occur for a modification of DOM structure or DOM node
• MutationObserver: occur for a modification of DOM structure or DOM node
• W3C HTML5 Events Interfaces
• FormEvent: occur for an interaction with form element
• Various Interfaces: occur for an interaction with web page
• Vendor Specific BOM Events
• Events that deals with touchscreen and accelerometer

The DOM API

Browsers come with a set of built-in objects that model data used and operations performed by your applications:

• The Browser Object Model API (BOM) features Window object that models browser's windows and tabs.
• The Document Object Model API (DOM) features Document object that models web pages displayed in browser's windows.

The DOM API specification serves two purposes:

• how browser should make a model of HTML documents using objects:
  When a browser loads a web page, it creates a structure, a DOM tree, that is a live representation of the web page. The DOM tree is made of Node objects and each node represents an element that is part of the web page.
• how JS programs can access this model for changing HTML documents:
  JavaScript program can access the DOM tree for modifying the HTML document. This does not change the HTML code, but only the DOM, the representation of the document.

HTML attributes and DOM Element properties

HTML Global Attributes

An HTML element consists of a tag and a set of attributes, an attribute being a pair name="value".

HTML Global attributes are attribute common to all HTML elements. They are divided in three subtypes: core attributes, event-handler attributes and xml attributes

HTML 4.1 Core Attributes

• id: a unique identifier for the element
• class: classifies similar elements, for semantic purposes or for presentation purposes.
• style: adds presentational properties to the element
• title: attaches textual explanation to the element
• lang: defines the language of the element
• dir: the reading direction
• accesskey: indicates a keyboard shortcut key
• tabindex: specifies the tab order index

HTML 5 Core Attributes

• contenteditable: specifies whether a user can edit the content of the element
• contextmenu: specifies a <menu> for the element
• data-*: custom attribute for the element
• draggable: specifies whether a user can drag the element
• hidden: hides the element
• spellcheck: specifies whether the element should be checked for spelling and grammar or not
• translate: specifies whether content of the element is to be translated or not when page is localized

Example: attributes of <body> element

See the Pen DOM tree: document.body.attributes by Massimiliano De Simone (@maxdesimone) on CodePen.

HTML Attributes as DOM Element Properties

In the DOM an HTMLElement object represents an element of an HTML document. The attributes of an element become properties of the corresponding DOM HTMLElement object.

For example, you may set up google analytics for your web site, in that case you have to include in the home page a script like the one below, where you create a <script> element and then you set the attributes type, async and src using the dot notation.

<script>
var _ga = document.createElement('script'); 
 _ga.type = 'text/javascript'; 
 _ga.async = true;
 _ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
<script>

Client JavaScript Programs Timeline

An UML state machine diagram is used to show the behaviour of a system. In this case a state machine diagram demonstrates the behaviour of the document object that is its life cycle.

The <script> element

The unobtrusive javaScript programming paradigm

Unobtrusive JavaScript is an approach to web programming that supports separation of behaviour (JavaScript code), structure (HTML code) and presentation (CSS code).
According to this programming paradigm, to accomplish separation is best to write all your JavaScript in an external file and embed it in HTML document using a <script> element with src attribute.

The <script> element is synchronous by default

Let's examin how the <script> element allow you to insert javascript in a HTML document.

<script src="scripts/javascript_app.js"> </script> <!--synchronous script-->

When JavaScript engines encounters a <script> element, they stop parsing HTML to download and interpreter the JS file, then they resume parsing and rendering HTML.

The <script> element has two important attribute: HTML 4.1 defines the async attribute and HTML5 introduces the defer attribute. These two attributes cause scripts to be executed differently, in browsers supporting them.