JavaScript Feature - Client-Side Interactivity

Welcome back, friends! My previous posts have covered the origins of JavaScript and the basics of the language. As we've discussed, JavaScript works hand-in-hand with HTML and CSS to create dynamic, interactive websites. While HTML delivers the content and CSS delivers the styling JavaScript interacts with the user.

The benefit of JS is that it can perform its tasks without calling back to the server. Thinking of the work we did in VisualStudio, the UI was created with HTML and CSS and every time a control was clicked, it caused a post-back to the server in order to access the functionality. This is what sets JS apart from other languages. It can perform tasks without the post-back. It transforms a static page into something much more interesting, and because all modern web browsers are already compatible with JS, there are no plugins required to run scripts.

Because JavaScript is such a popular language, it has a ton of libraries and frameworks available to extend its capabilities, like jQuery, Angular and Node.js. Though you can create fun effects with vanilla JS. One of the easiest ways to demonstrate JavaScript's client-side interactivity is by coding an image rollover, using onMouseOver. Similar to how you can designate a styling change in CSS using the hover selector, onMouseOver can change an element on a web page. Here, we'll use it, along with onMouseOut to alter an image.

onMouseOver Syntax

To code the onMouseOver and onMouseOut in a Blogger post, I inserted the required JavaScript directly into the image HTML code. You could also extract this code into a separate function surrounded by script tags and call it in the image code. I'm breaking down the code by line in this image, but in the actual blog post you don't want any line breaks.

onMouseOver Example

Using the code above and two images of the same size, I was able to achieve the desired image changing effect. If you mouse over the image, you'll see that it changes and goes back to the original image when you move the mouse away.

I hope this helps you better understand what JavaScript can do and how it is different from other languages we have encountered so far. And, maybe you chuckled at a lame programming joke.