LIS650 lecture 5 javascript, http and apache

mewstennisΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 3 χρόνια και 10 μήνες)

62 εμφανίσεις

LIS650 lecture 5

javascript, http and apache

Thomas Krichel

2006
-
03
-
10

today



javascript


http


apache introduction

javascript


This is a client
-
side scripting language.


Your web page is read by the client. If it contains
instructions written in javascript, the client
executes the command, provided it knows about
javascript.


Different browser capabilities when it comes to
executing javascript did bedevil javascript at the
outset.

the <script>


<script> is an element that calls a script.


Interestingly enough, you can place <script> in
the head or the body.


It requires a type= attribute that gives the type of
the script language. e.g. type="text/javascript".


It takes a defer= attribute. If set as defer="1" you
tell the user agent that the script will generate no
output. This helps the user agent in that case.

example


<script type="text/javascript">


document.write("hello, world");


</script>


This is an example of an automated script. The
user has to do nothing to get the script to run.


You can also trigger a script. To do that, we have
to study some more HTML attributes. We will do
that later.

external script


<script> takes the src
=

argument that gives a URI
where the script can be found. Such a script is
called an external script.


You can also create an external file, say hello.js
with the line


document.write("hello, world");


Then you can call it up in the html file


<script type="text/javascript" src="hello.js"/>



default script language


You should set the default scripting language
used in the document using the <meta/> element
in the <head>


<meta http
-
equiv="content
-
script
-
type"
content="text/javascript"/>


If you don't the validator does not complain, but I
don't see other ways to specify the language.

Javascript history


A programming language that was developed by
Netscape for their browser in 1995.


To counter, Mickeysoft developed Jscript.


It has been standardized by the European
Computer Manufacturers Association as ECMA
262.

principal features


It contains instructions for a user agent to
execute. Javascript is not run by the server.



It resembles Java, but not the same language.


It is an object
-
oriented language.


object


In an object
-
oriented language, an object is the
prime focus of attention.


An object has properties and methods.


Example from real life. Let a bus be an object.


“color” of the bus is a property


“move to next station” is a method


objects in javascript


Properties are accessed by


object_name.property_name


Methods are accessed by


object_name.method_name()


where
object_name

is the name of an object,
property_name
is the name of a property and
method_name()

is the name of an object. Note
the use of the dot and the parenthesis.



Example


Syntax rules


Comments are started with // and go to the end of the
line.


Instructions are terminated with semicolon


Example


// create a new object called bus


new bus = Object();


// paint it white
---

set a property


bus.color = ‘white’;


// move to next stop
---

apply a method


bus.movetonextstop();

event attributes


Event attributes can be given to elements (like
any attribute, really)


The name of the attributes gives a certain event
that could happen to the element.


The value of the event attribute is the script to be
executed when the event occurs on the element
that has the event attribute.


Example


<p onmouseover="stink">Cow shit is ... </p>


as the user moves the mouse over the paragraph,
the browser fires up an imaginary script called
stink that makes it start to stink.

core event attributes I


onclick= occurs when the pointing device button
is clicked over an element.


ondblclick= occurs when the pointing device
button is double clicked over an element.


onmousedown= occurs when the pointing device
button is pressed over an element.


onmouseup= occurs when the pointing device
button is released over an element.


onmouseover= occurs when the pointing device
is moved onto an element.

core events attributes II


onmousemove= occurs when the pointing device
is moved while it is over an element.


onmouseout= occurs when the pointing device is
moved away from an element.


onkeypress= occurs when a key is pressed and
released over an element.


onkeydown= occurs when a key is pressed down
over an element.


onkeyup= occurs when a key is released over an
element.

special event attributes


onfocus= occurs when an element receives focus
either by the pointing device or by tabbing
navigation. This attribute may only be used with
the <a> element, and some form elements that
we have not covered.


onblur= occurs when an element loses focus
either by the pointing device or by tabbing
navigation. It may be used with the same
elements as onfocus.

more special event attributes


onsubmit= occurs when a form is submitted. It
only applies to the <form> element.


onreset= occurs when a form is reset. It only
applies to the <form> element.


some more are only used with other form
elements...




Let us look at some examples

two stupid examples

<html><head><title>javascript test</title>


<meta http
-
equiv="content
-
script
-
type"
content="text/javascript"/></head>

<body><p onmouseover="alert('Today is '+Date());"
>time</p><hr/>

<p onmouseover=


"document.write('not funny')">joke</p>
</body></html>

An even more silly example

<html><head><title>Bush in the bush</title>


<meta http
-
equiv="content
-
script
-
type" content=
"text/javascript"/><script type="text/javascript">


prbu=new Image(); prbu.src="bush.jpg";


natb=new Image(); natb.src="natgeo.jpg";
</script></head><body><h1>Bush in the
bush</h1><div><img id="bush" src="bush.jpg"
onmouseover="document.bush.src=natb.src"


onmouseout="document.bush.src=prbu.src"
alt="bush in the bush"/></div></body></html>

http


Stands for the hypertext transfer protocol. This is
the most important application layer protocol on
the Internet today, because it provides the
foundation for the world wide web.


defined in Fielding, Roy T., James Gettys,
Jeffrey C. Mogul, Paul J. Leach, Tim Berners
-
Lee ``Hypertext Transfer Protocol
--

HTTP/1.1''
(1999), RFC 2616


history


1990: version 0.9 allows for transfer of raw data.


1996: rfc1945 defines version 1.0. by adding

attribute
:
value

headers.


1999: rfc 2616


adds support for



hierarchical proxies


caching,


virtual hosts and some


Support for persistent connections


is more stringent.



rfc about http


An application
-
level protocol for
distributed
,
collaborative
,
hypermedia information systems.





HTTP is also used as a generic protocol for
communication between user agents and
proxies/gateways to other Internet systems, including
those supported by the SMTP, NNTP, FTP, Gopher, and
WAIS protocols. In this way, HTTP allows basic
hypermedia access to resources available from diverse
applications.



http assumes transport


http assumes that there is a reliable way to
transport data from one host on the Internet to
another one.


All http requests and responses are separate
TCP connections. The default is TCP port 80,
but other ports can be used.


use of other standards



http shares the same registry as the MIME
multimedia email extensions. It is based at the
IANA, at


http://www.isi.edu/innotes/iana/


assignments/media
-
types/media
-
types


The default character set is ISO
-
8859
-
1.



http resource identification


identification of resources is assumed through
Uniform Resource Identifiers (URI).


As far as http is concerned, URIs are string.


http can use ``absolute'' and ``relative'' URIs.


A URL is a special case of a URI.



Absolute http URL


the absolute http URL is


http://
host
[:
port
][[
abs_path
][?
query
]]


If
abs_path
is empty, it is /.


The scheme name "http" and the host name are
case
-
insensitive.


optional components are in [ ]


special characters in URL


Characters other than those in the
“reserved” and “unsafe” character lists of
RFC 2396 are equivalent to their “%
HEX
HEX
” where
HEX

is a hex number, usually
the character’s number in ASCII.


Example: to include a blank in a URI, you
write %20, because 32 is the position of the
blank in ASCII.

http messages


There are two types of messages.


Requests are sent form the client to the server.


Responses are sent from the server to the client.


The generic format is the same as for email
messages
:


start line


message headers


empty line


body


The request's start line is called the request line.


The response start line is called the status line.


overall operation server side


Server sends response, required items are


status line


protocol version


success or error code


optional items are


server information


body


overall operation: client side

Client sends request, required items are


method


request URI


protocol version


optional items are


request modifiers


client information



Let us now look at different methods


GET and HEAD method


The GET method means retrieve whatever
information (in the form of an entity) is identified
by the Request
-
URI. If the Request
-
URI refers to
a data
-
producing process, it is the produced data
which shall be returned as the entity in the
response and not the source text of the process.


