A friend of mine needed a utility to preview web colors, so he wrote one himself. His solution was written in PHP, so as a quick exercise I decided to do something similar in Javascript. Since the entirety of the exercise is contained in the source of the page, you can see the code by viewing the source. You can also read further and I will give an explanation.
The Code
-
<div id="colorbox">
-
</div><br>
-
<div>
-
<input id='colortext' type='text' name='color'/>
-
<button onclick='change_colors()'>Lookup</button>
-
<p id="error" style="visibility: hidden">Invalid color code!</p>
-
</div>
And here is the Javascript function that will accomplish the color change.
-
function change_colors(){
-
var color = document.getElementById('colortext').value;
-
if(color.match(/^(d{3}|d{6})$/|>)){
-
document.
-
getElementById('colorbox').
-
setAttribute('style', 'background-color: #' + color + ';');
-
-
document.
-
getElementById('error').
-
setAttribute('style', 'visibility: hidden');
-
}
-
else{
-
document.
-
getElementById('error').
-
setAttribute('style', 'visibility: show');
-
}
-
}
How It Works
First, let’s examine the HTML and why the markup is written the way it is. First, we have a div element with ID ‘colorbox’. We’ll actually change the color of this box using inline CSS generated by Javascript. This is our ‘preview window.’
We also have an input box and a button. The input box is where we will type our 3 or 6 digit color code. The button, of course, will change the color of our preview window. Notice that the button element has an onclick event tied to it that will call the Javascript function we’ve defined.
Lastly, we have a paragraph tag with an ID ‘error’. Basically, we want to show the error message if someone tries to supply an invalid code. We’ll remove the message when they supply a valid color code.
Now, the Javascript. First, we grab the color code type into the text box by using the getElementById method. Then, we’ll use a regular expression to validate the color code. Looking at the regular expression, we can read it as “begin and end the string with 3 digits or 6 digits.” If the match is successful, we can change the color of our preview window. Otherwise, we show the error message.
So, how can we change the color of the box and show the error message? In fact, we do so using the same methods. We get a reference to the objects using getElementById. Then, we will set the attribute of the object. This is how we can apply CSS styles to elements. Since inline CSS will always cascade over styles in sheets, we can change any element’s styles using Javascript.
Conclusions
First, these are elementary concepts in Javascript, but manipulating the DOM is the basis for many Javascript libraries so knowing how to do so is important.
Second, what advantage does this have over Carlos’ PHP implementation? The most obvious advantage is that the entire application is client side. There is no request to the server. However, the disadvantage of this technique is that if the user has Javascript disabled, it won’t work! The PHP solution will work regardless of the user having Javascript support.
Even though this is a small utility experiment, we should take away something. I believe the Javascript versus PHP implementations demonstrate advantages and disadvantages of client-side programming and server-side programming, but more importantly that we should choose to mix them in ways that are advantageous to the user.
In the future, I will build a small application with client-side and server-side programming to show how we can mesh them together in a practical, maintainable manner. Check back often! If you have any questions or comments, feel free to ask!