Function vs Statements?

JavaScript
1

This is the code from the Headfirst book:

<html>
  <head>
    <title>iRock - The Virtual Pet Rock</title>

    <script type="text/javascript">
      function touchRock() {
        var userName = prompt("What is your name?", "Enter your name here.");
        if (userName) {
          alert("It is good to meet you, " + userName + ".");
          document.getElementById("rockImg").src = "rock_happy.png";
        }
      }
    </script>
  </head>

  <body onload="alert('Hello, I am your pet rock.');">
    <div style="margin-top:100px; text-align:center">

      <img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
    </div>
  </body>
</html>

I am being told that this coding is outdated and that this simple code will do the same thing:

alert ('Hello, I am your pet rock.');

var username = prompt ("What is your name?", "Enter your name here.");

if (username) {
    alert ("It is good to meet you, " + username + ".");
    document.getElementById ("rockImg").src = "rock_happy.png";
}

So there is no need for a “function”, that the 3 “statements” above will do the same thing? First question, what’s the difference between a “function” from the first code and a “statements” above please?

2

A function is basically a way of grouping statements so that you can run the same group of statements as many times as you want without having to copy all the statements into the code every time you want to call it.

You can also make code easier to understand by grouping statements together into a function that describes what that group of statements do.

3

Thanks, next questions would be, the objective here is to have the page load then the rock.pgn image appears THEN the rest happens but right now using the code below, the page is loading and the greeting appears first BEFORE the rock image appears, help?

<html>
  <head>
      <title>irock -The virtual Pet Rock</title>

     <script type="text/javascript">

                alert ('Hello, I am your pet rock.');

        var username = prompt ("What is your name?", "Enter your name here.");

        if (username) {
        alert ("It is good to meet you, " + username + ".");
       document.getElementById ("rockImg").src = "rock_happy.png";
}  

 window.onload = function () {
    sayHello();
    var username = promptForName();
    greeting(username);
};     

    </script>

  </head>

<body>

<div style="margin-top:200px; text-align:center">

      <img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock();" />
    </div>


  </body>
</html>
4

The first part of that code isn’t inside a function and so it runs straight away.

The last part of that code calls a function called sayHello() that doesn’t exist in the code.

Presumably the first part of the code is meant to be inside the function sayHello() so that it gets called when the other part of the code runs after the page finishes loading.

5

ok, got it, thanks.

6

I have now to add a “resize rock” code to the original code below, how can I do so please:

function resizeRock () {
document.getElementById.(“rockImg”).styleHeight=
(document.body.clientHeight-100 * 0.9;

 window.onload = function () 
{
    alert ('Hello, I am your pet rock.');

    var username = prompt ("What is your name?", "Enter your name here.");

    if (username) 
    {
        alert ("It is good to meet you, " + username + ".");
        document.getElementById ("rockImg").src = "rock_happy.png";
    };     

}
7

You left off the ) after the 100 and the } on the end of the above code for the end of the function.

The answer the book gives for that particular question is on page 104.
The solution the page gives is

<body onload=“resizeRock(); greetUser();”>

To incorporate that into the window onload version you would use:

 window.onload = function () 
{
    [b]resizeRock();[/b]
    alert ('Hello, I am your pet rock.');

    var username = prompt ("What is your name?", "Enter your name here.");

    if (username) 
    {
        alert ("It is good to meet you, " + username + ".");
        document.getElementById ("rockImg").src = "rock_happy.png";
    };     

}

With the onload now doing two separate things it makes it easier to read if you separate them each into its own function (that way you can tell what code belongs to each) so you would end up with:

function resizeRock () {
document.getElementById.("rockImg").styleHeight=
(document.body.clientHeight-100) * 0.9;
}
function greetUser() {
    alert ('Hello, I am your pet rock.');
    var username = prompt ("What is your name?", "Enter your name here.");
    if (username) 
    {
        alert ("It is good to meet you, " + username + ".");
        document.getElementById ("rockImg").src = "rock_happy.png";
    };  
}
window.onload = function () {
    resizeRock();
    greetUser();
}