Web Core Programming

Presented by Tarek GhazaliIT Technical SpecialistIT Technical SpecialistMicrosoft SQL Server MVPWeb Development MCPWeb Development MCPLebDev Vice President

copy 2006 Tarek Ghazali All rights reserved

WWW World Wide Web Definitions

ndash The World Wide Web The set of computers on the Internet that

support HTTP

ndash HTTP The HyperText Transfer Protocol The language used by a WWW client (eg

NetscapeInternet Explorer) to request documents from a WWW server

ndash HTML The HyperText Markup Language The language used to design web pages

WWW WWW

The World Wide Web (WWW) was The World Wide Web (WWW) was developed by Tim Berners-Lee and developed by Tim Berners-Lee and other research scientists at CERN the other research scientists at CERN the European center for nuclear research European center for nuclear research in the late 1980s and early 1990sin the late 1980s and early 1990s

WWW is a client server model and WWW is a client server model and uses TCP connections to transfer uses TCP connections to transfer information or web pages from server information or web pages from server to clientto client

WWW WWW (cont)

WWW uses a Hypertext model Hypertext WWW uses a Hypertext model Hypertext allows interactive accesses to a collection of allows interactive accesses to a collection of documentsdocuments

Documents can holdDocuments can hold Text (hypertext) Graphics Sound Animations Text (hypertext) Graphics Sound Animations

VideoVideo

Documents are linked togetherDocuments are linked together Non-distributed ndash all documents stored locally Non-distributed ndash all documents stored locally

(eg on CD-Rom)(eg on CD-Rom) Distributed ndash documents stored at remote servers Distributed ndash documents stored at remote servers

on the Interneton the Internet

WWW ndash Identifying a web WWW ndash Identifying a web pagepage A web page is identified by A web page is identified by

The protocol used to access the web pageThe protocol used to access the web page The computer on which the web page is storedThe computer on which the web page is stored The TCP port that the server is listening on to allow a client The TCP port that the server is listening on to allow a client

to access the web pageto access the web page Directory pathname of web page on serverDirectory pathname of web page on server

Specific syntax for Uniform Resource Locator (URL) Specific syntax for Uniform Resource Locator (URL) protocolprotocolcomputer_nameportdocument_name computer_nameportdocument_name

Protocol can be http ftp file mailtoProtocol can be http ftp file mailto Computer name can be DNS name or IP addressComputer name can be DNS name or IP address TCP port is optional (http uses port 80 as its default TCP port is optional (http uses port 80 as its default

port)port) document_name is path on server to web page (file)document_name is path on server to web page (file)

WWW ndash Identifying a web WWW ndash Identifying a web page (Example)page (Example) Eg Eg

httpwwwyahoocomRecreationSportsSoccerindexhttpwwwyahoocomRecreationSportsSoccerindexhtmlhtml

Protocol is httpProtocol is http Computer name or DNS name is Computer name or DNS name is

wwwyahoocomwwwyahoocom Port number is the default port for http ie Port number is the default port for http ie

port 80port 80 Document name is Document name is

RecreationSportsSoccerindexhtmlRecreationSportsSoccerindexhtml

WWW ndash Hyperlinks WWW ndash Hyperlinks between web pagesbetween web pages

ndash Each hyperlink is specified in HTML by using a special Each hyperlink is specified in HTML by using a special tagtag

ndash An item on a page is associated with another HTML An item on a page is associated with another HTML documentdocument

ndash Each link is passive no action is taken until link is Each link is passive no action is taken until link is selectedselected

ndash HTML tags for a hyperlink are ltAgt and ltAgt HTML tags for a hyperlink are ltAgt and ltAgt ndash The linked document is specified by parameter to the The linked document is specified by parameter to the

tag HREF=document URL tag HREF=document URL ndash ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to

GCD web siteltAgtGCD web siteltAgtndash Whatever is between the HTML tags ltAgt and ltAgt Whatever is between the HTML tags ltAgt and ltAgt

is the highlighted hyperlinkis the highlighted hyperlink

WWW ndash Client Server WWW ndash Client Server ModelModel

ndash The browser is the client WWW (or web) server is the The browser is the client WWW (or web) server is the serverserver

ndash Browser Browser The browser makes TCP connection to the web serverThe browser makes TCP connection to the web server The browser sends request for the particular web page that The browser sends request for the particular web page that

it wishes to displayit wishes to display The browser reads the contents of the web page from the The browser reads the contents of the web page from the

TCP connection and displays it in the browsers windowTCP connection and displays it in the browsers window The browser closes the TCP connection used to transfer the The browser closes the TCP connection used to transfer the

web pageweb pagendash Each separate item in a web page (eg pictures audio) Each separate item in a web page (eg pictures audio)

require a separate TCP connectionrequire a separate TCP connectionndash HyperText Transport Protocol (HTTP) specifies HyperText Transport Protocol (HTTP) specifies

commands that the client (browser) issues to the server commands that the client (browser) issues to the server (web server) and the responses that the server sends (web server) and the responses that the server sends back to the clientback to the client

HTTPHTTPHyperText Transfer HyperText Transfer ProtocolProtocol HTTP is the language that web clients and HTTP is the language that web clients and

web servers use to talk to each otherweb servers use to talk to each otherndash HTTP is largely ldquounder the hood rdquo information HTTP is largely ldquounder the hood rdquo information

not normally displayed to the usernot normally displayed to the user Each message whether a request or a Each message whether a request or a

response has three partsresponse has three parts11The request or the response line (Part I)The request or the response line (Part I)

22A header section (Part II)A header section (Part II)

33The body of the message (Part III)The body of the message (Part III)

HTTP HTTP (cont)

ldquornrdquoRequest Or Response

LineOptional DataOptional HTTP Header

Type of RequestPart (I)

Additional informationsuch as browser beingused media types acceptedPart (II)

DelimiterCarriage returnLine feed

User data eg contents of completed formPart (III)

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

WWW World Wide Web Definitions

ndash The World Wide Web The set of computers on the Internet that

support HTTP

ndash HTTP The HyperText Transfer Protocol The language used by a WWW client (eg

NetscapeInternet Explorer) to request documents from a WWW server

ndash HTML The HyperText Markup Language The language used to design web pages

WWW WWW

