CTI Hci201 Lecture Summary 4b.

Lecture Summary4b

Prepared by: Anthony Larrain

JavaScript

JavaScript is a programming language.
You are not expected to understand all of the JavaScript code.
It will be obvious looking at the code what you need to change, if any changes are needed
Just insert all the code including the script tags at the point in your document where you want the JavaScript effect to show.

Example

The following code will produce this neon light effect.

This free script provided by
JavaScript Kit

<h2> <script language="JavaScript1.2"> /* Neon Lights Text By JavaScript Kit (http://javascriptkit.com) Over 400+ free scripts here! */ var message="Welcome to JavaScript Kit!" var neonbasecolor="black" var neontextcolor="yellow" var flashspeed=100 //in milliseconds ///No need to edit below this line///// var n=0 if (document.all||document.getElementById){ document.write('<font color="'+neonbasecolor+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>') } else document.write(message) function crossref(number){ var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj } function neon(){ //Change all letters to base color if (n==0){ for (m=0;m<message.length;m++) //eval("document.all.neonlight"+m).style.color=neonbasecolor crossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",1500) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script> <p align="center"><font face="arial" size="-2"> This free script provided by<br> <a href="http://javascriptkit.com">JavaScript Kit</a></font></p>

JavaScript Resources

Javascript Kit
Internet.com
Dynamic Drive
A ton more, just google JavaScript or JavaScript cut and paste.

FrontPage Layers

Layers allow you to easily place related web content at exact X and Y coordinates.
Start FrontPage: In design mode: From main menu, Insert --> Layers.
Each Layer is given a name layer1, layer2 etc.. These names can be changed.
Inside the layer you can add your web content: text, paragraphs, links, lists tables etc..
Layers can be moved and resized, before or after content is added.
Each layer is placed inside a div tag
CSS positioning is used to layout the layer. This code is generated automatically by FrontPage as an inline style.
Each layer can have a different font, color etc.. This can be done using frontpage or adding styles to the HTML file
If you use CSS to style the layer, use Id selectors.
Example:

Suppose you create two layers. If you do not change the name of the layer, they will be given the default names layer1 and layer2.

To add some style to each of the layer, we define an id selector.

#layer1{ background:green; color:hotpink; font-family:arial; } #layer2{ background:lavender; color:yellowgreen; }

Character Entities

Special Characters

Meta Tags

HTML Forms

Forms provide a way of getting user feedback
form is an HTML tag
Inside the form tag you can place normal text, markup and special elements called controls.
Controls are elements like, radio buttons, check boxes, buttons, text fields.

The Code is:

<form action=" " method=post> <p><label>First Name: </label> <input type="text" name="firstname"></p> <p><label>Last Name: </label> <input type="text" name="lastname"></p> <p><label>Email:          </label> <input type="text" name="email"></p> <p><label>Comments:</label> <textarea name="thetext" rows="6" cols="40"></textarea></p> <p><input type="submit" value="send"> <input type="reset"></p> </form>

The value for the attribute action would be filled in by you.

This needs to be the URL of a script that will process your form data. If you have a web hosting account they may provide the URL and script.
FreeForms.org. Provides a service that will route form data to your email address.
Sending it directly to your email. Not a good idea.

Multimedia and the World Wide Web