Programming Basics

1
Programming Basics

• Guide to Web Page Creation and Design and
  JavaScript
• pgs. 119 - 144

2
Goals

• Learn some basic programming techniques and
  terminology
• These include
• Variables
• scope
• Operators
• Arithmetic, logical, assignment
• Precedence
• Branching looping
• Objects
• Functions

3
Some important things

• var
• The keyword var declares a variable with the name
  given.
• There are two forms
• var name
• var name "value"
• denotes the end of a statement,

4
JavaScript Basics

• Allows Variables of three types
• String, Numerical, Boolean EXAMPLES
• var letters Hello World
• var doYou true
• Or
• Var doYou confirm(Do you like Enterprise?)
• var theAnswer 42

5
Prompting for and storing User Input

• JavaScript Variable named memory location inside
  computer.
• var name
• name prompt(Please enter your name., " ")

name
name
Mary
Example NamePrompt.html
6
Variables as Strings

• Store Strings of text in variables
• String literals
• examples var greeting hello there
  var numberCharacters 123
• Concatenation
• var dog Scooby Doo
• document.write(dog)
• Scooby Doo

7
Variables as numbers.

• JavaScript has arithmetic operators add
  var addIt 2 3- subtract var subIt 3 -
  2 mult. var multIt 3 2/ divide
  var divIt 8 / 4 modulo var modIt 8 3
• Example DogPrompt.html

8
Gotchas

• Note that
• var something 42
• And
• var something 42
• Are NOT the same thing. Why?

9
Gotchas In Practice

• Given
• var a 123
• var b 456
• var combined a b
• What would the value of combined be?

10
Gotchas In Practice 2

• Given
• var a 123
• var b 456
• var combined a b
• What would the value of combined be?

11
Math rules of Precedence

• Unary -
• , /,
• , -

• Operators evaluated in order of precedence.
• Operators of the same precedence evaluate from
  left to right.
• Parentheses to over-ride precedence.
• Parenthesized expressions eval from in to out

12
Simple Precedence Example

• var expression1 30 - 9/32 (54)/(36)
• expression1 30 - 3 2 (9) / (9)
• 30 - 6 1
• 25
• var expression2 (5-1)2 (102)/3
• expression2 (4) 2 (12) / 3
• 8 4
• 12
• Example Precedence.html

13
Assignment Operators

• Assign a value to a variable using the sign
• Ex x 10
• This assigns 10 to variable x
• There are other shortcut assignment operators

14
More on Variables

• JavaScript is loosely typed - up to you to keep
  tabs on the type of data stored in variables.
• Example 2 running
• The scope of a variable determines where it can
  be used
• If a variable is defined within a function it is
  called a local variable
• Doesnt exist outside the function
• Global variables are defined outside of functions
  in JavaScript
• Scope.html

15
The Math ObjectMath.

• ceil(x)
• floor(x)
• round(x)
• abs(x)
• sqrt(x)
• min(x,y)
• max(x,y)
• pow(x,y)