The World Wide Web (WWW) was The World Wide Web (WWW) was developed by Tim Berners-Lee and developed by Tim Berners-Lee and other research scientists at CERN the other research scientists at CERN the European center for nuclear research European center for nuclear research in the late 1980s and early 1990sin the late 1980s and early 1990s

WWW is a client server model and WWW is a client server model and uses TCP connections to transfer uses TCP connections to transfer information or web pages from server information or web pages from server to clientto client

WWW WWW (cont)

WWW uses a Hypertext model Hypertext WWW uses a Hypertext model Hypertext allows interactive accesses to a collection of allows interactive accesses to a collection of documentsdocuments

Documents can holdDocuments can hold Text (hypertext) Graphics Sound Animations Text (hypertext) Graphics Sound Animations

VideoVideo

Documents are linked togetherDocuments are linked together Non-distributed ndash all documents stored locally Non-distributed ndash all documents stored locally

(eg on CD-Rom)(eg on CD-Rom) Distributed ndash documents stored at remote servers Distributed ndash documents stored at remote servers

on the Interneton the Internet

WWW ndash Identifying a web WWW ndash Identifying a web pagepage A web page is identified by A web page is identified by

The protocol used to access the web pageThe protocol used to access the web page The computer on which the web page is storedThe computer on which the web page is stored The TCP port that the server is listening on to allow a client The TCP port that the server is listening on to allow a client

to access the web pageto access the web page Directory pathname of web page on serverDirectory pathname of web page on server

Specific syntax for Uniform Resource Locator (URL) Specific syntax for Uniform Resource Locator (URL) protocolprotocolcomputer_nameportdocument_name computer_nameportdocument_name

Protocol can be http ftp file mailtoProtocol can be http ftp file mailto Computer name can be DNS name or IP addressComputer name can be DNS name or IP address TCP port is optional (http uses port 80 as its default TCP port is optional (http uses port 80 as its default

port)port) document_name is path on server to web page (file)document_name is path on server to web page (file)

WWW ndash Identifying a web WWW ndash Identifying a web page (Example)page (Example) Eg Eg

httpwwwyahoocomRecreationSportsSoccerindexhttpwwwyahoocomRecreationSportsSoccerindexhtmlhtml

Protocol is httpProtocol is http Computer name or DNS name is Computer name or DNS name is

wwwyahoocomwwwyahoocom Port number is the default port for http ie Port number is the default port for http ie

port 80port 80 Document name is Document name is

RecreationSportsSoccerindexhtmlRecreationSportsSoccerindexhtml

WWW ndash Hyperlinks WWW ndash Hyperlinks between web pagesbetween web pages

ndash Each hyperlink is specified in HTML by using a special Each hyperlink is specified in HTML by using a special tagtag

ndash An item on a page is associated with another HTML An item on a page is associated with another HTML documentdocument

ndash Each link is passive no action is taken until link is Each link is passive no action is taken until link is selectedselected

ndash HTML tags for a hyperlink are ltAgt and ltAgt HTML tags for a hyperlink are ltAgt and ltAgt ndash The linked document is specified by parameter to the The linked document is specified by parameter to the

tag HREF=document URL tag HREF=document URL ndash ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to

GCD web siteltAgtGCD web siteltAgtndash Whatever is between the HTML tags ltAgt and ltAgt Whatever is between the HTML tags ltAgt and ltAgt

is the highlighted hyperlinkis the highlighted hyperlink

WWW ndash Client Server WWW ndash Client Server ModelModel

ndash The browser is the client WWW (or web) server is the The browser is the client WWW (or web) server is the serverserver

ndash Browser Browser The browser makes TCP connection to the web serverThe browser makes TCP connection to the web server The browser sends request for the particular web page that The browser sends request for the particular web page that

it wishes to displayit wishes to display The browser reads the contents of the web page from the The browser reads the contents of the web page from the

TCP connection and displays it in the browsers windowTCP connection and displays it in the browsers window The browser closes the TCP connection used to transfer the The browser closes the TCP connection used to transfer the

web pageweb pagendash Each separate item in a web page (eg pictures audio) Each separate item in a web page (eg pictures audio)

require a separate TCP connectionrequire a separate TCP connectionndash HyperText Transport Protocol (HTTP) specifies HyperText Transport Protocol (HTTP) specifies

commands that the client (browser) issues to the server commands that the client (browser) issues to the server (web server) and the responses that the server sends (web server) and the responses that the server sends back to the clientback to the client

HTTPHTTPHyperText Transfer HyperText Transfer ProtocolProtocol HTTP is the language that web clients and HTTP is the language that web clients and

web servers use to talk to each otherweb servers use to talk to each otherndash HTTP is largely ldquounder the hood rdquo information HTTP is largely ldquounder the hood rdquo information

not normally displayed to the usernot normally displayed to the user Each message whether a request or a Each message whether a request or a

response has three partsresponse has three parts11The request or the response line (Part I)The request or the response line (Part I)

22A header section (Part II)A header section (Part II)

33The body of the message (Part III)The body of the message (Part III)

HTTP HTTP (cont)

ldquornrdquoRequest Or Response

LineOptional DataOptional HTTP Header

Type of RequestPart (I)

Additional informationsuch as browser beingused media types acceptedPart (II)

DelimiterCarriage returnLine feed

User data eg contents of completed formPart (III)

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

WWW WWW

The World Wide Web (WWW) was The World Wide Web (WWW) was developed by Tim Berners-Lee and developed by Tim Berners-Lee and other research scientists at CERN the other research scientists at CERN the European center for nuclear research European center for nuclear research in the late 1980s and early 1990sin the late 1980s and early 1990s

WWW is a client server model and WWW is a client server model and uses TCP connections to transfer uses TCP connections to transfer information or web pages from server information or web pages from server to clientto client

WWW WWW (cont)

WWW uses a Hypertext model Hypertext WWW uses a Hypertext model Hypertext allows interactive accesses to a collection of allows interactive accesses to a collection of documentsdocuments

Documents can holdDocuments can hold Text (hypertext) Graphics Sound Animations Text (hypertext) Graphics Sound Animations

VideoVideo

Documents are linked togetherDocuments are linked together Non-distributed ndash all documents stored locally Non-distributed ndash all documents stored locally

(eg on CD-Rom)(eg on CD-Rom) Distributed ndash documents stored at remote servers Distributed ndash documents stored at remote servers

on the Interneton the Internet

WWW ndash Identifying a web WWW ndash Identifying a web pagepage A web page is identified by A web page is identified by