The HEAD method is identical to GET except that
the server MUST NOT return a message
-
body in
the response.

The POST method


The POST method is used to request that the
origin server accept the entity enclosed in the
request as a new subordinate of the resource
identified by the Request
-
URI in the Request
-
Line. POST is designed to allow a uniform
method to cover the following functions:


Annotation of existing resources;


Posting a message to a bulletin board, newsgroup,
mailing list, or similar group of articles;


Providing a block of data, such as the result of
submitting a form, to a data
-
handling process;



Extending a database through an append operation.

PUT and DELETE methods


The PUT method requests that the enclosed
entity be stored under the supplied Request
-
URI.
If the Request
-
URI refers to an already existing
resource, the enclosed entity should be
considered as a modified version of the one
residing on the origin server.


The DELETE method requests that the origin
server delete the resource identified by the
Request
-
URI
.

The request headers


Accept:




Accept
-
Charset:


Accept
-
Encoding:



Accept
-
Language:


Authorization:



Expect:


From:




Host:


If
-
Match:




If
-
Modified
-
Since:


If
-
None
-
Match:



If
-
Range:


If
-
Unmodified
-
Since:


Max
-
Forwards:


Proxy
-
Authorization:


Range:


Referer:




TE:


User
-
Agent:

Entity headers, common to
response and request


Allow:


Content
-
Encoding:


Content
-
Language:


Content
-
Length:


Content
-
Location:


Content
-
MD5:


Content
-
Range:


Content
-
Type:


Expires:


Last
-
Modified

The status line


The status line is a set of lines that are of the
form


HTTP
-
Version Status
-
Code Reason
-
Phrase


The status code is a 3
-
digit number used by the
computer.


The reason line is a friendly note for a human to
read.

he status line
The status line is a set of lines that are of the form
{\em HTTP-Version} {\em Status-Code} {\em Reason-Phrase}
The status code is a 3-digit number used by the
computer and the reason line is a
friendly note for a human to read.
the status code classes
Status code classes



1

Informational: Request received, continuing process


2

Success: The action was successfully received,
understood, and accepted


3

Redirection: Further action must be taken in order to
complete the request


4 Client Error: The request contains bad syntax or
cannot be understood


5

Server error: The request is valid but can not be
executed by the server

Error codes


100

Continue


101

Switching Protocols


200

OK


201

Created


202

Accepted


203

Non
-
Authoritative Information


204

No Content


205

Reset Content


206

Partial Content

Error codes II


300


Multiple Choices


301


Moved Permanently


302


Found


303


See Other


304


Not Modified


305


Use Proxy


307


Temporary Redirect

Error codes III


400

Bad Request


401

Unauthorized


402

Payment Required


403

Forbidden


404

Not Found


405

Method Not Allowed


406

Not Acceptable


407

Proxy Authentication Required


408

Request Time
-
out

Error codes IV


409

Conflict


410

Gone


411

Length Required


412

Precondition Failed


413

Request Entity Too Large


414

Request
-
URI Too Large


415

Unsupported Media Type


416

Requested range not satisfiable


417

Expectation failed

Error codes V


500

Internal Server Error


501

Not Implemented


502

Bad Gateway


503

Service Unavailable


504

Gateway Time
-
out


505

HTTP Version not supported

Response headers


Accept
-
Ranges:


Age:


Etag:


Location:


Proxy
-
Authenticate:


Retry
-
After:


Server:


Vary:


WWW
-
Authenticate:

example response

HTTP/1.1 200 OK

Date: Fri, 14 Oct 2005 01:14:01 GMT

Server: Apache/2.0.54 (Debian GNU/Linux)

Last
-
Modified: Fri, 07 Oct 2005 16:40:30 GMT

ETag: "11f711
-
9f1
-
b314bb80"

Accept
-
Ranges: bytes

Content
-
Length: 2545

Connection: close

Content
-
Type: text/html; charset=UTF
-
8


<!DOCTYPE html PUBLIC "
-
//W3C//DTD XHTML 1.0
Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd">

