additional web protocols

University of Sunderland CDM105 Session 4

Additional Web ProtocolsAdditional Web Protocols

JavaScript and XML

An overview of web languages and emerging technologies


JavaScript OverviewJavaScript OverviewScripting Language that uses a similar syntax toJava (or C/C++) developed by Netscape.

Permits a higher level of interaction in Web pages

Low level Example….. :

<html><body> <script language="JavaScript">

document.write('Hello'); </script> </body>

</html>


JavaScript AlertsJavaScript Alerts

<html><body> <script language="JavaScript">

alert('This is an Alert Box!'); </script> </body>

</html>

Display a dialogue boxmessage


Variables in Variables in JavaScriptJavaScript

• Just like any other programming language

var age = 35;

var height = “”;

var name = “Gordon”;

“var” partdeclares the variable

Defining a variable to use later

String variable example

FunctionsFunctionsHint: Use functions if you want to do the same thing more than once

<html><script language="JavaScript"> </script> </html>

HTML commentFor backwardscompatibility


What are What are Event Handlers?Event Handlers?

The image changes as a result of a user action causing a ‘link event’ to occur


Creating an Image Creating an Image RolloverRollover

• Note: Authoring packages sure as Dreamweaver make creation of these easier !– However, it is important you understand the

technology behind Web pages

Example JavaScript Event Handlers

<a href="#" onMouseOver="document.button1.src='button2.gif'" onMouseOut="document.button1.src='button1.gif'"><img src="button1.gif" name="button1" width=140 height=30 border=0></a>


Image SwappingImage SwappingStandard Image tag used to load first image

<img src="button1.gif" name="button1" width=140 height=30 border=0>

1 Mouse Over LinkEvent Occurs

onMouseOver="document.button1.src='button2.gif'"

Image Source Address set to second image

2Mouse OutEvent OccursReset Source Address

onMouseOut="document.button1.src='button1.gif'"


The HTML-documentThe HTML-document

• JavaScript organises all elements on a web-page into a hierarchy

• Every element is seen as an object.

• Each object can have certain properties and methods.

• JavaScript can easily manipulate the objects

The Document Object Model - DOM


HTML-HTML-document document hierarchyhierarchy

Example

document.forms[0].elements[0].value

To refer to the elements in JavaScript code


Form Object TypesForm Object Types

<FORM METHOD="POST"

ACTION="mailto:emailname@emailaddress">

Surname <INPUT TYPE="TEXT" NAME="surname" > <BR><BR>

<INPUT TYPE="submit" NAME="Submit" VALUE="Submit">

</FORM>

What to run whensubmit is pressed


Blur

<INPUT TYPE="CHECKBOX" NAME="Popgrp" VALUE="Blur"> <BR>

Five

<INPUT TYPE="CHECKBOX" NAME="Popgrp" VALUE="Five"> <BR>

Steps

<INPUT TYPE="CHECKBOX" NAME="Popgrp" VALUE="Steps">

Male <INPUT TYPE="RADIO" NAME="Gender" VALUE="Male">

Female <INPUT TYPE="RADIO" NAME="Gender" VALUE="Female">

Note the same nameis given as this is oneobject on the form


Lists<SELECT>

<SELECT NAME="Subjects" SIZE=5 MULTIPLE> <OPTION>English Language <OPTION>Mathematics <OPTION>Physics <OPTION>History <OPTION>Art <OPTION>Chemistry

</SELECT>


<input type="text" name=”email" size=30>

<select name="why"><option value=0 selected>Choose one...<option value=1>It was in Sunderland<option value=2>It looked interesting<option value=3>It was an uptodate course<option value=4>My parents made me<option value=5>It was the only offer I had<option value=6>Other</select>

<textarea name="comments" rows=5 cols=70 wrap="VIRTUAL"></textarea>

<form action="http://osiris.sunderland.ac.uk/gun-scripts/survey.pl" name=“myForm” method="POST">

Some examples of JavaScript Objects

document.myForm.email.value

document.myForm.why.valuedocument.myForm.comments.value

Forms, Function andForms, Function andJavaScript ExampleJavaScript Example<html>

<head><script language="JavaScript"></script></head>

<body><h3>My first Calculator</h3><form name="calcu">Input A <input type="text" name="numa" value=""> <br>Input B <input type="text" name="numb" value=""> <br><input type="button" value="Calculate" onClick="calculation()"></form></body></html>

assignment

name of objects on form


Data ConversionData Conversion

On the last example we converted a string to a real number

Using parseFloat(String)

Exercise:The following all convert a string to an Integer value of 10.What does the second parameter represent ?

parseInt(“A”, 16)parseInt(“12”, 8)parseInt(“1010”, 2)parseInt(“10”, 10)


Data ConversionData Conversion

Answer:The radix of the number e.g. the base of the number system

parseInt(“A”, 16)parseInt(“12”, 8)parseInt(“1010”, 2)parseInt(“10”, 10)

Base 16

Base 8 (1*8+1*2=10)

Base 2 (1*8+0*4+1*2+0*1=10)Base 10

Same FunctionSame Functionbetter code !better code !<html>

<head><script language="JavaScript"></script></head><body><h3>My first Calculator</h3><form name="calcu">Input A <input type="text" name="numa" value=""> <br>Input B <input type="text" name="numb" value=""> <br><input type="button" value="Calculate" onClick="calculation(document.calcu.numa.value, document.calcu.numb.value)"></form></body></html>

Passing datato a function


How is JavaScriptHow is JavaScriptused on the Web?used on the Web?

• To create documents ‘on-the-fly’ (client sided)– creating and closing windows, creating new documents – i.e. Pop up adverts – These are now normally blocked by

default in Web Browsers

• Form validation (client sided)– to reduce the load on servers by checking forms prior to

posting

• To increase the functionality of the user interface– improve the user interface e.g. Rollovers, Interactive

Menu Systems

Creating documentsCreating documents‘‘on-the-flyon-the-fly’’

<html> <head> <script language="JavaScript">  </script> </head>

<body> <form> <input type="button" value="Open New Window" onClick="openWin2();"></form></body></html>

Example: Opens a new Browser window without a status bar, toolbar or menubar and then loads a new page into the window


Another examplefunction openWin3() { myWin= window.open('','new_window_1','width=400,height=300,status=no,toolbar=no,menubar=no');

// open document for further output myWin.document.open(); // create document myWin.document.write("<html><head><title>On-the-fly"); myWin.document.write("</title></head><body>"); myWin.document.write("<center><font size=3>"); myWin.document.write("This HTML-document has been created "); myWin.document.write("with the help of JavaScript!"); myWin.document.write("</font></center>"); myWin.document.write("</body></html>");

// close the document - (not the window!) myWin.document.close(); } Using JavaScript to generate

HTML

When no file name is given, the result is a blank document

<html><head><script Language="JavaScript"></script></head>

<body onLoad="clock()"><form name="clock">Time: <input type="text" name="time" size="8" value=""><br>Date: <input type="text" name="date" size="8" value=""></form></body></html>

StandardStandardObjectsObjectsThe Date Object

Returns the date and time

Use the actual time and dateas a new one isn’t specified

time

date

Rerun the function every 1000 msec


Form validation Form validation (client sided)(client sided)

• Can be used to– Check that all parts of the form have been

completed– Check that certain characters exist– e.g. checking for the @ symbol in email address

text input fields



function emailtest() { if (document.myForm.email.value == "" || document.myForm.email.value.indexof('@', 0) == -1) alert("No valid e-mail address!"); else alert("OK!");}

Example function

Test if the value containsan @ symbol

Test if the value is blank

OR



Checking a form before it is processed by a CGI script

function validate() {var formokay = true;

some if statements checking the form fields(if any are invalid set the formokay to false)

return formokay;}

<form … onSubmit=“return validate()”>

The onSubmit event handler is used

<HTML> <HEAD> <TITLE>Feedback Form</TITLE>

<script language="JavaScript"></script></HEAD>

<BODY> <h3>Feedback form</h3><FORM METHOD="POST" NAME="feedback" ACTION="mailto:[email protected]" onSubmit="return testemail(document.feedback)">Please enter your comments about our product<BR><TEXTAREA NAME="comments" ROWS=5 COLS=20></TEXTAREA><BR><BR>Please enter your email address<BR><INPUT TYPE="TEXT" NAME="EMAIL" ><BR><BR><INPUT TYPE="submit" NAME="SUBMIT" VALUE="Submit"></FORM></BODY> </HTML>

COMPLETE EXAMPLE


What is XML?What is XML?

• XML = Extensible Markup Language– related to Standard Generalized Markup Language (SGML)

• XML documents contain data only. They do not contain formatting information like HTML

• Thus, it is up to the end user application to decide how the information is displayed– e.g. on a mobile phone or the Web via a Browser

An introduction to XML

XML ParserXML ParserProcessing an XML Processing an XML

documentdocument

<?xml version = "1.0"?>



<article>

<title>Example One: An example XML page</title>

<date>Jan 01, 2002</date>

<author> <firstname>Gary</firstname> <secondname>Unthank</secondname></author>

<summary>The first example XML document</summary>

<content>A very short page of XML I created to show how XML is displayed on the Web</content>

</article>

Sample XML document

IE 5.5 msxml parser

Checks the XML documentand processes the data.In IE 5.5.+ this results in thethe page being displayed

Example XML documentExample XML document<?xml version = "1.0"?>



<article>

<title>Example One: An example XML page</title>



<summary>The first example XML document</summary>

<content>A very short page of XML I created to show how XML is displayed on the Web</content>

</article>

XML declarationW3C current standard 1.0

Every XML document must containone root element in which all othersare placed within


XML - The semantic XML - The semantic WebWeb

• XML permits document authors to create their own markup for any type of information

• Alternatively XML documents can reference an external document that defines the document structure– Document Type Definition (DTD)– Schema (created in XML)

• many parsers currently do not support Schemas due to it being a recent development

• The aim being to make a Web that is machine readable i.e. search more effectively


Document Type Definition Document Type Definition (DTD)(DTD)

<!ELEMENT SimpleDTD ( title, date, author, summary, content )>

<!ELEMENT title ( #PCDATA )><!ELEMENT date ( #PCDATA )>

<!ELEMENT author ( firstname, secondname )>

<!ELEMENT firstname ( #PCDATA )><!ELEMENT secondname ( #PCDATA )>

<!ELEMENT summary ( #PCDATA )><!ELEMENT content ( #PCDATA )>

#PCDATAFields must contain parsed character datai.e. not <, >, and &

A DTD enables an XML parser to verify whether an XML document is valid

DTDs use Extended Backus-Naur Form e.g. the syntax, rules and structure


Adding a DTD referenceAdding a DTD referenceto an XML pageto an XML page


<!DOCTYPE SimpleDTD SYSTEM "simpleDTD.dtd">

<article>

<title>Example two: An example XML page using

DTD</title>



<summary>The first example XML document using

DTD</summary>

<content>A very short page of XML I created to show how XML is displayed on the Web (also uses DTD)</content>

</article>

SYSTEM :External DTD file


XML SchemaXML Schema

• Like XML documents schems are XML files (which have .xsd file extension)

• Like DTDs these permit you to define the valid structure of an XML document

• Schema also define valid element types– i.e. strings, number etc.

• Read ‘Ian Stuart’s guide to Schema’ to see further example Schema. – http://lucas.ucs.ed.ac.uk/xml-schema


Example:Example: XML Schema XML Schema


<xsd:schema xmlns:xsd = "http://www.w3.ord/2001/XMLSchema" > <xsd:element name = "article"> <xsd:complexType> <xsd:element name = "title" type = "xsd:string"/> <xsd:element name = "date" type = "xsd:string"/> <xsd:element name = "author" type = "xsd:string"/> <xsd:complexType> <xsd:element name = "firstname" type = "xsd:string"/> <xsd:element name = "secondname" type = "xsd:string"/> </xsd:complexType> </xsd:element> <xsd:element name = "summary" type = "xsd:string"/> <xsd:element name = "content" type = "xsd:content"/> </xsd:complexType> </xsd:element></xsd:schema>

XML-Schemaelements are prefixed by xsd:



<article xmlns:xsi = "http://www.w3.ord/2001/XMLSchema-instance" xsi:MysimpleSchema = "simpleXMLSchema.xsd" >

<title>Example three: An example XML page using an XML Schema</title>



<summary>The first example XML document using an XML Schema</summary>

<content>A very short page of XML I created to show how XML is displayed on the Web (also uses XML Schema)</content>

</article>

Same as the previous example except a reference to the Schema is made

Use elements defined by W3C

My XML Schema !i.e. the file shown on the previous slide

Example:Example: XML Schema XML Schema


Why bother ? Why bother ? What is wrong with HTML ?What is wrong with HTML ?

• XML permits users to evolve their own XML for their particular needs– BioML : for describing biopolymer sequence information– MathML : for displaying Mathematics on the Web– CML : for describing chemical information

• Structuring documents with XML helps organise the web and will improve the Web – e.g. searching the Web will be easier as the

meaning of the text and graphics will be defined


Machine Based TutorialMachine Based Tutorial

• The tutorial session requires you to: • Implement the JavaScript examples from today’s

lecture and complete the further exercises• Additionally, create:

– an XML page and a DTD page on a topic of your choice– an XML page and a Schema on a topic of your choice

• Read through the first 6 hours (chapters) of the key text book (Bruce, B - Sams Teach Yourself Dreamweaver MX 2004 in 24 hours) in preparation for the next session.

additional web protocols

Documents