The protocol used to access the web pageThe protocol used to access the web page The computer on which the web page is storedThe computer on which the web page is stored The TCP port that the server is listening on to allow a client The TCP port that the server is listening on to allow a client

to access the web pageto access the web page Directory pathname of web page on serverDirectory pathname of web page on server

Specific syntax for Uniform Resource Locator (URL) Specific syntax for Uniform Resource Locator (URL) protocolprotocolcomputer_nameportdocument_name computer_nameportdocument_name

Protocol can be http ftp file mailtoProtocol can be http ftp file mailto Computer name can be DNS name or IP addressComputer name can be DNS name or IP address TCP port is optional (http uses port 80 as its default TCP port is optional (http uses port 80 as its default

port)port) document_name is path on server to web page (file)document_name is path on server to web page (file)

WWW ndash Identifying a web WWW ndash Identifying a web page (Example)page (Example) Eg Eg

httpwwwyahoocomRecreationSportsSoccerindexhttpwwwyahoocomRecreationSportsSoccerindexhtmlhtml

Protocol is httpProtocol is http Computer name or DNS name is Computer name or DNS name is

wwwyahoocomwwwyahoocom Port number is the default port for http ie Port number is the default port for http ie

port 80port 80 Document name is Document name is

RecreationSportsSoccerindexhtmlRecreationSportsSoccerindexhtml

WWW ndash Hyperlinks WWW ndash Hyperlinks between web pagesbetween web pages

ndash Each hyperlink is specified in HTML by using a special Each hyperlink is specified in HTML by using a special tagtag

ndash An item on a page is associated with another HTML An item on a page is associated with another HTML documentdocument

ndash Each link is passive no action is taken until link is Each link is passive no action is taken until link is selectedselected

ndash HTML tags for a hyperlink are ltAgt and ltAgt HTML tags for a hyperlink are ltAgt and ltAgt ndash The linked document is specified by parameter to the The linked document is specified by parameter to the

tag HREF=document URL tag HREF=document URL ndash ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to

GCD web siteltAgtGCD web siteltAgtndash Whatever is between the HTML tags ltAgt and ltAgt Whatever is between the HTML tags ltAgt and ltAgt

is the highlighted hyperlinkis the highlighted hyperlink

WWW ndash Client Server WWW ndash Client Server ModelModel

ndash The browser is the client WWW (or web) server is the The browser is the client WWW (or web) server is the serverserver

ndash Browser Browser The browser makes TCP connection to the web serverThe browser makes TCP connection to the web server The browser sends request for the particular web page that The browser sends request for the particular web page that

it wishes to displayit wishes to display The browser reads the contents of the web page from the The browser reads the contents of the web page from the

TCP connection and displays it in the browsers windowTCP connection and displays it in the browsers window The browser closes the TCP connection used to transfer the The browser closes the TCP connection used to transfer the

web pageweb pagendash Each separate item in a web page (eg pictures audio) Each separate item in a web page (eg pictures audio)

require a separate TCP connectionrequire a separate TCP connectionndash HyperText Transport Protocol (HTTP) specifies HyperText Transport Protocol (HTTP) specifies

commands that the client (browser) issues to the server commands that the client (browser) issues to the server (web server) and the responses that the server sends (web server) and the responses that the server sends back to the clientback to the client

HTTPHTTPHyperText Transfer HyperText Transfer ProtocolProtocol HTTP is the language that web clients and HTTP is the language that web clients and

web servers use to talk to each otherweb servers use to talk to each otherndash HTTP is largely ldquounder the hood rdquo information HTTP is largely ldquounder the hood rdquo information

not normally displayed to the usernot normally displayed to the user Each message whether a request or a Each message whether a request or a

response has three partsresponse has three parts11The request or the response line (Part I)The request or the response line (Part I)

22A header section (Part II)A header section (Part II)

33The body of the message (Part III)The body of the message (Part III)

HTTP HTTP (cont)

ldquornrdquoRequest Or Response

LineOptional DataOptional HTTP Header

Type of RequestPart (I)

Additional informationsuch as browser beingused media types acceptedPart (II)

DelimiterCarriage returnLine feed

User data eg contents of completed formPart (III)

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

WWW WWW (cont)

WWW uses a Hypertext model Hypertext WWW uses a Hypertext model Hypertext allows interactive accesses to a collection of allows interactive accesses to a collection of documentsdocuments

Documents can holdDocuments can hold Text (hypertext) Graphics Sound Animations Text (hypertext) Graphics Sound Animations

VideoVideo

Documents are linked togetherDocuments are linked together Non-distributed ndash all documents stored locally Non-distributed ndash all documents stored locally

(eg on CD-Rom)(eg on CD-Rom) Distributed ndash documents stored at remote servers Distributed ndash documents stored at remote servers

on the Interneton the Internet

WWW ndash Identifying a web WWW ndash Identifying a web pagepage A web page is identified by A web page is identified by

The protocol used to access the web pageThe protocol used to access the web page The computer on which the web page is storedThe computer on which the web page is stored The TCP port that the server is listening on to allow a client The TCP port that the server is listening on to allow a client

to access the web pageto access the web page Directory pathname of web page on serverDirectory pathname of web page on server

Specific syntax for Uniform Resource Locator (URL) Specific syntax for Uniform Resource Locator (URL) protocolprotocolcomputer_nameportdocument_name computer_nameportdocument_name

Protocol can be http ftp file mailtoProtocol can be http ftp file mailto Computer name can be DNS name or IP addressComputer name can be DNS name or IP address TCP port is optional (http uses port 80 as its default TCP port is optional (http uses port 80 as its default

port)port) document_name is path on server to web page (file)document_name is path on server to web page (file)

WWW ndash Identifying a web WWW ndash Identifying a web page (Example)page (Example) Eg Eg

httpwwwyahoocomRecreationSportsSoccerindexhttpwwwyahoocomRecreationSportsSoccerindexhtmlhtml

Protocol is httpProtocol is http Computer name or DNS name is Computer name or DNS name is

wwwyahoocomwwwyahoocom Port number is the default port for http ie Port number is the default port for http ie

port 80port 80 Document name is Document name is

RecreationSportsSoccerindexhtmlRecreationSportsSoccerindexhtml

WWW ndash Hyperlinks WWW ndash Hyperlinks between web pagesbetween web pages

