Learning Report 1
JavaScript Animation
Resource: http://www.w3schools.com/js/js_animation.asp
What did I learn?
This week I spent some time looking at tutorials about javascript on w3schools.com. I have had a bit of experience in programming, specifically in Basic, C++ and Java, so I felt like I was able to catch on to things fairly easily. I didn't realize that browsers were capable of understanding and executing javascript right out of an html file, so I found that to be very interesting and useful information. There really is quite a bit that can be done outside of HTML to make websites much more interactive and dynamic.
One of the things that I learned about that I felt would be most applicable to your average website were the JavaScript events, which allow your webpage to detect things that are going on. For example, if a user rolls the mouse over a particular part of the webpage, a function can be triggered which will execute lines of code to display some text or another image. There lots of other useful things that can be done using javascript, simple things like displaying the date or time, or more complex such as creating cookies to be used whenever a particular user visits the webpage.
How did I implement it?
Using what I learned from the Javascript tutorials, I decided to try and create a button that would change as the user rolled the mouse over it. The button would be used as a link to bring the user to my site plan page. The first step was to create two images; one to be displayed normally, and a second to be the alternate version which would be displayed when the mouse rolls over it. After creating the images, just a few simple lines of code would implement it. One bit of code is contained within the "img" tag, namely the Javascript events "MouseOver" and "Mouseout", and calls to the javascript functions you'll write in a minute:
<img src="/images/image1.jpg" alt"link" id="b1" onmouseOver="mouseOver()" onmouseOut="mouseOut()">
The other section of code was placed in the head section of the page, which contained the functions that the MouseOver and MouseOut events would call for. These functions contained the code that would change the image that is displayed depending on whether or not the mouse was over it.
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src ="image2.jpg";
}
function mouseOut()
{
document.getElementById("b1").src ="image1.jpg";
}
</script>
The end result is very simple, and in this case very amateur looking, but the button appears to be depressed a bit when you roll the mouse over it. I feel like even a simple features like this one can make a webpage much more visually exciting for the user. I plan to use more javascript as I continue to build my webpage, but will do a better job with the creation and implementation of the images. I feel like javascript will be very useful for designing webpages, and I'm excited to become better with it. I've built a website before using software that would generate this type of code for me, but I feel much more confident now that I understand how it works and will be able to write it myself.
The button as originally created is no longer being used, but here is what it looked like:
