Web Technologies

Week 1 – History of the Web
Week 2 – HTML
Week 3 – HTML and JavaScript
Week 4 – JavaScript Variables and Data Types
Week 5 – Selection
Week 6

Week 1 – History of the Web

Web addresses

http://subdomain.m1cvf.co.uk:80/folder/file.html
http is the communication protocol. It stands for hypertext transfer
protocol.
m1cvf.co.uk is the domain of the website and relates to an IP address
and sub domain is part of this address. An IP address is associated
to the domain name to make it easier to remember. A domain name server
lists the domain names to their IP addresses.
:80 – this is a port number and works like a communications channel.
There are more than one port that exists so there’s 65,480 channels
(ports) to send data over a network. 80 is the default for web browsing
and is referred to as the listening port as it waits for a connection
and then opens another port for the sending of data once an agreement
is made to send data on ports between 1024 – to 65,480. This is a handshake.
When communication is complete, the second port closes and 80 remains
listening.
folder – like any computer, there is a file structure and in
the web server, this is the name. / is root and /folder/ is a folder
in root.
file.html – This is the file on the server. When there is no
file showing, its usually pointing to index.htm, index.html, index.php,
default.html, etc. This is set in the settings of the web server so
when one goes to http://subdomain.m1cvf.co.uk:folder/, the index file
isn’t shown in the address bar of the browser.

History of the Web

The web became commercial around 1993 and pages began to appear in
1991 with the creation of the HTML language.
The internet and world wide web are two different things. The internet
are a collection of host computer. They are joined in a network. Each
host has its own IP address so they can communicate together using a
standard communication protocol called TCP/IP. Using this protocol,
packets are sent across the network to communicate with pieces of data.
The internet is networked using a standard protocol so its so the host
computers can “use the same language”. If any data was missing, packets
are resent, e.g. using a robust protocol. The internet was almost unknown
before 1991 and initially restricted to the academic community.
The world wide web is a distributed information system that works on
the internet. The WWW has its own protocol for communicating such as
HTTP to ensure the data sent is the right type to be displayed by the
appropriate document. This is so HTML is displayed as HTML so Internet
Explorer for example doesn’t try to open a Word document. Links in websites
are represented by links to hypertext objects such as an image and by
doing so, creates a data structure. These hypertext objects could be
on any host computer. It was developed with CERN 1991 for academics
to exchange documents.

Growth of the internet

The WWW network has grown from 4 host computers in 1970 to around 2000
million today (2005). As of September 2003, there were 43 million web
servers compared to one in December 1990. A web server can hold more
than one website.

Key Events

The idea was originated around 1961 and called the Galactic Network.
At the time of this, the thought of communicating between computers
was quite alien when people only thought of mainframes which is why
no one thought many were needed globally! There was a goal to network
the world, starting in America through APRANET. It was largely funded
by the US Military. Through this, there was the invention of the hyperlink,
mouse and Microsoft Windows.

  • This first 4 computers were connected in 1969 on the west coast
    of the US.
  • In 1970, they connected to the other side of the states creating
    a network control protocol. This did not resend data when data was
    lost so later, TCP/IP was adopted which did. It was done using the
    existing telephone network. This allowed a rapid expansion of other
    hosts connecting.
  • In August 1972, the first emails were sent over the APRANET.
  • September 1973 saw the addition of satellite links to create a real-time
    data transmission. This is because data is time stamped and if you
    transmit data across time zones, you need some way of overcoming this
    to synchronise clocks across different time zones. There are servers
    on the net which synchronise computers across the world to send data
    in real-time.
  • TCP was developed in June 1974 to allow lost data to be resent.
  • July 1975 saw the development of network devices such as routers,
    switches and hubs.
  • Different sorts of connections types were created beyond HTTP in
    July 1976 to download files such as FTP etc.
  • In 1977, the research on APRANET closed down to become commercialised.

Week 2

HTML was invented in 1991 and it stands for HyperText Markup Language.
It is a mark up language and the latest version is HTML 4.

Markup Languages

It identifies elements of a page so that a browser can render the page
on the computer screen. It does this using tags. Mark up languages are
used to format text and information.
HTML is not case sensitive but its good practice to keep all letters
the same case. Remember, UNIX servers are case sensitive so bear this
in mind with file names. Also remember there will be a syntax error
if tags are not closed when they are meant to be though fortunately
the browser will still try to display the page as much as possible.