ndash Each hyperlink is specified in HTML by using a special Each hyperlink is specified in HTML by using a special tagtag

ndash An item on a page is associated with another HTML An item on a page is associated with another HTML documentdocument

ndash Each link is passive no action is taken until link is Each link is passive no action is taken until link is selectedselected

ndash HTML tags for a hyperlink are ltAgt and ltAgt HTML tags for a hyperlink are ltAgt and ltAgt ndash The linked document is specified by parameter to the The linked document is specified by parameter to the

tag HREF=document URL tag HREF=document URL ndash ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to

GCD web siteltAgtGCD web siteltAgtndash Whatever is between the HTML tags ltAgt and ltAgt Whatever is between the HTML tags ltAgt and ltAgt

is the highlighted hyperlinkis the highlighted hyperlink

WWW ndash Client Server WWW ndash Client Server ModelModel

ndash The browser is the client WWW (or web) server is the The browser is the client WWW (or web) server is the serverserver

ndash Browser Browser The browser makes TCP connection to the web serverThe browser makes TCP connection to the web server The browser sends request for the particular web page that The browser sends request for the particular web page that

it wishes to displayit wishes to display The browser reads the contents of the web page from the The browser reads the contents of the web page from the

TCP connection and displays it in the browsers windowTCP connection and displays it in the browsers window The browser closes the TCP connection used to transfer the The browser closes the TCP connection used to transfer the

web pageweb pagendash Each separate item in a web page (eg pictures audio) Each separate item in a web page (eg pictures audio)

require a separate TCP connectionrequire a separate TCP connectionndash HyperText Transport Protocol (HTTP) specifies HyperText Transport Protocol (HTTP) specifies

commands that the client (browser) issues to the server commands that the client (browser) issues to the server (web server) and the responses that the server sends (web server) and the responses that the server sends back to the clientback to the client

HTTPHTTPHyperText Transfer HyperText Transfer ProtocolProtocol HTTP is the language that web clients and HTTP is the language that web clients and

web servers use to talk to each otherweb servers use to talk to each otherndash HTTP is largely ldquounder the hood rdquo information HTTP is largely ldquounder the hood rdquo information

not normally displayed to the usernot normally displayed to the user Each message whether a request or a Each message whether a request or a

response has three partsresponse has three parts11The request or the response line (Part I)The request or the response line (Part I)

22A header section (Part II)A header section (Part II)

33The body of the message (Part III)The body of the message (Part III)

HTTP HTTP (cont)

ldquornrdquoRequest Or Response

LineOptional DataOptional HTTP Header

Type of RequestPart (I)

Additional informationsuch as browser beingused media types acceptedPart (II)

DelimiterCarriage returnLine feed

User data eg contents of completed formPart (III)

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

WWW ndash Identifying a web WWW ndash Identifying a web pagepage A web page is identified by A web page is identified by

The protocol used to access the web pageThe protocol used to access the web page The computer on which the web page is storedThe computer on which the web page is stored The TCP port that the server is listening on to allow a client The TCP port that the server is listening on to allow a client

to access the web pageto access the web page Directory pathname of web page on serverDirectory pathname of web page on server

Specific syntax for Uniform Resource Locator (URL) Specific syntax for Uniform Resource Locator (URL) protocolprotocolcomputer_nameportdocument_name computer_nameportdocument_name

Protocol can be http ftp file mailtoProtocol can be http ftp file mailto Computer name can be DNS name or IP addressComputer name can be DNS name or IP address TCP port is optional (http uses port 80 as its default TCP port is optional (http uses port 80 as its default

port)port) document_name is path on server to web page (file)document_name is path on server to web page (file)

WWW ndash Identifying a web WWW ndash Identifying a web page (Example)page (Example) Eg Eg

httpwwwyahoocomRecreationSportsSoccerindexhttpwwwyahoocomRecreationSportsSoccerindexhtmlhtml

Protocol is httpProtocol is http Computer name or DNS name is Computer name or DNS name is

wwwyahoocomwwwyahoocom Port number is the default port for http ie Port number is the default port for http ie

port 80port 80 Document name is Document name is

RecreationSportsSoccerindexhtmlRecreationSportsSoccerindexhtml

WWW ndash Hyperlinks WWW ndash Hyperlinks between web pagesbetween web pages

ndash Each hyperlink is specified in HTML by using a special Each hyperlink is specified in HTML by using a special tagtag

ndash An item on a page is associated with another HTML An item on a page is associated with another HTML documentdocument

ndash Each link is passive no action is taken until link is Each link is passive no action is taken until link is selectedselected

ndash HTML tags for a hyperlink are ltAgt and ltAgt HTML tags for a hyperlink are ltAgt and ltAgt ndash The linked document is specified by parameter to the The linked document is specified by parameter to the

tag HREF=document URL tag HREF=document URL ndash ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to

GCD web siteltAgtGCD web siteltAgtndash Whatever is between the HTML tags ltAgt and ltAgt Whatever is between the HTML tags ltAgt and ltAgt

is the highlighted hyperlinkis the highlighted hyperlink

WWW ndash Client Server WWW ndash Client Server ModelModel

ndash The browser is the client WWW (or web) server is the The browser is the client WWW (or web) server is the serverserver

ndash Browser Browser The browser makes TCP connection to the web serverThe browser makes TCP connection to the web server The browser sends request for the particular web page that The browser sends request for the particular web page that

it wishes to displayit wishes to display The browser reads the contents of the web page from the The browser reads the contents of the web page from the

TCP connection and displays it in the browsers windowTCP connection and displays it in the browsers window The browser closes the TCP connection used to transfer the The browser closes the TCP connection used to transfer the

web pageweb pagendash Each separate item in a web page (eg pictures audio) Each separate item in a web page (eg pictures audio)

require a separate TCP connectionrequire a separate TCP connectionndash HyperText Transport Protocol (HTTP) specifies HyperText Transport Protocol (HTTP) specifies

commands that the client (browser) issues to the server commands that the client (browser) issues to the server (web server) and the responses that the server sends (web server) and the responses that the server sends back to the clientback to the client

HTTPHTTPHyperText Transfer HyperText Transfer ProtocolProtocol HTTP is the language that web clients and HTTP is the language that web clients and

web servers use to talk to each otherweb servers use to talk to each otherndash HTTP is largely ldquounder the hood rdquo information HTTP is largely ldquounder the hood rdquo information

