Web Programming Material From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the...

From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 1

Web Programming MaterialWeb Programming Material

IntroductionIntroduction

• The JavaScript Programming Language• Applets• The Java Programming Language• Guest Books• Web Page Counters• Server-Side Includes



• Introduction• JavaScript and HTML• Event Handlers• Sample JavaScript Code

The JavaScript Programming LanguageThe JavaScript Programming Language



• Scripting language• Not Java• Statements usually embedded in HTML code• Simple, interpreted programming language

The JavaScript Programming LanguageIntroductionIntroduction



Common uses:• Alert boxes• Color fades• Dynamic-conversion form elements• Information in status line• Verify form input

The JavaScript Programming LanguageIntroductionIntroduction



• <SCRIPT></SCRIPT>• JavaScript-enabled browser• LANGUAGE• SRC• .js

The JavaScript Programming LanguageJavaScript and HTMLJavaScript and HTML



<SCRIPT LANGUAGE = “JavaScript”><!- - Begin hiding for browsers that cannot process JavaScript.Include JavaScript statements here.…Last JavaScript statement goes here.End hiding script. - ->

</SCRIPT>

The JavaScript Programming LanguageJavaScript and HTMLJavaScript and HTML



JavaScript and HTMLJavaScript and HTML<Html><Head><Title>onLoad Example</Title><Script Language = “JavaScript”><!- - Begin hiding for browsers that cannot support script.function ready(){

document.forms[0].elements[0].value=“Lets go!”}//Stop hiding script. --></Script></Head><Body onLoad = “ready()”><Form><Input Type = “text” Value = “Loading…”></Form></Body></Html>



onMouseOver and onMouseOut• onMouseOver

When you move mouse over item, action triggered• onMouseOut

When you move mouse out of area, action triggered

The JavaScript Programming LanguageEvent HandlersEvent Handlers



onMouseOver and onMouseOut

<A HREF = “ASSIGNMENTS/assign.html”onMouseOver = “loadimage(‘01’,’GRAPHICS/4ON.GIF’);

status = ‘Assignments’; return true;”

onMouseOut = “loadimage(‘01’, `GRAPHICS/4OFF.GIF’); status = ‘ ‘;

return true;”> <IMG SRC = “GRAPHICS/4OFF.GIF”

WIDTH = “42” HEIGHT = “42”NAME = “01” ALT = “Assignments”BORDER = “0”></A>

The JavaScript Programming LanguageEvent HandlersEvent Handlers


Web Programming MaterialWeb Programming MaterialThe JavaScript

Programming LanguageEvent HandlersEvent Handlers

When user mouses over image:• Function call made to JavaScript routine

loadimage()

• Assignments displayed in status line• return true; indicates browser can return

normally from processing JavaScript




onClick and Alert Box <A HREF = “killface.html”

onClick = “alert(‘Thanks for loading my page:Killface.’)”> Killface’s Page

</A>



Event HandlersEvent HandlersonChange and Confirm Box, Prompt Box<Html><Head><Title>Confirm Box</Title><Script Language = “JavaScript”>function question(yourname) {

var name = yourname.valuevar theAnswer = confirm(“Are you really “ + name + “?”)(Or: var theAnswer = prompt(“What is your name”, “”))

}</Script></Head><Body><Form><Input Type = “text” Value = “Enter your name” onChange = “question(this)”></Form></Body></Html>



<FORM ACTION = “mailto:[email protected]”METHOD = “post”> <STRONG>Temperature Conversion Example Using JavaScript <BR></STRONG> <P> </P>

The JavaScript Programming LanguageSample JavaScript CodeSample JavaScript Code



<INPUT TYPE = “text”NAME = “cels”VALUE = “0”SIZE = “3”MAXLENGTH = “3”onChange = “fahr.value = Math.round(10 * (1.8 * this.value + 32))/10;”>° <STRONG>C</STRONG> <STRONG>equals</STRONG>




• NAME = “fahr”• fahr.value• Math.round()




• Introduction• HTML Applet Tags• Java-Enabled Browsers• Sample Applets

AppletsApplets



• “Little application”• Primary features:

• Information is dynamic• Can respond to input

• Program downloaded from Web server• Runs locally

AppletsIntroductionIntroduction



• <APPLET></APPLET>• Attributes:

• ALIGN ALT• CODE CODEBASE• HEIGHT HSPACE• NAME VSPACE• WIDTH

AppletsHTML Applet TagsHTML Applet Tags



• Browsers that are text-only or not Java-enabled ignore applet tags

• Display messages

AppletsJava-Enabled BrowsersJava-Enabled Browsers



<APPLET CODE = “HiMom.class”HEIGHT = “75”WIDTH = “125”>

<PARAM NAME = “message”VALUE = “Hi Mom. How do you

like my applet?”></APPLET>

AppletsSample AppletsSample Applets


Web Programming MaterialWeb Programming MaterialApplets

Sample AppletsSample Applets



• Introduction• Java and Object-Oriented Programming

The Java Programming LanguageThe Java Programming Language



• Sun Microsystems• Oak• Java Virtual Machine

The Java Programming LanguageIntroductionIntroduction



• Java supports object-oriented programming (OOP)

• Class• Subclasses: children of parent class• Applet class

The Java Programming LanguageJava and Java and Object-Oriented ProgrammingObject-Oriented Programming



• Standard Input Fields of a Guest Book• Guest Book Dynamics• Mailto Guest Books

Guest BooksGuest Books



• E-mail address• Message• Name• URL

Guest BooksStandard Input Fields of a Guest BookStandard Input Fields of a Guest Book



• Created using form• ACTION attribute specifies name of CGI script• post METHOD sends parameters• During sign in and updating:

• Guest fills out form• Submits via SUBMIT button• Parameters sent to CGI script• Web server runs the CGI program

• World writeable file

Guest BooksGuest Book DynamicsGuest Book Dynamics



• ACTION attribute specifies a mailto hyperlink• Typical guest book:

• Form in which user signs in• Collection of previous entries• CGI script processes sign-ins

* manually in mailto guest books

Guest BooksMailto Guest BooksMailto Guest Books



• HTML Code for a Counter• Counter Usefulness• Counter Display Decision

Web Page CountersWeb Page Counters



• Absolute URL for CGI script as value of SRC attribute of image tag

• Parameters passed using get METHOD

Web Page CountersHTML Code for a CounterHTML Code for a Counter

<IMG SRC = “http://www.colt.com/cgibin/ counter?data=ellen.dat&style=1”

ALIGN = “absmiddle”ALT = “counter”HEIGHT = “20”WIDTH = “70”>



• Number of hits per page• Advertising rates

Web Page CountersCounter UsefulnessCounter Usefulness

Some users offended by counters

Counter Display DecisionCounter Display Decision



• Common Inclusions• Utilization

Server-Side IncludesServer-Side Includes



• Sends command to Web server from inside HTML document

• Another HTML document inside current one• Counter• Current time and date• Last-modified date• Random quote• Random page

Server-Side IncludesCommon InclusionsCommon Inclusions

• Syntax to run a program:

• Syntax to insert HTML document

Server-Side IncludesUtilizationUtilization

Web Programming Material From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the...

Documents

Transcript of Web Programming Material From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the...