COM311H Zheng, School of C&M, UUJ1 Dynamic Web Authoring JavaScript Basics (Array and Function)

Teaching Plan Feedback on week3 practicals Array Function Method COM311 H Zheng, School of C&M, UUJ 2

Feedback on practicals Errors caused when copy & paste codes from word document – try to avoid Error – imaging loading Variable name: “function” – reserved word How to check the results window.document.write ( ) Use comments Submission: Only submit a correct live link once, no file upload at this stage Feedback – in class, and lab COM311 H Zheng, School of C&M, UUJ 3

COM311 H Zheng, School of C&M, UUJ 4 Array The array is a special type of variable Arrays – a collection of data Each element of an array is a variable a variable is a container to hold a value an array is a container to hold multiple values Javascript Array is an array object

Array example strawberry orange apple watermelon fruit1 fruit2 fruit3 fruit4 fruit[0] fruit[1] fruit[2] fruit[3] COM311 H Zheng, School of C&M, UUJ 5 Array identifier: fruit elements: fruit[0], fruit[1], fruit[2],fruit[3] length of the array: 4

6 Array element fruit[ 0 ] Identifier Square bracket Index

7 fruit = new Array( 4 ) identifier of the new instance of Array, or name of the Array The ‘new’ operator creates an instance This is the parent object of the new instance Length of the new fruit Array Pair of parentheses ‘assignment’ operator

Define an array The numbering of an array always begins at 0 var array_identifier = new Array(); var array_identifier = new Array(length); var array_identifier = new Array (element1, element2, element3,…elementn) COM311 H Zheng, School of C&M, UUJ 8

Array examples - 1 var rack = [ ]; rack[0] = “first”; rack[1] = “Second”; or: var rack=[ “First”, “Second”] COM311 H Zheng, School of C&M, UUJ 9 indexValue of element 0“First” 1“Second”

Array examples - 2 var numberArray = [1, 2, 3, 5, 8, 13, 21, 34]; var stringArray = ["Veni", "Vidi", "Vici"]; var mixedArray = [235, "Parramatta", "Road"]; Exercise: Define 4 Ulster campus using an Array. COM311 H Zheng, School of C&M, UUJ 10

Array of arrays var subArray1 = ["Paris", "Lyon", "Nice"]; var subArray2 = ["Amsterdam", "Eindhoven", "Utrecht"]; var subArray3 = ["Madrid", "Barcelona", "Seville"]; var superArray = [subArray1, subArray2, subArray3]; var city = superArray[0][2]; // get the third [2] element of the first [0] array, “Nice” COM311 H Zheng, School of C&M, UUJ 11

Array property length var myArray = [“first”,”second”,”third”]; var total = myArray.length; alert (total); //display in an pop-up alert window COM311 H Zheng, School of C&M, UUJ 12

COM311 H Zheng, School of C&M, UUJ 13 Function Function: a set of statements for a designed task Define a function: function function_name(parameter1, parameter2,…) { JavaScript Statements } List of arguments taken, can be empty, when called, need to have same length and order Valid identifier name

Functions (contd.) Defining functions – All variables declared in function are called local Do not exist outside current function – Parameters Also local variables – Promotes reusability Keep short Name clearly COM311 H Zheng, School of C&M, UUJ 14

Functions (contd.) Returning control - return statement, syntax: return expression ; examples: return true; return false; return (x+y); return; COM311 H Zheng, School of C&M, UUJ 15

COM311 H Zheng, School of C&M, UUJ 16 Function example: function doSomething( ){ var theVisitor = document.myform.visitor.value; Window.alert(“Is this OK,” + theVisitor + “?”); } function twoAdd(a, b){ var theResult = a+b; return theResult; } Q: how to call the function?

COM311 H Zheng, School of C&M, UUJ 17 Method Methods - Actions that are performed with or to an object can be used to: Open a new browser window Write text to the current XHTML document Navigate the browser history Display a dialog box Syntax: object name. method name (parameters)

COM311 H Zheng, School of C&M, UUJ 18 Method (contd.) Two useful output methods: document.write(“Greetings JavaScript Students”); window.alert (“You got 5 marks!); //BOM Note: you can use // to add comments behind a statement, or /* and */ to comment out a block of Javascript statments

Listing 1.3 A Basic Function <!--Hides scripts from really old browsers. function doSomething(){ var theVisitor = document.myform.visitor.value; window.alert("Is this OK, " + theVisitor + "?"); //document.write("Is this OK, " + theVisitor + "?"); } //ends script hiding --> Please type your name and click the button. COM311 H Zheng, School of C&M, UUJ 19 functions must be placed in head section!!

COM311H Zheng, School of C&M, UUJ20 Debugging JavaScript Basic Debugging Techniques

COM311 H Zheng, School of C&M, UUJ 21 Logic and Debugging Debugging Act of tracing and resolving errors in a program Three types of errors Syntax Invalid or incorrect statements Missing symbols (e.g., curly brace) Incorrect spelling or mistypes Using different case when referencing variables Run-time Call to function that hasn’t been defined Referencing a variable that hasn’t been declared Division by zero Logic Performing one operation when another is intended e.g., multiplying instead of dividing Infinite loops

COM311 H Zheng, School of C&M, UUJ 22 Debugging – show example in class In Firefox: Firefox produces the most sensible and helpful messages of current browsers Tools => Web Developer=> Error Console In IE versions higher than 4: Must turn on error notification Tools menu => Internet Options => Advanced In Browsing category: Select “Display a notification about every script error” In Safari, if you have web developer tool, you can use Error console too. In Opera: Tools => advanced => Error Console In Chrome, view => developer => Javascript console Messages don’t always identify the actual problem Don’t assume that the problem is only with the line number shown in the error message Tracing Errors with the alert() or write() Methods