Math.ceil(23.2) Math.floor(25.85) Math.round(25.8
5) Math.abs(-23) Math.sqrt(25) Math.min(23,43) Mat
h.max(23,43) Math.pow(2,8)
Example MathFunctions.html
16
Lets make change example
var price parseFloat(prompt("Enter the purchase
price "," ")) var pennies 100 - price var
quarters Math.floor(pennies / 25) pennies
pennies 25 var dimes Math.floor(pennies /
10) pennies pennies 10 var nickels
Math.floor(pennies / 5) pennies pennies 5
17
Working through a JavaScript Example
var price parseFloat(prompt("Enter the purchase
price ", " ")) Price is 22 var pennies 100 -
price pennies is assigned the value of 78 cents
here. var quarters Math.floor(pennies / 25)
quarters? ______ pennies pennies 25 What
value is pennies assigned here? ______ var dimes
Math.floor(pennies / 10) dimes? ______ pennies
pennies 10 pennies? ______ var nickels
Math.floor(pennies / 5) nickels? ______ pennies
pennies 5 pennies? ______
78 / 25
3
3
78 25
3 / 10
0
3
3 10
3 / 5
0
3
3 5
Example MakeChange.html
18
Creating new instances of Objects

• To do something unique to your page you might
  need to create an instance of an object and use
  it in your own script.
• 7 constructors we can use Array( ) Date( )
  Function( )Image( ) Option( )
  String( ) Object ( )
• EXAMPLE 3 var thingy new Object( )
  thingy.name Voyager

19
Arrays

• recall variables name memory locations
• What if you want to store more than one item and
  you want to keep them together?
• use an array
• Array is a JavaScript object
• store an array as a var
• actually points to start of array
• var nums new Array()
• this defines a new array called nums

20
Array Use
var nums new Array() var average nums0
2 nums1 4 nums2 12 average (nums0
nums1 nums2) / 3 alert("The average is "
average "!")

• To access the individual memory locations in the
  array we use an index, denoted i
• Example Array.html

nums
21
Flow Control Statements

• Sequential
• The default
• Automatically execute next instruction
• BranchingSelection
• skip instructions
• if if-else switch
• LoopingRepetition
• repeat instructions
• while do-while for

22
Selection Statements

• IF Statement
• select between alternative code segments
• SWITCH Statement
• executes code based on values in selector
  variable

23
Selection Statements

• if else Statementif (expression )
  statementelse statement

• if Statementif (expression ) statement

Relational Operators lt Less than lt Less than or
equal gt Greater than gt Greater than or equal
Equal ! Not Equal
Highest precedence
Lowest precedence
24
From Task 3 IF ELSE demo

• var testit confirm(Do you agree with
  everything I say?)
• if (testit)
• document.write("ltbgt Yes! You already agreed to
  everything I say. lt/bgt")
• else
• document.write("ltbgt No! OK, everyone is entitled
  to an opinion.lt/bgt")

25
IF ELSE with relational operators
var numberOrdered 99 if (numberOrdered lt
100) // calculate retail cost var total
19.95 numberOrdered document.write(Your
Total Cost total) else //
calculate wholesale cost var total 12.95
numberOrdered document.write(Your Total Cost
total)
26
Truth Tables (Logical Operators)
(score gt 80) (score lt 90)

AND A B A B false false false false
true false true false false true true true
Questions evaluate if score 95 score
85 score 79
False true false
OR A B A B false false false false t
rue true true false true true true true
(score gt 80) (score 90)
Questions evaluate if score 95 score
85 score 79
true true false
27
IF ELSE with Logical Operators
if (percentCorrect gt 90 percentCorrect
lt100) document.write(Grade is A) else if
(percentCorrect gt80 percentCorrect lt90)
document.write(Grade is B) else if
(percentCorrect gt50 percentCorrect lt 80)
document.write(Grade is C) else
document.write (Grade is -- well, not so good -
it is F)
Example IfElse.html
28
The switch statementanother way to select things
switch (variable) case value statement
1 . statement n break case
value case value statement 1 .
statement n break default optional
statement statement
Example Switch.html
29
Repetition in JavaScript

• while
• initial_expression
• while (condition_expression)
• statements
• loop_count

• for
• for (initial_expression condition_expres
  loop_count)
• statements

30
Task 5 - the While loop
T1.gif
T2.gif
T3.gif
T4.gif
T5.gif
T6.gif
T7.gif
T8.gif
T9.gif
T10.gif
i 1 while(ilt10) imgsi new Image()
//T1.gif thru
T10.gif imgsi.src "T" i ".gif"
i //i i 1
31
Task 5 - the While loop
T1.gif
T2.gif
T3.gif
T4.gif
T5.gif
T6.gif
T7.gif
T8.gif
T9.gif
T10.gif
i 1 while(ilt10) imgsi new Image()
//T1.gif thru
T10.gif imgsi.src "T" i ".gif"
i //i i 1
ltIMGgt
ltIMGgt
ltIMGgt
ltIMGgt
ltIMGgt
ltIMGgt
ltIMGgt
ltIMGgt
ltIMGgt
ltIMGgt
1 2 3 4 5
6 7 8 9 10
32
Task 5 - the While loop
T1.gif
T2.gif
T3.gif
T4.gif
T5.gif
T6.gif
T7.gif
T8.gif
T9.gif
T10.gif
i 1 while(ilt10) imgsi new Image()
//T1.gif thru
T10.gif imgsi.src "T" i ".gif"
i //i i 1
1 2 3 4 5
6 7 8 9 10
T1.gif T2.gif T3.gif T4.gif T5.gif
T6.gif T7.gif T8.gif T9.gif T10.gif
33
Task 5 - Changing to a For loop
T1.gif
T2.gif
T3.gif
T4.gif
T5.gif
T6.gif
T7.gif
T8.gif
T9.gif
T10.gif
i 1 while(ilt10) imgsi new Image()
//T1.gif thru
T10.gif imgsi.src "T" i ".gif"
i //i i 1
for(i 1 ilt10 i)
34
ltIMG SRC"T1.gif" WIDTH"32" HEIGHT"32"
ALIGN"bottom" name"anim"gt
File name is T1.gif Name for THIS entire IMG tag
is anim
ltinput TYPE"button" NAME"Button" VALUE" Wave
" onclick"runit()"gt
ltinput TYPE"button" NAME"Button" VALUE" Stop
" onclick"stopit()"gt
35
form and function
ltform ACTION METHOD"POST"gt ltpgt ltimg
SRC"T1.gif" WIDTH"32" HEIGHT"32
ALIGN"bottom" name"anim"gt ltbrgt ltinput
TYPE"button" NAME"Button" VALUE" Stop "
onclick"stopit()"gt ltinput TYPE"button"
NAME"Button" VALUE" Wave " onclick"runit()"gt
lt/pgt lt/formgt
anim
36
What happens
User clicks Wave
onclick calls runit( )
runit( ) calls initimages( )(the while loop you
need to change to a for loop)
runit( ) also calls animate( )
37
form and function
/ The user click on the Wave button onclick
runit(). / runit( ) calls animate( ) / show
images 1 to 10 / function animate() if
(counter lt 10) counter counter 1 else
counter 1 document.anim.src
imgscounter.src timer setTimeout("animate(
)",100)
1 2 3 4 5
6 7 8 9 10
T1.gif T2.gif T3.gif T4.gif T5.gif
T6.gif T7.gif T8.gif T9.gif T10.gif
38
What you will need to do for Task 4

• Copy animate.html to your www folder.
• Copy all 13 images to your www folder.
• Work with your copy of animate.html so that the
  bush grows and dies
• AFTER you have animate working with the bush,
  change the while loop to a for loop.
• When this is working, copy the code from
  animate.html into assign5.html
• Copy the code from within the BODY tagsDO NOT
  copy the BODY tags themselves!

39
Lab 5, Task 5

• Seek out other JavaScripts and incorporate them
  into your web page.(example)
• 3 marks total - Of the 3 marks, 1 will be for the
  quality/interest/slickness of JavaScripts chosen.
  
• Under Task 5 in your assign5.html document, write
  a sentence or two to accurately describe what
  each of the scripts does and give the URL or
  reference from the place you acquired it.