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


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



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]


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)


Array examples - 1

var rack = [ ]; rack[0] = “first”; rack[1] = “Second”; or: var rack=[ “First”, “Second”]


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.


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”


Array property

length var myArray = [“first”,”second”,”third”]; var total = myArray.length; alert (total); //display in an pop-up alert

window



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


Functions (contd.)

Returning control - return statement, syntax:

return expression;examples:

return true;return false;return (x+y);return;



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?


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)


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">  </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>


functions must be placed in head section!!


Debugging JavaScript

Basic Debugging Techniques


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


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

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

Documents

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