JavaScript
At Higher Computing Science, it is expected that you can implement JavaScript into a website. The goal is to make the website or parts of pages more interactive, and therefore, more engaging for users.
Events
The key part of JavaScript that you need to know revolves around JavaScripts Event system. In short – when you perform one of three interactions with an element (typically an image), something happens.
The three types of events you need to know are:
- On Click – When clicking an element, an event happens.
- On Mouse Over – When moving your mouse over an element, an event happens.
- On Mouse Out – When moving your mouse off an element, an event happens.
Adding an Event to a page
The main idea of JavaScript is broken down into two parts:
Add an event listener to an element – when this event happens, a JavaScript function is called.
The JavaScript function is told to run, and the instructions inside the function is then executed.
<!-- This HTML for an image has an onclick event which calls the ImageClicked() function --> <img src="image.png" onclick="ImageClicked()">
//When clicking the above image, this function is called
function ImageClicked(){
//any instructions that should be carried out on the page will be in here
}
Using each event
The main idea of JavaScript is broken down into two parts:
Add an event listener to an element – when this event happens, a JavaScript function is called.
The JavaScript function is told to run, and the instructions inside the function is then executed.
The following example is the most basic version of an onclick event.
In this example, when the image is clicked, the image has its style changed to hide it.
<html>
<head>
<script>
function HideOnClick(){
document.getElementById("myImage").style.display = "none";
}
</script>
</head>
<body>
<img src="image.png" id="myImage" onclick="HideOnClick()">
</body>
</html>
The following example shows how onmouseover works.
In this example, the first time that a mouse moves over the image, the image is hidden. Moving the mouse anywhere else or clicking the image has no impact.
<html>
<head>
<script>
function HideOnMouseOver(){
document.getElementById("myImage").style.display = "none";
}
</script>
</head>
<body>
<img src="image.png" id="myImage" onmouseover="HideOnMouseOver()">
</body>
</html>
The following example shows how onmouseover works in combination with onmouseout.
In this example, when the mouse moves over the image, the source of the image changes from defaultImage.png to overImage.png.
When the mouse moves off the image, the source of the image is then set back to defaultImage.png.
<html>
<head>
<script>
function MouseOverImage(){
document.getElementById("myImage").src = "overImage.png";
}
function ResetImage(){
document.getElementById("myImage").src = "defaultImage.png";
}
</script>
</head>
<body>
<img src="defaultImage.png" id="myImage" onmouseover="MouseOverImage()" onmouseout="ResetImage()">
</body>
</html>