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) … Using JavaScript (in head or body) … code …

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”> Text to be displayed … 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: …

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 use for ( 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-list 3. 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, … Attribute within an tag 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 …

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 Class example (error was missing () in callfunction invocation) Class example