Pengantar Teknologi Internet W15: Advanced Scripting

2 Objectives Ajax Ajax RIA RIA JavaScript Framework JavaScript Framework

3 History In the 1990's, web browsers and web sites lacked the sophistication to provide a quick and responsive user experience. In the 1990's, web browsers and web sites lacked the sophistication to provide a quick and responsive user experience. Online form entry could be tedious, since all the requested information had to be entered and then submitted to the web server. Online form entry could be tedious, since all the requested information had to be entered and then submitted to the web server. The form data was validated and if there were problems, the same form was again presented to the user. The form data was validated and if there were problems, the same form was again presented to the user. The flow of information and the resulting experience was choppy and disconnected, reflecting the stateless nature of HTTP. The flow of information and the resulting experience was choppy and disconnected, reflecting the stateless nature of HTTP.

4 History Asynchronous loading of content really became practical when Java applets were introduced in the first version of the Java language in Asynchronous loading of content really became practical when Java applets were introduced in the first version of the Java language in These allow compiled client-side code to load data asynchronously from the web server after a web page is loaded. These allow compiled client-side code to load data asynchronously from the web server after a web page is loaded. In 1996, Internet Explorer introduced the IFrame element to HTML, which also enables this to be achieved. In 1996, Internet Explorer introduced the IFrame element to HTML, which also enables this to be achieved. In 1999, Microsoft created the XMLHTTP ActiveX control in Internet Explorer 5, which is now supported by Mozilla, Safari and other browsers as the native XMLHttpRequest object In 1999, Microsoft created the XMLHTTP ActiveX control in Internet Explorer 5, which is now supported by Mozilla, Safari and other browsers as the native XMLHttpRequest object It is not widely used until the surfacing of Gmail (1994) It is not widely used until the surfacing of Gmail (1994)

5 Ajax Ajax stands for asynchronous JavaScript and XML Ajax stands for asynchronous JavaScript and XML Ajax is a group of interrelated web development techniques used on the client-side to create interactive web applications. Ajax is a group of interrelated web development techniques used on the client-side to create interactive web applications. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages

6 Ajax Data is usually retrieved using the XMLHttpRequest object. Data is usually retrieved using the XMLHttpRequest object. Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous. Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous.

7 Technologies XHTML and CSS for presentation XHTML and CSS for presentation the Document Object Model for dynamic display of and interaction with data the Document Object Model for dynamic display of and interaction with data XML and XSLT for the interchange, and manipulation and display, of data, respectively XML and XSLT for the interchange, and manipulation and display, of data, respectively the XMLHttpRequest object for asynchronous communication the XMLHttpRequest object for asynchronous communication JavaScript to bring these technologies together JavaScript to bring these technologies together

8 Some Drawbacks Harder to develop Harder to develop Problem with Back button in the browser Problem with Back button in the browser Any user whose browser does not support JavaScript or XMLHttpRequest, or simply has this functionality disabled, will not be able to properly use pages which depend on Ajax Any user whose browser does not support JavaScript or XMLHttpRequest, or simply has this functionality disabled, will not be able to properly use pages which depend on Ajax Ajax-powered interfaces may dramatically increase the number of user-generated requests to web servers and their back-ends (databases, or other). Ajax-powered interfaces may dramatically increase the number of user-generated requests to web servers and their back-ends (databases, or other). This can lead to longer response times and/or additional hardware needs This can lead to longer response times and/or additional hardware needs

9 RIA RIA stands for Rich Internet Applications RIA stands for Rich Internet Applications RIA are web applications that have most of the characteristics of desktop applications, typically delivered either by way of a standards based web browser, via a browser plug-in, or independently via sandboxes or virtual machines. RIA are web applications that have most of the characteristics of desktop applications, typically delivered either by way of a standards based web browser, via a browser plug-in, or independently via sandboxes or virtual machines. Examples of RIA frameworks include Ajax, Curl, GWT, Adobe Flash/Adobe Flex/AIR, Java/JavaFX, Mozilla's XUL, OpenLaszlo and Microsoft Silverlight. Examples of RIA frameworks include Ajax, Curl, GWT, Adobe Flash/Adobe Flex/AIR, Java/JavaFX, Mozilla's XUL, OpenLaszlo and Microsoft Silverlight.

