The Web: Concepts and Technology

Size: px

Start display at page:

Download "The Web: Concepts and Technology"

Muriel Riley
6 years ago
Views:

1 The Web: Concepts and Technology Web Services Feb 10 1 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

2 Today s Plan Javascript wrap-up: p Objects Functions Loops Events WbS Web Services XML 2 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

3 Debugging JavaScript 1. Debugging JS is a pain I know of two reasonable tools for JS debuggin: Firebug: VenkMan: / f / /216 3 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

4 JS Types Numbers Operators: +, -, *, and / as the basic four arithmetic operations. Comparison: <, >, <=, >= %, is the remainder operator: if you divide one number by another, this operator gives you the remainder. For example, 7 % 3 is 1. Strings : pieces of text or sequences of characters. E.g., "Frodo", "The Lord of the Rings", and "this is a string" are all strings. Strings can be created with double quote character (") or the single quote character ('). The only operator for strings is the concatenation operator, written +,which glues two strings together. E.g. "rail" + "road" is "railroad". Booleans logical values that are either true or false. E.g., the expression (7 > 13) is false while the expression (7 > 3) is true. logic operators for boolean values:! means not, so!(7 > 13) is true && means and, so (7 > 13) && (7 > 3) is false means or, so (7 > 13) (7 > 3) is true 4 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

5 Summary three basic data types: strings, numbers, and booleans. The basic arithmetic operators + (addition), - (subtraction), * (multiplication), / (division), and % (remainder) are provided for numbers. variables can be assigned values of any type, including numbers and numeric expressions. When an assignment statement is executed, the expression on the right-hand side is evaluated first, and then the resulting value is assigned to the variable on the left-hand side. multiplication and division have higher precedence than addition and subtraction. Among operators with the same precedence, expressions are evaluated in a left-to-right order. When the + operator is applied to a string and a number, the number is automatically converted into a string and then the two are concatenated. The prompt() method always a returns a string value, even en when a number is entered by the user. A string can be converted to number using parsefloat() for parseint function. variables can be used to store input values, define easily modifiable values, and retain intermediate values in complex computations. 5 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

6 User-defined functions <HEAD> <TITLE> The function template</title> <SCRIPT TYPE = "text/javascript"> "> functionname() { }... JavaScript code to define the function goes here... </SCRIPT> </HEAD> 6 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

7 Function Declaration vs. Invocation <HTML><HEAD> <META http-equiv=content-type content="text/html; charset=windows-1252"> <SCRIPT language="javascript 2.1" type=text/javascript> function main() { window.alert("hello World!"); } </SCRIPT> </HEAD> <BODY onload=javascript:main();> <H1 style="text- ALIGN: center">hello World</H1> <HR width="85%" SIZE=2> </BODY> </HTML> 7

8 Example: Date Generation Suppose want to date document (e.g., like newspapers do) <script type = "text/javascript"> var today = new Date(); //Date object var the_day = today.getdate(); //Method invocation var the_month = today.getmonth(); //Method invocation var the_year = today.getfullyear(); the_month = the_month + 1; //month starts at zero var the_whole_date date= the_month +"/"+the the_day +"/"+the the_year; document.write( In CS190, today is " + the_whole_date + "<p>"); </script> 8 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

9 Function Summary Functions encapsulate code for performing common tasks that we're likely to repeat in many contexts. Function definitions are generally within the HEAD of a document. Function calls are generally within the BODY of a document. Once a function is defined, you can call it as often as you like. A function definition is only that a definition. Unless a function is called, it will not execute! You call a function with no parameters like this: wisdom(); A parameter allows something about the function to change from one invocation to the next. To call a function with a parameter you include a value (or expression that evaluates to a value) within the parantheses. Your function call must be within <SCRIPT> tags or an event handler. 9 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

10 More about Objects JavaScript String object var txt="hello world!"; document.write(txt.touppercase()); Complete String reference: 10 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

11 A little more about forms Select Lists <select name="beverage"> <option>coke <option>pepsi <option>beer <option>wine </select> What if we wanted to update the list of options dynamically: Courses to drop/add; available shoe sizes for this model, 11 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

12 Loops <script type="text/javascript"> for (i =0;i <=100; i++){ document.write(i+ I will never cross on red again <p> ); } </script> Equivalent: i=0; while (i<=100) { document.write("the number is " + i); } Useful play tool: p yj 12 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

13 JavaScript Arrays The Array object is used to store multiple values in a single variable. Complete Reference: var mycars=new Array(); mycars[0]="saab"; mycars[1]="volvo"; mycars[2]="bmw"; Access to Array elements: document.write(mycars[0]); mycars[0]="opel"; 13 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

14 Arrays + Loops = Goodness <script type="text/javascript"> var mycars=new Array( Saab, Volvo, BMW ); for (i = 0; i <mycars.length; C l i++){ document.write(mycars[i]+ <br> ); } </script> 14 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

15 Events There are common JavaScript events defined on most HTML page elements. You can write JavaScript code that runs if and when one of these events takes place. Example: JavaScript code whose execution is triggered by an event is called an event handler. Important events: onload and onsubmit Other common JavaScript Events: 15 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

16 JavaScript: Processing Form Data Form validation is the process of checking that the information provided by the user is correct (or not obviously incorrect) before processing it. <form action= onsubmit="return validate(this);" > <label for="q">search:</label> <input type="text" name="q" id="q"> </form> function validate(f) { if(f.q.value=="") { return false; } else{ return true; } } 16 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

17 Web 2.0 Event-driven programming model that involves calling web service APIs by sending and receiving messages in XML format over the HTTP protocol. Today we ll just cover the basics to give you background after that t you should be able to follow/modify examples in the (many) online tutorials to do what you need 17

18 Intuition Web service API: collection of function definitions Web service API call: invocation of a Web Service function Example: Yahoo Search API Definition: Invocation: 18 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

19 What is a web service? A software system designed to support interoperable machine-to-machine interaction over a network. It has an interface described in a machine-processable format. -W3C WSDL and SOAP conveyed using HTTP with an XML serialization + other Webrelated standards Example Web services: Amazon ( Yahoo ( ebay y( ( p Flickr ( YouTube ( Del.icio.us ( 19

20 Web Service models Resource oriented model A resource is anything that can have an identifier (URI) Focuses on resource description and representation (data object reflecting state of resource) Service oriented model A service is realised by an agent (provider) and used by another (requester) Focuses on tasks (unit of action) that may be performed by an agent: description, messaging/choreography and goal state Message oriented model A message is the basic unit of data sent from one agent to another: the action taken in response to receiving a message is up to the recipient Focuses on message structure (contract) and transport (choice of protocol carries no semantics) 20

21 AJAX (Asynchronous Javascript + XML) Uses browser s XML support: DOM, XSLT XMLHttpRequest Google Maps is best-known AJAX application 21

22 AJAX Design Principles 1. The browser hosts an application, not content Application code delivered d to browser, mostly as JavaScript code 2. The server delivers data, not content Data may be plain text, JavaScript fragments, or XML documents 3. User/application interaction is continuous and fluid UI metaphors like drag-and-drop become possible 4.This is real coding and requires discipline Significant developer responsibility to manage conversational state over entire web transaction 22

23 Basic AJAX process 23

24 The src Attribute We can link external JavaScript applications using the src attribute: <script type="text/javascript" language="javascript 2.1" src="scripts/hithere.js"> 24

25 Simple Data Exchange Format: JSON JSON (JavaScript Object j Notation,, RFC-4627) Subset of JS object literal notation (does not require JS) Data types: number, string, boolean, array, object, null Supported by many languages In Dec 2005, Yahoo! added support for JSON but No schema mechanism (validation, code generation) Limited type system (no date or time) No extension or versioning 25

26 Data Interchange The key idea in Ajax. An alternative to page replacement. Applications delivered as pages. How should the data be delivered? 26

27 JSON JavaScript Object Notation Minimal Textual Subset of JavaScript 27

28 Values Strings Numbers Booleans Objects Arrays null 28

29 Object Objects are unordered containers of key/value pairs Objects are wrapped in { }, separates key/value pairs : separates keys and values Keys are strings Values are JSON values struct, record, hashtable, object 29

30 Object 30

31 Object { 31 } "name": "Jack B. Nimble", "at large": true, "grade": "A", "format": { "type": "rect", "width": 1920, "height": 1080, "interlace": false, "framerate": 24 }

32 Array Arrays are ordered sequences of values Arrays are wrapped in [], separates values JSON does not talk about indexing. An implementation can start array indexing at 0 or 1. 32

33 Array ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] [ ] [0, -1, 0], [1, 0, 0], [0, 0, 1] 33

34 Arrays vs Objects Use objects when the key names are arbitrary strings. Use arrays when the key names are sequential integers. Don't get confused by the term Associative Array. 34

35 JSON in Ajax HTML Delivery. JSON data is built into the page. <html>... <script> var data = {... JSONdata... }; 35

36 JSON in Ajax XMLHttpRequest Obtain responsetext Parse the responsetext responsedata = eval( '(' + responsetext + ')'); responsedata = responsetext.parsejson(); 36

37 JSON in Ajax Secret <iframe> Request data using form.submit to the <iframe> target. The server sends the JSON text embedded in a script in a document. <html><head><script> document.domain = 'penzance.com'; parent.deliver({... JSONtext... }); </script></head></html> The function deliver is passed the value. 37

38 JSON in Ajax Dynamic script tag hack. Create a script node. The src url makes the request. The server sends the JSON text embedded in a script. deliver({... JSONtext... }); The function deliver is passed the value. The dynamic script tag hack is insecure. 38

39 JSONRequest A new facility. Two way data interchange between any page and any server. Exempt from the Same Origin Policy. Campaign to make a standard feature of all browsers. 39

40 JSON Looks Like Data JSON's simple values are the same as used in programming languages. No restructuring is required: JSON's structures look like conventional programming language structures. JSON's object is record, struct, object, dictionary, hash, associate array... JSON's array is array, vector, sequence, list... 40

41 Yahoo Web Service with JSON Tutorial/Howto: Can use nice interface widgets:

42 JSON Example By default the Yahoo! Web Services return output in XML format. To get output in JSON format, use the output=json parameter in the request: h?appid=yahoodemo&query=madonna&output=json Key idea: Callback function. The callback parameter (callback=function) wraps the JSON output text in parentheses and a function name (e.g., MyFunction) com/imagesearchservice/v1/imagesea rch?appid=yahoodemo&query=madonna&output=json&callback =MyFunction 42 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

43 Complete Example <html> <head> <title>how Many Pictures Of Madonna Do We Have?</title> </head> <body> <script type="text/javascript"> function myfunction(obj) { alert(obj.resultset.totalresultsavailable); } </script> <script type="text/javascript" src=" pid=yahoodemo&query=madonna&output=json&callback=myfunction"> </script> </body> </html> 43 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

44 Can we do something more interesting? ti Display first 10 images of results for(i=0; i<obj.resultset.totalresultsavailable && i<10; i++){ var img = obj.array[i]; //do something with the image, like write to document! } 44 Eugene Agichtein CS 190: The Web: Concepts and Technology, Emory University Spring 2009

AJAX: From the Client-side with JavaScript, Back to the Server

AJAX: From the Client-side with JavaScript, Back to the Server Asynchronous server calls and related technologies CS 370 SE Practicum, Cengiz Günay (Some slides courtesy of Eugene Agichtein and the Internets)