CFT2111 Introduction to Website Development Module Leader: Matthew Mantle

1. CFT2111 Introduction to Website Development Module Leader: Matthew Mantle e-mail: m.e.mantle@hud.ac.uk

2. 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"); } • If the user enters Tuesday, Jones and No into the prompt boxes what will the script output? • If the user has entered Sunday, Smith and No into the prompt boxes what will the script output?

3. 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"); } • If the user enters Tuesday, Jones and No into the prompt boxes what will the script output?Deliver 2 bottles to the Jones family

4. 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"); } 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

5. Today’s Lecture • Functions • Event Handlers • Forms

6. Functions functiondoSomething(){ document.body.style.backgroundColor="red" }; • A function is simply a block of code we give a name to • The bits in green always remain the same

7. Functions function doSomething(){ document.body.style.backgroundColor="red" }; • 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.

8. Functions function doSomething(){ document.body.style.backgroundColor="red" }; • Next we have a set of curved brackets () • These are called parentheses

9. Functions function doSomething(){ document.body.style.backgroundColor="red" }; • 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

10. Functions function doSomething(){ document.body.style.backgroundColor="red" }; • 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

11. Functions function doSomething(){ document.body.style.backgroundColor="red" }; • If we run this code in a browser • Nothing will happen • Code inside functions only runs when the function is called

12. Functions function doSomething(){ document.body.style.backgroundColor="red" }; doSomething(); • To call a function we write the function name followed by the parentheses.

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

14. How do event handlers work? <a href="somepage.html" id="testLink">This is a hyperlink </a> • In the HTML page we need to give an id attribute to the element we want to attach the event to function doSomething(){ document.body.style.backgroundColor="red" }; 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

15. How do event handlers work? <a href="somepage.html" id="testLink">This is a hyperlink </a> • In the HTML page we need to give an id attribute to the element we want to attach the event to function doSomething(){ document.body.style.backgroundColor="red" }; 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

16. Here’s another example? <input type="button" value="click me" id="testBtn"/> • In the HTML page we need to give an id attribute to the element we want to attach the event to 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

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

18. 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) }

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

20. HTML Recap • 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 <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>

21. HTML Recap • Each element in the form is defined by an <input> tag • This has a name attribute of userName • Becomes very important in a moment <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>

22. function login(){ alert("working"); }; var btn = document.getElementById("loginBtn"); if(btn.addEventListener){ btn.addEventListener("click", login, false) }else{ btn.attachEvent("onclick",login) } The event handler • Whenever doing something involving events • First check the event handler is working! • A simple alert statement in the function <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>

23. Accessing the form function login(){ var myForm=document.getElementById("loginForm"); } <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> • 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

24. Accessing the form function login(){ var myForm=document.getElementById("loginForm"); var uName=myForm.userName.value; alert(uName) } <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> • 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

25. Accessing the form function login(){ var myForm=document.getElementById("loginForm"); var uName=myForm.userName.value; if(uName=="Bill"){ location="home.html"; }else{ alert("Incorrect username try again"); } } • Finally the function tests the value using an if statement • In this case they will receive an alert box saying ‘Incorrect username try again’

26. What about other form elements? • We can access checkboxes, radio buttons and drop down menus in similar ways

27. 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> • Properties of checkboxes • checked (has a value of true if the checkbox has been selected) • function processForm(){ • var form=document.getElementById('sportForm') • if(form.snooker.checked==true){ • alert("You play snooker") • } • }

28. Radio Buttons <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> • 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

29. Accessing Radio Buttons Using JavaScript <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> • 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)

30. Accessing Radio Buttons Using JavaScript function process(){ var quizForm=document.getElementById("quiz"); alert(quizForm.ausQuestion[0].checked) } • Each radio button is numbered (starting at zero) <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> 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

31. Accessing Radio Buttons Using JavaScript function process(){ var quizForm=document.getElementById("quiz"); if(quizForm.ausQuestion[2].checked==true){ document.write("You are correct"); }else{ document.write("You are wrong"); } } • 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 <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>

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

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

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

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

36. Practical Session • Form processing