<html><head><title>Thomas Krichel's homepage


The body


The entity
-
body (if any) sent with an HTTP
request or response is in a format and encoding
defined by the entity
-
header fields.


When an entity
-
body is included with a message,
the data type of that body is determined via the
header fields Content
-
Type and Content
-
Encoding

example status: redirect


If you use Apache, you can create a file
.htaccess (note the dot!) with a line


redirect 301
old_url new_url


old_url

must be a relative path from the top of
your site


new_url
can be any URL, even outside your site


This works on wotan by virtue of configuration
set for apache for your home directory.
Examples


redirect 301 /~krichel http://openlib.org/home/krichel


redirect 301 Cantcook.jpg http://www.foodtv.com

Apache


Is a free, open
-
source web server that is
produced by the Apache Software Foundation,
see http://www.apache.org


It has over 50% of the market share.


It runs best on UN*X systems but can run an a
Mickeysoft OS as well.


I will cover it here because it is freely available.


Wotan runs version 2.

Apache in debian


/etc/apache2/apache.conf is set main
configuration file.


/etc/init.d/apache2
action,
where

action
is one of


start


stop


restart


is used to fire the daemon up or down.


The daemon runs user www
-
data

Virtual host


On a single installation of Apache several web
servers can be supported.


That means the server can behave in a different
way according to how it is being addressed.


The easiest way to implement addressing a
server in different was is through DNS host
names.

directives in apache.conf


This file contains directives that control the operation of
the Apache server process as a whole.


Some of them are


the server root, where it finds its configuration


the time out for requests


which port to listen


another part of apache.conf has extensive settings to
deal with content


different languages


different character sets


different MIME types

Modules


To extend Apache, modules have written. The
modules are kept in a directory modules
-
available


Modules that are enabled are listed in the
directory modules
-
enabled.


Looking at this gives you vital information about
what the server can do.

Server directives


User


Gives the user name apache runs under


Group


Gives the group name the server runs under


ServerAdmin


Email of a human who runs the default server


ServerName


The name of the default server


DocumentRoot


The top level directory of the default server

Directory options


Many options for a directory can be set with


<directory
name> instructions<directory>


Name
is the name of a directory
.


Instructions
can be a whole lot of stuff.


Directory instructions


Options sets global options for the directory, it
can be


None


All


Or any of


Indexes (form directory indexes?)


Includes (allow server side includes?)


FollowSymlinks (allow to follow symbolic links)


ExecCGI (allow cgi
-
scripts?)


MultiViews (allow flexibility in URLs)

Access control


Can be part of <directory> to set directory level
access control


Example


Allow from

friendly.com


Deny from

evil.com


Sometimes you have to set the order, example


Order allow, deny

Authentication


This is used to enable password access. In that
case the authentication is handled by a file
.htaccess in the directory.


The AllowOverride instruction is used to state
what the user can do within the .htaccess file.
Depending on its values, you can password
protect a web site.


We will not discuss this further here.

UserDir


This sets the directory that is created by the user
in her home directory to be accessed by requests
to ~
user.


On wotan, we have


UserDir public_html


That is the default, actually
.

logs


The web server logs every transaction.


The are severeal types of logs that used to be
kept separately, in early days.


209.73.164.50
-

-

[26/Jan/2003:09:19:51
-
0500]
"GET /~ramon/videos/ntsc175.html


HTTP/1.1" 206 808


Additional information may be kept in the referer
and user agent log.


The referer log may have some interesting
information on who links to your pages.


virtual hosts


Most apache directive can be wrapped in a
<virtualhost> </virtualhost> grouping. This implies
that the only hold for the virtual host. Example


<VirtualHost *>


ServerAdmin krichel@openlib.org


DocumentRoot /home/connect/public_html


ServerName connections2003.liu.edu


ErrorLog /var/log/apache/connections2003
-
error.log


CustomLog /var/log/apache/connectios2003
-
access.log
common


</VirtualHost>


http://openlib.org/home/krichel

Thank you for your attention!