Want to keep learning?

This content is taken from the Raspberry Pi Foundation & National Centre for Computing Education's online course, Introduction to Web Development. Join the course to learn more.

Skip to 0 minutes and 2 secondsIt's time for you to add some JavaScript to your climate change web page. And to start, you'll need to create a function. Functions are chunks of code that can be reused over and over without the need to write out the same lines of code multiple times. Here we have a web page for our quiz. And we also have a finish button to submit. But at the moment, it doesn't do anything. So to make it do something, we're going to create a function in JavaScript. Just like CSS, we can store our JavaScript in a separate external file, like I've done here. So we're going to put our first function in here. Let's call it finish function.

Skip to 0 minutes and 58 secondsMake sure we end the line with curly brackets. And within this function, we want an alert to appear at the top of your browser. So it's just an alert. And then within the alert, in quotation marks, we put the message that we want to appear. So something like, thank you for completing the quiz.

Skip to 1 minute and 25 secondsEnd quote, end quotation mark, and semicolon at the end.

Skip to 1 minute and 34 secondsSo we've got a function working, function written. Just like CSS, we just need to put in a script tag now to tell the browser to read the script we've just written in JavaScript. So need to tell a source.

Skip to 1 minute and 55 secondsSo the source is the name of the file, so I've called it script.js.

Skip to 2 minutes and 2 secondsEnd the quotes and then end the tag.

Skip to 2 minutes and 7 secondsOK, see if that works.

Skip to 2 minutes and 11 secondsNo, it still doesn't work. That's because, although we've put a button tag here and an event on click, we haven't said what to do when the event happens, so when the button is clicked. So in here, we just got to put the function name, which was finish function. Don't forget the brackets at the end. OK, now let's try that out. So now you can see this alerts just appeared. Thank you for completing the quiz, and just click OK. Try it out for yourself. And have a go at using some of the other events described in the article below, such as calling a function when a user clicks on an element or presses a key.

Skip to 2 minutes and 59 secondsShare your trinkets in the comment section. Remember to ask questions and help each other out if anyone get stuck. Good luck.

Your first JavaScript function

Now that you’ve learnt about what JavaScript is, you are going to create your first JavaScript code, which will make something happen on your climate change webpage when a visitor clicks on a button. To do this, you’re going to need to create a function and respond to an event.

Functions

A function is a way of putting code together so it can be reused. Functions let you run the same code from different places in your program, without needing to copy and paste that code into different places.

The JavaScript below defines a function:

function finishFunction() {
  alert("Thank you for completing the quiz.");
}

To define this function in JavaScript, first I had to write function followed by the name I want to give this function: finishFunction. I then wrote the code that controls what happens in the function, between the curly brackets {}. This function produces an alert message in your browser that states "Thank you for completing the quiz." Later in this step you will learn how to call this function in order for it to execute.

External JavaScript functions

JavaScript functions can be stored in an external file rather than added directly to the HTML, which is useful when the same code is used on many webpages — you used CSS in a similar way last week. An external JavaScript file makes it easier to maintain and read the HTML and JavaScript.

You are going to create your own external JavaScript file and link it to your HTML page:

  1. Open your climate change website in Trinket.
  2. Press the + icon to add another file next to the HTML and CSS files. Name the file script.js. All the JavaScript you write will go into the script.js file.
  3. Add the JavaScript below into your script.js file.
function finishFunction() {
  alert("Thank you for completing the quiz.");
}

To call and execute a function in JavaScript, you enter its name followed by a pair of opening and closing parentheses () (if the function requires parameters, these should be included inside the parentheses).

finishFunction();

To link the HTML file to the script.js file, enter the following HTML between the <head> and </head> tags in your HTML file. (You linked to your CSS file in a similar way last week.)

<script src="script.js"></script>

Events

At the moment, you cannot see any changes to your climate change webpage because you have not called the function to execute it. One way of calling a function to execute is to use an event. Events occur when the user or browser manipulates the page, for example when the page loads, or when the user clicks a button. The HTML below creates a button on the webpage using the <button> and </button> tags. The <button> tag has an onclick event set, to call the finishFunction function when you press the button.

<button onclick="finishFunction()">Finish</button>

Add a button to your quiz page that will thank the user for completing the quiz when they click it.

You may want to use different events as you complete the rest of the week. For example, you may want to use the onmouseover event to change the background colour of an element when the mouse is hovered over it. When the mouse hovers away from the element you could then use the onmouseout event to change the background of the element back to its original colour.

Event Description
onmouseover The mouse hovers over an HTML element
onmouseout The mouse moves away from an element
onkeydown A keyboard key is pressed
onload The browser has finished loading the page

Uses of JavaScript

You can use JavaScript with your climate change website to:

  • Change HTML content
  • Add values of attributes
  • Update CSS styles
  • Hide elements
  • Show elements

In the next step you will learn how JavaScript can access elements of the webpage in order to make these changes.

Share this video:

This video is from the free online course:

Introduction to Web Development

Raspberry Pi Foundation