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
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 2
Web Programming MaterialWeb Programming Material
• Introduction• JavaScript and HTML• Event Handlers• Sample JavaScript Code
The JavaScript Programming LanguageThe JavaScript Programming Language
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 3
Web Programming MaterialWeb Programming Material
• Scripting language• Not Java• Statements usually embedded in HTML code• Simple, interpreted programming language
The JavaScript Programming LanguageIntroductionIntroduction
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 4
Web Programming MaterialWeb Programming Material
Common uses:• Alert boxes• Color fades• Dynamic-conversion form elements• Information in status line• Verify form input
The JavaScript Programming LanguageIntroductionIntroduction
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 5
Web Programming MaterialWeb Programming Material
• <SCRIPT></SCRIPT>• JavaScript-enabled browser• LANGUAGE• SRC• .js
The JavaScript Programming LanguageJavaScript and HTMLJavaScript and HTML
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 6
Web Programming MaterialWeb Programming Material
<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
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 7
Web Programming MaterialWeb Programming Material
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>
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 8
Web Programming MaterialWeb Programming Material
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
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 9
Web Programming MaterialWeb Programming Material
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
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 10
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
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 11
Web Programming MaterialWeb Programming MaterialThe JavaScript
Programming LanguageEvent HandlersEvent Handlers
onClick and Alert Box <A HREF = “killface.html”
onClick = “alert(‘Thanks for loading my page:Killface.’)”> Killface’s Page
</A>
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 12
Web Programming MaterialWeb Programming MaterialThe JavaScript
Programming LanguageEvent HandlersEvent Handlers
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 13
Web Programming MaterialWeb Programming Material
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>
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 14
Web Programming MaterialWeb Programming Material
<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
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 15
Web Programming MaterialWeb Programming Material
<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>
The JavaScript Programming LanguageSample JavaScript CodeSample JavaScript Code
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 16
Web Programming MaterialWeb Programming Material
<INPUT TYPE = “text”NAME = “fahr”VALUE = “32”SIZE = “3”MAXLENGTH = “3”onChange = “cels.value =
Math.round(10 * (this.value - 32)/1.8)/10;”>° <STRONG>F</STRONG>
</FORM>
The JavaScript Programming LanguageSample JavaScript CodeSample JavaScript Code
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 17
Web Programming MaterialWeb Programming Material
• NAME = “fahr”• fahr.value• Math.round()
The JavaScript Programming LanguageSample JavaScript CodeSample JavaScript Code
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 18
Web Programming MaterialWeb Programming Material
• Introduction• HTML Applet Tags• Java-Enabled Browsers• Sample Applets
AppletsApplets
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 19
Web Programming MaterialWeb Programming Material
• “Little application”• Primary features:
• Information is dynamic• Can respond to input
• Program downloaded from Web server• Runs locally
AppletsIntroductionIntroduction
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 20
Web Programming MaterialWeb Programming Material
• <APPLET></APPLET>• Attributes:
• ALIGN ALT• CODE CODEBASE• HEIGHT HSPACE• NAME VSPACE• WIDTH
AppletsHTML Applet TagsHTML Applet Tags
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 21
Web Programming MaterialWeb Programming Material
• Browsers that are text-only or not Java-enabled ignore applet tags
• Display messages
AppletsJava-Enabled BrowsersJava-Enabled Browsers
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 22
Web Programming MaterialWeb Programming Material
<APPLET CODE = “HiMom.class”HEIGHT = “75”WIDTH = “125”>
<PARAM NAME = “message”VALUE = “Hi Mom. How do you
like my applet?”></APPLET>
AppletsSample AppletsSample Applets
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 23
Web Programming MaterialWeb Programming MaterialApplets
Sample AppletsSample Applets
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 24
Web Programming MaterialWeb Programming Material
• Introduction• Java and Object-Oriented Programming
The Java Programming LanguageThe Java Programming Language
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 25
Web Programming MaterialWeb Programming Material
• Sun Microsystems• Oak• Java Virtual Machine
The Java Programming LanguageIntroductionIntroduction
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 26
Web Programming MaterialWeb Programming Material
• 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
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 27
Web Programming MaterialWeb Programming Material
• Standard Input Fields of a Guest Book• Guest Book Dynamics• Mailto Guest Books
Guest BooksGuest Books
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 28
Web Programming MaterialWeb Programming Material
• E-mail address• Message• Name• URL
Guest BooksStandard Input Fields of a Guest BookStandard Input Fields of a Guest Book
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 29
Web Programming MaterialWeb Programming Material
• 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
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 30
Web Programming MaterialWeb Programming Material
• 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
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 31
Web Programming MaterialWeb Programming Material
• HTML Code for a Counter• Counter Usefulness• Counter Display Decision
Web Page CountersWeb Page Counters
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 32
Web Programming MaterialWeb Programming Material
• 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”>
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 33
Web Programming MaterialWeb Programming Material
• Number of hits per page• Advertising rates
Web Page CountersCounter UsefulnessCounter Usefulness
Some users offended by counters
Counter Display DecisionCounter Display Decision
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 34
Web Programming MaterialWeb Programming Material
• Common Inclusions• Utilization
Server-Side IncludesServer-Side Includes
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 35
Web Programming MaterialWeb Programming Material
• 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
From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 36
Web Programming MaterialWeb Programming Material
• Syntax to run a program:<!-- #exec cgi = “/cgibin/script.cgi”-->
• Syntax to insert HTML document<!-- #include virtual = “insert.html”-->
Server-Side IncludesUtilizationUtilization