Pengantar Pengantar Teknologi Teknologi InternetInternet

W15:W15:

Advanced ScriptingAdvanced Scripting

2

ObjectivesObjectives

AjaxAjax RIARIA JavaScript FrameworkJavaScript Framework

3

HistoryHistory

In the 1990's, web browsers and web sites In the 1990's, web browsers and web sites lacked the sophistication to provide a quick lacked the sophistication to provide a quick and responsive user experience. and responsive user experience. Online form entry could be tedious, since all the Online form entry could be tedious, since all the

requested information had to be entered and requested information had to be entered and then submitted to the web server. then submitted to the web server.

The form data was validated and if there were The form data was validated and if there were problems, the same form was again presented to problems, the same form was again presented to the user. the user.

The flow of information and the resulting The flow of information and the resulting experience was choppy and disconnected, experience was choppy and disconnected, reflecting the stateless nature of HTTP.reflecting the stateless nature of HTTP.

4

HistoryHistory Asynchronous loading of content really became Asynchronous loading of content really became

practical when Java applets were introduced in the practical when Java applets were introduced in the first version of the Java language in 1995. first version of the Java language in 1995. These allow compiled client-side code to load data These allow compiled client-side code to load data

asynchronously from the web server after a web page is asynchronously from the web server after a web page is loaded.loaded.

In 1996, Internet Explorer introduced the IFrame In 1996, Internet Explorer introduced the IFrame element to HTML, which also enables this to be element to HTML, which also enables this to be achieved.achieved.

In 1999, Microsoft created the XMLHTTP ActiveX In 1999, Microsoft created the XMLHTTP ActiveX control in Internet Explorer 5, which is now supported control in Internet Explorer 5, which is now supported by Mozilla, Safari and other browsers as the native by Mozilla, Safari and other browsers as the native XMLHttpRequest objectXMLHttpRequest object

It is not widely used until the surfacing of Gmail It is not widely used until the surfacing of Gmail (1994)(1994)

5

AjaxAjax

Ajax stands for asynchronous JavaScript and Ajax stands for asynchronous JavaScript and XMLXML

Ajax is a group of interrelated web Ajax is a group of interrelated web development techniques used on the client-development techniques used on the client-side to create interactive web applications. side to create interactive web applications.

With Ajax, web applications can retrieve data With Ajax, web applications can retrieve data from the server asynchronously in the from the server asynchronously in the background without interfering with the background without interfering with the display and behavior of the existing page. display and behavior of the existing page. The use of Ajax techniques has led to an increase The use of Ajax techniques has led to an increase

in interactive or dynamic interfaces on web pagesin interactive or dynamic interfaces on web pages

6

AjaxAjax

Data is usually retrieved using the Data is usually retrieved using the XMLHttpRequest object. XMLHttpRequest object. Despite the name, the use of JavaScript Despite the name, the use of JavaScript

and XML is not actually required, nor and XML is not actually required, nor do the requests need to be do the requests need to be asynchronous.asynchronous.

7

TechnologiesTechnologies

XHTML and CSS for presentationXHTML and CSS for presentation the Document Object Model for dynamic the Document Object Model for dynamic

display of and interaction with datadisplay of and interaction with data XML and XSLT for the interchange, and XML and XSLT for the interchange, and

manipulation and display, of data, manipulation and display, of data, respectivelyrespectively

the XMLHttpRequest object for the XMLHttpRequest object for asynchronous communicationasynchronous communication

JavaScriptJavaScript to bring these technologies to bring these technologies togethertogether

8

Some DrawbacksSome Drawbacks Harder to developHarder to develop Problem with Back button in the browserProblem with Back button in the browser Any user whose browser does not support Any user whose browser does not support

JavaScript or XMLHttpRequest, or simply JavaScript or XMLHttpRequest, or simply has this functionality disabled, will not be has this functionality disabled, will not be able to properly use pages which depend able to properly use pages which depend on Ajaxon Ajax

Ajax-powered interfaces may dramatically Ajax-powered interfaces may dramatically increase the number of user-generated increase the number of user-generated requests to web servers and their back-requests to web servers and their back-ends (databases, or other). ends (databases, or other). This can lead to longer response times and/or This can lead to longer response times and/or

