JavaScript Overview

1
JavaScript Overview

• JavaScript is a simple programming language that
  can be written directly into HTML documents to
  allow for increased interactivity with the user
• HTML thrives in a static environment, while
  JavaScript allows dynamic user interaction, i.e.
  it allows to take inputs from the user, processes
  them and gives an output.

2
Embedding JavaScript into your HTML document

• Browsers recognize JavaScript due to the special
  ltSCRIPTgt ... lt/SCRIPTgt tag.
• The structure of an HTML document with embedded
  JavaScript
• lthtmlgt
• ltheadgt
• lttitlegtJavaScript in HTML lt/titlegt
• lt/headgt
• ltbodygt
• ltscript type text/javascriptgt
• (JavaScript Code goes here)
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

3
Variables

• Variables are like storage units and are created
  to hold values.
• It is important to know the proper syntax to
  which variables must conform
• -They must start with a letter or underscore
  ("_")
• -Subsequent characters can also be digits (0-9)
  or letters (A-Z and/or a-z).
• Remember, JavaScript is case-sensitive. (That
  means that MyVariable and myVariable are two
  different names to JavaScript, because they have
  different capitalization.)

4
Variables

• All variables have to be declared before their
  first usage using the syntax
• var variable name
• The declaration and assignment can be done
  together var variable name value
• JavaScript recognizes the following kinds of
  value
• -Numbers, such as 42 or 3.14159
• -Logical (Boolean) values, either true or false
  
• -Strings, such as "Howdy!"

5
if else statement

• The if-else statement provides a conditional path
  of execution
• The value of the variable can satisfy more than
  one expression in the compound statement.
  However, once a condition is satisfied, the
  appropriate statements are executed and the
  remaining conditions are not evaluated.

6
Loops

• Loops are used to repeat a block of code.
• You should understand the concept true and false,
  because it will be necessary when working with
  loops
• There are three types of loops for, while, and
  do..while.

7
For Loop

• The variable initialization allows you to either
  declare a variable and give it a value or give a
  value to an already existing variable.
• Second, the condition tells the program that
  while the conditional expression is true the loop
  should continue to repeat itself.
• The variable update section is the easiest way
  for a for loop to handle changing of the
  variable.

8
while loop

• While loops have code to execute while the
  condition is true
• An empty condition is not legal for a while loop
• The easiest way to think of the loop is that when
  it reaches the brace at the end it jumps back up
  to the beginning of the loop, which checks the
  condition again and decides whether to repeat the
  block another time, or stop and move to the next
  statement after the block.

9
dowhile

• The condition is tested at the end of the block
  instead of the beginning, so the block will be
  executed at least once.
• A do..while loop is basically a reversed while
  loop.
• A while loop says "Loop while the condition is
  true, and execute this block of code", a
  do..while loop says "Execute this block of code,
  and loop while the condition is true".

10
Do-While Loop

• This is syntax for looping
• DO
• some statements
• i
• WHILE (condition)

Starts the loop
Statements to repeat
increments through the array
Continues to increment as long as this condition
is true
11
Loops that never stop

• An infinite DO loop
• var i1
• do
• document.write("Lather")
• document.write("Rinse")
• document.write("Repeat")
• while (ilt2)

12
Loops that never stop

• An infinite for loop
• for (i0ilt10i--)
• document.write ("This is line " i)
• In practice, what this program does is completely
  stall the browser.

13
Nested Loops

• A loop within a loop
• The outside loop is initialized and tested
  (starts)
• Then the inner loop starts, and iterates
  completely through all of its cycles
• Then the outside loop continues

14
Nested Loops

• Start loop 1
• Start loop 2
• End loop 2
• End loop 1

15
Nested Loop Example

• ltscriptgt
• for(i0 ilt6 i)
• for(y0 ylti y)
• document.write("")
• document.write("This is line " i "ltbrgt")
• lt/scriptgt

16
Nested Loops

• Any loop type (for or do) can be nested inside
  any loop type
