PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
This content comes from an automatic translation.
  • NOTE1
  • 1410087510
  • LOOP...
  • For example, the following code runs the process 2000 times and the Cnt variable decreases by 10:
  • //############
  • END: For example:
  • Counter
  • for the "Type" option, select "Run the browser click code only"
Appendix 4. The loops
] ]
NOTE1
  • NOTE1_1
  • This lesson will teach you the following concepts
  • The FOR statement.
  • The LOOP statement.

The WHILE statement.: Practical example.
Previous LessonTable of contentsNext Lesson
1410087510
NOTE2. NOTE2_1. Overview
  • The loop statements are used to run a process in a recurring way
  • A specific loop statement is used according to the number of occurrences
  • Several statements can be used to perform loops:

LOOP...

WHILE.... NOTE2_2
The FOR statement
The FOR statement is used when the number of occurrences to process is known
This statement is used to manage the number of occurrences via a variable that counts the passages performed in the loop.
The syntax of FOR statement is as follows:
//############
FOR Cnt = 1 TO 2000
// Process to run
END
For example, the following code runs the process 2000 times:: //############. FOR Cnt = 1 TO 2000
FOR Cnt = 2000 TO 1 STEP -10
// Process to run
END

For example, the following code runs the process 2000 times and the Cnt variable decreases by 10:

//############. FOR Cnt = 2000 TO 1 STEP -10.
// Process to run
END
NOTE2_3
The LOOP statement
The LOOP statement is used to perform loops when the number of occurrences to process is unknown
In this case, a test must be used to exit from the loop
Counter is int
Counter = 10
LOOP
// Process to run
Counter = Counter - 1
IF Counter = 0 THEN BREAK
END
//############

Counter is int

Counter = 10: LOOP
// Process to run
...
Counter = Counter - 1
IF Counter = 0 THEN BREAK
LOOP(10)
// Process to run
END

//############

LOOP (). END. Example:. //############
LOOP(10)
// Process to run
END
NOTE2_4
The WHILE statement
The WHILE statement and the LOOP statement operate according to the same principle
The difference is that the test of exit condition is performed BEFORE running the loop code
Counter is int
Counter = 0
WHILE Counter<10
// Process to run
Counter = Counter + 1
END
END: For example:
//############

Counter

WHILE Counter<10. // Process to run *=25B6|Counter = Counter + 1 *# END. *# NOTE3 }} }} [[name=NOTE3_1]] {{template:doc_une_note|==Practical example== {{special:bloc:Livre_GAF_WB_P13_L4_8| *=25B6|Using loops *# To check the use of loops, we are going to create a page into which an Image control will be moved.. NOTE3_2: Project used. To handle the different concepts of this lesson, we are going to create different pages *# Open the "My_First_Pages" project if necessary. *# Open the WEBDEV home page (Ctrl + <). Click "Tutorial", then "My first pages (Exercise)".. NOTE3_3 *# Creating the page. Create a new blank page: *# Click [Image:GAF_Créer.gif|alt=[%00000108%] ] among the quick access buttons }} }} [[name=The element creation window appears]] {{template:doc_une_note|==click "Page" then "Page"== {{special:bloc:Livre_GAF_WB_P13_L4_9| The page creation wizard appears. *=25B6|Create an element *# Select "Blank".. Validate *# The page is automatically created in the editor *# The window for saving an element is displayed.: Specify the page title: "Loops". *# The page name ("PAGE_Loops") is automatically proposed..
Click "OK" to validate the information shown in the save window.

NOTE3_4

Creating controls. We are going to create the Image control then the buttons used to handle this image.. To create an Image control:, ...
  1. Position the control in the page.. Creation. Usual controls
  2. Right-click the control and select "Description".. In the "General" tab, modify the control name. this control is named IMG_Animal
  3. Remark
  4. This image catalog is started via the "Catalog" option (available by clicking the button). This catalog contains hundreds of images, cliparts
  5. Click the button on the right of "Image" control.
  6. Select "Catalog" from the popup menu that is displayed.
  7. The image catalog window appears..
  8. Drop-down menu.
  9. Type "Animal" in the search area.
  10. Click the magnifier to start the search
  • Image catalog. Select and validate ("OK").
    1. Image
    2. Image settings. Keep the default options and validate. The image path appears in the Image control description window
    3. In the "UI" tab, "" area, check ""
    4. Overlay and move.
    5. The control can be overlaid:
      • Validate the control description window.
      • Position the Image control at the top left of the page
    6. Save the page (press Ctrl + S or click among the quick access buttons)..
    7. Save element.
    8. We will now create a Button control to allow the image to move by 300 pixels to the right in the page
      // Moves the image horizontally by 300 pixels
      FOR i = 1 TO 300
      IMG_Animal..X++
      END
      Creating a Button control. Click the location where the Button control will be created (below the Image control for example).
The text displayed in the control becomes editable

Type the caption: "FOR statement".

Press Enter to validate the input.
Open the control description window (Alt + Enter). In the "General" tab, in the "Button action" area
  • for the "Type" option, select "Run browser codes only". for the "During the action" option, select "Do not send anything to the server".
    1. Validate the control description window
    2. Enter the following code in the "Click (browser)" event:
    3. //############. // Moves the image horizontally by 300 pixels. FOR i = 1 TO 300
    4. IMG_Animal..X++
    5. END.
    6. This code is used to modify the X coordinate of the Image control (Creation) in a loop from 1 to 300:
      • At each loop turn, the X coordinate is increased by one pixel.
      • ..X
    7. Remark
    8. When typing conditional statements in the code editor, the different possible syntaxes are proposed in a list by the code editor.
      WHILE IMG_Animal..X < 1200
      IMG_Animal..X++
      END
      Now let's create a Button control to move the image until the image border is positioned at 1200 pixels. To do so, we will be using the WHILE statement of WLanguage.: Under the "" section, in the "" group, click on ..
      Creating a Button control

      Click the location where the control will be created (for example

      Click the control that was just created
  • The text displayed in the control becomes editable. Type the caption: "WHILE statement".
    1. Press Enter to validate the input.
    2. In the "General" tab, in the "Button action" area
    3. for the "Type" option, select "Run the browser click code only". for the "During the action" option, select "Do not send anything to the server".. Display the events associated with the control (F2).
    4. Enter the following code in the "Click (Browser)" event:
    5. //############.
    6. WHILE IMG_Animal..X < 1200: *#* IMG_Animal..X++. *#* END *# This code is used to modify the X coordinate of the Image control () until a condition is true. In our case, this condition is as follows *# the position of the Image control () must correspond to 1200 *# ..X
      // Moves the image to the left
      LOOP
      IMG_Animal..X--
      IF IMG_Animal..X <= 0 THEN BREAK
      END

      To do so, we will be using the LOOP statement of WLanguage.. Under the "" section, in the "" group, click on .. Creation. Usual controls
      • Click the location where the button will be created (for example, on the right of WHILE Button control).
      • Click the control that was just created
The text displayed in the control becomes editable

Type the caption: "LOOP statement".

Press Enter to validate the input..
Open the control description window (Alt + Enter)

for the "Type" option, select "Run the browser click code only"

  • for the "During the action" option, select "Do not send anything to the server".
    1. Validate the control description window
    2. Display the events associated with the control (F2).
    3. Enter the following code in the "Click (browser)" event:. //############
    4. LOOP
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment