Transcript 휴대인터넷 무선환경에서의 효과적인 Broadcast/Multicast 적

Scripting and Interactivity
2006. 4. 25
이병희
[email protected]
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
… programming language that is used to manipulate,
customize and automate that facilities of an existing system

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
2
이병희 <[email protected]>
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 selfsufficient
Must be augmented with host objects to manipulate a host
system

3
e.g. JavaScript = ECMAScript + host objects for a Web browser (W3C
DOM)
이병희 <[email protected]>
Expressions and Variables

ECMAScript recognize three different types





Numbers and arithmetic follow usual rules, using C-like
operators (+, -, *, /, %)
String literals in " " or ' ', usual \ escapes, + used as
concatenation operator


4
Number : used for arithmetic
String : storing and altering text
Boolean : true value
e.g. : “digital”+”multimedia” is equal to “digitalmultimedia”
Boolean values are true or false; combine with Boolean
operators (!, &&, ||)
이병희 <[email protected]>
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
5
이병희 <[email protected]>
Arrays

Aggregate data structure


array is an aggregate data structure consisting of a sequence of
values


Collection of values that can be treated as a single entity and may be
assigned to a variable
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
6
이병희 <[email protected]>
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
7
이병희 <[email protected]>
Objects

Program is organized as a collection of object


ECMAScript is object-based


Support the creation and manipulation of objects
object comprises



Web browser could be make out of objects that model documents,
windows, images and so on
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
8
이병희 <[email protected]>
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
9
이병희 <[email protected]>
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


Document object is related with document currently being
displayed when the script is executed

10
Return an object corresponding to an element with an id
Script element is used to embed script in documents
이병희 <[email protected]>
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
<html>
<head>
<title>Dynamically generated content</title>
</head>
<body>
<script type=“text/javascript”>
Document.write(‘<h1>’ + document.title + ‘</h1>’);
</script>
</body>
</html>


11
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
이병희 <[email protected]>
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




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



12
onClick, onDblClick, onKeyDown, … etc.
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" />
이병희 <[email protected]>
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’;
13
이병희 <[email protected]>
Behaviors





14
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
이병희 <[email protected]>
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



15
Frame script
Button symbols
Movie clips
이병희 <[email protected]>
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



16
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
이병희 <[email protected]>
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()
17
이병희 <[email protected]>