t-11

1. Distinguish the term “Rich Internet Applications” (RIAs) from “Rich Web-based Applications” (RiWAs). 
Rich Internet Applications
A rich Internet application (RIA) is a Web application designed to deliver the same features and functions normally associated with deskop applications. RIAs generally split the processing across the Internet/network divide by locating the user interface and related activity and capability on the client side, and the data manipulation and operation on the application server side.
An RIA normally runs inside a Web browser and usually does not require software installation on the client side to work. However, some RIAs may only work properly with one or more specific browsers. For security purposes, most RIAs run their client portions within a special isolated area of the client desktop called a sandbox. The sandbox limits visibility and access to the file and operating system on the client to the application server on the other side of the connection.
                           

Rich Web-based Applications
Rich Internet applications (RIA) are Web-based applications that have some characteristics of graphical desktop applications. ... They can offer users a better visual experience and more interactivity than traditional browser applicationsthat use only HTML and HTTP.

2. Discuss the key features of RiWAs, which make them more advanced than the standard web based applications. 

Modern day business applications use variety of programming platforms to develop web-based applications. Some applications may be developed in Java, others in .Net, while some other in Angular JS, Node.js, etc.

Most often than not, these heterogeneous applications need some sort of communication to happen between them. Since they are built using different development languages, it becomes really difficult to ensure accurate communication between applications.

Here is where web services come in. Web services provide a common platform that allows multiple applications built on various programming languages to have the ability to communicate with each other.

3. Identify different technologies and techniques used to develop the client-side components of the RiWAs, explaining their use in dedicated environments. 

ASP.NET Core applications are web applications and they typically rely on client-side web technologies like HTML, CSS, and JavaScript. By separating the content of the page (the HTML) from its layout and styling (the CSS), and its behavior (via JavaScript), complex web apps can leverage the Separation of Concerns principle. Future changes to the structure, design, or behavior of the application can be made more easily when these concerns are not intertwined.

While HTML and CSS are relatively stable, JavaScript, by means of the application frameworks and utilities developers work with to build web-based applications, is evolving at breakneck speed. This chapter looks at a few ways JavaScript is used by web developers as part of developing applications, as provides a high-level overview of the Angular and React client side libraries.

4. Explain what Delta-Communication is, discussing the advantages of using it. 
Communication in today's world depends on reliable products and networks. Keeping in touch with your business contacts is essential and finding the right product can be time consuming, costly and difficult. At Delta Iraq Communications (Delta IC), we know that you want to know the best choices in technology for your business and not just a one size fits all deal.
   Advantages 

• An over-sampled input is taken to make full use of a signal correlation.
• The quantization design is simple.
• The input sequence is much higher than Nyquist rate.
• The quality is moderate.
• The design of the modulator and the demodulator is simple.
• The stair-case approximation of output waveform.
• The step-size is very small, i.e., Δ (delta).
• The bit rate can be decided by the user.

5. Compare and contrast synchronous and asynchronous communication in the context of DC. 
Asynchronous communication
   In telecommunications, asynchronous communication is transmission of data, generally without the use of an external clock signal, where data can be transmitted intermittently rather than in a steady stream. Any timing required to recover data from the communication symbols is encoded within the symbols.
synchronous communication
Synchronous communication can be defined as real- time communicationbetween two people. Examples include face-to-face or phone communication. Learn more in: Security of Web Servers and Web Services. A term that designatescommunications between two or more individuals that takes place simultaneously.

7. Discuss the history and the evolution of the XHR and AJAX. 
AJAX :

Before 2005, communication between client-side and server-side was harder to establish. Developers use hidden iframes to populate the server data to the client-side. But in 2005, James Garrett write an article named AJAX: a new approach to Web applications. The key technology is used in AJAX is XMLHttpRequest(XHR), firstly invented by Microsoft and then use by other browsers. XHR has capabilities to retrieve data from server-side and populate on client-side with the help of existing technologies. Before 2005, developers use different technologies for communication with server-side such as Java Applets or Flash movies.

9. Explain the role of the DC-Bus, indicating how a web-service can be effectively used to implement it. 
Simple-Pull-Delta-Communication (SPDC) can be seen as the simplest form of DC
 •Used in AJAX •Single XHR request to the server
 •Client-side: Native JS support
 •Server-side: special technology is not needed

11. Differentiate the functions available in jQuery for implementing AJAX-based DC. 

Traditionally webpages required reloading to update their content. For web-based email this meant that users had to manually reload their inbox to check and see if they had new mail. This had huge drawbacks: it was slow and it required user input. When the user reloaded their inbox, the server had to reconstruct the entire web page and resend all of the HTML, CSS, JavaScript, as well as the user's email. This was hugely inefficient. Ideally, the server should only have to send the user's new messages, not the entire page. By 2003, all the major browsers solved this issue by adopting the XMLHttpRequest (XHR) object, allowing browsers to communicate with the server without requiring a page reload.

