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

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

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)

Mark Dixon, SoCCE SOFT 131Page 4 Request-Response Cycle Browser Application (MS Explorer, Netscape) Web-server Application (MS IIS, Apache) 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

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 reference:

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

Mark Dixon, SoCCE SOFT 131Page 7 Example 1: Intro page 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.

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

Mark Dixon, SoCCE SOFT 131Page 9 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 131Page 10 Client-side processing (how) Use tags, to enclose Script code –VB Script –Java Script <!-- MsgBox "Hello there!" -->

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

Mark Dixon, SoCCE SOFT 131Page 12 Reference Inputs –Text –Password –Button –Submit Events –OnClick –OnKeyUp –OnMouseOver