This version of our program is not yet very modular, we would like to extract the calculation in a separate calculateRabbits(years) method that takes the number of years as a parameter. This is shown in the following code (version 2 line (4) of prorabbits_v2.dart) with exactly the same output as version 1:

import 'dart:math';

int rabbitCount = 0;                                   (1)
const int NO_YEARS = 10;                               (2)
const int GROWTH_FACTOR = 15;                          (3)

void main() {
  print("The number of rabbits increases as:\n");
  for (int years = 0; years <= NO_YEARS; years++) {
    rabbitCount = calculateRabbits(years);             (4)
    print("After $years years:\t $rabbitCount animals");
  }
}

int calculateRabbits(int years) {                      (5)
  return (2 * pow(E, log(GROWTH_FACTOR) * years)).round().toInt();
}

n = (2 * pow(E, log(15) * years)).round().toInt();

The calculateRabbits function calculates and returns an integer value; this is indicated by the int word preceding the function name. We give the function a return type here (int), but the program would have run without the function-type indication because of Dart's type inference.

This new function is called by main(). This is the way a Dart program works: all the lines in main() are executed in sequence calling functions, as needed, and the execution (and with it, the Dart VM) stops when the } ending of main() is reached. Things get a bit more complicated when Futures or Streams are used: these are put in a microtask queue to be executed. Only when there are no more tasks to execute in this queue will the Dart VM stop executing.

We rename the n variable to rabbitCount, so we need no more comments.

A good programmer doesn't like hardcoded values such as 10 and 15 in a program. What if they have to be changed? We replace them with constant variables indicated by the const keyword in Dart, whose name is, by convention, typed in capital letters and parts separated by _, see lines (2) and (3).

Now, for some practice:

The output should resemble the following screenshot:

Debugging prorabbits_v2.dart

As a final version, for now, let us build an app that uses an HTML screen, where we can input the number of years of rabbit elevation and output the resulting number of animals. Go to File | New Project, but this time select Web application. Now, a lot more code is generated, which needs explaining. The app now contains a web subfolder; this will be the home for all of the app's resources. However, for now, it contains a stylesheet (.css file), a hosting web page (.html), and a startup code file (normally main.dart, in our case, prorabbits_v3.dart). The first line in this file makes the HTML functionality available to our code:

import 'dart:html';

We remove the rest of the example code, so only an empty main() function remains. Look at the source of the HTML page right before the </body> tag, it contains the following code:

<script type="application/dart" src="prorabbits_v3.dart"></script>
<script src="packages/browser/dart.js"></script>

The first line starts our Dart script.

The Dart VM exists only in Dartium for testing and debugging purposes. For other browsers, we must supply the Dart-to-JS compiled scripts; this compilation can be done in the Editor by navigating to Tools | Pub Build - Minified Javascript. The output size is minimal: the "dead" JS code that is not used is eliminated in a process called tree shaking. However, where does this mysterious script dart.js come from? The src="packages/browser/dart.js" value means that it is a package available in the Dart repository at http://pub.dartlang.org/.

External packages that your app depends on need to be specified in the dependencies section in the pubspec.yaml file. In our app, it contains (I have changed the name and description) the following:

name: prorabbits_v3
description: Raising rabbits the web way
dependencies:
  browser: any

We see that our app depends on the browser package; any version of it is ok. The package is added to your app when you right-click on the selected pubspec.yaml file and select Pub Get: a packages folder is added to your app and, per package, a subfolder is added containing the downloaded code, in our case, dart.js (In Chapter 2, Getting to Work with Dart, we will explore pub in greater depth and see that it can also be performed from the command-line).

For this program, we replace the HTML <p id="sample_text_id"></p> code as shown in the following code:

<input type="number" id="years" value="5" min="1" max="30">
<input type="button" id="submit" value="Calculate"/>
<br/>Number of rabbits: <label id="output"></label>

The input field with type number (new in HTML5) gives us a NumericUpDown control with a default value 5 limited to the range of 1 to 30. In our Dart code, we now have to handle the click-event at the button with id as submit. We do this in our main() function with the following line of code:

querySelector("#submit").onClick.listen( (e) => calcRabbits() );

The query Selector ("#submit") gives us a reference in the code to the button with ID equal to submit and listen redirects to an anonymous function (see Chapter 2, Getting to Work with Dart) to handle the e event, which calls the calcRabbits()function shown in the following code:

calcRabbits() {
  // binding variables to html elements:
  InputElement yearsInput  = querySelector("#years");        (1)
  LabelElement output = querySelector("#output");            (2)
  // getting input
  String yearsString = yearsInput.value;
  int years = int.parse(yearsString);  
  // calculating and setting output:
  output.innerHtml = "${calculateRabbits(years)}";
}

Here, in the lines (1) and (2), the input field and the output label are bound to the yearsInput and output variables. This is always done in the same way: the querySelector() function takes as its argument a CSS selector; in this case, the ID of the input field (an ID is preceded by a # sign). We typed yearsInput as InputElement (because it is bound to an input field). This way, we can access its value, which is always string. We then convert this string into an int type with the int.parse()function, because calculateRabbits needs an int parameter. The result is shown as HTML in the output label via string substitution, see the following screenshot:

The screen of prorabbits_v3

All the objects in the Dart code that are bound to the HTML elements are instances of the Element class. Notice how you can change the Dart and HTML code, and save and hit refresh in Dartium (Chrome) to get the latest version of your app.