Download
1 / 24
260 likes | 401 Views
Web Basics. ISYS546. Basic Tools. Web Server Default directory, default home page Virtual directory Web Page Editor Front Page Web Languages HTML, XML Client-side script language: VBScript, JavaScript Server-side language: VB .NET, ASP .NET.
E N D
Web Basics ISYS546
Basic Tools • Web Server • Default directory, default home page • Virtual directory • Web Page Editor • Front Page • Web Languages • HTML, XML • Client-side script language: • VBScript, JavaScript • 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 "good morning" • 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
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>
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.close window.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()
