Save jsevent.html as jsfunction.html. Add this script element just under the style element:
It will then be read by the browser before the page body is shown. Nothing will happen because the browser knows that a function is a container for code to be run later. Try it.
Now that you have the function you need to set up the trigger which will cause the browser to run the code inside the function. In your paragraph change the onmouseup attribute's value from alert('Hello again'); to fred(); which is the name of the function followed by the brackets which are the easy way to identify a function.
Before you try it you should try to understand the code to see what is now going to happen:
- the user will click on the red word which will trigger the browser to run the code inside the HTML quotes
- that code is just simply a function name so the browser will look for that function and find it
- the function code is then run and the message appears
One of the hardest thing when learning anything new is learning which words to use. You should have picked up two new ones so far and here qare those two and one more:
- an event trigger is the thing you tell the browser to look for (e.g. onmouseup)
- the event is when that thing happens (e.g. the user clicks)
- the event handler is the the named function which has the code to run