The XMLHttpRequest object is part of a technology called Ajax (Asynchronous JavaScript and XML). Using Ajax, data could then be passed between the browser and the server, using the XMLHttpRequest API, without having to reload the web page. With the widespread adoption of the XMLHttpRequest object it quickly became possible to build web applications like Google Maps, and Gmail that used XMLHttpRequest to get new map tiles, or new email without having to reload the entire page.

                              
12. Discuss the variation of the jQuery ajax() function, explaining all the related options and events. 

The jQuery $.ajax() function is used to perform an asynchronous HTTP request. It was added to the library a long time ago, existing since version 1.0. The $.ajax()function is what every function discussed in the previously mentioned article calls behind the scene using a preset configuration. The signatures of this function are shown below:

$.ajax(url[, options])

$.ajax([options])

The url parameter is a string containing the URL you want to reach with the Ajax call, while options is an object literal containing the configuration for the Ajax request.

• accepts: The content type sent in the request header that tells the server what kind of response it will accept in return
• async: Set this options to false to perform a synchronous request
• beforeSend: A pre-request callback function that can be used to modify the jqXHRobject before it is sent
• cache: Set this options to false to force requested pages not to be cached by the browser
• complete: A function to be called when the request finishes (after success and error callbacks are executed)
• contents: An object that determines how the library will parse the response
• contentType: The content type of the data sent to the server
• context: An object to use as the context (this) of all Ajax-related callbacks
• converters: An object containing dataType-to-dataType converters
• crossDomain: Set this property to true to force a cross-domain request (such as JSONP) on the same domain
• data: The data to send to the server when performing the Ajax request
• dataFilter: A function to be used to handle the raw response data of XMLHttpRequest
• dataType: The type of data expected back from the server
• error: A function to be called if the request fails
• global: Whether to trigger global Ajax event handlers for this request
• headers: An object of additional headers to send to the server
• ifModified: Set this option to true if you want to force the request to be successful only if the response has changed since the last request
• isLocal: Set this option to true if you want to force jQuery to recognize the current environment as “local”

t-10

1. Is jQuery a framework or a library? Discuss. 

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.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

2. Explain the features provided by jQuery? 

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities

3. Discuss the advantages and disadvantages of using jQuery in different project scales. 
Advantages 
1.JavaScript enhancement without the overhead of learning new syntax

2. Ability to keep the code simple, clear, readable and reusable

3. Eradication of the requirement of writing repetitious and complex loops and DOM scripting library calls 

4. Ease of use- it is more easy to use than the standard javascript and other libraries.

5. Large library – It has a lot of functions compared to javascript.

6. Strong opensource community – there are a lot of plugins available for the faster development of the applications.

7. Great documentation and tutorials – the jQuery website has plenty of tutorials that are required for the beginners.

8. Ajax support – They let you develop the templates easily.

Disadvantages 

The most serious disadvantage of jQuery is that it is overweight kb wise. jQuery is a single JavaScript file “jquery.js” which contains all its DOM, events, effects, and Ajax components. The file over time and development has gained a substantial amount of kb.

4. Explain how the jQuery handles the issues related to partial page loads to the browser. 

1. In Microsoft Visual Studio 2008, create a new ASP.NET Web Site project by going to File-> New-> Web Siteand selecting ASP.NET Web Site from the dialog. You can name it whatever you like, and you may install it either to the file system or into Internet Information Services (IIS).
2. You will be presented with the blank default page with basic ASP.NET markup (a server-side form and an @Page directive). Drop a Label called Label1 and a Button called Button1 onto the page within the form element. You may set their text properties to whatever you like.
3. In Design view, double-click Button1 to generate a code-behind event handler. Within this event handler, set Label1.Text to You clicked the button! .

5. Discuss the selectors and their use in jQuery. 
A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say,selectors are used to select one or more HTML elements using jQuery.

6. Compare and contrast the use of CSS advanced selectors in jQuery and jQuery’s DOM traversal API, indicating the pros and cons of them. 

If you’re reading this, I’m assuming you know what a CSS selector is. This can be an id, a class, or an attribute. Say you want to show a BootStrap alert when a button gets clicked. Your HTML looks something like:

<div id=“msg-id” class=“alert alert-success”>
    Hey, there! I’m a Bootstrap Alert
</div> 

<button id=“show-msg-id” class=“btn btn-primary”>
    Show Message
</button>