not normally displayed to the usernot normally displayed to the user Each message whether a request or a Each message whether a request or a

response has three partsresponse has three parts11The request or the response line (Part I)The request or the response line (Part I)

22A header section (Part II)A header section (Part II)

33The body of the message (Part III)The body of the message (Part III)

HTTP HTTP (cont)

ldquornrdquoRequest Or Response

LineOptional DataOptional HTTP Header

Type of RequestPart (I)

Additional informationsuch as browser beingused media types acceptedPart (II)

DelimiterCarriage returnLine feed

User data eg contents of completed formPart (III)

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

WWW ndash Identifying a web WWW ndash Identifying a web page (Example)page (Example) Eg Eg

httpwwwyahoocomRecreationSportsSoccerindexhttpwwwyahoocomRecreationSportsSoccerindexhtmlhtml

Protocol is httpProtocol is http Computer name or DNS name is Computer name or DNS name is

wwwyahoocomwwwyahoocom Port number is the default port for http ie Port number is the default port for http ie

port 80port 80 Document name is Document name is

RecreationSportsSoccerindexhtmlRecreationSportsSoccerindexhtml

WWW ndash Hyperlinks WWW ndash Hyperlinks between web pagesbetween web pages

ndash Each hyperlink is specified in HTML by using a special Each hyperlink is specified in HTML by using a special tagtag

ndash An item on a page is associated with another HTML An item on a page is associated with another HTML documentdocument

ndash Each link is passive no action is taken until link is Each link is passive no action is taken until link is selectedselected

ndash HTML tags for a hyperlink are ltAgt and ltAgt HTML tags for a hyperlink are ltAgt and ltAgt ndash The linked document is specified by parameter to the The linked document is specified by parameter to the

tag HREF=document URL tag HREF=document URL ndash ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to

GCD web siteltAgtGCD web siteltAgtndash Whatever is between the HTML tags ltAgt and ltAgt Whatever is between the HTML tags ltAgt and ltAgt

is the highlighted hyperlinkis the highlighted hyperlink

WWW ndash Client Server WWW ndash Client Server ModelModel

ndash The browser is the client WWW (or web) server is the The browser is the client WWW (or web) server is the serverserver

ndash Browser Browser The browser makes TCP connection to the web serverThe browser makes TCP connection to the web server The browser sends request for the particular web page that The browser sends request for the particular web page that

it wishes to displayit wishes to display The browser reads the contents of the web page from the The browser reads the contents of the web page from the

TCP connection and displays it in the browsers windowTCP connection and displays it in the browsers window The browser closes the TCP connection used to transfer the The browser closes the TCP connection used to transfer the

web pageweb pagendash Each separate item in a web page (eg pictures audio) Each separate item in a web page (eg pictures audio)

require a separate TCP connectionrequire a separate TCP connectionndash HyperText Transport Protocol (HTTP) specifies HyperText Transport Protocol (HTTP) specifies

commands that the client (browser) issues to the server commands that the client (browser) issues to the server (web server) and the responses that the server sends (web server) and the responses that the server sends back to the clientback to the client

HTTPHTTPHyperText Transfer HyperText Transfer ProtocolProtocol HTTP is the language that web clients and HTTP is the language that web clients and

web servers use to talk to each otherweb servers use to talk to each otherndash HTTP is largely ldquounder the hood rdquo information HTTP is largely ldquounder the hood rdquo information

not normally displayed to the usernot normally displayed to the user Each message whether a request or a Each message whether a request or a

response has three partsresponse has three parts11The request or the response line (Part I)The request or the response line (Part I)

22A header section (Part II)A header section (Part II)

33The body of the message (Part III)The body of the message (Part III)

HTTP HTTP (cont)

ldquornrdquoRequest Or Response

LineOptional DataOptional HTTP Header

Type of RequestPart (I)

Additional informationsuch as browser beingused media types acceptedPart (II)

DelimiterCarriage returnLine feed

User data eg contents of completed formPart (III)

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

WWW ndash Hyperlinks WWW ndash Hyperlinks between web pagesbetween web pages

ndash Each hyperlink is specified in HTML by using a special Each hyperlink is specified in HTML by using a special tagtag

ndash An item on a page is associated with another HTML An item on a page is associated with another HTML documentdocument

ndash Each link is passive no action is taken until link is Each link is passive no action is taken until link is selectedselected

ndash HTML tags for a hyperlink are ltAgt and ltAgt HTML tags for a hyperlink are ltAgt and ltAgt ndash The linked document is specified by parameter to the The linked document is specified by parameter to the

tag HREF=document URL tag HREF=document URL ndash ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to ltA HREF=ldquohttpwwwgcdierdquogtClick here to go to

GCD web siteltAgtGCD web siteltAgtndash Whatever is between the HTML tags ltAgt and ltAgt Whatever is between the HTML tags ltAgt and ltAgt

is the highlighted hyperlinkis the highlighted hyperlink

WWW ndash Client Server WWW ndash Client Server ModelModel

ndash The browser is the client WWW (or web) server is the The browser is the client WWW (or web) server is the serverserver

ndash Browser Browser The browser makes TCP connection to the web serverThe browser makes TCP connection to the web server The browser sends request for the particular web page that The browser sends request for the particular web page that

it wishes to displayit wishes to display The browser reads the contents of the web page from the The browser reads the contents of the web page from the

TCP connection and displays it in the browsers windowTCP connection and displays it in the browsers window The browser closes the TCP connection used to transfer the The browser closes the TCP connection used to transfer the

web pageweb pagendash Each separate item in a web page (eg pictures audio) Each separate item in a web page (eg pictures audio)

require a separate TCP connectionrequire a separate TCP connectionndash HyperText Transport Protocol (HTTP) specifies HyperText Transport Protocol (HTTP) specifies

commands that the client (browser) issues to the server commands that the client (browser) issues to the server (web server) and the responses that the server sends (web server) and the responses that the server sends back to the clientback to the client

HTTPHTTPHyperText Transfer HyperText Transfer ProtocolProtocol HTTP is the language that web clients and HTTP is the language that web clients and

web servers use to talk to each otherweb servers use to talk to each otherndash HTTP is largely ldquounder the hood rdquo information HTTP is largely ldquounder the hood rdquo information

not normally displayed to the usernot normally displayed to the user Each message whether a request or a Each message whether a request or a

