HTML EXAMPLE

This file contains HTML ONLY, and no javascript whatsoever

Audio Elements

These are non-optional, but could be hidden if we wish

Audio elements may not be edited, have buttons added, or anything. They can exist, or not exist. Controls may be omitted, making them invisible.

This is an audio element. It has the id player1.

What do you think document.getElementById('player1') does ?

This is another audio element. It has the id player2.

What do you think document.getElementById('player2') does ?

This audio element has the id "player3".

IT HAS NEVER HEARD OF JAVASCRIPT. IT DOESN'T KNOW WHAT IT IS.

BUT javascript CAN access it, to control it. How would we access an element using its id? Hint hint ^.

This one is called "player4". Note that "controls" have been omitted, so it is not visible. However - it exists, and can still be played.

Some Buttons

Buttons do nothing. but if we wish, we can tell them to do something. I've removed "onmousedown" and given them ids like "button1" etc so we can access them later in javascript.

<button id="button1"> Button 1 </button>

In example.js are some instructions telling them what to do when events like mousedown, mouseup happen.

Go ahead and click them

onmousedown, we will audio.play()
onmouseup, we will audio.pause()

HTML is a document structure language. It KNOWS NOTHING about javascript. IT HAS NEVER HEARD OF IT.

Javascript is a programming language. It KNOWS NOTHING about HTML. But it can be used by us to access HTML elements and change them or control them.

When you include javascript with an HTML file, the browser will pass the HTML structure into your script exactly as you defined it in an OBJECT, called document. You can then use this object to manipulate your HTML.

document.getElementById('player1').play() I've moved all javascript code to a separate js file to avoid further confusion. It is included in the bottom of this file, thus: <script src="example.js"></script> Copy what you like from there. Go and have a read of it, and then come back here and try the keyboard keys 1, 2, 3 and 4.