Easy enough, right? We have a simple div with the id of msg-id, and we have a button with the id of show-msg-id. For the sake of brevity, assume that our CSS file has a line like #msg-id { display: none; }. This ensures that our message isn’t just hanging out and being visible when we don’t want it to be. Now, to make this work how we want it to, let’s write up some jQuery.

$(“#show-msg-id”).bind(‘click’, function(e) { 
    setTimeout(function(){ 
        $(“#msg-id”).fadeIn(600, function(){ 
            setTimeout(function(){ 
                $("#msg-id").fadeOut(600); 
            }, 3500); 
        }); 
    },500); 

    e.preventDefault(); 
}

7. Explain the importance of DOM objects and DOM processing in jQuery. 

The functions associated with these objects determine how the objects may be manipulated, and they are part of the object model. The Document Object Model currently consists of two parts, DOM Core and DOM HTML. The DOM Core represents the functionality used for XML documents, and also serves as the basis for DOM HTML.

8. Discuss the benefits of using jQuery event handling over HTML event attributes, providing a list of events supported by jQuery. 

All the different visitors' actions that a web page can respond to are called events.

An event represents the precise moment when something happens.

Examples:

• moving a mouse over an element
• selecting a radio button
• clicking on an element

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

To assign a click event to all paragraphs on a page, you can do this:

click

The next step is to define what should happen when the event fires. You must pass a function to the event:

$("p").click(function(){
  // action goes here!!});

9. Explain how to declare jQuery event handlers outside the $(document).ready() function, indicating the need for that, and the related issues and solutions for them. 
What is $( document .ready function () in jquery?

Definition and Usage. The ready event occurs when the DOM (document object model) has been loaded. Because this event occurs after the document is ready, it is a good place to have all other jQuery events and functions. Like in the example above. The ready() method specifies what happens when a ready event occurs.

10. Identify a list of advanced features provided by jQuery and explain their use towards improving the user experience. 

1) Use the Latest Version of jQuery

With all the innovation taking place in the jQuery project, one of the easiest ways to improve the performance of your web site is to simply use the latest version of jQuery. Every release of the library introduces optimizations and bug fixes, and most of the time upgrading involves only changing a script tag.

You can even include jQuery directly from Google's servers, which provide free CDN hosting for a number of JavaScript libraries.

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

The latter example will include the latest 1.6.x version automatically as it becomes available, but as pointed out on css-tricks, it is cached only for an hour, so you better not use it in production environments.

2) Keep Selectors Simple

Up until recently, retrieving DOM elements with jQuery was a finely choreographed combination of parsing selector strings, JavaScript loops and inbuilt APIs like getElementById(), getElementsByTagName() and getElementsByClassName(). But now, all major browsers support querySelectorAll(), which understands CSS query selectors and brings a significant performance gain.

However, you should still try to optimize the way you retrieve elements. Not to mention that a lot of users still use older browsers that force jQuery into traversing the DOM tree, which is slow.

$('li[data-selected="true"] a')   // Fancy, but slow
$('li.selected a')  // Better
$('#elem')  // Best

3) jQuery Objects as Arrays

The result of running a selector is a jQuery object. However, the library makes it appear as if you are working with an array by defining index elements and a length.
// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');

// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
    console.log(buttons[i]);    // A DOM element, not a jQuery object
}

// We can even slice it:
var firstFour = buttons.slice(0,4);

If performance is what you are after, using a simple for (or a while) loop instead of $.each(), can make your code several times faster.

4) The Selector Property

jQuery provides a property which contains the selector that was used to start the chain.
$('#container li:first-child').selector    // #container li:first-child
$('#container li').filter(':first-child').selector    // #container li.filter(:first-child)

Although the examples above target the same element, the selectors are quite different. The second one is actually invalid - you can't use it as the basis of a new jQuery object. It only shows that the filter method was used to narrow down the collection.

5) Create an Empty jQuery Object

Creating a new jQuery object can bring significant overhead. Sometimes, you might need to create an empty object, and fill it in with the add() method later.
var container = $([]);
container.add(another_element);

This is also the basis for the quickEach() method that you can use as a faster alternative to the default each().

6) Select a Random Element

As I mentioned above, jQuery adds its own selection filters. As with everything else in the library, you can also create your own. To do this simply add a new function to the $.expr[':'] object. One awesome use case was presented by Waldek Mastykarz on his blog: creating a selector for retrieving a random element. You can see a slightly modified version of his code below:
(function($){
    var random = 0;

    $.expr[':'].random = function(a, i, m, r) {
        if (i == 0) {
            random = Math.floor(Math.random() * r.length);
        }
        return i == random;
    };

})(jQuery);

// This is how you use it:
$('li:random').addClass('glow');