1. Dynamic Web Authoring JavaScript – Array and function (2) COM311H Zheng, School of C&M, UUJ1

2. Teaching Plan Feedback on Week4 practical More on Array and function Week 5 practicals COM311 H Zheng, School of C&M, UUJ 2

3. Issues observed in Practical When using javascript function, make sure place it within the head section javascript library – plain text file, can take more than one function Don’t use copy&paste, type the code yourself Use only one block if possible Always use debugging tools!! Reading list is available on Blackboard COM311 H Zheng, School of C&M, UUJ 3

4. Access object values/properties from html form Using object names var visitorname = document.myform.visitor.value; Using element IDs var visitorname = document.getElementById( ' visitorid ' ).value; COM311 H Zheng, School of C&M, UUJ 4

5. Display results window.alert( ) => pop up alert window window.document.write( ) => open a new document and display the information document.getElementById(id).innerHTML = new HTML => change the content of an HTML element on the same page Hello World! (or: ) document.getElementById("p1").innerHTML = "New text!"; COM311 H Zheng, School of C&M, UUJ 5

6. Access other form objects - image In javascript: alertText =document.myform.photo.src; Window.alert(alertText); In html form ‘myform’: COM311 H Zheng, School of C&M, UUJ 6

7. Access other form objects - checkbox In html form ‘myform’: Email Mobile Post Visit In javascript: Window.alert(document.myform.contact[0].value); COM311 H Zheng, School of C&M, UUJ 7

8. Access to form element – selection menu In html form ‘myform’: QUB Ulster In javascript: var myUniID = document.myform.Uni; var myUni = myUniID.options[myUniID.selectedIndex].value; COM311 H Zheng, School of C&M, UUJ 8

9. Assign a value to html element/object using javascript window.document.myform.visitor.value = ''John''; document.getElementById('visitorID').inn erHTML=''John"; COM311 H Zheng, School of C&M, UUJ 9

10. Using html in javascript html tags can be used in Javascript code by placing them with double quotes using window.document.write( ): window.document.write('' ''); window.document.write('' This is a test. ''); COM311 H Zheng, School of C&M, UUJ 10

11. Function function add(a, b) { return a + b; } Call function: var sum = add(2, 2); COM311 H Zheng, School of C&M, UUJ 11

12. Function function add(a, b) { return a + b; } function add3(a,b,c){ var addtwo = add(a,b); var result= add(addtwo, c); return result; } COM311 H Zheng, School of C&M, UUJ 12

13. exercise Write a function that calculates average of two exam marks. COM311 H Zheng, School of C&M, UUJ 13

14. practical Create an online calculator that calculates two numbers that user input and display the result. Input value to the form text field is string type To convert a string to a number, you can use parseFloat() or parseInt() method. var number = “32”; parseInt(number); COM311 H Zheng, School of C&M, UUJ 14