response has three partsresponse has three parts11The request or the response line (Part I)The request or the response line (Part I)

22A header section (Part II)A header section (Part II)

33The body of the message (Part III)The body of the message (Part III)

HTTP HTTP (cont)

ldquornrdquoRequest Or Response

LineOptional DataOptional HTTP Header

Type of RequestPart (I)

Additional informationsuch as browser beingused media types acceptedPart (II)

DelimiterCarriage returnLine feed

User data eg contents of completed formPart (III)

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

WWW ndash Client Server WWW ndash Client Server ModelModel

ndash The browser is the client WWW (or web) server is the The browser is the client WWW (or web) server is the serverserver

ndash Browser Browser The browser makes TCP connection to the web serverThe browser makes TCP connection to the web server The browser sends request for the particular web page that The browser sends request for the particular web page that

it wishes to displayit wishes to display The browser reads the contents of the web page from the The browser reads the contents of the web page from the

TCP connection and displays it in the browsers windowTCP connection and displays it in the browsers window The browser closes the TCP connection used to transfer the The browser closes the TCP connection used to transfer the

web pageweb pagendash Each separate item in a web page (eg pictures audio) Each separate item in a web page (eg pictures audio)

require a separate TCP connectionrequire a separate TCP connectionndash HyperText Transport Protocol (HTTP) specifies HyperText Transport Protocol (HTTP) specifies

commands that the client (browser) issues to the server commands that the client (browser) issues to the server (web server) and the responses that the server sends (web server) and the responses that the server sends back to the clientback to the client

HTTPHTTPHyperText Transfer HyperText Transfer ProtocolProtocol HTTP is the language that web clients and HTTP is the language that web clients and

web servers use to talk to each otherweb servers use to talk to each otherndash HTTP is largely ldquounder the hood rdquo information HTTP is largely ldquounder the hood rdquo information

not normally displayed to the usernot normally displayed to the user Each message whether a request or a Each message whether a request or a

response has three partsresponse has three parts11The request or the response line (Part I)The request or the response line (Part I)

22A header section (Part II)A header section (Part II)

33The body of the message (Part III)The body of the message (Part III)

HTTP HTTP (cont)

ldquornrdquoRequest Or Response

LineOptional DataOptional HTTP Header

Type of RequestPart (I)

Additional informationsuch as browser beingused media types acceptedPart (II)

DelimiterCarriage returnLine feed

User data eg contents of completed formPart (III)

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTPHTTPHyperText Transfer HyperText Transfer ProtocolProtocol HTTP is the language that web clients and HTTP is the language that web clients and

web servers use to talk to each otherweb servers use to talk to each otherndash HTTP is largely ldquounder the hood rdquo information HTTP is largely ldquounder the hood rdquo information

not normally displayed to the usernot normally displayed to the user Each message whether a request or a Each message whether a request or a

response has three partsresponse has three parts11The request or the response line (Part I)The request or the response line (Part I)

22A header section (Part II)A header section (Part II)

33The body of the message (Part III)The body of the message (Part III)

HTTP HTTP (cont)

ldquornrdquoRequest Or Response

LineOptional DataOptional HTTP Header

Type of RequestPart (I)

Additional informationsuch as browser beingused media types acceptedPart (II)

DelimiterCarriage returnLine feed

User data eg contents of completed formPart (III)

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTP HTTP (cont)

ldquornrdquoRequest Or Response

LineOptional DataOptional HTTP Header

Type of RequestPart (I)

Additional informationsuch as browser beingused media types acceptedPart (II)

DelimiterCarriage returnLine feed

User data eg contents of completed formPart (III)

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTP HTTP RequestRequest messages messages (Part I)(Part I)

HTTP Request messages are sent from HTTP Request messages are sent from client to server client to server at a particular port at a particular port (80 is the default)(80 is the default)

ldquornrdquoRequest Line Optional DataOptional HTTP Header

Type of Request(eg GET)(Part I)

Additional informationsuch as browser beingused media types accepted(Part II)

DelimiterCarriage returnLine feed

User data eg contents of completed form(Part III)

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTP HTTP RequestRequest messages messages (Part I) (Part I) (cont) The first part of the message is The first part of the message is

the the request linerequest line containing containingndash A A methodmethod (HTTP command) such as (HTTP command) such as

GETGET or or POSTPOSTndash A document address andA document address andndash An HTTP version numberAn HTTP version number

ExampleExamplendash GET indexhtml HTTP10GET indexhtml HTTP10

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) HTTP Response messages are sent HTTP Response messages are sent

from server to clientfrom server to client

ldquornrdquoStatus Line Optional DataOptional HTTP Header

SuccessFailureIndicationNumber between200 and 599(PART I)

Type of content returnedeg texthtml or imagegif(PART II) Delimiter

Requested Data eg web page(PART III)

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The Status Line gives information about the The Status Line gives information about the

success of the previous HTTP Requestsuccess of the previous HTTP Request 100 ndash 199 100 ndash 199 InformationalInformational 200 ndash 299200 ndash 299 SuccessSuccess 300 ndash 399300 ndash 399 Redirection ndash Document has been Redirection ndash Document has been

movedmoved 400 ndash 499400 ndash 499 Client Error ndash Bad Request Client Error ndash Bad Request

Unauthorized Not foundUnauthorized Not found 500 ndash 599500 ndash 599 Server Error ndash Internal Error Service Server Error ndash Internal Error Service

OverloadedOverloaded

Status Line Example Status Line Example HTTP11 404 Not FoundHTTP11 404 Not Found

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTP HTTP ResponseResponse messages messages (Part I) (Part I) (cont)

Common status codesCommon status codes

ndash 200 OK200 OK Everything worked herersquos the dataEverything worked herersquos the data

ndash 301 Moved Permanently301 Moved Permanently URI was moved but herersquos the new address for your recordsURI was moved but herersquos the new address for your records

ndash 302 Moved temporarily302 Moved temporarily URL temporarily out of service keep the old one but use this one for URL temporarily out of service keep the old one but use this one for

nownowndash 400 Bad Request400 Bad Request

There is a xyntax error in your requestThere is a xyntax error in your requestndash 403 Forbidden403 Forbidden

You canrsquot do this and we wonrsquot tell you whyYou canrsquot do this and we wonrsquot tell you whyndash 404 Not Found404 Not Found

No such documentNo such documentndash 408 Request Time-out408 Request Time-out 504 Gateway Time-out504 Gateway Time-out

