1.3 Client-Side Technologies

	In this section we are going to discuss the most used client-side technologies with quick examples on each one.

JavaScript (JS)

		JavaScript is an interpreted programming language with object-oriented (OO) capabilities. Syntactically, the
		core JavaScript language resembles C, C++, and Java, with programming constructs such as the if
		statement, the while loop, and the && operator.

		The similarity ends with this syntactic resemblance, however. JavaScript is a loosely typed language, which
		means that variables do not need to have a type specified.

		Objects in JavaScript map property names to arbitrary property values. In this way, they are more like hash
		tables or associative arrays (in Perl) than they are like structs (in C) or objects (in C++ or Java) (Flanagan
		2006).

In the next example JavaScript is used to embed content into html tags:

1.3 Client-Side Technologies

		Also, one of the most uses of JavaScript is to validate user input. In the next example, we prevent the user
		from entering non numeric values:

1.3 Client-Side Technologies

Ajax

		Ajax is a set of programming techniques or a particular approach to web programming. These programming
		techniques involve being able to seamlessly update a web page or a section of a web application with input
		from the server, but without the need for an immediate page refresh.

		This doesn't mean that the browser doesn't make a connection to the web server. Indeed, It is very likely
		that your page, or data from which the page is drawn, must still be updated at somepoint by a rendezvous
		with the server.

1.3 Client-Side Technologies

		What differs in the Ajax model is that the position at which the page is updated is moved (Ullman and Dykes
		2006).

AJAX is based on combination of (Ullman and Dykes 2006):

XHTML and CSS

The Document Object Model (DOM)

JavaScript

XML and XSLT

The XML Http Request object

		In reality, to create an application using Ajax techniques you need only three of these: XHTML, the DOM,
		and JavaScript. If you do any amount of development with Ajax techniques, though, you will almost certainly
		need to use all of the technologies at some point (Ullman and Dykes 2006).

1.3 Client-Side Technologies

How Ajax Works

Figure 1.5: How Ajax works

An Example

1.3 Client-Side Technologies

		The AJAX example above contains one div section with id property txtHint. The div section will be used to
		display information returned from a server. When the user enter the input and click anywhere outside
		textfield, onblur event, the JavaScript function validateInput will be called.

		The function validateInput transfers control to validateInput.php page on server side, where the actual
		validation is performed and the result of validation is returned back to be displayed in txtHint div section.

jQuery

		jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and
		manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a
		multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that
		millions of people write JavaScript (jquery n.d.).

Examples (jquery n.d.)

Get the "button" element with the class 'continue' and change its HTML to 'Next Step...'

1.3 Client-Side Technologies

		Show the #banner-message element that is hidden with display:none in its CSS when any button in #button-
		container is clicked:

		Call a local script on the server /api/getWeather with the query parameter zipcode=97201 and replace the
		element #weather-temp's html with the returned text:

You can find more information on JQuery in (Chaffer and Swedberg 2011).

JSON

		JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read
		and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript
		Programming Language. JSON is a text format that is completely language independent but uses...

1.3 Client-Side Technologies

		...conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java,
		JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange
		language (json n.d.).

1.3 Client-Side Technologies

		For AJAX applications, JSON is faster and easier than XML, for example Using XML you will do the following
		steps (w3schools n.d.):

Fetch an XML document.

Use the XML DOM to loop through the document.

Extract values and store in variables.

While in JSON:

Fetch a JSON string.

Using eval() function to be used to convert a JSON text into a JavaScript object.