1. Mark Dixon, SoCCE SOFT 131Page 1 20 – Web applications: HTML and Client-side code

2. Mark Dixon, SoCCE SOFT 131Page 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

3. Mark Dixon, SoCCE SOFT 131Page 3 network connection Web Hardware and Software Client Server Browser Application (MS Explorer, Netscape) Web-server Application (MS IIS, Apache)

4. Mark Dixon, SoCCE SOFT 131Page 4 Request-Response Cycle Browser Application (MS Explorer, Netscape) Web-server Application (MS IIS, Apache) http://mdixon.soc.plym.ac.uk/ Request Mark Dixon's web site Mark Dixon's web site Welcombe to my web server. Please select from the following list: Soft131: Introduction to programming for Multimedia and Internet applications. Response

5. Mark Dixon, SoCCE SOFT 131Page 5 HTML Hyper-Text Markup Language text files –edited with notepad with tags, e.g. –bold: This will be in bold –italic: This will be in italic work like brackets –start/open –end/close

6. Mark Dixon, SoCCE SOFT 131Page 6 HTML page - Structure Test This is a test page. head (info) body (content)

7. Mark Dixon, SoCCE SOFT 131Page 7 Example: Intro page Mark Dixon's web site Mark Dixon's web site Welcome to my web server. Please select from the following list: Soft131: Introduction to programming for Multimedia and Internet applications.

8. Mark Dixon, SoCCE SOFT 131Page 8 HTML Tags: Reference Lots of info available on-line, e.g.: http://www.willcam.com/cmat/html/crossref.html

9. Mark Dixon, SoCCE SOFT 131Page 9 Guest’s web page ?

10. Mark Dixon, SoCCE SOFT 131Page 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

11. Mark Dixon, SoCCE SOFT 131Page 11 Forms Form –collection of input tags Login

12. Mark Dixon, SoCCE SOFT 131Page 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

13. Mark Dixon, SoCCE SOFT 131Page 13 Client-side processing (how) Use tags, to enclose Script code –VB Script –Java Script <!-- MsgBox "Hello there!" -->

14. Mark Dixon, SoCCE SOFT 131Page 14 Example: Form validation Login <!-- Sub txtUserName_OnKeyUp() If Document.frmLogin.txtUserName.Value = "" Then Document.frmLogin.btnLogon.Disabled = True Else Document.frmLogin.btnLogon.Disabled = False End If End Sub --> Login

15. Mark Dixon, SoCCE SOFT 131Page 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

16. Mark Dixon, SoCCE SOFT 131Page 16 Example: Changing bits Guest's web page <!-- Sub btnGuest_OnClick() document.title = “Guest (large image)" picFace.src = "FaceLarge.jpg" End Sub --> Welcome, Guest's web page. Script ignored, until button pressed picture and button, given identifiers

17. Mark Dixon, SoCCE SOFT 131Page 17 MSDN Microsoft Developer Network –(in Uni software)

18. Mark Dixon, SoCCE SOFT 131Page 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

19. Mark Dixon, SoCCE SOFT 131Page 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