Web Basics ISYS546
Web Basics ISYS546. Basic Tools Web Server –Default directory, default home page –Virtual directory Web Page Editor –Front Page Web Languages –HTML, XML.
Dec 21, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
Related Documents
