Today We Are Covering

1
Today We Are Covering

• JavaScript Loops
• Writing to the HTML document
• Opening a web page in a new window

2
JavaScript Loops

• You can make your JavaScript program do the same
  set of steps over and over again
• Useful for repeating steps of an algorithm until
  the algorithm has finished computing an accurate
  answer to the problem
• An example of an algorithm like this was Newtons
  method which we will study here

3
Overview of Loops

• A loop surrounds a block of JavaScript statements
  that are usually placed in
• loop control statement
• Statements to do inside the loop
• statement(s) to execute after the loop exits

4
Overview of Loops

• Loops use a relation to decide when to stop
  looping just like if ( ) used a relation to
  choose between two sets of statements
• A relation has a true/false value
• In a loop, a relation has following meaning
• True ? Continue looping
• False ? Stop the loop and do the next statement
  after the loop, i.e. after the closing

5
Overview of Loops

• When the relation is true, the loop continues
• When the relation becomes false, the loop is
  terminated and the next statement after the loop
  is executed
• If you define the relation incorrectly or fail to
  update it properly when looping, the loop may
  never terminate ? an infinite loop

6
JavaScript Loops

• There are three kinds of Loops
• while
• for
• do while
• Each loop works similarly, but there are some
  differences
• Well cover both aspects of each

7
while Loop

• initialize for the loop
• while (relation)
• JavaScript statements
• update the relation for terminating the loop
• / eventually the relation becomes false /
• JavaScript statement(s) after the loop exits

8
while Loop

• Need to initialize any variables used inside the
  loop before the while statement and need to
  update relation inside the while loop
• var i 0
• while (i lt 10)
• JavaScript statements using i
• i i 1
• / eventually i lt 10 will become false /

9
for Loop

• for (initialize relation update)
• JavaScript statements
• / eventually the relation becomes false /
• JavaScript statement(s) after the loop exits

10
for Loop

• With for loop, you initialize a variable, state
  a relation for terminating the loop, and do
  update for the relation all in one place
• for (var i 0 i lt10 i i 1)
• JavaScript statements using i
• / eventually i lt 10 will become false /

11
do while Loop

• initialize for the loop
• do
• JavaScript statements
• while (relation)
• / eventually the relation becomes false /
• JavaScript statement(s) after the loop exits

12
do while Loop

• var i 0
• do
• JavaScript statements using i
• i i 1
• while (i lt 10)
• / eventually the relation becomes false /
• JavaScript statement(s) after the loop exits

13
do while Loop

• Warning with do while loop
• The loop will execute one more time than a while
  or for loop because the relation is checked at
  the end of the loop statement(s)
• The loop will execute one time even if the
  relation is false at the beginning

14
Try One of these Loops

• Use an alert inside the loop to display the loop
  variable in a popup during the loop
• For example
• for (var i 0 i lt 5 i i 1)
• alert(The value of i is i)

15
Output to the Web Page

• JavaScript code can output to the web page
• document.write(HTML to display)
• Note Inside ( ) use HTML code again
• If you put document.write statements in the web
  page, it will display the HTML in the JavaScript
  location between the other HTML on the page
• The power JavaScript is that the HTML displayed
  on the page can be computed based on a user input
  and/or an algorithm

16
Example of document.write

• ltpgtHere is the solution to your problem
• ltscript LanguageJavaScriptgt
• document.write(a b c)
• lt/scriptgt
• . Isnt that great!lt/pgt

17
Example of document.write

• If user had entered values for a, b, and c such
  that a 5, b 2, and c 4
• The HTML and JavaScript output shows
• Here is the solution to your problem 3. Isnt
  that great!
• We couldnt have done that arithmetic on our web
  page without the JavaScript!

18
Closing the document

• JavaScript code can finish the output to a web
  page (stops the loading bar movement)
• document.close ( )
• This behaves the same as reaching lt/htmlgt at the
  end of our web page file.
• Closes document, but leaves window open

19
Opening a New Window

• The window.open ( ) function opens a new window
  with a URL as the argument
• Example
• window.open(http//www.umb.edu)
• It opens a new browser window to display the URL
  given as the argument
• It leaves the current window open

20
Closing the Current Window

• The window.close( ) function closes the current
  window not just the document