Client-Side Technologies

Transcription

1 Web Architectures Client-Side Technologies So far we have focussed on server-side processing Web Browser Java Applets JavaScript AJAX Client HTTP HTTP + HTML Web Server Some mechanism for detecting calls to programs or code to be executed within HTML HTML Docs Some form of code to generate HTML plus possibly all or parts of HTTP response header In this lecture, we will look at processing on the client-side and technologies to support it Client-Side Processing Problems of Client-Side Processing Used for highly-interactive applications To improve responsiveness To offer non-html interfaces GUIs with pop-up menus, drag and drop etc. Interactive maps... Provides richer support even for HTML forms interactive help information validation of form fields before submission of request Requires special technologies to support this scripting languages run-time environments within browser more sophisticated communication with server extended development frameworks Security problems of running code downloaded from arbitrary web sites Dependency on local browser and browser settings can effect anything from look-and-feel to functionality may require different versions for different browsers

2 Use of Java Applets Features of modern Web 2.0 sites Rich Internet Applications Rich Client Interaction "Rich Internet applications (RIA) are Web applications that have the features and functionality of traditional desktop applications. RIAs typically transfer the processing necessary for the user interface to the Web client but keep the bulk of the data (i.e., maintaining the state of the program, the data etc.) back on the application server. "What can be done in an RIA may be limited by the capabilities of the system used on the client. But in general, the client engine is programmed to perform application functions that its designer believes will enhance some aspect of the user interface, or improve its responsiveness when handling certain user interactions, compared to a standard Web browser implementation." Wikipedia ( Browser DHTML JavaScript and Ajax Java JVM (Applet) Plug-ins Silverlight Flash Player Java JVM (Applet) Standalone Adobe AIR Java Runtime Environment XULRunner Browser Plugin Browser Standalone Runtime

3 Java Applets Java Applet Restrictions Client Machine HTTP request Server Machine Creators of run-time environment have control over what Applet can do Java Virtual Machine has its own memory space No direct memory access Applet Applet No file system access Java Virtual Machine Web Browser Web Server No network access other than to Applet host Notion of trusted Applets introduced but only useful for applications where there is a trusted set-up between the client and server PeopleFinder Coping with Applet Socket Restrictions... Install Server on Host which Redirects Traffic Remote Machine applet server Client Machine applet Host Machine

4 Java Applets Summary JavaScript Restrictions Access only to host machine No access to local store Browser Dependency Look 'n' Feel of GUI Applet restrictions Supported Java versions Applet Java Virtual Machine Web Browser The many problems of dealing with Applets along with improved web performance resulted in a shift to server rather than client side programming Client- and server-side scripting language Originally developed by Netscape as LiveScript Very distantly related to Java due to similar syntax only Basic notion of object-oriented programming Standardised as ECMAScript since 1997 Microsoft's implementation was named JScript Applications Form checking Dynamic HTML AJAX Adobe Acrobat What can JavaScript do? JavaScript Hello World Embed snippets of code in HTML pages React to events Include dynamic pieces of text in HTML pages Access and write HTML elements Validate form data Detect client browser Store and retrieve cookies var message = "Hello World!"; document.write(message); Can be specified in the body and the header of a document or in an external file Generally avoid document writes as overwrites entire document better to access HTML elements directly

