1 of 15

JavaScript

Website Design & Development

1

2 of 15

SQA Requirements

  • Describe, exemplify and implement code of JavaScript functions relate to mouse events:
    • onmouseover
    • onmouseout
    • onclick

Website Design & Development

2

3 of 15

What is JavaScript?

JavaScript enables the implement of interactive web pages.

We will cover …

​

  • Changing the size of an image as the mouse passes over the image. �
  • Changing the style of page content when the mouse passes over the image.

​

  • Swapping over image for another as the mouse passes over the image.

​

  • Showing and hiding page content when the mouse is clicked on a page object.

Website Design & Development

3

4 of 15

Mouse Events

​

​

<img src="iceCream.jpg" onmouseover="">

The mouse pointer is moved over an object.

​

<img src="iceCream.jpg" onmouseout="">

The mouse pointer is moved away from an object.

​

<img src="iceCream.jpg" onclick="">

The mouse button is clicked when the pointer is over an object.

​

Website Design & Development

4

5 of 15

JavaScript Location

​

JavaScript scripts are often placed inside the <head> section of an HTML document.

​

Website Design & Development

5

<head>

​

<title> All About Ice Cream </title>

​

<script>

</script>

​

</head>

JavaScript Code Here

6 of 15

JavaScript Code

Declaration

Within the <script> element a function is declared this will contain the JavaScript we wish to run.

<script>� function showLarge() {} �</script>

​

Function Call

Within the HTML tag a “function call” is added to tell the browser to run the code in the function.

<img src="iceCream.jpg" onMouseOver="showLarge()">

Website Design & Development

6

7 of 15

Re-Sizing Image

Declaration

​

<script>

​

function showLarge(thisGraphic) {

thisGraphic.style.width='300px';

thisGraphic.style.height='225px'; }

function showNormal(thisGraphic) {

thisGraphic.style.width='200px';

thisGraphic.style.height='150px'; }

</script>

Website Design & Development

7

8 of 15

Re-Sizing Image

Function Call

​

<img src="iceCream.jpg" onMouseOver="showLarge(this)" onMouseOut="showNormal(this)">

Website Design & Development

8

9 of 15

Roll Over Image

Declaration

​

<script>

function sCaramel(thisGraphic) {

thisGraphic.src='saltedCaramel.jpg'; }

function cShortbread(thisGraphic) {

thisGraphic.src='caramelShortbread.jpg'; }

</script>

Website Design & Development

9

10 of 15

Roll Over Image

Function Call

​

<img src=“caramelShortbread.jpg" onMouseOver=“sCaramel(this)" onMouseOut=“cShortbread(this)">

Website Design & Development

10

11 of 15

Hidden Content

The CSS property display is used to control how an element appear within web page.

​

In addition to inline and block, display may also have the value none.

​

If an element is styles to display: none it becomes invisible and the space it would have taken up collapses as if the element code has been removed from the HTML file.

​

This can used along with JavaScript to create ineractive content by showing and hiding parts of the web page.

Website Design & Development

11

12 of 15

Hidden Content

​

​

​

​

​

Function Call

​

<img src="vanilla.png" onclick="showVanilla()">

<img src="chocolate.png" onclick="showChocolate()">

<img src="stickyToffee.png" onclick="showToffee()">

<img src="raspberry.png" onclick="showRaspberry()">

Website Design & Development

12

13 of 15

Hidden Content

Declaration

​

function showVanilla() {

​

document.getElementById("vanilla").style.display�="block";

​

document.getElementById("chocolate").style.display�="none";

​

document.getElementById("toffee").style.display�="none";

​

document.getElementById("raspberry").style.display�="none";}

Website Design & Development

13

14 of 15

Hidden Content

HTML

​

<div id="vanilla" style="display:none">

​

<h1> Luxury Vanilla </h1>

<p> A true classic Luxury Vanilla Ice Cream is rich and creamy with the delicate sweetness of vanilla </p>

</div>

Website Design & Development

14

15 of 15

Hidden Content

Website Design & Development

15