As you can see, the differences between these two scripts aren’t massive. The
primary difference, actually, is that the C languages insert lots of unnecessary
semicolons and braces all over the place. But in other programming, the C
languages use reverse syntax (the opposite of the way it would be expressed
in ordinary English) and other complications.
Try executing this code and you’ll see a large square fade from purple to green
when you click the button. Click it again and the fade reverses back to purple.
This cool effect is brought to you courtesy of the fadefilter. When the button
is clicked, the browser responds by doing whatever is assigned to the onclick
attribute. In this case, it’s a function (a behavior described in programming
code, script in this case) named fader. (You can name your functions what-
ever you want.) So, the browser carries out whatever instructions are in the
faderfunction. Here’s the code that triggers the fader function:
<button onclick=”fader()”>Click Me!</button>
That function begins by setting up a variable named togglethat, like a light
switch, is toggled between two states. As with functions, you can name vari-
ables whatever you want to: You could call it MarthaWashington if you wanted.
But programmers like to name variables in a way that reminds them of what
the variable is supposed to do, so I called it toggle.
Inside the function, you first apply (set up) the filter in the mydivelement:
mydiv.filters(0).Apply
Mydiv, too, is just another name I made up. It’s just the ID for the <div>tag.
The script knows which divto manipulate thanks to this ID name.
Don’t worry about why you use the ( 0 ). It’s a quirk of computer languages
that makes no sense — they start counting up from zero rather than one. Just
use the code and don’t bother your pretty head about it. Just apply this filter.
Next is a common programming structure, the if... then. Actually, it’s a
pretty common situation in life, too. It means, ifthe toggle variable holds a 1,
thenchange the color to purple indigo (and at the same time, put a zero into
the toggle variable). That way, the next time the user clicks this button,
something else happens. Namely, the color changes to lime and a 1 is
assigned to the toggle variable:
if toggle = 1 Then
toggle = 0
mydiv.style.backgroundColor=”indigo”
240 Part III: Adding Artistry: Design and Composition with CSS
