cft2111 introduction to website development module leader: matthew mantle

CFT2111

Introduction to Website Development

Module Leader: Matthew Mantle

e-mail: [email protected]

Questions 1) Look at the following JavaScript code

var day = prompt("Please enter the day")var family =prompt("Please enter the family name");var holiday = prompt("Are the family on holiday?")var numBottles;if (day != "Sunday" && holiday == "No") {

if (family == "Jones") {numBottles = 2;

} else if (family == "Smith") {numBottles = 3;

}document.write("Deliver "+numBottles+" bottles to the "+family+" family");

} else {document.write("No milk to be delivered today");

}

a) If the user enters Tuesday, Jones and No into the prompt boxes what will the script output? b) If the user has entered Sunday, Smith and No into the prompt boxes what will the script output?







}

a) If the user enters Tuesday, Jones and No into the prompt boxes what will the script output? Deliver 2 bottles to the Jones family







}

b) If the user has entered Sunday, Smith and No into the prompt boxes what will the script output? No milk to be delivered today

Today’s Lecture

• Functions• Event Handlers• Forms

Functions

• A function is simply a block of code we give a name to – The bits in green always remain the same

function doSomething(){ document.body.style.backgroundColor="red"};

Functions

• We can name the function anything we like– In this example doSomething

• Functions ‘do things’– They should have verbs as names e.g. calc, validate, login,

convert etc.


Functions

• Next we have a set of curved brackets ()– These are called parentheses


Functions

• Then comes a set of braces { }, – You need a starting brace and a closing brace everything

between these braces will be executed when the function is called.

– They mark out the code that belongs to the function


Functions

• Finally we have the function body– The code that will be executed

• Remember this structure– It is the same every time we create a function


Functions

• If we run this code in a browser– Nothing will happen

• Code inside functions only runs when the function is called


Functions

• To call a function we write the function name followed by the parentheses.


doSomething();

Event Handlers

• So far all our programs run automatically

• JavaScript enhances interactivity largely because it can respond to the actions of the user. – These actions of the user are called events– When a particular event occurs a piece of code called an

event handler (or listener) will register the event and a piece of JavaScript can be executed.

• Examples of events– The page loads– The user moves their mouse over a hyperlink– The user clicks on a button

How do event handlers work?

• In the HTML page we need to give an id attribute to the element we want to attach the event to

<a href="somepage.html" id="testLink">This is a hyperlink </a>


var link link = document.getElementById("testLink");link.addEventListener("mouseover", doSomething, false)

• In the .js file we access the hyperlink by using document.getElementById()

• We get hold of any page element that has an id in this way• A reference to the hyperlink is stored in the variable link

How do event handlers work?


<a href="somepage.html" id="testLink">This is a hyperlink </a>


var link = document.getElementById("testLink");link.addEventListener("mouseover", doSomething, false)

• To associate a function with an event• We use addEventListener

• We specify the event - mouseover

• We specify the name of the function to be called - doSomething

Here’s another example?


<input type="button" value="click me" id="testBtn"/>

function doSomethingElse(){ document.body.style.backgroundColor="green"};var btn;btn = document.getElementById("testBtn");btn.addEventListener("click", doSomethingElse, false)

• See how the code follows exactly the same structure• There’s lots of new syntax but it always follows the same pattern

• This time I am using a click event and calling the doSomethingElse function

Things are never easy with JavaScript• Different browsers implement slightly different

versions of JavaScript

btn.addEventListener("click", doSomethingElse,false)

• addEventListener() doesn’t work in Internet Explorer• Instead IE implements a slightly different version

of the same thing….

btn.attachEvent("onclick", doSomethingElse)

• To make things worse• Attempting addEventListener in IE causes an error• Attempting attachEvent in FF/Chrome cause an error

A solution• A way around this problem is to test if

addEventListener() exists– If it does use it – If it doesn’t use attachEvent instead

var btn;btn =document.getElementById("testBtn");if(btn.addEventListener){

btn.addEventListener("click", doSomethingElse, false)}else{

btn.attachEvent("onclick", doSomethingElse)}

Working With HTML Forms

• Using event handlers and functions we can process data from an HTML form

• Consider the following example– If the user enters ‘Bill’ we let them enter the website

http://compeng.hud.ac.uk/staff/scommm2/cft0125/week16/name.html

HTML Recap

<form id="loginForm" action=""><p>Please enter your name:<input type="text" name="userName"/><input type="button" value="Enter Your Name" id="loginBtn"/></p></form>

• Every form needs an opening and closing form tag– If we want to access the form using JavaScript the opening form

tag also needs an id attribute – Just like when we did CSS

– In this example the id attribute has a value of loginForm

HTML Recap

<form id="loginForm" action=""><p>Please enter your name:<input type="text" name="userName"/><input type="button" value="Enter Your Name" onClick="login()"/></p></form>

• Each element in the form is defined by an <input> tag• This has a name attribute of userName

– Becomes very important in a moment

The event handler

function login(){ alert("working");};

var btn = document.getElementById("loginBtn");if(btn.addEventListener){

btn.addEventListener("click", login, false)}else{

btn.attachEvent("onclick",login)}

<form id="loginForm" action=""><p>Please enter your name:<input type="text" name="userName"/><input type="button" value="Enter Your Name" id="loginBtn"/></p></form>

• Whenever doing something involving events

• First check the event handler is working!– A simple alert statement in the function

Accessing the formfunction login(){

var myForm=document.getElementById("loginForm");}


• The form is accessed through the id attribute– documentGetElementById() is used to access a specific part of an

HTML page

– In this case a reference to loginForm is stored in the variable myForm

Accessing the formfunction login(){

var myForm=document.getElementById("loginForm");var uName=myForm.userName.value;alert(uName)

}


• Individual form elements can then be accessed via their name attributes

• The value of the form element is the data it contains – what the user typed into the text field

• This value is stored in a variable – uName and displayed in an alert statement

Accessing the form

• Finally the function tests the value using an if statement – In this case they will receive an alert box saying ‘Incorrect username try

again’

function login(){var myForm=document.getElementById("loginForm");var uName=myForm.userName.value;if(uName=="Bill"){

location="home.html";}else{

alert("Incorrect username try again");}

}

What about other form elements?

• We can access checkboxes, radio buttons and drop down menus in similar ways

Form Objects - checkboxes<form id="sportForm">

<p>

Which of the following do you play?

<input type="checkbox" name="football"/> Football

<input type="checkbox" name="snooker"/> Snooker

<input type="checkbox" name="tennis"/> Tennis

<input type="button" value="click me" id="sportBtn"/>

</p>

</form>

function processForm(){var form=document.getElementById('sportForm')if(form.snooker.checked==true){

alert("You play snooker")}

}

• Properties of checkboxes– checked (has a value of true if the checkbox has

been selected)

Radio Buttons

• You should remember radio buttons from HTML– The key point is:– if we want radio buttons to

work together as a group they all need the same name element

<form id="quiz"><p>What is the capital of Australia?<br/><br/><input type="radio" name="ausQuestion" value="Sydney"/>Sydney<br/><input type="radio" name="ausQuestion" value="Perth"/>Perth<br/><input type="radio" name="ausQuestion" value="Canberra"/>Canberra<br/><input type="radio" name="ausQuestion" value="Melbourne"/>Melbourne<br/><br/><input type="button" value="Am I Right?" id="quizBtn"/></p></form>

Accessing Radio Buttons Using JavaScript

• If the radio buttons all have the same name value how can we access them?– They are accessible as an array (more on arrays in later weeks)



• Each radio button is numbered (starting at zero)

function process(){var quizForm=document.getElementById("quiz");alert(quizForm.ausQuestion[0].checked)

}

alert(quizForm.ausQuestion[0].checked)

• This line of code displays true if the first radio button has been selected and false if it hasn’t



• Canberra (the correct answer) is the third radio button in the group– ausQuestion[2] is the Canberra radio button

• We can use an ‘if’ statement to see if it has been checked


function process(){var quizForm=document.getElementById("quiz");if(quizForm.ausQuestion[2].checked==true){

document.write("You are correct");}else{

document.write("You are wrong");}

}

Dropdown Menus

• Dropdown menus are constructed using a <select> tag

• Each option is defined by an <option> tag

<form id="partyForm"><select name="party"><option value="http://www.labour.org.uk/home">Labour</option><option value="http://www.conservatives.com/">Conservative</option><option value="http://www.libdems.org.uk/">Liberal Democrats</option><option value="http://www.greenparty.org.uk/">Green</option></select><input type="button" value="Tell me more" onClick="process()"/></p></form>

Dropdown Menus


function process(){var quizForm=document.getElementById("partyForm");chosenOption=quizForm.party.selectedIndex;alert(chosenOption)

} • Like radio buttons, each option is numbered (starting at zero)

• We can find the number of the selected option using

quizForm.party.selectedIndex;

• E.g. if the user has selected Green chosenOption will have a value of 3

Dropdown Menus


function process(){var quizForm=document.getElementById("partyForm");chosenOption=quizForm.party.selectedIndex;location=quizForm.party[chosenOption].value

} • We can then look at the value of the chosen option

• If the user chooses green• chosenOption will have a value of 3• Location will have a value of

http://www.greenparty.org.uk

• The browser will display the green party home page

JavaScript and HTML forms

• Limitations of JavaScript form processing applications– Can’t save data

– If the user closes the browser window or moves to a different page all data is lost

Practical Session

• Form processing

cft2111 introduction to website development module leader: matthew mantle

Documents