additional hardware needsadditional hardware needs

9

RIARIA RIA stands for Rich Internet ApplicationsRIA stands for Rich Internet Applications RIA are web applications that have most RIA are web applications that have most

of the characteristics of desktop of the characteristics of desktop applications, typically delivered either by applications, typically delivered either by way of a standards based web browser, way of a standards based web browser, via a browser plug-in, or independently via a browser plug-in, or independently via sandboxes or virtual machines. via sandboxes or virtual machines. Examples of RIA frameworks include Examples of RIA frameworks include AjaxAjax, ,

Curl, GWT, Adobe Flash/Adobe Flex/AIR, Curl, GWT, Adobe Flash/Adobe Flex/AIR, Java/JavaFX, Mozilla's XUL, OpenLaszlo and Java/JavaFX, Mozilla's XUL, OpenLaszlo and Microsoft Silverlight.Microsoft Silverlight.

10

RIARIA

These are web application that have These are web application that have characteristics of desktop applications.characteristics of desktop applications.

Rich Internet applications (RIAs) offer Rich Internet applications (RIAs) offer a rich, engaging experience that a rich, engaging experience that improves improves user satisfactionuser satisfaction and and increases increases productivityproductivity. .

Using the broad reach of the Internet, Using the broad reach of the Internet, RIAs can be deployed across browsers RIAs can be deployed across browsers and desktops.and desktops.

11

The difference?The difference?

The key difference between RIAs and The key difference between RIAs and other Internet applications is the other Internet applications is the amount of interaction in the interface.amount of interaction in the interface.

What about Ajax?What about Ajax? Ajax clearly demonstrates all the core Ajax clearly demonstrates all the core

characteristics of an RIA and current characteristics of an RIA and current opinion appears to hold that it should be opinion appears to hold that it should be therefore be included in this categorytherefore be included in this category

12

JavaScript JavaScript Library/FrameworksLibrary/Frameworks

It is a a library of pre-written It is a a library of pre-written JavaScript controls which allow for JavaScript controls which allow for easier development of JavaScript-easier development of JavaScript-based applications, especially for based applications, especially for AJAX and other web-centric AJAX and other web-centric technologies.technologies.

13

Some Popular Some Popular FrameworksFrameworks

With the expanded demands for With the expanded demands for JavaScript, an easier means for JavaScript, an easier means for programmers to develop such dynamic programmers to develop such dynamic interfaces was needed. interfaces was needed.

Thus, JavaScript libraries such as Thus, JavaScript libraries such as PrototypePrototype, , script.aculo.usscript.aculo.us, and , and jQueryjQuery and JavaScript widget libraries such as and JavaScript widget libraries such as ExtExt and and Dojo ToolkitDojo Toolkit were developed, were developed, allowing for developers to concentrate allowing for developers to concentrate more upon more distinctive applications more upon more distinctive applications of AJAX.of AJAX.

14

jQueryjQuery

jQuery is a lightweight cross-browser jQuery is a lightweight cross-browser JavaScript library that emphasizes JavaScript library that emphasizes interaction between JavaScript and HTML. interaction between JavaScript and HTML.

It was released in January 2006 at It was released in January 2006 at BarCamp NYC by John Resig. BarCamp NYC by John Resig.

Used at about 20% of the 10,000 biggest Used at about 20% of the 10,000 biggest websiteswebsites jQuery is the most popular JavaScript library in jQuery is the most popular JavaScript library in

use today.use today. Visit the homepage: http://www.jquery.comVisit the homepage: http://www.jquery.com

15

jQueryjQuery

jQuery syntax is designed to make it jQuery syntax is designed to make it easier to easier to navigate a document, navigate a document, select DOM elements, select DOM elements, create animations, create animations, event handling, and event handling, and Ajax development. Ajax development.

jQuery also provides capabilities for jQuery also provides capabilities for developers to create plugins on top of developers to create plugins on top of the JavaScript library.the JavaScript library.

16

How to include from How to include from CDN?CDN?

<script type="text/javascript" <script type="text/javascript" src="http://www.google.com/jsapi"></script>src="http://www.google.com/jsapi"></script>

