1 / 24

Web Basics

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.

zeke
Télécharger la présentation

Web Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Basics ISYS546

  2. 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

  3. 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>

  4. 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 • %>

  5. 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

  6. 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>

  7. Webpage Editor • FrontPage demo

  8. 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

  9. TABLE Tag <table border="1" width="100%"> <tr> <td width="25%"></td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> <tr> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> <td width="25%">&nbsp;</td> </tr> </table>

  10. 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

  11. 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”>

  12. 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.

  13. SCRIPT Tag • Client-side script: • <SCRIPT LANGUAGE = VBSCRIPT> <!-- statements --> </SCRIPT> • Server-side script: • <script language=“VB” runat=“server”> • statements • </script>

  14. Document Object Model

  15. 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.

  16. 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)

  17. 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.

  18. 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”

  19. 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

  20. 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

  21. 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>&nbsp;</p> </body> </html>

  22. 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>

  23. 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

  24. 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()

More Related