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)