JavaScript in Plain Language (2015)

PART V: DEFEATING THE DRAGON

5.2 Lab work 14

Part A: Initializing an object and outputting its contents in a paragraph

Speaking of binding, let’s “bind” to memory all we have covered so far by doing a few exercises.

This is actually a familiar exercise from our JavaScript lab sessions. Here we are going to initialize an object called colors. The object contains the following properties:

"green": "green is the color of balance and growth.",
"blue": "blue is the color of trust and peace.",
"indigo": "indigo is the color of intuition"

Then we will get the following display on the browser:

The color green is the color of balance and growth.
The color blue is the color of trust and peace.
The color indigo is the color of intuition.

The directives we are going to use are:

ng-app, ng-init=' ' and the double brace {{ }} expressions where the output display evaluation will take place.

Notice how ng-ini is using single quotes. This is because the object colors we are going to insert inside of the quotes have in itself double quotes. By using single quotes for the init we assure that JavaScript does not get confused and abort the expression prematurely.

Please refer to the following link if you want to copy the opening HTML tag with both ng-app and ng-init plus the object code block: this raw

Try not to copy/paste it before you attempt to create your own version of it, or take just a quick look to refresh your mind and then try doing it yourself.

Let’s start. (On the next page please find step by step instructions).

1- Create a basic HTML page (as we’ve done before).
See the starter raw file
If you are not using the starter raw file make sure you do the following:
a) In the HTML opening tag insert a directive to allow AngularJS to manage your web page.
b) On the bottom of the BODY container insert the URL for the AngularJS library.

2- After the ng-app directive, but still inside of the HTML opening tag,
add a ng-init=' '
inside of the ' ' insert an object named colors with the properties described on the previous page under exhibit a.
For your convenience I have included a file of the raw text to be inserted as an object from which you can copy/paste:
raw file

3- In the BODY section add three paragraphs, one for each color.
See the first sample for the color green below:
<p>The color {{colors.green}}</p>

4- Save it as ang7.html or any other name you prefer.
Open it on your browser.
It should look like this: html

5- A whole script and further explanation can also be seen at the
forum | bit.ly/1rk2jLx

Part B: Initializing variables and outputting a calculation

In this new exercise we want to initialize two variables,
length=9 and width=3
and then output the following paragraph:

If the length is 9 and the width is 3, the perimeter is 24.

Please remember that where it says 9 and 3, the dynamic markup should be written like
{{length}} and {{width}}
which is later replaced by the value assigned to each variable.

As for the total 24, it should be the perimeter of the rectangle. You can use your own formula.
I am going to use length * 2 + width * 2 as my expression.

After finishing your script please compare it with mine here:
forum | bit.ly/1rk2KW8 | raw file | html

END OF LAB