com311h zheng, school of c&m, uuj1 dynamic web authoring javascript basics (array and function)

COM311 H Zheng, School of C&M, UUJ 1

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

variableArrays – a collection of data Each element of an array is a variablea variable is a container to hold a

value an array is a container to hold

multiple valuesJavascript 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: fruitelements: fruit[0], fruit[1], fruit[2],fruit[3]length of the array: 4

6

Array elementfruit[ 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 0var 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

index Value 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!); //BOMNote: you can use // to add comments

behind a statement, or /* and */ to comment out a block of Javascript statments

Listing 1.3 <html><head><title> A Basic Function </title> <script type="text/javascript" language="JavaScript"> <!--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 --> </script> </head> <body bgcolor="white"> <p> Please type your name and click the button. </p> <form name="myform"> <input type="text" size="30" name="visitor”> <br/ > <input type="button" name="mybutton" value="Do Something"

onclick="doSomething();"> </form> </body></html>

COM311 H Zheng, School of C&M, UUJ 19

functions must be placed in head section!!

COM311 H Zheng, School of C&M, UUJ 20

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