10 RIA These are web application that have characteristics of desktop applications. These are web application that have characteristics of desktop applications. Rich Internet applications (RIAs) offer a rich, engaging experience that improves user satisfaction and increases productivity. Rich Internet applications (RIAs) offer a rich, engaging experience that improves user satisfaction and increases productivity. Using the broad reach of the Internet, RIAs can be deployed across browsers and desktops. Using the broad reach of the Internet, RIAs can be deployed across browsers and desktops.

11 The difference? The key difference between RIAs and other Internet applications is the amount of interaction in the interface. The key difference between RIAs and other Internet applications is the amount of interaction in the interface. What about Ajax? What about Ajax? Ajax clearly demonstrates all the core characteristics of an RIA and current opinion appears to hold that it should be therefore be included in this category Ajax clearly demonstrates all the core characteristics of an RIA and current opinion appears to hold that it should be therefore be included in this category

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

13 Some Popular Frameworks With the expanded demands for JavaScript, an easier means for programmers to develop such dynamic interfaces was needed. With the expanded demands for JavaScript, an easier means for programmers to develop such dynamic interfaces was needed. Thus, JavaScript libraries such as Prototype, script.aculo.us, and jQuery and JavaScript widget libraries such as Ext and Dojo Toolkit were developed, allowing for developers to concentrate more upon more distinctive applications of AJAX. Thus, JavaScript libraries such as Prototype, script.aculo.us, and jQuery and JavaScript widget libraries such as Ext and Dojo Toolkit were developed, allowing for developers to concentrate more upon more distinctive applications of AJAX.

14 jQuery jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in January 2006 at BarCamp NYC by John Resig. It was released in January 2006 at BarCamp NYC by John Resig. Used at about 20% of the 10,000 biggest websites Used at about 20% of the 10,000 biggest websites jQuery is the most popular JavaScript library in use today. jQuery is the most popular JavaScript library in use today. Visit the homepage: Visit the homepage:

15 jQuery jQuery syntax is designed to make it easier to jQuery syntax is designed to make it 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 developers to create plugins on top of the JavaScript library. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library.

16 How to include from CDN? <script> google.load("jquery", "1.3.2"); </script>

17 How to include from CDN? </script>

18 Some Example Codes $("div.test").add("p.quote").addClass("blue").slid eDown("slow"); $("div.test").add("p.quote").addClass("blue").slid eDown("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 Demo

20 Prototype The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson which provides an Ajax framework and other utilities. The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson which provides an Ajax framework and other utilities. It is implemented as a single file of JavaScript code, usually named prototype.js. It is implemented as a single file of JavaScript code, usually named prototype.js. Prototype is distributed standalone, but also as part of larger projects, such as Ruby on Rails, script.aculo.us and Rico. Prototype is distributed standalone, but also as part of larger projects, such as Ruby on Rails, script.aculo.us and Rico.

21 script.aculo.us script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework, providing dynamic visual effects and user interface elements via the Document Object Model. script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework, providing dynamic visual effects and user interface elements via the Document Object Model. It is most notably included with Seaside and Ruby on Rails, but also provided separately to work with other web application frameworks and scripting languages. It is most notably included with Seaside and Ruby on Rails, but also provided separately to work with other web application frameworks and scripting languages. script.aculo.us was extracted by Thomas Fuchs from his work on fluxiom, a web based digital asset management tool by the design company wollzelle. It was first released to the public in June 2005 script.aculo.us was extracted by Thomas Fuchs from his work on fluxiom, a web based digital asset management tool by the design company wollzelle. It was first released to the public in June 2005

22 Key Features Visual Effects: Visual Effects: Core: Opacity, Scale, MoveBy, Highlight, and Parallel Core: Opacity, Scale, MoveBy, Highlight, and Parallel Controls: Controls: Drag and Drop, Autocompletion Drag and Drop, Autocompletion

23 ExtJS Ext (pronounced "Eee Eks Tee") is a JavaScript library for building interactive web applications using techniques such as Ajax, DHTML and DOM scripting. Ext (pronounced "Eee Eks Tee") is a JavaScript library for building interactive web applications using techniques such as Ajax, DHTML and DOM scripting. Originally built as an add-on library extension of YUI, Ext includes interoperability with jQuery and Prototype. Originally built as an add-on library extension of YUI, Ext includes interoperability with jQuery and Prototype. As of version 1.1, Ext retains no dependencies on external libraries, instead making their use optional. As of version 1.1, Ext retains no dependencies on external libraries, instead making their use optional.

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

25 ExtJS Demo Widgets Demo Widgets Demo

26 Other Frameworks DOJO Toolkit DOJO Toolkit