Combining JavaScript and CSS

If you‘ve been following along this far with the Bingo example, you may well be wondering, “Hey, they said that JavaScript was all about the interactivity—why haven’t we seen any user interaction?” That’s a reasonable question, and here, we show how to now let the user actually play that Bingo card you generated. To do that, Script 3.11 uses some JavaScript to leverage the power of CSS.

Script 3.11. Adding a class via JavaScript allows our code to leverage the power of CSS.
window.onload = initAll;
var usedNums = new Array(76);

function initAll() {
     if (document.getElementById) {
        document.getElementById("reload").onclick = anotherCard;
        newCard();
     }
     else {
        alert("Sorry, your browser doesn't support this script");
     }
}

function newCard() {
     for (var i=0; i<24; i++) {
        setSquare(i);
     }
}

function setSquare(thisSquare) {
     var currSquare = "square" + thisSquare;
     var colPlace = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
     var colBasis = colPlace[thisSquare] * 15;
     var newNum;

     do {
        newNum = colBasis + getNewNum() + 1;
     }
     while (usedNums[newNum]);

     usedNums[newNum] = true;
     document.getElementById(currSquare).innerHTML = newNum;
     document.getElementById(currSquare).className = "";
					document.getElementById(currSquare).onmousedown = toggleColor;
}
function getNewNum() {
     return Math.floor(Math.random() * 15);
}


function anotherCard() {
     for (var i=1; i<usedNums.length; i++) {
        usedNums[i] = false;
     }


     newCard();
     return false;
}

function toggleColor(evt) {
					if (evt) {
					var thisSquare = evt.target;
					}
					else {
					var thisSquare = window.event.srcElement;
					}
					if (thisSquare.className == "") {
					thisSquare.className = "pickedBG";
					}
					else {
					thisSquare.className = "";
					}
}

To apply a style using JavaScript:

1. 
document.getElementById(currSquare).className = "";
document.getElementById(currSquare).onmousedown = toggleColor;



Because our Bingo card can be used and reused, we’re going to make sure that we start off with a clean slate: for every square that’s set in setSquare(), we’re going to set the class attribute to "" (the empty string), and the onmousedown event handler to call the new toggleColor() function.

2. 
function toggleColor(evt) {



If you’re a CSS wiz, you may have noticed back in Script 3.2 that we declared styles that we’ve never used. Now, inside the new toggleColor() function we’re going to change that. The user can now click any of the squares on the card, and that square’s background will change color to show that that number was called.

3. 
if (evt) {
  var thisSquare = evt.target;
}
else {
  var thisSquare = window.event.srcElement;
}



First off, we need to figure out which square was clicked. Unfortunately, there are two ways to do this: the IE way, and the way every other browser handles events.

If a value called evt was passed into this function, we know we’re in a non-IE browser, and we can look at its target. If we’re in IE, we instead need to look at the event property of the window object, and then at its srcElement property. Either way, we end up with the thisSquare object, which we can then examine and modify.

4. 
if (thisSquare.className == "") {
  thisSquare.className = "pickedBG";
}
else {
  thisSquare.className = "";
}



Here, we check to see if the class attribute of the clicked square has a value. If it doesn’t, we want to give it one: pickedBG, named because the background of the square shows that the number has been picked.

Now, normally, just changing a class attribute wouldn’t actually change anything visually on the page—but remember the CSS back in Script 3.2? Any tag with a class of pickedBG gets the same background color as the free square. Changing the class here automatically makes that style apply to this square, causing it to also have a pink background (Figure 3.7).

Of course, squares can be picked accidentally, and we need to make sure there’s a way to reset the value. Click the square again, and this time around, className has a value, so we toggle it to once again be the empty string.

Figure 3.7. Being able to mark squares when numbers are called lets the user interact with the card.


✓ Tip

  • Instead of changing the class attribute on the square, we could instead change its style attribute, and then we wouldn’t have to worry about the CSS file. That’s the wrong approach, though—because we’re leveraging the CSS file, it’s simple to change the page’s visual appearance without having to touch its behavior.


A Bit About Bits

Whenever you use a Boolean, you’re dealing with a value that’s either true or false. Another way to think about these variables is as containing either zero or one, which is how computers handle everything internally (true being 1 and false being 0).

Those values—0 and 1—are called bits. They’re single bits of information that the computer keeps track of. If it helps, you can instead think of each bit as a light switch that’s either on or off.

Because everything on a computer is just a whole bunch of bits, you need to be able to do things with those bits. And in particular, you need to be able to compare them to each other. Here’s some of what’s going on inside:

  • and (&)

    When we and two bits together, if they’re both true (that is, both 1), the result is true. Otherwise, the result is false.

  • or (|)

    When we or two bits together, if either is true (that is, either is 1), then the result is true. If they’re both false, the result is false.

When you use and and or on numbers greater than one, it’s referred to as bitwise arithmetic. Internally, your computer converts each number to its binary value and then compares the bits against each other. Because it’s done internally, you don’t have to do the conversion yourself (whew!).


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.143.110.220