HTML files either have to end in .html or .htm. .htm is a Windows sort
of file extension. File names of the home page are usually called index.html.

The page is started with <html> and ends with </html>.
It has a head of the web page starting with <head> and ending
with </head>. The stuff in the head is created first before the
body of the document. The info in the header generally doesn’t get rendered
in the display window. The body is marked by <body> and ending
with </body> and contents the page contents.

Layout of HTML

<html> 
  <head>
    <title>heading</title>
  </head>
<body> 
My contents
  </body>
</html>

Headers

Headers are simple form of text formatting. They vary the text size
based on the header’s level. This is set up in the browser. E.g. View
=> Text Size in Internet Explorer.
<h1>…</h1> is the biggest heading and <h6>…</h6>
is the smallest heading available if you use the default style in the
browsers

Justification

Text can be:

Center attribute

Left attribute

Right attribute

This is done by writing <p align=”center”>. You could put right
or left instead of center. Note the American spelling!

Text Styling

Underline: <u>…</u>
Italics: <i>…</i>
Bold: <b>…</b> This is an old version.
We now use <em>…</em> or <strong>…</strong>

Linking

Links are inserted using the A (anchor) element. It requires the HREF
attribute, e.g. <a href=”address”>link
text</a>

We can create an email link as <a href=”mailto:email
address”>email text</a>

Links can be absolute or relative. An absolute link is http://www.m1cvf.co.uk/uni_msc-web.php
but a relative link is uni_msc-web.php.
If i wanted to link to a file in a folder below the level of the level
the current page, try linking it such as <a href=”..index.htm”>Home
Page</a>
. If you want to reference to a folder at a higher
level, then do this: <a href=”folder/address”>link
text</a>
.

Images

Images can act as anchors as well as not being links. you insert an
image using the tag <img src=”file name”>
src means source. Images can have height and width settings too so it
can look like: <img src=”images/logo.gif”
width=”50″ height=”50″>
. You should include
an alt attribute too since its best practice to allow blind people and
people who have turned images off to read a description of the image.
This looks like this: <img src=”images/gplogo.gif”
width=”50″ height=”50″ alt=”Picture description”>

Images can be links and can be done like this: <a
href=”index.html”><img border=”0″ src=”images/logo.gif”
width=”50″ height=”50″ alt=”picture description”></a>

You can set a background image too. You do this by <body
background = “background file”>

Formatting Text with <font>

The font element allows you to add colour and formatting to text. The
font attributes are color. E.g. <font color=”red”>Text</font>.
You can fix the size of the font in the design, though this is not good
practice: <font size=”3″>Text</font>.
You can make a font one size bigger to the default by doing this: <font
size=”+1″>Text</font>
.
The type of font can also be set. Try this: <font
face=”Arial, Times”>Text</font>
. It’s probably
not a good idea to select a font that is not likely to be on other people’s
computers and remember, not everyone uses Windows and won’t have all
the fonts a Windows XP user has!!

Special characters, horizontal rule and breaks

You can draw a horizontal line using the tag <hr>. Note:
this tag has no closing tag.
If you want a break new line, you can do this by using <br>.
You can insert special characters such as &. This is written by
putting &amp;. Others include:

  • < – &lt;
  • > – &glt;
  • © copyright symbol – &copy;
  • quote marks ” – &quot;
  • white space – &nbsp;

Week 3 – HTML and JavaScript

Deitel, Deitel and Goldberg – Internet and World Wide Web How to Program:
Chapter 4/5 – 4.4 – web consortium validation

HTML continued

Tables

<table border ="1" height="100%" width="100%">
   <tr>
     <td>Row 1, Column 1</td>
     <td>Row 1, Column 2</td>
   </tr>
   <tr>
     <td>Row 2, Column 1</td>
     <td>Row 2, Column 2</td>
   </tr>
</table>

We can align the contents of the cells using the valign tag, e.g. <td
valign=”top”>
. We can set this to other other options
such as bottom, baseline, and middle. Baseline aligns the cells along
the baselines of the text. Bottom aligns the cells along the bottom
of the text.
To set the horizontal alignment, we use the align=”left” tag.
This can be set as center, left or right. Please note the American spelling.