Request took too long to fulfill for some reasonRequest took too long to fulfill for some reason

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) The second part of the response is header The second part of the response is header

information ended by a blank lineinformation ended by a blank line ExampleExample Content-Length 2532Content-Length 2532

Connection CloseConnection CloseServer GWS20Server GWS20Date Sun 01 Dec 2002 212450 GMTDate Sun 01 Dec 2002 212450 GMTContent-Type texthtmlContent-Type texthtmlCache-control privateCache-control privateSet-Cookie Set-Cookie PREF=ID=05302a93093ec661TM=1038777890LM=1PREF=ID=05302a93093ec661TM=1038777890LM=1038777890S=yNWNjraftUz299RH expires=Sun 17-038777890S=yNWNjraftUz299RH expires=Sun 17-Jan-2038 191407 GMT path= domain=googlecomJan-2038 191407 GMT path= domain=googlecom

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTP HTTP ResponseResponse messages (Part I) messages (Part I) (cont) Server NCSA13Server NCSA13

ndash Name and version of the serverName and version of the server Content-Type Content-Type typetypesubtypesubtype

ndash Should be of a type and subtype Should be of a type and subtype specified by the clientrsquos specified by the clientrsquos AcceptAccept headerheader

Set-Cookie Set-Cookie namename==valuevalue optionsoptionsndash Requests the client to store a cookie Requests the client to store a cookie

with the given name and valuewith the given name and value

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTP HTTP HeaderHeader messages messages (Part II) (Part II) The second part of a request or response The second part of a request or response

is optional is optional header informationheader information such as such asndash What the client software isWhat the client software isndash What formats it can acceptWhat formats it can accept

All information is in the form All information is in the form Name Name ValueValue

ExampleExample User-Agent Mozilla202Gold (WinNT I)User-Agent Mozilla202Gold (WinNT I)

Accept imagegif imagejpeg Accept imagegif imagejpeg A A blank lineblank line ends the header ends the header

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTP HTTP DataData messages messages (Part III)(Part III)

The third part of a server request The third part of a server request or response is the entity bodyor response is the entity body

This is often an HTML pageThis is often an HTML pagendash But it can also be a jpeg a gif plain But it can also be a jpeg a gif plain

text etc--anything the browser (or text etc--anything the browser (or other client) is prepared to acceptother client) is prepared to accept

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTTPHTTPltmeta http-equivgtltmeta http-equivgt tag tag The The ltmeta http-equiv=ltmeta http-equiv=stringstring content= content=stringstringgtgt tag tag

may occur in the may occur in the ltheadgtltheadgt of an HTML of an HTML documentdocument

http-equiv http-equiv and and content content typically have the same typically have the same kinds of values as in the HTTP headerkinds of values as in the HTTP header

This tag asks the client to This tag asks the client to pretendpretend that the that the information actually occurred in the headerinformation actually occurred in the headerndash The information is The information is not reallynot really in the header in the headerndash As usual not all browsers handle this information As usual not all browsers handle this information

the same way the same way ExampleExample

ltmeta http-equiv=Set-Cookieltmeta http-equiv=Set-Cookie content=value= content=value=nnexpires=expires=datedate path= path=urlurlgtgt

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTML HTML HyperText Markup Language HTML specifiesHTML specifies

Major structure of document Major structure of document Formatting instructions for browsers to Formatting instructions for browsers to

executeexecute Hypertext links ndash Links to other documentsHypertext links ndash Links to other documents Additional information about document Additional information about document

contentscontents Two parts to documentTwo parts to document

HeadHead contains details about the contains details about the documentdocument

BodyBody contains the informationcontent of contains the informationcontent of the documentthe document

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTML HTML (cont)

Each web page is represented in ASCII Each web page is represented in ASCII text with embedded HTML tags that text with embedded HTML tags that give formatting instructions to the give formatting instructions to the browserbrowser

Formatted section begins with tag Formatted section begins with tag ltTAGNAMEgtltTAGNAMEgt

End of formatted section is indicated by End of formatted section is indicated by ltTAGNAMEgtltTAGNAMEgt

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTML ExampleHTML Example

ltHTMLgtltHTMLgtltHEADgtltHEADgt ltTITLEgt Example Page for lectureltTITLEgtltTITLEgt Example Page for lectureltTITLEgtltHEADgtltHEADgtltBODYgtltBODYgtLecture notes for today go hereLecture notes for today go hereltCENTERgtltCENTERgtltTABLE BORDER=3gtltTABLE BORDER=3gt ltTRgtltTRgt ltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgtltTDgtltA HREF=lecture10htmlgtPrevious LectureltAgt ltTDgtltA HREF=lecture12htmlgtNext LectureltAgtltTDgtltA HREF=lecture12htmlgtNext LectureltAgt ltTDgtltA HREF=ContentshtmlgtTable of contentsltAgtltTDgtltA HREF=ContentshtmlgtTable of contentsltAgt ltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgtltTDgtltA HREF=solutionshtmlgtSolutions to AssignmentsltAgt ltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTDgtltA HREF=indexhtmlgtIndex of termsltAgtltTABLEgtltTABLEgtltCENTERgtltCENTERgtltBODYgtltBODYgtltHTMLgtltHTMLgt

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Other HTML TagsOther HTML Tags

Headings - ltH1gt ltH2gt Headings - ltH1gt ltH2gt Lists Lists

ltOLgt - Ordered (numbered) list ltOLgt - Ordered (numbered) list ltULgt - Unordered (bulleted) list ltULgt - Unordered (bulleted) list ltLIgt - List item ltLIgt - List item

Tables Tables ltTABLEgt ltTABLEgt - Define table ltTABLEgt ltTABLEgt - Define table ltTRgt - Begin row ltTRgt - Begin row ltTDgt - Begin item in row ltTDgt - Begin item in row

Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags ltTABLE BORDER=3gtltTABLE BORDER=3gt

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

HTML ndash Embedding HTML ndash Embedding GraphicsGraphics

IMG tag specifies insertion of graphicIMG tag specifies insertion of graphic ParametersParameters SRC=filenameSRC=filename ALIGN= - alignment relative to textALIGN= - alignment relative to text

ltimg SRC=ldquoGCDgif height=35 width=30gtltimg SRC=ldquoGCDgif height=35 width=30gt The above line would insert the image in the The above line would insert the image in the

