1. Web Basics ISYS546

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

3. Dynamic Page – Client-Side Script Example Demo: TimeNowClient.Htm New Page 1 The time is now document.write time() iHour=hour(time()) if iHour < 12 then document.write " good morning " else document.write " good afternoon " end if

4. Dynamic Web Pages – Server-Side Script Example Demo: TimeNow.aspx – – The time is now –<% –dim iHour –iHour=hour(time()) –if iHour < 12 then –response.write “ good morning " –else –response.write " good afternoon " –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 –,,,, etc. Body section –,, to,, –Formatting:,,, –Comment: –List –Image –Table:, : a new row in table, : a new cell in a table row. –Form:,,,

7. Webpage Editor FrontPage demo Visual Studio.Net –Web Forms tab –HTML tab

8. META Tag The meta tag allows you to provide additional information about the page that is not visible in the browser: – Redirection: – “3” is number of seconds. Demo using FrontPage

9. TABLE Tag

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: 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. – 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: – <!-- statements --> Server-side script: – statements –

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 function openNew() site=window.prompt("enter url:") window.open (site) location.href="showformdata.htm" end function New Page 1 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 <!-- sub clearVB() document.write ("hello, this is a new page") window.alert("Press any key to continue") document.open() document.write (" This is another new page ") document.close window.alert("Press any key to go back") history.go(-2) end sub --> New Page 1 this is old info document.write (" this is another old info ")

22. Client-side Scripting with the Browser Object Model window.status = "TestDomScript.Htm" New Page 1 document.write("you are using" & navigator.appName) document.write(" ") 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())

23. HTML Tags and Events Link : click, mouseOver, mouseOut Image : abort(loading is interrupted), error, load. Area : mouseOver, mouseOut 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 –2. Event function: onCLick=“clickHandler()” –3. Event procedure as in VB. Sub button1_onCLick()