5 JavaScript DOM JavaScript Statements function displaydate() { document.getelementbyid("demo").innerhtml=date(); </head> <h1>my First Web Page</h1> <p id="demo">this is a paragraph.</p> <button type="button" onclick="displaydate()">display Date</button> Conditional Execution if... else switch Repetition for for... in while Exception Handling try... catch throw Interrupt Execution break All commonly known statements available Syntax very similar to C, C++, C# and Java JavaScript Functions JavaScript Message Boxes alert(message) confirm(message) function checkpassword(password, confirm) { if (password.length < 6 password!= confirm) { return false; return true; No distinction between functions and procedures Can have any number of parameters Can have a return value or not prompt(message,default) prompt(mess age, default)

6 JavaScript Events JavaScript Events Example JavaScript code can be bound to events that occur when a user is interacting with a web page Event examples Keyboard and mouse input Loading and unloading of pages and images Submitting HTML forms Interaction with the browser user interface Binding code to events Normally functions registered to be called when an event occurs Registration can be done within an HTML element or on an object directly window.onload = init; function init() { alert("welcome to my Web Site!"); <button onclick="javascript:alert('click!')"> Click me! </button> init() function will be called when the HTML is loaded inline JavaScript will be called when the button is pressed JavaScript Events Reference JavaScript Objects onload onabort onerror onunload onfocus onblur onchange onselect onreset onsubmit onkeydown onkeypress onkeyup onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup onresize A page or an image is finished loading Loading of an image is interrupted An error occurs when loading a document or an image The user exits the page An element gets focus An element loses focus The content of a field changes Text is selected The reset button is clicked The submit button is clicked A keyboard key is pressed A keyboard key is pressed or held down A keyboard key is released Mouse clicks an object Mouse double-clicks an object A mouse button is pressed The mouse is moved The mouse is moved off an element The mouse is moved over an element A mouse button is released A window or frame is resized Basic object-oriented concepts supported Built-in objects Array, Boolean, Date, Math, String and DOM Creation by instantiation var person = new Object(); person.name = "Fred Bloggs"; Creation through template function person(name) { this.name = name; var person = new person("fred Bloggs");

7 AJAX AJAX Architecture Asynchronous JavaScript And XML combines Asynchronous processing of HTTP requests JavaScript And...? XML processing based on DOM Traditional Architecture Web Server AJAX Architecture Web Server Instead of waiting for responses of HTTP requests, XML data is sent to the server and processed asynchronously using JavaScript on the client-side Request Response Request Response Web Browser AJAX Engine Web Browser Concepts AJAX Operation Handler function Handles JavaScript events and sends HTTP request to the server Registers call-back function Call-back function Handles the response of the server asynchronously XMLHttpRequest JavaScript object to send XML messages over HTTP open() opens a connection send() sends a request status returns HTTP status code of the response readystate returns whether the connection is ready 1. Event triggers execution of handler function 2. Handler function processes event 3. Handler function connects to a remote server and sends an HTTP request 4. Handler function registers a call-back function 5. Server processes request and sends XML response back to client 6. Call-back function is invoked to process the server response asynchronously

8 function loadxmldoc() { var xmlhttp; xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; xmlhttp.open("get","ajax_info.txt",true); xmlhttp.send(); </head> <div id="mydiv"><h2>let AJAX change this text</h2></div> <button type="button" onclick="loadxmldoc()">change Content</button> jquery Library that simplifies the use of JavaScript Adding animated effects (fading, sliding, expanding ) Create richer interfaces (drag-and-drop, drop-down menus, ) Manipulating HTML DOM Manipulating CSS HTML event functions AJAX Events and Callbacks jquery Syntax <script type="text/javascript" src="jquery.js"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000,function(){ alert("the paragraph is now hidden"); ); ); ); </head> <button>hide</button> <p>this is a paragraph with little content.</p> $(selector).action() $("p").hide() - hides all paragraphs $("p.test").hide() - hides all paragraphs with class="test" $("#test").hide() - hides the element with id="test"

9 CSS Manipulation jquery and AJAX <script type="text/javascript" src="jquery.js"> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color":"yellow","font-size":"200%"); ); ); </head> <h2>this is a heading</h2> <p>this is a paragraph.</p> <p>this is another paragraph.</p> <button>click me</button> <script type="text/javascript" src="jquery.js"> $(document).ready(function(){ $("button").click(function(){ $("div").load('test1.txt'); ); ); </head> <div><h2>let AJAX change this text</h2></div> <button>change Content</button> Thought for the day Back to HTML5 Write down a list of features on Facebook sites that require something other than basic HTTP request/response and HTML Improved support for forms New input types ( , url, number, range, date pickers, search, color) New form elements (datalist, keygen, output) New form attributes (autocomplete, novalidate) New input attributes (autocomplete, autofocus, pattern, placeholder ) Much richer event model Window events Form events Keyboard events Mouse events Media events

10 HTML5 and AJAX Exercise: Final Facebook Application script tag can now specify whether script should be executed asynchronously using async tag iframe tag creates inline frame that contains another document HTML5 has added several new attributes and removed others attribute seamless supports seamless integration of documents attribute sandbox used to restrict content Recommend work through w3schools tutorials for JavaScript, AJAX and jquery Study JavaScript provided to sort friends Extend Facebook example using AJAX to be able to click on friends and get more information without re-loading page Extend your Facebook application to show how jquery could be used to enrich the interface Next Lecture Web Architectures 10