file GCDgif into any web pagefile GCDgif into any web page Image must be in format known to browser Image must be in format known to browser

eg Graphics Interchange Format (GIF) Joint eg Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap Photographic Experts Group (JPEG) Bitmap etcetc

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

DemoDemo

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Javascript Javascript

Overviewndash History Historyndash Uses of JavaScriptndash Location of Code Location of Codendash Simple Alert Example ndash Eventsndash Events Example

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

What is JavaScript

Language used for adding dynamism to Web pages

Loosely typed Variables not typed Object-based Limited support for based

inheritance Interpreted Interpreter built into

browsers Modeled after C++

ndash Similar syntax

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

What is JavaScript (cont)

JavaScript canndash Put dynamic text into an HTML

page ndash React to events

Eg when a user clicks on an HTML element 10486981048698

ndash Read and write HTML elements ndash Be used to validate data

Saves network traffic and server-side side processing

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Javascript Javascript History

JavaScript created in 1995 byBrendan Eich of Netscape

First used in Netscape 20

Originally called ldquoLiveScriptrdquo

Changed to ldquoJavaScriptrdquo to ridepopularity of Java

1997 European Computer Manufacturers Association (ECMA) released ECMA-262 standard ndash Based on JavaScript 11

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Javascript Javascript Versions

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Javascript Javascript History (cont) JavaScript 20 is in the works

ndash wwwmozillaorg 10486981048698 ndash Under development as of spring

2004 Closely matches the ECMAScript

Edition 4 standard httpwwwecma-

internationalorg

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Uses of JavaScript

Dynamism takes three formsndash Events Allows you to monitor

events and change positioning or content based on events

ndash Dynamic positioning Can tell the browser where to place content without using tables

ndash Dynamic content Allows dynamic updating of data at specified time intervals

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Location of Code

JavaScript may be three placesndash In the ltheadgt element

scripts to be called or when Place event is triggered here event

script is loaded before called Ensures

lthtmlgtltheadgtltscript type=textjavascriptldquogtscript statementsltscriptgt ltheadgt

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Location of Code (cont)

ndash In the ltbodygt element Place scripts to be executed when the page

loads here Script generates some or all of the page

content

ltbodygtltscript type=textjavascriptgtscript statementsltscriptgtltbodygt

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Location of Code (cont)

ndash External to the HTML file Maximizes reuse across pages

ltheadgtltscript src=ldquomyfilejsgtltscriptgtltheadgt

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Simple Alert Example

lthtmlgt ltheadgt

lttitlegt Simple JavaScript alert button example lttitlegtltscript language=rdquoJavaScriptrdquogtfunction mywelcome () alert(Welcome to Mr X simple JavaScript page)ltscriptgt

ltheadgtltbodygt

lth1gtSimple JavaScript Example using Alert lth1gtltscriptgtdocumentwriteln(Click on the button)ltscriptgtltformgtltinput type=buttonldquo name=welcomeldquo value=greetingsldquo onClick=mywelcome()gtltformgt

ltbodygtlthtmlgt

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

JavaScript - Events

One of the primary uses of JavaScript is to make Web pages interactivendash Responsive to user actions

JavaScript provides event handlersndash Execute segment of code based on occurring

within the application eventsndash Eg onLoad or onClick

Handlers associated with elements Not all elements support all event

handlers

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

JavaScript Events (cont)

ltinput type=buttonname=clickmevalue=Click HereonClick=windowstatus=Than

ksreturn truegt

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

JavaScript Events (cont)

Event handlers can be categorized into interactive and non into interactive

Interactive Depends on a user actionndash Eg onClick

Non-interactive Non-user eventndash Eg onLoad

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Server Side or Client Server Side or Client SideSide There are a couple reasons to use server-There are a couple reasons to use server-

side validation The biggest one that side validation The biggest one that people forget is that JavaScript (the people forget is that JavaScript (the engine behind nearly all client-side engine behind nearly all client-side validation) validation) can be turned offcan be turned off in the web in the web browser browser

A client I was at recently had decided that A client I was at recently had decided that client-side scripting was a security risk client-side scripting was a security risk and was therefore not allowed Without and was therefore not allowed Without server-side validation in these cases bad server-side validation in these cases bad data can get to the database data can get to the database

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Server Side or Client Server Side or Client Side (cont)Side (cont) Another reason you might do server-Another reason you might do server-

side validation is for validation that side validation is for validation that requires a database And client-side requires a database And client-side scripting simply cant do all the scripting simply cant do all the validation you might need to do validation you might need to do

The third reason is to keep the code in The third reason is to keep the code in one place Thats one reason some one place Thats one reason some developers choose to do all validation developers choose to do all validation on the server on the server

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

DemoDemo

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

BreakBreak

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Web server Overview

Specialized software that responds to client requests by providing resources

When users enter URL into Web browsers they request specific documents from Web server

Maps URL to file on server and returns requested

Communicates with client using HTTP Introduce Web servers

ndash Internet Information Services (IIS) Apache Tomcat WebServer and SUN ONE Web Server 60

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Web server ndash Client Browser communication

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Web server ndash Client Browser comm (cont)

Request headers send from browser

HTML form that uses GET Data sent to a HTTP server during

a form-based GET request Form Form-based POST request

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Web Server - Sessions

HTTP is a truly stateless protocol Develops are required to provide a higher level

mechanism for session mechanism for session-management

Passing session information by value(client-side side storage)ndash Hidden form elementsndash Cookies

Passing session information by reference(server-side storage)ndash Session-ID passed with each HTTP request through formsndash Session-ID stored in session ID stored in session-cookies

residing in clientrsquos memory

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Web Server ndash Sessions (cont) Session lifetime timeout period Durable state (database storage) vs

nondurable state (memory storage) Web application state

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Microsoft Internet Microsoft Internet Information Services (IIS)Information Services (IIS)

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

NET FrameworkNET Framework

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet

Resources amp QuestionsResources amp Questions

Thanks

Microsoft ResourcesMicrosoft Resourcesndash msdnmicrosoftcomIIS6msdnmicrosoftcomIIS6

Contact me Contact me ndash tghazalisqlmvpcomtghazalisqlmvpcomndash wwwsqlmvpcomwwwsqlmvpcom (will be available (will be available

soon)soon) Download Presentation Download Presentation

ndash wwwlebdevnetwwwlebdevnet