JAVASCRIPT function init() { } 

The code inside the init() function is to be as follows:

• for the element with id="box1" invoke addEventListener() so that for the onclick event the box1_click function is called;
• for the element with id="box3" invoke addEventListener() so that for the onclick event the box3_click function is called;
• for the element with id="box4" invoke addEventListener() so that for the onclick event the box4_click function is called;
• for the element with id="box2" invoke addEventListener() so that for the ondragstart event the box2_dragstart function is called;
• for the element with id="box2" call setAttribute() and set the draggable property to "true" (i.e., as a string);
• for the element with id="box5" invoke addEventListener() so that for the ondrop event the box5_drop function is called; and,
• for the element with id="box5" invoke addEventListener() so that for the ondrop event the box5_dragover function is called.

NOTE: The above bullets refer to onXXXX events. When passing the event name to the first argument of addEventListener(), remove the "on" prefix from the event.

Except for setting the draggable attribute to "true", all of the bullets above are implemented using the following code pattern:

document.getElementById(ID_NAME).addEventListener(EVENT_NAME, FUNCTION_NAME); 

where:

• document.getElementById(ID_NAME) searches the HTML document for an element with an id attribute set to ID_NAME. If ID_NAME is found, then the value returned represents the element (i.e., the tag) found, otherwise, the return value is null. (NOTE: ID_NAME is a string.)
• Since the return value for the provided a03.html can never return null, there is no need to check if the result is null --so one can invoke .addEventListener() on the returned result directly.
• For addEventListener(EVENT_NAME, FUNCTION_NAME), EVENT_NAME is the name of the event (without the "on" prefix) expressed as a string, and, FUNCTION_NAME is the name of the function (no parentheses and as a symbol --not as a string).

Defining Some Global Variables

This assignment requires three (3) global variables. Define them as follows:

var last_color = 0; // bit 2 is red, bit 1 is green, bit 0 is blue var counter = 0; // counter variable var bcolor = 0; // page background colour: 0 for black, 1 is white 

Writing box1_color(evt)

Recall your knowledge about bitwise operations from C (i.e., bitwise-AND, '&', in particular). The variable last_color will hold a value between 0 and 7 (i.e., binary: 000 to 111) where the bits represent whether or not there is red, green, or blue colour. Thus, the code for this function is to (i) reset the value to 0 if last_color == 8, (ii) ++last_color each time this event occurs, and (iii) to properly set the CSS background-color and color attributes of box1. (The background-color attribute will be set to the colour determined by last_color and the color attribute will be set to the complementary colour of the background-color attribute.)

Write the code to do the following in the order listed:

• If last_color == 8, then set last_color to 0 (zero).
• Increment last_color with ++.
• Declare a variable called color_to_set with var and set its initial value to "#".
  • NOTE: The "#" is the "#" character that appears before hexadecimal CSS colour values.
• Determine the amount of red with: (last_color & 4) ? '0' : 'F'. Append such to color_to_set.
  • String appends in JavaScript can be done using the + operator (if the left-hand side is a string).
• Determine the amount of green with: (last_color & 2) ? '0' : 'F'. Append such to color_to_set.
• Determine the amount of blue with: (last_color & 1) ? '0' : 'F'. Append such to color_to_set.
• Declare a variable called bcolor_to_set with var and set its initial value to "#".
• Determine the amount of red with: (last_color & 4) ? 'F' : '0'. Append such to bcolor_to_set.
• Determine the amount of green with: (last_color & 2) ? 'F' : '0'. Append such to bcolor_to_set.
• Determine the amount of blue with: (last_color & 1) ? 'F' : '0'. Append such to bcolor_to_set.
• Set this.style.backgroundColor to bcolor_to_set.
• Set this.style.color = color_to_set.

NOTE 1: Since the target of the event (i.e., what you clicked on) is what you want to set the colours of, you can use this. Otherwise, you'd have to first query for the element you want to modify.

NOTE 2: Remember that dashes, '-', in CSS properties are deleted and the following letter is capitalized in JavaScript. A '-' in JavaScript is the subtraction operator.

Writing box3_click(evt)

Box3 will show the current value of counter. To do this, it will set this.innerHTML to be:

"

Count = " + counter + ".

"

and then increment the counter variable with ++.

Writing box4_click(evt)

Box4 when clicked will set the page's background colour --not the event target's background colour! To access the root element of an HTML page in JavaScript use: document.documentElement. For example, to set the font-weight of the root element one would write this code:

document.documentElement.style.fontWeight = "bold"; 

For this function write the following code:

• If (the global variable) bcolor is set to 0, set the root document's background color to black (#000). Then set bcolor to 1.
• If bcolor is set to 1, set the root document's background color to white (#FFF). Then set bcolor to 0.

Writing box2_dragstart(evt)

When a dragstart event occurs with box2, you are to set the data to be transferred to the target of the drag as follows:

evt.dataTransfer.setData("text/plain", counter); 

i.e., the target will receive the value of the counter variable (as a plain text string). (The second argument is a MIME type.)

Writing box5_drop(evt)

When box5 receives a drop event (i.e., a drag event is in progress and the mouse is released when over box5), do the following:

• Call evt.preventDefault(); to turn off default event processing for the target element.
• Obtain the data set in box2_dragstart() by writing:
  • var data = evt.dataTransfer.getData("text/plain");
  • NOTE: You can specify the datum you want by its MIME type. There can be more than one datum --although no two can have the same MIME type.
• Set the event target's innerHTML to be the string "counter = "+data.
  • ASIDE 1: You can do this evt.target.innerHTML.
  • ASIDE 2: One might want to do this with this.innerHTML since this event is only associated with box5.

Writing box5_dragover(evt)

Call:

evt.preventDefault(); 

to disable default event processing when dragging the element over a possible target.

S