• Any number of loops can be embedded
• Each time you enter a loop from the top (new
  entry), the loop counter re-initializes
• Each time you enter a loop from the bottom
  (repeating), the loop counter continues to
  increment

17
Times Table Example (single loop)

• var i
• for( i1 ilt12i)
• document.write(i " " 1 " " (i1)
  "ltbrgt")
• Output
• 1 1 1
• 2 1 2
• 3 1 3
• 4 1 4
• 5 1 5
• 6 1 6
• (etc. up through 1 12 12)

18
Times Table Example (nested)

• ltscriptgt
• var t, i
• for (t 1 t lt 12 t)
• document.write("ltPgt")
• for (i 1 i lt 12 i)
• document.write(i " " t " " (it)
  "ltBRgt")
• lt/scriptgt

19
Inner loop iteration
1
2
3
4
5
6
Outer loop iteration
1
2
3
4
5
6
This is line 0

This is line 1
ltscript language"JavaScript"gt for(i0 ilt6
i) for(y0 ylti y) document.write("") d
ocument.write("This is line " i
"ltbrgt") lt/scriptgt lt/bodygt lt/htmlgt

This is line 2

This is line 3
This is line 4

This is line 5

20
Arrays

• Ordered collection of data, held under a single
  name. Each element of the array is a variable
  (string or numeric).
• var relayTeamnew Array( )
• relayTeam0 "Keane"
• relayTeam1 "Wolff"
• relayTeam2 "Lange"
• relayTeam3 "Herzberg"

21
Elements of an array

• Elements of array are variables, used in the same
  ways as any variable.
• Each element (item) has an index number that
  refers to its position in the array
• Dont confuse the value with the index number

22
Using the array

• First, set it up. Assign values to the items in
  the list.
• Syntax
• var Stuff new Array(5)
• Stuff43
• Stuff222
• Stuff10
• Stuff319
• Stuff045

23
Lets analyze this first
var Stuffnew Array(5) Stuff43 Stuff222
Stuff10 Stuff319 Stuff045
Stuff is the name of the array, and 5 is the size
of the array (5 items)
The value in brackets is the LOCATION (index
number) of the item in the array. The number to
the right of the is the VALUE of that item.
24
Now lets play around with it
Suppose we add a new assignment statement
This is what we had
This is what well get
STUFF
Stuff241
STUFF
45
45
0
0
5
22
19
19
3
3
25
Suppose we add a new assignment statement
Now this is what we have
This is what well get
STUFF
STUFF
Stuff137
45
45
0
0
5
5
19
19

7
3
26
Using loops with arrays

• Prompt for a series of names. After all names
  are entered, display them in a numbered list.
• Start with two variables
• var students new Array()
• var i0
• students array will store the names entered. i
  will be the counting variable

27

• do
• nextprompt("Enter the next name ")
• if (nextgt"")
• studentsinext
• i
• while (next gt "")

28
What did that do?

• Prompted for a string variable called next
• If a name was entered (nextgt"", meaning next is gt
  empty string), the name(value of next) is stored
  in the students array as itemi
• i is incremented.
• Loop repeats until the user doesn't enter a name
  (nextgt"" will be false if the user doesn't enter
  a name next will be "")

29
More loop examples

• To print only some items in an array
• Assume an array Grades() has been created, and
  contains the grades for all students on the first
  exam. To print only those grades over 90, what
  would you do?
• for(i0iltGrades.lengthi)
• if Gradesigt90
• document.write (Gradesi "ltbrgt")

30
Loop examples

• To increase all the grades by 10 points?
• for(i0iltGrades.lengthi)
• GradesiGradesi10

31
Careful!!!

• End every statement in JS with semicolon ().
  Never end an if(condition), for( ) or
  while(condition) line with a semicolon.
• Do not confuse assignment operator with
  relational comparison operator .
• Remember variable names are case sensitive and
  cannot have a space in between them.
• The operator means string concatenation. To use
  it for addition use Number(variable) or
  variable1