24
Web Basics ISYS546
Web Basics
ISYS546
Basic Tools
• Web server– Default directory, default home page– Virtual directory
• Web page editor– Front Page
• Web page languages– HTML, XML– Client-side script language:
• VBScript, JavaScript, DOM– Server-side language: VB.NET, ASP.NET
Dynamic Page – Client-Side Script ExampleDemo: TimeNowClient.Htm
<html><head><title>New Page 1</title></head><body><p>The time is now <script language=vbscript>
document.write time()</script></p><script language=vbscript>iHour=hour(time())if iHour < 12 then
document.write "<h1>good morning</h1>"else
document.write "<h1>good afternoon</h1><br>"end if</script></body></html>
Dynamic Web Pages – Server-Side Script Example
• Demo: TimeNow.aspx– <body>– <p>The time is now <%=time()%></p>– <p>The time is now <% response.write time()%></p>
– <%– dim iHour– iHour=hour(time())– if iHour < 12 then– response.write “<h1>good morning</h1><br>"– else– response.write "<h1>good
afternoon</h1><br>"– end if– %>
Client-Side vs Server-Side Scripting
• Client-side scripting:– The browser requests a page.– The server sends the page to the browser.– The browser sends the page to the script engine.– The script engine executes the script.
• Server-side scripting:– The browser requests a page.– The server sends the page to the engine.– The script engine executes the script.– The server sends the page to the browser.– The browser renders the page.
• Demo: ShowSum.htm, Web Form
HTML Introduction• Heading section
– <head>, <title>, <meta>, <script>, etc.• Body section
– <body>, <p>, <h1> to <h6>, <a>, <br>– Formatting: <b>, <I>, <u>, <center>– Comment: <!-- comment -->– List <ul>– Image– Table: <table>, <tr>: a new row in table, <td>: a new cell in a
table row.– Form: <form>, <input>, <select>, <textarea>
Webpage Editor
• FrontPage demo• Visual Studio .Net
– Web Forms tab– HTML tab
META Tag
• The meta tag allows you to provide additional information about the page that is not visible in the browser:– <meta name=“Author” content=“D Chao”>– <meta name=“Keywords” content=“apple,
orange,peach”>• Redirection:
– <meta http-equiv=“refresh” content=“3;url=http://www.sfsu.edu”>
• “3” is number of seconds.• Demo using FrontPage
TABLE Tag
<table border="1" width="100%"> <tr> <td width="25%"></td> <td width="25%"> </td> <td width="25%"> </td> <td width="25%"> </td> </tr> <tr> <td width="25%"> </td> <td width="25%"> </td> <td width="25%"> </td> <td width="25%"> </td> </tr></table>
FORM Tag
• Form attribute:– Action: Specify the URL of a program on a server or an
email address to which a form’s data will be submitted.– Method:
• Get: the form’s data is appended to the URL specified by the Action attribute as a QueryString.
• Post: A prefered method for database processing. Form’s data is sent separately from the URL.
– Name: Form’s name• Demo: TestFormGet.Htm, TestFormPost.Htm
QueryString
• A QueryString is a set of name=value pairs appended to a target URL.
• It can be used to pass information from one webpage to another.
• To create a QueryString:– Add a question mark (?) immediately after a URL.– Followed by name=value pairs separated by ampersands
(&).• Example: • <A Href=“http://my.com/Target.htm?CustID=C1&Cname=Chao”>
Creating a QueryString
• Entered with a URL:– http://dchaolaptop/testFormGet.aspx?cid=c2&cname=bbb
• As part of a URL specified in an anchor tag.– <A Href=“http://my.com/Target.htm?CustID=C1&Cname=Chao”>
• Via a form sent to the server with the GET method.
SCRIPT Tag
• Client-side script:– <SCRIPT LANGUAGE = VBSCRIPT>
<!--statements--></SCRIPT>
• Server-side script:– <script language=“VB” runat=“server”>
• statements– </script>
Document Object Model
N avig a to r L ocation
Text
R ad io
C h eckB ox, e tc
F orm co llec t ion
Im ag e
L in k
A n ch or, e tc
O th er c o llec tion s
D ocu m en t H is to ry F ram e
W in d ow
Window Object• The Window object represents a Web browser window.• Properties:
– window.status, window.defaultstatus– window.document, window.history, window.location.– Window.name
• Methods:– window.open (“url”, “name”, Options)
• Options: menubar=no, status=no, toolbar=no, etc.– window.close– window.alert(“string”)– window.prompt(“string”)– Window.focus– Etc.
Document Object• The document object represents the actual web
page within the window.• Properties:
– background, bgColor, fgColor, title, url, lastModified, domain, referrer, cookie, linkColor, etc.
• Ex. document.bgColor=“silver”;
• Methods: – Document.write (“string”)– Document.open, close
• Demo (testDoc.htm, docProp.htm)
Navigator Object
• The navigator object provides information about the browser.
• Properties:– Navigator.appName:browser name– Navigator.appCodeName: browser code name– Navigator.appVersion– Navigator.platform: the operating system in
use.
Location Object
• Allows you to change to a new web page from within a script code.
• Properties:– Host, hostname, pathname– Href: full URL address– Search: A URL’s queryString
• Methods:– location.reload()
• To open a page: location.href = “URL”
Testing Location Object<html><script language=vbscript>function openNew()site=window.prompt("enter url:")window.open (site)location.href="showformdata.htm"end function</script><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><title>New Page 1</title></head><body> <p><input type="button" value="Button" name="B3" onclick="openNew()"></p> </body></html>
Note: TestLocation.Htm
History Object
• Maintain a history list of all the documents that have been opened during current session.
• Methods:– history.back()– history.forward()– history.go(): ex. History.go(-2)
• Demo: testDocOpenClose.htm
Testing the History Object<html><script language=vbscript><!--sub clearVB()document.write ("hello, this is a new page")window.alert("Press any key to continue")document.open()document.write ("<h1>This is another new page</h1>")document.closewindow.alert("Press any key to go back")history.go(-2)end sub--></script><head><title>New Page 1</title></head><body><p>this is old info</p><script language=vbscript>document.write ("<p>this is another old info</p>")</script><p><input type="button" value="clear" name="B3" onCLick="clearVB()"><p> </p></body></html>
Client-side Scripting with the Browser Object Model<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><script language=JavaScript1.3>window.status = "TestDomScript.Htm"</script><title>New Page 1</title></head><body><script language=vbscript>
document.write("you are using" & navigator.appName)document.write("</p>")email=window.prompt("Enter email: ")window.alert ("your enail is:" & email)site=window.prompt("enter url:")window.open (site)document.open()document.write("today is: " & Date())
</script></body></html>
HTML Tags and Events• Link <a> </a>: click, mouseOver, mouseOut• Image <img>: abort(loading is interrupted), error,
load.• Area <area>: mouseOver, mouseOut• Body <body>: blur, error, focus, load, unload• Frameset: blur, error, focus, load, unload• Frame: blur, focus• Form: submit, reset• Textbox, Text area: blur, focus, change, select• Button, Radio button, check box: click• List: blur, focus, change
Event Handler
• Event handler name: on + event name– Ex. onClick
• Three ways of writing handler:– 1. Within the tag
• <input type = “button” name =“ button1” value “click here” onCLick = window.alert(“you click me”)>
– 2. Event function: onCLick=“clickHandler()”– 3. Event procedure as in VB.
• Sub button1_onCLick()
