interactive designs

8/7/2019 INTERACTIVE DESIGNS

1/17

INTERACTIVEINTERACTIVE

DESIGNSDESIGNS


2/17

INTERACTIVEINTERACTIVE


3/17

With the growth of the WorldWith the growth of the World--Wide Web, page authors have begun to find themselvesWide Web, page authors have begun to find themselveshampered by the limitations of HTML. Since HTML is ahampered by the limitations of HTML. Since HTML is a markupmarkup language rather thanlanguage rather thanaa programmingprogramming language, it lacks many of the features that designers of interactivelanguage, it lacks many of the features that designers of interactivepages might want. For example, HTML does not support arbitrary conditionals thatpages might want. For example, HTML does not support arbitrary conditionals thatmight allow one to present the same page in different ways, depending on knowledgemight allow one to present the same page in different ways, depending on knowledgeof the user. Similarly, HTML does not give the page author direct access to theof the user. Similarly, HTML does not give the page author direct access to thebrowser, so that, for example, a page might easily link to the previous page or bringbrowser, so that, for example, a page might easily link to the previous page or bring

up a page in a new window (there are mechanisms for doing this, but they are notup a page in a new window (there are mechanisms for doing this, but they are notgeneral purpose).general purpose).

JavaScript is a programming language developed by Netscape CommunicationsJavaScript is a programming language developed by Netscape CommunicationsCorporation for building interactive pages on the WorldCorporation for building interactive pages on the World--Wide Web. As a documentWide Web. As a documentauthor, you embed JavaScript code within your HTML page. That JavaScript is thenauthor, you embed JavaScript code within your HTML page. That JavaScript is thenexecuted when the page is loaded (or when the user clicks on buttons on your page).executed when the page is loaded (or when the user clicks on buttons on your page).


4/17

OVERVIEW OF JAVA SCRIPTOVERVIEW OF JAVA SCRIPT

JavaScript is a programming language developed by NetScape communicationsJavaScript is a programming language developed by NetScape communicationscorporation to permit more interactive HTML pages. HTML, the core language of thecorporation to permit more interactive HTML pages. HTML, the core language of theWorldWorld--Wide Web, is a markup language: it describes data, not how to manipulateWide Web, is a markup language: it describes data, not how to manipulatedata. JavaScript was intended to extend HTML to make it more interactive.data. JavaScript was intended to extend HTML to make it more interactive.

What can you do with JavaScript? A great many things:What can you do with JavaScript? A great many things:

Make pages that change their content or appearance.Make pages that change their content or appearance.

Obtain information from the user, and use that information to customize the page.Obtain information from the user, and use that information to customize the page.

Provide additional information to the user with dialogue boxes, fields, and even textProvide additional information to the user with dialogue boxes, fields, and even texton your page.on your page.

Test for settings, and perform different actions depending on those settings.Test for settings, and perform different actions depending on those settings.

Use timers to continually change or update your page.Use timers to continually change or update your page.

Parse and apply query from a form.Parse and apply query from a form.

Much much more.Much much more.


5/17

SIMPLE INPUT OUTPUTSIMPLE INPUT OUTPUT Since we'll need some commands to get started, we'll begin with input andSince we'll need some commands to get started, we'll begin with input and

output. For now, we'll simply describe the commands. In the next section,output. For now, we'll simply describe the commands. In the next section,we'll see how to incorporate them into a page.we'll see how to incorporate them into a page.

One way to provide information to the user is with the alert(One way to provide information to the user is with the alert(texttext) function.) function.This function brings up an alert box which displays the argument to theThis function brings up an alert box which displays the argument to thefunction. Many people find the alert box a simple way of providing a greetingfunction. Many people find the alert box a simple way of providing a greetingwithout "muddying" the underlying HTML.without "muddying" the underlying HTML.

A similar way to obtain information from the user is with theA similar way to obtain information from the user is with theprompt(prompt(requestrequest,,defaultdefault) function. This function brings up a dialog box in) function. This function brings up a dialog box inwhich the user can type a response. In most cases, you will want to includewhich the user can type a response. In most cases, you will want to includea default setting. The function returns the string the user entered.a default setting. The function returns the string the user entered.

Although you will generallyAlthough you will generally incorporateJavaScript in HTML pagesincorporate

