web basics isys546. basic tools web server –default directory, default home page –virtual...
Post on 21-Dec-2015
213 views
TRANSCRIPT
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 Web Pages
• Demo: TimeNow– <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
• Demo: Use Response.write to write the html code generated by FrontPage.
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: Redirect.htm
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– Target: Specified a window in which results returned
from the server appear.
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
• User typed URL
• As part of a URL specified in an anchor tag.
• Via a form sent to the server with the GET method.– Demo: TestReqFormQ.htm
Client-Side Script Tag
• <SCRIPT LANGUAGE = VBSCRIPT>
• <SCRIPT LANGUAGE = JAVASCRIPT>
• HTML and Vbscript are not case-sensitive; Javascript is case-sensitive, each statement ends in a semicolon (;).
Script Example
<SCRIPT LANGUAGE=vbscript>
<!--
statements
-->
</SCRIPT>
<body>
<p>Hello World</p>
<script language="javascript1.3">
document.write ("<h1>Hello world</h1>");
</script>
</body>
Variable Declaraton
• JS: var intrate, term, amount;• VB: dim intrate, term, amount• Data Type:
– Variant - a variable’s data type is determined when it is initialized to its first value.
• Variable scope:– Local: Variables declared in a function or procedure.
– Global: Variables declared in the heading section, but not in a function or procedure.
Arrays
• JS: var arrayName = new Array(array size);• var Pet = new Array(2);
• Pet[0]=“dog”;
• Pet[1]=“cat”;
• Pet[2]=“bird”;
• VB: dim arrayName(array size)• Dim Pet(2)
• Pet(0)=“dog”
• Pet(1)=“cat”
• Pet(2)=“bird”
Comments
• JS: – Single-line comment: //– Multiple-line comments: /* … */
• VB: single quotation mark ‘
Operators• Arithmetic operators:
– JS: +, -, *, /, Math.pow(x,y), etc.• Math is an object with many methods such as round(x),
random(), sqrt(x), ceil(x), floor(x), etc.
– JS: Prefix operator: ++VarName, --VarName• Postfix operator: varName++, varName--
– VB:+. -, *, /, ^
• Comparison operators:– JS: = = , !=, <, >, <=, >=– VB: =, <>, <, >, <=, >=
• Logical operators:– JS: &&, ||, !– VB: AND, OR, NOT
IF Then StatementsJS: if (condition) {
statements;
}
else {
statements;
}
VB: if (condition) then
statements
else
statements
end if
Case StatementsJS: Switch Case Statement
switch(varable name) {case value1:
statements;break;
case value2:statements;break;
…default:
statements;break;
}
VB: Select Case statement
Loop StructuresJS: 1. while (condition) {
statements;}
2. do{statements;
} while (condition)
3. for (var I = 0; I<5;I=I+1){statements;
}
JavaScript Build-In Objects and Methods
• Math object• String object: In JS, a string variable is an object
and can be created by:– varName = “Smith”– varName = new String(“Smith”)
• String object methods:– bold, fontcolor, fontsize, toLowerCase, toUpperCase– anchor (create a bookmark), link (create a link)– Substring, split (split a string into an array)
Examples of Using String’s Methods
var test = “Click Here”;
var website = http://www.sfsu.edu;
test.link(website);
var test = “one, two, three”;
var newArray = test.split(“,”);
Note: split is useful in parsing a queryString.
JavaScript’s Conversion Functions
• toString() example:• Price=5;
• Qty=10;
• Amount=Price*Qty;
• Document.write (Amount.toString());
• Eval• strVar = “5”;
• numVar = eval(strVar)
JavaScript Functions
• Defining functions– function functionName(arg1,..,argN){
• Statements;• return return value;
– }
Note: 1. The arguments are optional.2. The return statement is optional. A function is not
required to return a value.
VBScript Functions
• Defining functions:– Function functionName(arg1,..,argN)
• Statements
• functionName=returnValue
– End Function
– Note: Unlike VB, a function is not required to return a value.
Browser Object Model
N avig a to r L oca tion
Text
R ad io
C h eckB ox, e tc
F orm co llec tion
Im ag e
L in k
A n ch or, e tc
O th er co 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.
• We use the properties and methods of a Window object to control browser window.
Window Object• 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.confirm()– window.prompt(“string”, “default string”)– window.focus() , window.blur() :set/remove focus– Window.setTimeout(“statements”, milliseconds)
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 (testDOm.htm, docProp.htm, testDoc.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()– location.replace(); replace current page and old page’s
entry in the history.
• To open a page: location.href = “URL”• Demo: 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
Client-side Scripting with the Browser Object Model<script language=JavaScript1.3>
window.status = "Testing DOM"
</script>
<title>New Page 1</title>
</head>
<body>
<script language=JavaScript1.3>
if (navigator.appName == "Netscape")
{
document.write("you are using Netscape!");
}
else
{
document.write("You are using Explorer!");
}
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());
//JavaScript is case-sensitive: Date(), not date().
</script>
<script language=vbscript>
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>
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>
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>
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()
Form Object• Form Input/Select object:
– Textbox, radio button, check box, drop-down list box, text area, push button, submit button, reset button.
• Event-Handler:– onBlur (lose focus), onCHange, onClick, onFocus,
onKeyDown, onKeyPress, onKeyUp, onLoad (when a document is loaded), onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onReset(when click the reset button), onResize(when window is resized), onSubmit.
• Refer an input object in a form:– document.formname.inputobjName.Value
• Demo: showFormData.htm
Forms Collection
• The forms collection is a collection of form objects within the document object.
• To retrieve a form’s`property:– document.form[index].property
• Base 0 index
– Document. formname.property