SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Function vs Statements?

    This is the code from the Headfirst book:

    Code:
    <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:

    Code:
    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. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code:
    <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. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, got it, thanks.

  6. #6
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;



    Code:
     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. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mikehende View Post
    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;
    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:

    Code:
     window.onload = function () 
    {
        resizeRock();
        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:

    Code:
    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();
    }
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •