29 November

JavaScript:Arrays and Iterations

Functions

Final Project Teams

Select teams Few minutes to get you started

Review: Forms and JavaScript

HTML Additions Using forms (in body)

<form id=”name”><input>

<select> … </select> …</form>

Using JavaScript (in head or body)<script type="text/javascript">… code …

</script>

Types of Inputs Radio Buttons

<input type=“radio” name=“name for all buttons” value=“value to be assigned” [checked]>

Checkbox<input type=“checkbox” name=“name for this option” [checked]>

Text box<input type=“text” name=“name for this field” [value=“initial value”]>

Types of Inputs Select List

<select name=“name for this list” size=“number-of-entries-to-show”>

<option value=“value-to-be-stored” [selected=”selected”]>

Text to be displayed</option>

…</select>

Buttons<input type=“button” value=“name to be displayed” onclick=“what to do when the button is clicked”>

Example

A form that does nothing

JavaScript in HTML

Need to indicate the use of JavaScript

Two ways: <meta content=“text/javascript”> <script> … </script> <script type="text/javascript"> …

</script>

JavaScript

Defining a variable Numeric, string, boolean Var name = value;

Assignment statement Name = expression;

Using statements in forms

An example:Shots: <input name="shots“ onclick="num_shots= 1" type="radio"> 1 <input name="shots" onclick="num_shots = 2"

type="radio"> 2

Compound Statements Conditional statements Iterations (doing it more than once) Functions (an algorithm that can be

executed more than once)

All need compound statements – multiple statements that can be processed as one { stmt; stmt; stmt; }

Conditional Statements Executes the statement only if a condition is true

Format: if (boolean) statement;

/* if purchase made, increase total purchase price and the number of items bought */if (purchased = true) {

total = total + price;items = items + quantity;};

Executes the first statement if a condition is true or the second if it’s false

Format: if (boolean) statement; else statement;/* take the absolute value */if (n < 0)

abs_val = !n;else

abs_val = n;

Arrays and Iterations

Arrays

Arrays are variables with dimensions Why are they interesting?

Dealing with a table of values Translations Series of different values

Processing a stretch of elements Strings Series of numbers

Arrays in JavaScript Declaration

var name = new Array (num-elems); Examples

var ZodiacSigns = new Array (12); Or can initialize

Var HalfZodiacSigns = new Array (“Aries”, “Taurus”, “Gemini”, “Cancer”, “Leo”, “Virgo”);

Referencing Arrays Array element can be referenced any

place that a constant or variable can be used

Form: array [ index ] Array is the name Index is which element of the array you want

Can be a constant, variable, or expression Must evaluate to an integer between 0 and one less

than the array size Example

MySign = HalfZodiacSigns[0]; What value does MySign have?

Iterations: Doing it more than once If I want to process all of the elements in

an array, I need to tell the computer to do something for each element:

Form that we will usefor ( itervar = 0; itervar < endval ; itervar++) {

Statement-list}

var++ is a shorthand that is equivalent to var = var + 1;

What it does

for ( i = 0 ; i < n ; i++) {Statement-list}

1. i = 0;2. execute statement-list3. i = i + 1;4. if i < n go to #2

Iteration Example

var numbers = new Array (10);var j;/* initialize an array to 1 to 10 */for ( j=0; j<10; j++) { numbers[j] = j+1; }

Loops with conditionals

var values = new Array (10);var results = new Array (10);var j;for ( j=0; j<10; j++) { if (values[j] < 0)

results[j] = -j; else

results[j] = j; }

Recognizing events in forms Primary one: onclick

Others: onfocus, onmouseover, … http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.3

Attribute within an <option> tag <input value="latte" onclick=“buy_latte()"

type="button"> <input name="shots" onclick="num_shots

= 2" type="radio"> The command that is in that field is

executed when the button is clicked on

Functions as Actions

Just like a mathematical function Executes its description

f(x) = 2x: f(2) = 4, f(3) = 6 Indicated by () following the name

Value passed is called the parameter Replace the formal parameter with

the value passed

A Simple JavaScript Function

Invocation: f(2);

Definition: function f(x) {

result = 2*x;}

Head Section

Material in head section known everywhere

All function definitions go there Variables needed everywhere go

there

Surrounded by <script>…</script>

Learning by Example

onclick="buy_latte()“ Function is buy_latte Can pass it a value to work with in () Will also have access to everything

within the forms Referenced by document.form_name.input_name.value

Let’s look at some examples http://www.cs.unc.edu/~pozefsky/BeanCounter23.html http://www.cs.unc.edu/~weiss/COMP14/SimpleCalc.html

Class example (error was missing () in callfunction invocation)