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

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

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

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

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

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

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

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

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

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

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

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

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

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