1. CISW 400 - CRC - Fishman 2014 / 2015 PRESENTATION 4b: CISW 400 (Online) – Client-side Scripting for the Internet Cosumnes River College Fishman – 2015

2. CISW 400 - CRC - Fishman 2014 / 2015 In this presentation we show you how to create those sometimes irritating Pop-up Windows on a Web Page. Controlling Browser Windows in JavaScript involves a few other techniques, namely Loops and Functions. Click here to see examples of Pop-up Windows PRESENTATION 4b:

3. CISW 400 - CRC - Fishman 2014 / 2015 A. Loops B. Functions C. Controlling Windows

4. CISW 400 - CRC - Fishman 2014 / 2015 Loops: A Loop is a sequence of instructions that is cont- inually repeated until a certain condition is reached. Definition:  Loops are typically used for counting or repeating elements within a program.  JavaScript adopts Looping conventions similar to the C, C++, and Java programming languages. for ( initialize; test; increment ) { statement } Syntax:

5. CISW 400 - CRC - Fishman 2014 / 2015 Example 1: Notes: for (var i=0; i<10; i++) // count to 10 document.write(i);  The variable “i” is called a counter variable.  Curly braces are not required if there is only one command inside of the loop. Loops:

6. CISW 400 - CRC - Fishman 2014 / 2015 Example 2: Multiple Loop Variables for (var i=0,j=0; i<10; i++,j--) { sum+=i*j; } Example 3: From Shopping Cart Script* for (i in ShoppingCart) { total = total + ShoppingCart[i].price; if (ShoppingCart[i].itemNum != 0) display(ShoppingCart[i]) } JavaScript Loops Examples: * Example 3 illustrates the use of arrays, a topic we'll discuss in future lessons.

7. CISW 400 - CRC - Fishman 2014 / 2015 While Loop: while (expression) statement Syntax: Example 3: while (count<10) { document.write(count) count++; count=0; // initialize counter // count to 10 A While Loop repeats until a certain condition is met, rather than looping a set number of times. While loops are useful in situations where you cannot necessarily predict how many times your loop will repeat. For example, you may want your code to repeat until the user enters a correct password. }

8. CISW 400 - CRC - Fishman 2014 / 2015 A. Loops B. Functions C. Controlling Windows

9. CISW 400 - CRC - Fishman 2014 / 2015 A Function is a named section of a program that performs a specific task. Definition:  Functions are good for reducing redundant code and for compartment- alizing programs into organized modules.  Writing functions is analogous to creating new commands. function fname( [arg1 [,arg2[...,argn]]] ) Syntax: Functions: {statements}

10. CISW 400 - CRC - Fishman 2014 / 2015 CISW400 function example function count() { For (i=0;i<10;i++) document.write(i); } counting: count; * counting again: count; * Example 1: Basic Function Declaration Function Calls * Note: This example will not actually run. It is only meant to paint the big picture here.

11. CISW 400 - CRC - Fishman 2014 / 2015 CISW400 function example function count(MAX) { For (i=0;i<MAX;i++) document.write(i); } counting to 10: count(10); ** counting to 18: count(18); ** Example 2: Passing Arguments * Note: This example will not actually run. It is only meant to paint the big picture here.

12. CISW 400 - CRC - Fishman 2014 / 2015 A. Loops B. Functions C. Controlling Windows

13. CISW 400 - CRC - Fishman 2014 / 2015 Controlling Windows: 1. Changing the Existing Window 2. Opening a New Window  JavaScript gives the HTML programmer significantly more control over the browser window. There are two general types of changes that can be made to browser windows:  The following presentation slides list the commands and syntax for changing and opening Browser Windows in JavaScript. For a more details refer to the textbook.

14. CISW 400 - CRC - Fishman 2014 / 2015 Changing Window Location Writing to the Status Bar Closing a Window Moving a Window Resizing a Window Setting Window Focus Changing History Changing Existing Window: Controlling Windows:

15. CISW 400 - CRC - Fishman 2014 / 2015 window.location="page2.htm" Changing Window Location Controlling Windows:  Here, location refers to the URL or filename of the HTML document to be loaded into the browser.

16. CISW 400 - CRC - Fishman 2014 / 2015 window.status="whatareyoulookingat?"; Writing to the Status Bar Controlling Windows:

17. CISW 400 - CRC - Fishman 2014 / 2015 window.close(); Closing a Window Controlling Windows:

18. CISW 400 - CRC - Fishman 2014 / 2015 window.moveto(200,200); Moving a Window Controlling Windows:  The coordinates are in pixels and (0,0) is the top-left corner of your screen.

19. CISW 400 - CRC - Fishman 2014 / 2015 window.resizeto(200,200); Re-sizing a Window Controlling Windows:  It is also possible to use resize as an event Handler.

20. CISW 400 - CRC - Fishman 2014 / 2015 window.focus(); window.blur(); Setting Window Focus Controlling Windows:  Using window.focus and window.blur, it is possible to bring a window from the background into focus or to send the current window out of focus.

21. CISW 400 - CRC - Fishman 2014 / 2015 Setting Window Focus Controlling Windows:  It is also possible to use blur and focus as event Handlers.  Here, for example, we instructed the window to come back into focus, every time the user tries to select a different window. Don't try this at home :p) < body onblur="window.focus();"

22. CISW 400 - CRC - Fishman 2014 / 2015 window.history.back(); window.history.forward(); Changing History Controlling Windows:

23. CISW 400 - CRC - Fishman 2014 / 2015 Syntax Properties & Features Remote Control Opening a New Window* Controlling Windows:  This method creates "children" windows, also referred to as "Pop-up" windows.

24. CISW 400 - CRC - Fishman 2014 / 2015 Syntax: Three ways to open a new Window: var x=window.open() Controlling Windows: 1. Variable 2. Link 3. Form Methods:

25. CISW 400 - CRC - Fishman 2014 / 2015 Opening New Window Form Method:

26. CISW 400 - CRC - Fishman 2014 / 2015 New Window Properties / Features: 1.Width & Height 2.Toolbar, Menubar, Statusbar, Location bar 3.Scrollbars 4.Resizable 5.Left, Top Controlling Windows:

27. CISW 400 - CRC - Fishman 2014 / 2015 Example 1:  Note that the syntax here is rather strict.  No spacing between quotes.  Width and height are enclosed in one set of quotes.  The variable "w" is an arbitrary variable needed to activate window.open.  "w1.htm" is the name of the html file that will load into this window.  "p1" is an arbitrary variable name given to this window for future reference. w = window.open('w1.htm','p1','width=75, height=180') Controlling Windows: Notes:

28. CISW 400 - CRC - Fishman 2014 / 2015 w=window.open('w1.htm', 'p1', 'width=220,height= 96,location=yes,scrollbars=yes,toolbar=no') Controlling Windows: Example 2:  Here, the ending set of parameters beginning with width and ending with toolbar, are all enclosed in a single set of quotes with no spaces between the commas.  If a feature is left out of this list it will be set to "no" by default. Notes:

29.  JavaScript window control makes it possible to exchange information between windows or to use one window to control the contents of another  In this week's Assignment you will produce a remote control pop-up window. Controlling Windows: Remote Control Windows: http://web.crc.losrios.edu/fishmaw/ To see an example visit the CISW400 Examples page: