Reporting Status or Progress

Multimedia Data Introduction to JavaScript and Scaleable Vector Graphics (SVG) Dr Sandra I. Woolley http://www.eee.bham.ac.uk/woolleysi [email protected] Electronic, Electrical and Computer Engineering Summary of Content HTML (HyperText Markup Language) An introduction Examples of HTML tags Introduction to JavaScript Objects, properties, methods Events Values and variables, operators

Simple JavaScript examples Alert boxes and rollovers Introduction to SVG (Scaleable Vector Graphics) Simple demonstration by example HTML (HyperText Markup Language) HTML is the basic language of the web. It comprises a set of tags which are instructions to web browsers, e.g., bold text appears as bold text applies bold until , similarly applies italics until for underline,

for paragraph,
for line break also

and for positioning adding links:Link text A Simple HTML File test0.htm

woolleysi web page

woolleysi (S.I.WOOLLEY) test web page



Link to my web page JavaScript Introduction to JavaScript JavaScript is not Java Java is a full-feature OO programming language developed by Sun Microsystems. It is a descendant of C and C++ and was designed to be cross-platform. Java is used to create web applets (small programs downloaded over the internet and run inside web

browsers). JavaScript - Netscape added a basic scripting ability to its Navigator web browser called Livescript ... at a time when Java was new/exciting .... and renamed Livescript, JavaScript. JavaScript is a scripting* language which can manipulate simple webpage objects. (*A scripting language is a programming language that controls a software application. They enable the behaviour of the application to be adapted for the user.) About JavaScript JavaScript is an object-oriented scripting language. Objects have properties e.g., cat has fur computer has keyboard bicycle has wheels car has wheels window has title

Changing a property of an object can modify the object. Objects can share properties. Properties can be objects, i.e., objects can have subobjects. The things objects do are called methods, e.g., cat purr computer crash JavaScript objects have methods, e.g., buttons click() windows open() text selected() (brackets indicate that we are referring to a method rather than a property.) Objects and properties are separated by a ., e.g.

bicycle.wheels cat.paws.front.left referring to methods : cat.purr() Events Event Events are actions that a user (i.e., a viewer) performs whilst visiting your page. JavaScript can react to events with event handlers. In JavaScript, if the user clicks on a button the onClick event handler will take note of the action and perform the

specified task. When we write scripts we do not need to anticipate every possible event the user might take, we just encode the ones we want. E.g., pages load as normal without an onLoad event handler. What it handles onAbort User aborts loading the page onBlur User leaves the object onChange User changes the object onClick

User clicked on an object onError The script encountered an error onFocus User made an object active onLoad Object finished loading onMouseover Cursor moved over an object onMouseout Cursor moved off an object onSelect

User selects content of an object onSubmit User submitted a form onUnload User left the window Values, Variables and Operators and Script Tags In JavaScript, pieces of information are values, e.g., numbers, strings, Booleans, nulls, objects, functions. Variables contain values. E.g., myname = sandra (= can be read as is set to) Notes

JavaScript is CaSEseNSiTivE! Variable names should not start with numbers nor contain spaces. As in other languages, operators are the symbols used to work with variables, e.g., +, -, *, / etc. JavaScript must be enclosed in Hiding script from old browsers is easily achieved by enclosing the script in HTML comments. What JavaScript Can Do? The demonstration examples use a subset of JavaScript for simple client-side scripting - i.e., for processes performed on the users computer not on the server. Simple examples of JavaScript functionality include: Reactions to user actions Detection of browser type, version and plug-ins Status bar messages Date- and time-related messages

Alert boxes Alert box example: What JavaScript Can Do? Conditional alert box example Simple Image Rollovers

woolleysi rollover web page

A simple rollover