<script><script>

google.load("jquery", "1.3.2");google.load("jquery", "1.3.2");

</script></script>

17

How to include from How to include from CDN?CDN?

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript">1.3.2.min.js" type="text/javascript">

</script></script>

18

Some Example CodesSome Example Codes $$

("div.test").add("p.quote").addClass("blue").slide("div.test").add("p.quote").addClass("blue").slideDown("slow");Down("slow");

$.ajax({$.ajax({ type: "POST",type: "POST",

url: "some.php",url: "some.php",

data: "name=John&location=Boston",data: "name=John&location=Boston",

success: function(msg){success: function(msg){

alert( "Data Saved: " + msg );alert( "Data Saved: " + msg );

}}

});});

19

jQuery UI DemojQuery UI Demo

http://jqueryui.com/demos/http://jqueryui.com/demos/

20

PrototypePrototype

The Prototype JavaScript Framework is a The Prototype JavaScript Framework is a JavaScript framework created by Sam JavaScript framework created by Sam Stephenson which provides an Ajax Stephenson which provides an Ajax framework and other utilities. framework and other utilities.

It is implemented as a single file of It is implemented as a single file of JavaScript code, usually named JavaScript code, usually named prototype.js. prototype.js. Prototype is distributed standalone, but also as Prototype is distributed standalone, but also as

part of larger projects, such as Ruby on Rails, part of larger projects, such as Ruby on Rails, script.aculo.us and Rico.script.aculo.us and Rico.

http://prototypejs.org/http://prototypejs.org/

21

script.aculo.usscript.aculo.us script.aculo.us is a JavaScript library built on script.aculo.us is a JavaScript library built on

the Prototype JavaScript Framework, providing the Prototype JavaScript Framework, providing dynamic visual effects and user interface dynamic visual effects and user interface elements via the Document Object Model.elements via the Document Object Model.

It is most notably included with Seaside and It is most notably included with Seaside and Ruby on Rails, but also provided separately to Ruby on Rails, but also provided separately to work with other web application frameworks work with other web application frameworks and scripting languages.and scripting languages. script.aculo.us was extracted by Thomas Fuchs from script.aculo.us was extracted by Thomas Fuchs from

his work on fluxiom, a web based digital asset his work on fluxiom, a web based digital asset management tool by the design company wollzelle. It management tool by the design company wollzelle. It was first released to the public in June 2005was first released to the public in June 2005

22

Key FeaturesKey Features

Visual Effects:Visual Effects: Core: Opacity, Scale, MoveBy, Core: Opacity, Scale, MoveBy,

Highlight, and Parallel Highlight, and Parallel Controls:Controls:

Drag and Drop, AutocompletionDrag and Drop, Autocompletion

23

ExtJSExtJS Ext (pronounced "Eee Eks Tee") is a Ext (pronounced "Eee Eks Tee") is a

JavaScript library for building interactive web JavaScript library for building interactive web applications using techniques such as Ajax, applications using techniques such as Ajax, DHTML and DOM scripting.DHTML and DOM scripting.

Originally built as an add-on library extension Originally built as an add-on library extension of YUI, Ext includes interoperability with of YUI, Ext includes interoperability with jQuery and Prototype. jQuery and Prototype. As of version 1.1, Ext retains no dependencies on As of version 1.1, Ext retains no dependencies on

external libraries, instead making their use external libraries, instead making their use optional.optional.

http://www.extjs.comhttp://www.extjs.com

24

Some FeaturesSome Features

Ext includes a diverse set of GUI-Ext includes a diverse set of GUI-based form controls (or "widgets") based form controls (or "widgets") for use within web applications, for use within web applications, these include:these include: text field and textarea input controlstext field and textarea input controls date fields with a pop-up date-pickerdate fields with a pop-up date-picker numeric fieldsnumeric fields list box and comboboxeslist box and comboboxes radio and checkbox controlsradio and checkbox controls html editor controlhtml editor control

25

ExtJS DemoExtJS Demo

Widgets DemoWidgets Demo

26

Other FrameworksOther Frameworks

DOJO Toolkit DOJO Toolkit http://www.dojotoolkit.orghttp://www.dojotoolkit.org