function changeImage() {
            document.getElementById("imgClickAndChange").src = "uploads/alexmurphy1996/function_click2.png";
        }
        
        
        
document.write ( `

<style id="css">
</style>


<header>
    <img src="uploads/alexmurphy1996/function_icon.png" align="left" height="25%/">
	<h1> 8. Functions </h1>
</header>

<section>

	<article>
		<h2>JavaScript Functions.</h2>
		<p>A <b>function</b> in programming is a part of a program that performs a specific task.</p>
		<p>Think of a brush. A brush is used to sweep, that is its function. The brush can be used to sweep in my house your house or anywhere. This is kind of what a function is in programming. We make a function called brush, we right the code in that function that tells it how to sweep, and then we can use (or call) this function as many times as necessary. This is much easier than writing the code to sweep every time we need it.</p>
		<br>
		<p>On the left, below we have the way in which a function is declared. It follows this format all the time. <b>sweep</b> is the name of the function and it takes two parameters, <b>x</b> and <b>y</b>. The code you write goes inside the curley brackets.</p>
		<p>On the right we have the same function being called. <i>15</i> and <i>'string'</i> are being passed as the parameters to the function - x being 15 and y being 'string'. A function can be called as many times as it is needed.</p>
		<img src="uploads/alexmurphy1996/declare_function.png">
		<img src="uploads/alexmurphy1996/call_function.png" align="right">
		<br>
		<p>The image below shows a function that adds two numbers together and returns the result being declared. When we want our function to return a value we use the <b>return</b> command. As you can see the add funcrtion is then called with 2 and 5 as its parameters, returning 7 as the correct answer.</p>
		<img src="uploads/alexmurphy1996/add_function.PNG">
		<br><br>
		<h2>Exercise 8.1</h2>
		<p>Have a look at the World in the window below. Click <b>Open Window</b> to see the full picture. All the planets in this World were made using the same function, just being given different information for each planet.</p>
        <iframe width="100%" height="450px" src="https://run.ancientbrain.com/run.php?world=6319167303"></iframe>
        <br>
        <p>Your first task will be to Clone &amp; Edit <a href="https://ancientbrain.com/world.php?world=3438814067">this World</a> and create your own solar system. You will be using the same function repeatedly but you will change what information you give it.</p>
        <p>Call the function like - <b>planet(size, position, surface);</b>. The size and position are numbers. Size will be 10+ whereas position with be 100+. In this case position is actually how far from the center of the previous planet so keep that in mind. Surface is an image which will be the surface of your planets.</p>
        <p>Here are a list of planet surface image urls I have ready, you can find your own if you prefer:
        <img src="uploads/alexmurphy1996/function_click1.png" align="right" width="40%" id="imgClickAndChange" onclick="changeImage()">
        
        </p><ul>
            <li><b>Mercury:</b> 'uploads/alexmurphy1996/mercury.jpg'</li>
            <li><b>Venus:</b> 'uploads/alexmurphy1996/venus.jpg'</li>
            <li><b>Earth:</b> 'uploads/alexmurphy1996/world.jpg'</li>
            <li><b>Mars:</b> 'uploads/alexmurphy1996/mars.jpg'</li>
            <li><b>Jupiter:</b> 'uploads/alexmurphy1996/jupiter.jpg'</li>
            <li><b>Saturn:</b> 'uploads/alexmurphy1996/saturn2.jpg'</li>
            <li><b>Neptune:</b> 'uploads/alexmurphy1996/neptune.jpg'</li>
        </ul>
        <h2>Exercise 8.2</h2>
        <p>Now add all the function calls you have made to your own function below and just call it within draw(). You should see the same this when you run the World. You have just constructed your own function. Good Job!
        
	</article>
	
		<nav id="nav"> </nav>
	    
</section>

` );



        $.getScript("/uploads/alexmurphy1996/navigation.js",  function()
        {
            $("#nav").html(thehtml);
        });
        
        $.getScript("/uploads/alexmurphy1996/css.js",  function()
        {
            $("#css").html(the_css);
        });