mark dixon, socce soft 131page 1 20 – web applications: html and client-side code
Post on 19-Dec-2015
224 views
TRANSCRIPT
Mark Dixon, SoCCE SOFT 131 Page 1
20 – Web applications:HTML and Client-side code
Mark Dixon, SoCCE SOFT 131 Page 2
Session Aims & Objectives• Aims
– To introduce the fundamental ideas involved in web applications
• Objectives,by end of this week’s sessions, you should be able to:
– create a static web page, using HTML– add dynamic functionality, using VB Script
Mark Dixon, SoCCE SOFT 131 Page 3
networkconnection
Web Hardware and Software
ClientServer
BrowserApplication(MS Explorer,
Netscape)
Web-serverApplication
(MS IIS,Apache)
Mark Dixon, SoCCE SOFT 131 Page 4
Request-Response Cycle
BrowserApplication(MS Explorer,
Netscape)
Web-serverApplication
(MS IIS,Apache)
http://mdixon.soc.plym.ac.uk/
Request
<html> <head> <title>Mark Dixon's web site</title> </head> <body background="BackGround.JPG"> <font size=+3><center><b><p>Mark Dixon's web site</b></center> <font size=+2> <p>Welcombe to my web server. Please select from the following list: <ul> <li><a href="./Soft131/Index.htm">Soft131: Introduction to programming for Multimedia and Internet applications.</a> </ul> </font> </body></html>
Response
Mark Dixon, SoCCE SOFT 131 Page 5
HTML• Hyper-Text Markup Language
• text files– edited with notepad
• with tags, e.g.– bold: <b>This will be in bold</b>– italic: <i>This will be in italic</i>
• work like brackets– start/open <b> <i>– end/close </b> </i>
Mark Dixon, SoCCE SOFT 131 Page 6
HTML page - Structure
<html> <head> <title>Test</title> </head> <body> <p> This is a test <b>page</b>. </body></html>
head(info)
body(content)
Mark Dixon, SoCCE SOFT 131 Page 7
Example: Intro page<html> <head> <title>Mark Dixon's web site</title> </head> <body background="BackGround.JPG"> <font size=+3><center><b><p>Mark Dixon's web site</b></center> <font size=+2> <p>Welcome to my web server. Please select from the following list: <ul> <li><a href="./Soft131/Index.htm"> Soft131: Introduction to programming for Multimedia and Internet applications.</a> </ul> </font> </body></html>
Mark Dixon, SoCCE SOFT 131 Page 8
HTML Tags: Reference• Lots of info available on-line, e.g.:
http://www.willcam.com/cmat/html/crossref.html
Mark Dixon, SoCCE SOFT 131 Page 9
Guest’s web page
?
Mark Dixon, SoCCE SOFT 131 Page 10
Creating a web page• Windows Explorer
– Right click– Select New– Select Text Document– Change name (with .htm at end)
– Select Yes– Right click– Select Open with Notepad
Mark Dixon, SoCCE SOFT 131 Page 11
Forms• Form
– collection of input tags<HTML> <HEAD> <TITLE>Login</TITLE> </HEAD> <BODY>
<FORM NAME="frmLogin"> <INPUT NAME="txtUserName" TYPE="input"><BR> <INPUT NAME="txtPassword" TYPE="password"><BR> <INPUT NAME="btnLogon" TYPE="button" VALUE="Logon" DISABLED="True"> </FORM>
</BODY></HTML>
Mark Dixon, SoCCE SOFT 131 Page 12
Dynamic processing (what)• HTML is static
– identical on each load– very limiting
• Dynamic processing– client-side (browser)
• quicker (no request-response cycle)• insecure (view source)• limited (can't access server-side databases)
– server-side (server application)• slower• more powerful
Mark Dixon, SoCCE SOFT 131 Page 13
Client-side processing (how)• Use <script> tags, to enclose
• Script code– VB Script– Java Script
<SCRIPT LANGUAGE=VBScript><!-- MsgBox "Hello there!"--></SCRIPT>
Mark Dixon, SoCCE SOFT 131 Page 14
Example: Form validation<HTML> <HEAD> <TITLE>Login</TITLE>
<SCRIPT LANGUAGE=VBScript> <!-- Sub txtUserName_OnKeyUp() If Document.frmLogin.txtUserName.Value = "" Then Document.frmLogin.btnLogon.Disabled = True Else Document.frmLogin.btnLogon.Disabled = False End If End Sub --> </SCRIPT> </HEAD> <BODY> <FORM NAME="frmLogin"> <INPUT NAME="txtUserName" TYPE="input"><BR> <INPUT NAME="txtPassword" TYPE="password"><BR> <INPUT NAME="btnLogon" TYPE="button" VALUE="Logon" DISABLED="True"> </FORM> </BODY></HTML>
Login
Mark Dixon, SoCCE SOFT 131 Page 15
Client-side Object Model• window object – determine browser info,
prompt user, display messages
• document object – set web-page (document) colours, determine URL of current page, and write text to page
• form object – get information from forms on page
Mark Dixon, SoCCE SOFT 131 Page 16
Example: Changing bits<html> <head> <title>Guest's web page</title>
<SCRIPT LANGUAGE=VBScript> <!-- Sub btnGuest_OnClick() document.title = “Guest (large image)" picFace.src = "FaceLarge.jpg" End Sub --> </SCRIPT>
</head> <body> <p>Welcome, <b>Guest's</b> web page. <p><center><img src=Face.jpg ID=picFace></center> <form Name=frmGuest> <input name=btnGuest type=button value="Large"> </form> </body></html>
Script ignored,until button pressed
picture and button,given identifiers
Mark Dixon, SoCCE SOFT 131 Page 17
MSDN• Microsoft Developer Network
– (in Uni software)
Mark Dixon, SoCCE SOFT 131 Page 18
File Sizes• Look at the size of the file we’ve just created
• Try creating a similar file in Word,and save it as a web page
• Compare the sizes– Web editors (like Word, and DreamWeaver)
include a lot of additional (unnecessary) tags
Mark Dixon, SoCCE SOFT 131 Page 19
Reference• Inputs
– Text: allows entry of text (like VB text box)– Password: like text except ********– Button: like VB command button– Submit: a button – causes form to be submitted
• Events– OnClick– OnKeyUp– OnMouseOver