JavaScript in HTML pages, you can, you canalso save them as xxx.js files and load them into navigator. This is oftenalso save them as xxx.js files and load them into navigator. This is often

useful for quick testing of concepts.useful for quick testing of concepts.

However, there are many advantages to embedding yourJavaScript inHowever, there are many advantages to embedding yourJavaScript inHTML code. Among others, you can load JavaScript libraries within HTMLHTML code. Among others, you can load JavaScript libraries within HTMLpages, but not within otherJavaScript files.pages, but not within otherJavaScript files.


6/17

JAVASCRIPT IN HTMLJAVASCRIPT IN HTML

PRO

GRAMSPRO

GRAMS Their are a number of ways to insert JavaScript code into HTMLTheir are a number of ways to insert JavaScript code into HTML

documents. We will begin with two of the simpler ones.documents. We will begin with two of the simpler ones.

ForJavaScript code that is to be executed directly, one uses the ForJavaScript code that is to be executed directly, one uses the

tag. The tag has two optional parameters,tag. The tag has two optional parameters,

language="..."language="..." ---- the scripting language used (javascript, javascript1.1, orthe scripting language used (javascript, javascript1.1, or

others).others).

src="..."src="..." ---- a file ofJavaScript code to load into the program.a file ofJavaScript code to load into the program.

For Example: alert("Welcome to my page."); For Example: alert("Welcome to my page.");


7/17

CONTINCONTIN

The src parameter is particularly useful, as it lets you reuse yourJavaScript code. IThe src parameter is particularly useful, as it lets you reuse yourJavaScript code. Istrongly encourage you to develop general functions, and then incorporate them intostrongly encourage you to develop general functions, and then incorporate them intoyour program using the tag.your program using the tag.

We can extend that simple JavaScript program to incorporate a library file as follows.We can extend that simple JavaScript program to incorporate a library file as follows.Note that we need two sets of tags: one set to load the library and anotherNote that we need two sets of tags: one set to load the library and anotherto call a function from that library.to call a function from that library.

greet("Sam"); greet("Sam");


8/17

EXPRESSIONSEXPRESSIONS

JavaScript permits normal mathematical expressions, such as 2*10+3. ItJavaScript permits normal mathematical expressions, such as 2*10+3. It

also permits you to use variables within expressions.also permits you to use variables within expressions.

JavaScript also provides some basic string operations. In particular, + isJavaScript also provides some basic string operations. In particular, + is

used to concatenate strings. If you happened to have the user's nameused to concatenate strings. If you happened to have the user's name

stored in the variable userName, you could create a greeting withstored in the variable userName, you could create a greeting with

For Example: var greeting // A greeting to the user greeting = "Hello " + userName + ".For Example: var greeting // A greeting to the user greeting = "Hello " + userName + ".

Welcome to this page."Welcome to this page."


9/17

FUNCTIONSFUNCTIONS

JavaScript allows you to define your own functions. By writing functions, you canJavaScript allows you to define your own functions. By writing functions, you can

better test and reuse your code. The normal structure of a function is functionbetter test and reuse your code. The normal structure of a function is function

