Scripting and Interactivity 이병희

이병희 2 Event Driven System  Associate actions with event, so when the user does something, something happens in response Most events initiated by user : mouse click, key presses etc.. Actions  Multimedia environment provide predefined set of actions : behaviors  User can define own action by providing scripting language  Write a script that perform the desired action when it is executed  Scripting Language Definition of a scripting language Provide control structures and basic types for computation, plus objects and data types belonging to some host system  e.g. JavaScript: core language plus objects representing browser window, document, etc … programming language that is used to manipulate, customize and automate that facilities of an existing system

이병희 3 ECMAScript  Scripting language Standard based on JavaScript and JScript (Netscape and Microsoft scripting languages for WWW)  Produced by European Computer Manufacturers' Association (ECMA)  Only defines a core language, which is not computationally self- sufficient  Must be augmented with host objects to manipulate a host system e.g. JavaScript = ECMAScript + host objects for a Web browser (W3C DOM)

이병희 4 Expressions and Variables  ECMAScript recognize three different types Number : used for arithmetic String : storing and altering text Boolean : true value  Numbers and arithmetic follow usual rules, using C-like operators (+, -, *, /, %)  String literals in " " or ' ', usual \ escapes, + used as concatenation operator e.g. : “ digital ” + ” multimedia ” is equal to “ digitalmultimedia ”  Boolean values are true or false; combine with Boolean operators (!, &&, ||)

이병희 5 Variables and Assignment  Variables Variables are location(container) that can hold a value Value stored in a location can be changed by assignment ECMAScript is an untyped language  ECMAScript variables are untyped  The same variable can hold a number, string or Boolean at different times  No need to declare variables before use  Assignment = is the assignment operator Simple assignment: variable = expression Left hand side can be more complicated Compound assignment operators +=, *= etc provide shorthand for common pattern  x += a is equivalent to x = x+ a etc  x++ and ++x are equivalent to x += 1

이병희 6 Arrays  Aggregate data structure Collection of values that can be treated as a single entity and may be assigned to a variable  array is an aggregate data structure consisting of a sequence of values Each element of the array can be identified by a numerical index – its position in the sequence  Array operation Create an array  a = new Array();  No need to specify the number of elements, the array will grow as needed Number of elements in a is a.length  Associative arrays Array indexes may be strings  Implement lookup tables – mapping from strings to values  month_values["Jan"] = 0;  Use same indexing notation as numerically indexed arrays

이병희 7 Functions  Form of abstraction  Give a name to a computation (define a function), perform the computation by using the name (call the function)  Function Definition function (formal parameters) { body } Formal parameters behave like variables within function body Values of arguments are assigned to the formal parameters when the function is called Body may include a return statement  the value of the following expression is the result

이병희 8 Objects  Program is organized as a collection of object Web browser could be make out of objects that model documents, windows, images and so on  ECMAScript is object-based Support the creation and manipulation of objects  object comprises A collection of named data items, known as properties A collection of operations (functions), known as methods  Built-in objects Math  Properties are useful constants, such as Math.PI, Math.SQRT2, Math.E  Methods provide trig functions, exponentials and logs, random numbers Array  All arrays inherit properties and methods, e.g. Array.length String  Useful methods for operating on strings, inherited by all strings

이병희 9 World Wide Web Client-side Scripting  WWW offers two potential host environments for scripting language Server-side  Used to enable an HTTP server to communicate with other resources Client-side  Used to control the display of media elements  Executing a script : allowing executable code that has been downloaded from Internet  Scripts running in a web browser can’t access any local resource  Client-side scripts are secure  Just can modify browser’s display in response to user event ECMAScript need interface to be able to interact with web browser  W3C’s Document Object Model (DOM) defines a language-independent, abstract interface to web browser

이병희 10 Document Object  Document object plays a primary role among the host objects  Provides an interface to an HTML document  Contains properties holding document’s title and information derived from the HTTP request ( URL, referrer, etc)  has several methods which writes its argument into current document (ex. write)  Individual elements can be accessed using getElementById Return an object corresponding to an element with an id  Document object is related with document currently being displayed when the script is executed Script element is used to embed script in documents

이병희 11 Script in Web Page  Use the script element to embed a script When page is loaded, all scripts are executed with document object  Simple example  Script is executed at the point it is encountered, its output replaces the script element  Can produce dynamic page via script element and document object Dynamically generated content Document.write(‘ ’ + document.title + ‘ ’);

이병희 12 Event Handler  Interaction required from web pages is concerned with controlling the flow of information Achieved by using on screen control, icon image, etc Elements may have special attributes, whose name identifies a class of events, value is a piece of code to execute when the event occurs  onClick, onDblClick, onKeyDown, … etc. Often the value is a call to a function (event handler) Usually defined in a script in the document head  Rollovers Change appearance of button when the cursor is moved over it Provides useful feedback to the user Implemented by changing the src attribute of an img element The document.images array contains objects for all images in the document Use onMouseOver and onMouseOut handlers to change the image as the cursor moves over and leaves the image  Handlers defined in document head:  function in_image() { document.images['circlesquare'].src = 'images/circle.gif'; } function out_of_image() { document.images['circlesquare'].src = 'images/square.gif'; } 

이병희 13 Scripts and stylesheets  Content can be separated from appearance Script need to be able to manipulate stylesheets to change appearance  Two ways to change style Changing the style applied to a particular document element  Each element's object has a style property, which has properties corresponding to the styles applied to the element  By assigning to properties of the style, the element's appearance, position etc can be changed Altering the stylesheet applied to an entire document  styleSheet & CSSRules  styleSheet : an array containing an object for each style element in the document  CSSRules : contain an object for each rule in style element  Each rule has a selectorText property and style property Document.styleSheets[0].cssRules[1].style.color = ‘blue’;

이병희 14 Behaviors  Scripts offer the potential for controlling the user interface  For common task, remove the necessity for scripting by providing parameterized action (behaviors)  Behavior is an abstraction of a class of actions (e.g. display a message)  specific action is generated by providing values for the behavior's parameters (e.g. text of a message)  Authoring systems (Dreamweaver etc) provide an interface for applying behaviors and setting parameter values

이병희 15 Scripting in Flash  Flash’s scripting language : ActionScript Flash's ActionScript language is ECMAScript with a set of host objects corresponding to elements of Flash movies has objects for analyzing XML data, communicating with servers, … for building Web applications with Flash front-ends Use Flash's Actions panel to create scripts  Just type code, or build scripts by adding constructs from a list and supplying parameters  Three types of element to which script can be attached Frame script Button symbols Movie clips

이병희 16 Attaching Scripts  Frame script Script can be attached to any keyframe Script is executed when the palyhead enters the frame Frame scripts respond to the single event caused by the palyhead enters the frame  Button symbols Type of symbol that responds to user input Built as animations that have exactly four frames  Up, Over, Down, Hit  Up, Over, Down : correspond to states of the button  Hit defines the area (active area) in which it responds to mouse event  Movie Clip Any movie clip can receive events and have scripts attached to it Slightly different, more general set of events than for buttons As well as user input, movie clips can also respond to events related to loading and unloading and the receipt of data

이병희 17 Movie clip methods and Properties  Script can be used to control movie clips in response to event Possibility of Interactive animation Movement of object is controlled by user interaction In order to control a clip, clip must be given an instance name  Movie clip’s instance name can be used in scripts Objects in script refer to movie clips Objects have collection of properties of the clip  Total number of frames, current frame, dimensions, etc  Call methods and access properties using the instance name and dot notation If instance name is theClip  theClip.stop()  theClip.play()