The coordinates for pictures and text starts at the bottom left of
the object (think of a graph). Remember that a web browser starts the
site from the top left so this allows for absolute positioning. This
means that we can place an object absolutely by having it 10 pixels
from the top and 10 pixels from the left side of the browser window.

Colspan – it adds extra “virtual” columns and allow
you to merge columns together:

<table border ="1">
   <tr>
     <td colspan="2">Row 1, Column 1</td>
   </tr>
   <tr>
     <td rowspan="2">Row 2, Column 1</td>
     <td>Row 2, Column 2</td>
   </tr>
</table>
Row 1, Column 1
Row 2, Column 1 Row 2, Column 2

Rowspan – it adds extra columns and allow you to merge columns
together:

<table border ='1'>
   <tr>
     <td rowspan="3">left</td>
     <td>top</td>
     <td rowspan="3">right</td>
   </tr>
   <tr>
     <TD>middle</td>
   </tr>
   <tr>
     <td>bottom</td>
   </tr>
</table>
left top right
middle
bottom

<th> – header cell tag – Like the TD tag, the TH tag is used
for a table cell. The TH tag is a bit different to TD whereby it is
used when the cell’s contents is a table heading, not a data cell so
usually used as a heading at the top of a table or as section within
a table. It generally seems to render these cells with bold.

<caption> – This tag is put above the table like this: <caption>My
table</caption>
. You can use align or valign with this
tag too.

Colour Safe Palette

It is made up of, RGB, red, green and blue. Each value of RGB are 0-255,
in hex, 00 – FF. Blue and green together makes cyan. Blue and red makes
magenta. Red and green together makes yellow. We can reduce the amount
of colours on a website by using web safe colours. This is because older
monitors cannot display all the possible colours. Colours use the codes:
00, 33, 66, 99, CC and FF in the hex code for each element for red,
green and blue.

JavaScript

Ways of using JavaScript:

  • Event based programming – this involves using a form, a mouse, keyboard
    etc. It can be associating a button with a click event. In JavaScript
    its called a function. In VB.net its called a method.
  • We can write directly to the screen using “Document write”.
    It is on the fly. This could be done using a prompt box where the
    user can enter some data. At this point, the data has not been placed
    into the website until the user has entered the data into the site.
    The end result is static.
  • DHTML – Document Object model – the final way of programming is
    combining an event handling style with a static style.

It is an interpreted programming language where it is not compiled.
Usually JavaScript is activate by placing this into the html:

<html>
<head>
   <script>....</script>
     etc...

In between the
script tags lies the JavaScript. this is client side programming. It
is the job of the web client to execute the JavaScript.
We can create blocks of codes called functions and can execute these
call blocks individually from one file. In programming there’s a start
and an end to the code and in between the start and end code, there
are statements. The start is <script>. The end is </script>.
Statements have a left hand side and a right hand side. The right hand
side is evaluated and the result of the evaluation is applied or assigned
to the left hand side. e.g. bob = bob + 1
We can also have instructions such as: CALL instruction. We either call
something or assign something.
The entire html file is called “document” this means we are
referencing to the current web page and called an object. Its like “me”
in VB.net e.g. document.write. Document is the object and Write is the
method/action or behaviour. It is calling an action to operate on the
object. Methods have parameters associated with them. This is a way
of passing information. It is defined with using (), e.g. document.write().
Within the brackets is the argument.

Example of a statement: document.write(“Hello
World”);

We can write additional statements on their own lines. However, if we
want to write more than one line of text, we can do this:
document.write(“<p>” + “Hello”
+ ” everyone” + “</p>”);

The plus sign concatenates the p tags and the text together. However,
we can simplify it by doing:
document.write(“<p>Hello everyone</p>”);

Defining a Variable

Variables hold information we can access. JavaScript doesn’t have any
explicit declaration of variable types so its a loosely defined language.
It has a variant data type such as a string – “hello”, characters
– ‘c’, integer – 322, floats (floating point numbers) – 42.46. Most
programming languages, they are declared, e.g. in VB it is Dim variablename
as integer. In JavaScript, we don’t do this that way. We do this:
var myVariable = “hello”;
var says we are making a new variable, myVariable is
its name, = assigns it to the right hand side statement.“hello”
is a string literal. Data types are primitive values and cannot be evaluated
to anything else but themselves. We can call myVariable to perhaps appear
in a box and will print hello.
We can do this:

<script>
   var myVariable = "hello";
   document.write(myVariable);
</script>

Week
4 – Variables and Data Types

You cannot write methods in JavaScript but they are written for us.
They can either return nothing, e.g. void or return some data. We can
write the functions though.

JavaScript is a scripting language and is run line by line and is interpreted.
It breaks if it occurs an error when trying to display the code onto
the screen. It invented by Netscape and has nothing to do with Java.

limitations of JavaScript

  • It cannot interact with a database
  • It cannot perform/draw graphics
  • It will not perform IO operations, e.g. read and write to files,
    although it can create cookies.
  • It does not support networking.

Ways to use JavaScript

  • You can write documents or insert append to existing documents.
  • Change the internal structure of the document object model
  • Create event driven environment attaching JavaScript to part of
    a document

Event based programming

function helloWorld() {
     window.alert("hello world!"};
}

This creates a function where it opens
a popup window that states “hello world” on it.

You can run this function for example as a link to call the function:

<a href="javascript helloWorld()">say hello</a>

Dynamic Programming

We can also use say a for loop:

for (i=1;<10,i++) {
          window.status = window.status + 1
}

This shows a count with a loop of 10 times
and adds a number to the status bar.

JavaScript can be embedded into a web page directly between script
tags or it can be imported into a page from an external file:
<script src=”myfile.js”></script>

Document Properties

document.title = “New Title of web page”;
document.URL = “http://www.m1cvf.co.uk”;
document.lastModified;

A popup can be created using window.message(<string>};
A new browser can be opened using: window.open{<url>,<windowName>,<windowAttirbutes>)

Window Properties

window.document
window.status
window.event – whenever a user clicks on a button, moves a mouse, etc,
it is monitored and the last event that is occurred is stored as window.event.

Overall

A Method must always be part of an object path ie it must have
a dot extension: document.writeln(“message”);

A Function is not part of an object and is called directly and
usually assigns a value to a variable: number = parseInt(“10”);

Variables and Data Types

A variable is a reserved area of RAM. The amount of memory set aside
depends on the data type. Data types are characterised by the range
of the values of the variable and the operations that can be performed
on them.
JavaScript is a loosely typed language so declarations of type do not
exists explicitly when defining a variable, but they do perform according
to the rules of the data type after assigning a value of a particularly
type to a variable. The variable takes on the data type once a value
is assigned.

Variable names

A JavaScript variable name must start with a letter or underscore (“_”)
and subsequent characters can also be digits (0-9). JavaScript is case
sensitive so letters can include the characters “A” through
“Z” (uppercase) and the characters “a” through
“z” (lowercase). myVar is not the same as MYvar.

Rules of JavaScript

  • JavaScript is case sensitive (while, While, WHILE are not the same)
  • All whitespace (spaces, tabs) are ignored between tokens
  • Semicolons separate statements (separate lines do the same)
  • Comments to end of line (// this is a comment)
  • Comments between characters (/* this is a comment */)
  • A Literal is any data value that cannot be evaulated to anything
    but itself (1, 1.1, “1”, ’1’, true, false,
    null)
  • An Identifier is a name beginning with any ASCII character, _ or
    $

Data Types

  • Numbers – 42 or 3.14159 (all floating point)
  • Logical (Boolean) values – true or false
  • Strings – “Hello World!”
  • null – a special keyword denoting a null value or ‘no value’
  • character

We can declare a variable like this: var myValue
= 10;
The data types are auto detected based on how the program
is put together. This prints the variables as strings: document.write
(myValue + “ “ + myNextValue + “ “ + andTheNext);

but this adds the variables together: document.write
(myValue + myNextValue + andTheNext);

Evaluation of Assignment Statements – Assignment statements
have a left and right side, e.g. LHS = RHS. Programs try to resolve
the right hand side of the statement and always tries to evaluate down
to a literal. By definition a literal cannot be evaluated anymore.

Mathematical Operations

  • + addition
  • – subtraction
  • * multiplication
  • / division
  • \ integer division
  • % modulus (integer division)

Arithmetic Precedence

  • ( ) parentheses evaluated first
  • ( ( ) ( ) ) nested parentheses evaluated left to right
  • * / \ % evaluated second and then from left to right
  • + – evaluated last and then from left to right

Post Increments and Decrements

n++ increment by 1 same as n=n +1
n — decrement by 1 same as n=n – 1
n +=1 increment by 1 same as n=n +1
n -=1 decrement by 1 same as n=n – 1
n+=5 increment by 5 same as n=n + 5

We can use these to create a counter.

Variable declaration – Variables can be defined at
any time but it is good programming practice to declare them at the
top of the script. The variable name can only be declared once within
the same block of code but local variables are an exception. Assignments
can be made on the same line but the variables must be delcared.

Data conversion

There are two types: implicitly or explicitly.

Implicitly can be when we convert a number into a
string. This can be when we want to display a number in a GUI. This
is because values displayed on the screen are always strings. e.g.
var number1=12, number2=20;
document.writeln( “The sum is ” + number1 + number2 );

The answer turns out to be 1220 because the two varialbes are concatonated
together. We can overcome this, if we want to add the characters together
by doing:
var number1=12, number2=20;
document.writeln( “The sum is ” + (number1 + number2));

Explictly:
Code Result
a = parseInt (“1”);
b = parseFloat (“3.14”);
c = parseInt (“ff”, 16);
1
3.14
255
functions
var w = 255;
x = w.toString(16);
y = w.toString(8);
z = w.toString(2);
“ff”
“377”
“11111111”
methods

Local and Global Variables

Variables have SCOPE. This means that a variable with global scope
is defined through the entire region of the program, whereas a variable
with local scope is only defined within the specified block of code.
These blocks of code are usually within the body of a function. The
local variable cannot be accessed in every part of the program.

JavaScript has a function to test if a variable is not a number. This
can be done by: isNAN(myVaraible); This returns true or false. e.g.

<script>
          var userInput = "";
          userInput = window.prompt("enter Number",0);
          intSum = 12 + userInput;

if (isNaN(intSum))
document.writeln(“<h1> Invalid Input</h1>”);
else
document.writeln( “<h1>The sum is ” + intSum + “</h1>” );
</script>

Week 5 – Selection

Control stuctures adds decision making to a program. Common structures
include:

  1. Conditional Statements using Selection
  2. Repetitive Statements using Iteration
  3. Object Statements using Recursion

In order to make decisions, an expression should evaluate to either
true or false. The expression is a mixture of statements (1 + 2), variable
(Catherine), literals (123), or operations (myString.length). Comparison/relational
operators (greater than, less than, equal to, not equal to) can be used
and logical operators (and, or, not).

Expression Table

An Arithmetic Statement JavaScript Equivalent
100 is greater than 10 100 > 10
2 is less than 0 2 < 0
4 equivalent to 4 4 = = 4
4 times 3 equivalent to 2 times 6 (4 * 3) = = (2 * 6)
3 less than 1 and 2 greater than 1 (3 < 1) && (2 > 1)
2 equivalent to 2 and 4 less than 400 (2 = = 2) && (4 < 400)
7 less than 8 or 4 less than 8 (7 < 8) || (4 < 8)

Relational Operators

Operation Symbol
equal to = =
not equal to !=
greater than >
less than <
greater than or equal to >=
less than or equal to <=

Rules for Expressions

  • Simple expressions are made of pairs of statements, variables, literals,
    or operations joined by a relational operator.
  • Simple expression must evaluate to true or false
  • Compound expressions are made of pairs of simple expressions joined
    by a logical operator
  • The final evaluation of compound expression is determined by logical
    truth (see truth tables)

Conditional Expressions

If Statements

This is based on the idea if something false, then something else happens,
e.g.

var x = 10;
if (x ==10) {
                document.write(“x is ten”);
               }
else {
                document.write(“x is not ten”);
       }

Nested IF Statements

var x = 10;
var y = 20;
if (x ==10) {
                document.write(“x is ten”);
                if(y== 20){
                document.write(“and y is twenty”);
                              }
               }
else {
               document.write(“x is not ten”);
               if(y== 20){
                             document.write(“and y is twenty”);
                            }
              }

Select Statements

var x = 12;
switch (x){
              case 12 : document.write ("the answer is twelve <br> ");
              case 13 : document.write ("the answer is thirteen<br>");
              case 14 : document.write ("the answer is fourteen<br>");
              default : document.write ("the answer not 12 13 or 14");
             }

Week 6