functionfunction--namename (( parametersparameters ) {) { commandscommands } //} // functionfunction--namename

The left brace indicates the beginning of the function body, and the right braceThe left brace indicates the beginning of the function body, and the right brace

indicates the end of the function body.indicates the end of the function body.

You use returnYou use return expressionexpression to return a value from a function.to return a value from a function.


10/17

INSERTING TEXT n HTMLINSERTING TEXT n HTML

Up to this point, we've only been interacting with the user by puttingUp to this point, we've only been interacting with the user by putting

up dialogue boxes. Clearly, we'd like to do more. For example, weup dialogue boxes. Clearly, we'd like to do more. For example, we

might want to insert text or HTML into a document. JavaScriptmight want to insert text or HTML into a document. JavaScript

allows us to do this with the write method of the document object.allows us to do this with the write method of the document object.

That is, you use document.write(That is, you use document.write(texttext) to insert text. The text is) to insert text. The text isinserted at the point that the JavaScript code is executed. You useinserted at the point that the JavaScript code is executed. You use

document.writeln(document.writeln(texttext) to write the text an add a carriage return tot) to write the text an add a carriage return tot

he end of the line.he end of the line.

For example, we might create a page that greets a user by nameFor example, we might create a page that greets a user by namewithwith var userName userName = var userName userName =

prompt("Please enter your name", "") document.write("Hello " + userName +prompt("Please enter your name", "") document.write("Hello " + userName +

" welcome to my page.") " welcome to my page.")


11/17

ANIMATIONANIMATION

Using a variety of techniques, it is possible to create simple textUsing a variety of techniques, it is possible to create simple text--

based animations in HTML. For example, you can create a marqueebased animations in HTML. For example, you can create a marquee

effect by repeatedly removing the first letter from a field and theneffect by repeatedly removing the first letter from a field and then

putting it back on the end.putting it back on the end.

However, it is generally recommended that you do not use suchHowever, it is generally recommended that you do not use suchanimations. Why? They're very distracting to the user, and cananimations. Why? They're very distracting to the user, and can

simultaneously increase the amount of time someone spends tryingsimultaneously increase the amount of time someone spends trying

to read our page and decrease the amount the get out of our page.to read our page and decrease the amount the get out of our page.

JavaScript currently has little support for graphicsJavaScript currently has little support for graphics--based animationsbased animations

(other than repeatedly changing an image or communicating with a(other than repeatedly changing an image or communicating with aJava applet).Java applet).


12/17

USING COOKIESUSING COOKIES

In building sites, rather than pages, we often want to preserve information betweenIn building sites, rather than pages, we often want to preserve information betweenthese pages, and sometimes even between sessions. While we can usethese pages, and sometimes even between sessions. While we can use query stringsquery stringsto pass information between pages, that method can become cumbersome and isto pass information between pages, that method can become cumbersome and iseasy to break (what happens if a user loads a page without clicking on one of oureasy to break (what happens if a user loads a page without clicking on one of ourlinks?).links?).

Fortunately, most browsers support a form of persistant data known as theFortunately, most browsers support a form of persistant data known as the cookiecookie..You can refer to all the cookie for a document as document.cookie. This looksYou can refer to all the cookie for a document as document.cookie. This lookssurprisingly like a query string, but with additional information. I strongly recommendsurprisingly like a query string, but with additional information. I strongly recommendthat you use utiltiy functions if you want to manipulate cookies.that you use utiltiy functions if you want to manipulate cookies.


13/17

ADDING MUSICADDING MUSIC

An example of how to add Media Player to your Web page is given below. Only the most usefulAn example of how to add Media Player to your Web page is given below. Only the most usefulparameters are shown, for a complete list have a look at the Music.htm code.parameters are shown, for a complete list have a look at the Music.htm code.

EXAMPLE:


14/17

CONTIN..CONTIN..

Once the Media Player object is defined you can use its ID in yourJavaScriptOnce the Media Player object is defined you can use its ID in yourJavaScriptfunctions to invoke the object's methods, such as MPlyr.Play() or MPlyr.Pause().functions to invoke the object's methods, such as MPlyr.Play() or MPlyr.Pause().

In this example the Media Player plays the sound file but remains hiddenIn this example the Media Player plays the sound file but remains hidden(style="VISIBILITY: hidden"). By changing the parameters you can control the size,(style="VISIBILITY: hidden"). By changing the parameters you can control the size,appearance and other properties of the Player. Most importantly, by changing theappearance and other properties of the Player. Most importantly, by changing the"Filename" parameter you can use it to replay AVI, MPEG, MOV, MP3 and other"Filename" parameter you can use it to replay AVI, MPEG, MOV, MP3 and othertypes of Multimedia files.types of Multimedia files.


15/17

BACKGROUND MUSICBACKGROUND MUSIC

Using the tag to play sound and videos gives you the greatest compatibilityUsing the tag to play sound and videos gives you the greatest compatibility

-- it works on all major browsers.it works on all major browsers.

The following code fragment illustrates the use of the tag.The following code fragment illustrates the use of the tag.

The sound file plays automatically as soon as your visitors enter the page when youThe sound file plays automatically as soon as your visitors enter the page when you

place the tag inside the section. Its use is shown below:place the tag inside the section. Its use is shown below:


16/17


17/17

THANK YOUTHANK YOU

interactive designs

Documents