Picture rollover demo - cheetah to animation and back Scalable Vector Graphics (SVG) An Introduction to SVG SVG is short for Scalable Vector Graphics It is a part of "XML" ; the "eXtensible Markup Language" XML XML is a `metalanguage' a language for describing other languages.

Unlike HTML which is a fixed format markup language, XML allows us to design our own customized markup languages for different types of documents (e.g. for representing music or hieroglyphs.) See http://www.w3.org/ - the worldwide web consortium web pages for details. SVG is the graphical component of XML - it allows the rendering of graphics in a web page. It is a very useful, and much more efficient, alternative to bitmap images (i.e., an alternative to .gif and .jpeg images.) The scalability means that web browser graphics automatically resize according to the size of the browser window. An Introduction to SVG SVG can be used to create interactive functionality like JavaScript. SVG authoring tools are available.

The most popular commercial multimedia graphics alternative is Adobe Flash. The following slides demonstrate some very basic capabilities of SVG by example. These and other demonstration files can be found on the course web page. SVG Examples Simple Examples for Illustration SVG code NOT assessed.

...and for synchronizing multimedia presentations... SMIL Synchronized Multimedia Integration

Language is generally referred to as "SMIL" (pronounced "smile"). It is a standard that enables simple authoring of interactive multimedia presentations. SMIL is also an application of XML. It can schedule text, images, audio and video presentations either in parallel or in sequence.

An SMIL image slideshow example. http://www.ubookcase.com/book/Addison.Wesley/Developing.Scalable.Series.40.Applications.A.Guide.for.Java.Developers/0321268636/ch14lev1sec2.html MMS (Multimedia Messaging Service) is a video/picture subset of SMIL. SMIL tutorial: http://www.w3schools.com/smil/default.asp This concludes our introduction to JavaScript and SVG. All the demonstration files can be found on the course web page.

You will not be required to write any JavaScript or SVG code in the exam. But you may expect bookwork questions on the content of these slides, for example, about what these languages provide or about what objects, properties or events are. You can find course information, including slides and supporting resources, on-line on the course web page at Thank You http://www.eee.bham.ac.uk/woolleysi/teaching/multimedia.htm

Recently Viewed Presentations

  • Welcome to Parent Night - Denton ISD

    Welcome to Parent Night - Denton ISD

    District Assessments. In Denton ISD, we give the Kathy Richardson math assessment to all K-2 graders. These skills will be assessed at the beginning of the year, middle of the year, and at the end of the year.
  • IP Due Diligence

    IP Due Diligence

    Solve this issue by proper claim drafting one claim on one single economic entity in the claim Case Law Germany Exhaustion No written Rule in the Patent Act but an established principle under case law and binding as customary law...
  • Chapter 10: Project Communications Management Copyright Course Technology

    Chapter 10: Project Communications Management Copyright Course Technology

    Nancy Michaels First of month Internal Management Monthly Status Report Hard copy Bob Thomson First of month Internal Business and Technical Staff Monthly Status Report Intranet Angie Liu First of month Training Subcontractor Training Plan Hard Copy Jonathan Kraus 11/1/1999...
  • QM2 Concept Test 11.1 In a 3D Hilbert

    QM2 Concept Test 11.1 In a 3D Hilbert

    In perturbation theory, ?0 is chosen to be a diagonal matrix and the basis vectors are chosen as the orthonormal eigenstates of ?0. A. 1 only B. 3 only C. 1 and 2 only D. 1 and 3 only E....
  • The Federal System: The Division of Power Chapter 8 Section 1

    The Federal System: The Division of Power Chapter 8 Section 1

    CONCURRENT Power. Definition: Powers that the federal and state governments share. CONCURRENT Power. Examples: Levy taxes. Borrow money. Maintain law and order. Provide for citizens' welfare. DENIED Powers. Definition: Powers that neither form of government are permitted to have.
  • Training, training, training! Master that gun! Master that

    Training, training, training! Master that gun! Master that

    Each man was told what to expect and when to expect it, what his objective was and how long it would take to get thereā€¦" - Daniel G. Dancocks Week of Suffering New Tactics Vimy Glide - advancing at a...
  • Production Planning & Scheduling in Large Corporations

    Production Planning & Scheduling in Large Corporations

    Jumbled flow (job Shop) Disconnected line flow (batch) Connected line flow (assembly Line) Continuous flow (chemical plants) Process type Production volume & mix Low volume, low standardi- zation Multiple products, low volume Few major products, high volume High volume, high...
  • Copernicus CP4CDS compute service

    Copernicus CP4CDS compute service

    ECAS/Ophidia (CMCC, DKRZ) Offered functionality will be defined as part of IS-ENES3 service activity and research activity . The Climate4impact portal (KNMI) will interact with these WPS endpoints. Thank you . SDDS: development process.