JavaScript
At National 5 level Computing Science, JavaScript is only touched on and you’re not expected to code it.
However, you are expected to:
- Know what JavaScript is
- Know about onmouseover and onmouseout events
- Explain what happens when a snippet of code runs
Key Points
JavaScript is client-side code.
JavaScript allows users to interact with a website.
onmouseover triggers when a user moves their mouse over an element.
onmouseout triggers when a user moves their mouse off an element.
JavaScript Events
At National 5, there are two JavaScript events that you must know. Combining these events can lead to better interactivity for the user.
onmouseover
onmouseover is an event which is called when the user moves their cursor over a specific element.
If the onmouseover event is set to an image, when the user moves the cursor over the image, something will happen.
onmouseover
onmouseout is an event which is called when the user moves their cursor off a specific element.
If the onmouseover event is set to an image, when the user moves the cursor off the image, something will happen.
What the JavaScript looks like
While you do not need to write JavaScript at National 5, you do need to be able to read it and understand how it works.
onmouseover
In the below example, the HTML image has the onmouseover event. When the user moves the cursor over that image, the JavaScript function is then called changing the image from happy.png to sad.png.
HTML
<img src="happy.png" onmouseover="showSad(image)" onmouseout="showHappy(this)">
JavaScript
function showSad(image){
image.src = "sad.png";
}
onmouseout
In the same example, the HTML also has the onmouseout event. When moving the mouse off the image, the JavaScript function showHappy() will be called, which will then change the image back from sad.png to happy.png.
HTML
<img src="happy.png" onmouseover="showSad(image)" onmouseout="showHappy(this)">
JavaScript
function showHappy(image){
image.src = "happy.png";
}