scripting and interactivity 2006. 4. 25 이병희 [email protected]

Scripting and Interactivity

2006. 4. 25이병희

[email protected]

이병희이병희 <<[email protected]@hufs.ac.kr>> 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


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)


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 (!, &&, ||)


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


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


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


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


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


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


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

<html>

<head>

<title>Dynamically generated content</title>

</head>

<body>

<script type=“text/javascript”>

Document.write(‘<h1>’ + document.title + ‘</h1>’);

</script>

</body>

</html>


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';}

< img src="images/square.gif" alt="square or circle" onMouseOver="in_image()" onMouseOut="out_of_image()" id="circlesquare" />


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’;


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


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


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


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()

scripting and interactivity 2006. 4. 25 이병희 [email protected]

Documents