Thomas krichel 2006 03 04
This presentation is the property of its rightful owner.
Sponsored Links
1 / 60

LIS650 lecture 5 javascript, http and apache PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

Thomas Krichel 2006-03-04. LIS650 lecture 5 javascript, http and apache. today. javascript http apache introduction. javascript. This is a client-side scripting language.

Download Presentation

LIS650 lecture 5 javascript, http and apache

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Thomas krichel 2006 03 04

Thomas Krichel


LIS650 lecture 5javascript, http and apache



  • javascript

  • http

  • apache introduction



  • 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

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.



<script type="text/javascript">

document.write("hello, world");


  • 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

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

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

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

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.



  • 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

objects in javascript

  • Properties are accessed by


  • Methods are accessed by


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



  • 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


Event attributes

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

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

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

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

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

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

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>

Lis650 lecture 5 javascript http and apache


  • 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



  • 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

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

use of other standards

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


  • The default character set is ISO-8859-1.

Http resource identification

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

Absolute http URL

  • the absolute http URL is


  • 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

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

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

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

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

    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

    • 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

    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

    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

    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

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

    Status code classes

    Status code classes

    • 1 Informational: Request received, continuing process

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

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

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

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

    Error codes

    Error codes

    • 100Continue

    • 101Switching Protocols

    • 200OK

    • 201Created

    • 202Accepted

    • 203Non-Authoritative Information

    • 204No Content

    • 205Reset Content

    • 206Partial Content

    Error codes ii

    Error codes II

    • 300Multiple Choices

    • 301Moved Permanently

    • 302Found

    • 303See Other

    • 304Not Modified

    • 305Use Proxy

    • 307Temporary Redirect

    Error codes iii

    Error codes III

    • 400Bad Request

    • 401Unauthorized

    • 402Payment Required

    • 403Forbidden

    • 404Not Found

    • 405Method Not Allowed

    • 406Not Acceptable

    • 407Proxy Authentication Required

    • 408Request Time-out

    Error codes iv

    Error codes IV

    • 409Conflict

    • 410Gone

    • 411Length Required

    • 412Precondition Failed

    • 413Request Entity Too Large

    • 414Request-URI Too Large

    • 415Unsupported Media Type

    • 416Requested range not satisfiable

    • 417Expectation failed

    Error codes v

    Error codes V

    • 500Internal Server Error

    • 501Not Implemented

    • 502Bad Gateway

    • 503Service Unavailable

    • 504Gateway Time-out

    • 505HTTP Version not supported

    Response headers

    Response headers

    • Accept-Ranges:

    • Age:

    • Etag:

    • Location:

    • Proxy-Authenticate:

    • Retry-After:

    • Server:

    • Vary:

    • WWW-Authenticate:

    Example response

    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"


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

    The body

    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

    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

      • redirect 301 Cantcook.jpg



    • Is a free, open-source web server that is produced by the Apache Software Foundation, see

    • 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

    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

    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

    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



    • 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

    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

    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

    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

    Access control

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

    • Example

      • Allow from

      • Deny from

    • Sometimes you have to set the order, example

      • Order allow, deny



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



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

    Lis650 lecture 5 javascript http and apache


    • The web server logs every transaction.

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

    • - - [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

    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 [email protected]

      DocumentRoot /home/connect/public_html


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

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


    Thank you for your attention

    Thank you for your attention!

  • Login