CIS 757/790 JavaScript QUIZ

GLASSBOX APPROACH (RE HOWARD A PEELLE - UMASS)

Last.First Name:

CIS 757-790 JavaScript PROF. AUCIELLO

EXPLANATION: 

          This lesson-quiz represents some 'break-through'  thinking:

          These quizzes demand interaction.  The plan is to create the 
          equivalent of a classroom discusson on the Web.  Added to 
          this is that you are graded for participating, and hopefully
          you will glean information from others that will add to your
          understanding and subsequently Mastery over the topics 
          discussed.  

          
          At the end of the lesson, -- when you know that you understand
          it -- say "Mr. A. -- 
          I got this lesson, thank you -- and type your name.
Here is a copy of math8b.htm (GlassBox JavaScript Math Functions) <html> <head> <title> GLASS BOX Math and String Functions </title> <h3> THIS IS A GLASS BOX JAVASCRIPT EXERCISE BY PROF. AUCIELLO </H3> <script> var lmv, mmv, vara, varb, varc, vard, vare, x; function checkNum() { var mv = new String(this.document.forms[0].inputNum.value); alert("Math.sqrt(" + mv + ") yields " + Math.sqrt(mv)); alert("The method 'Math.round.(Math.sqrt(" + mv + ")) yields " + Math.round(Math.sqrt(mv)*100)/100 + " (rounded)."); vara = Math.random(); // vara1= Math.round(100*Math.random())/100; alert("Math.random() with null paran yields numb between 0 - 1"); alert(vara + "= a randomly-generated number between 0 - 1 [10 decimal places]"); alert(vara1+ "= a randomly-generated number between 0 - 1 [2 decimal places]"); alert("Math.round(100 * " + vara1 + ") yields NUMBER between 1-100 which = " + 100*vara1); varb = Math.round(100 * vara) + 1; alert("Generating a random number from 1 to 100 = " + varb); alert("The sine of PI = approximately 0! -- Try it!"); alert("The sine of " + 3.141692 + " = " + Math.sin(3.141692) + " in radians.") ; varc = Math.sqrt(mv); alert("The sqrt of " +mv + " = " +varc + " The sqrt squared = " + Math.pow(varc,2)); alert("The sine of " + mv + " = " + Math.sin(mv)); alert("Whether a variable is a string or a number, depends on how it is used."); alert("If used with string methods, it is a string. Used with numbers, it is a number."); alert("This is a very modern way of programming!"); varf = mv; alert ("varf = " + varf); alert ("Chaining [concatenating] " + varf + " to a string '2', it becomes " + varf+"2"); varf = mv + "2"; alert(mv + "+ 2 = " + varf + " When concatenated to string, it becomes a string."); // x = mv; // alert(" x starts at " + x); // x = x + 2; // alert("The operation 'x = x + 2' yields " + x + " -- Does Addition works."); x = mv; x -= -2; alert(mv + " +2 = " + x + ". Addition works."); x = mv; x -= 2; alert(mv + " -2 = " + x + ". Subtraction works."); x = mv x /= 2; alert(mv + " /2 = " + x + ". Division works."); lmv = mv.length; alert ("lmv = mv.length "); alert ("The method 'lmv = mv.length' returns length of mv, stored in lmv."); alert ("The length of " + mv + " = " + mv.length); alert (mv + ".length" + " = " + lmv); alert ("Position is counted from 0 position"); mmv = mv.substr(0,1); alert("substr(0,1) takes 1 char starting from 0 position"); alert("mv.substr(0,1) yields " + mv.substr(0,1)); alert("substr(1,1) takes 1 char starting from 1 position"); alert("mv.substr(1,1) yields " + mv.substr(1,1)); alert("substr(2,1) takes 1 char starting from 2 position"); alert("mv.substr(2,1) yields " + mv.substr(2,1)); } </script> </head> <body BGCOLOR="yellow"> <center> <h2> Inputting Numbers </h2> <form> <table WIDTH=90%> <tr><td colspan=3> Enter a String............... <input NAME=inputNum TYPE="text" SIZE=8 VALUE="" onBlur=checkNum()><p> </td></tr> </table> </form> </center> </body> </html> 
Q001:  The script portion is stored in the HEAD section
       of the HTML -- Give me as deep an answer as you
       can -- How do you know that the javascript code
       has to be in this section, and not the BODY?
       
       (If you dont know, skip it, and come back to it later.)
 

Q002:

Translate (explain) this JS statement in English:

var mv = new String(this.document.forms[0].inputNum.value);

Q003: 

Explain this:
           
         alert("Math.sqrt(" + mv + ") yields " + Math.sqrt(mv));

         Displays on screen:

                 Math.sqrt(123) yields 11.09053678912


Clue:   'alert' displays to screen. The sq rt of 'mv' is taken
         and displayed.  What do the '+' signs do?

Q004: 
      Given:

        alert("The method 'Math.round.(Math.sqrt(" + mv + ")) yields 
              " + Math.round(Math.sqrt(mv)*100)/100 + " (rounded).");

        that displays as:

            The method 'Math.round.(Math.sqrt(123)') yields  11.09 (rounded)

        Explain Math.round -- how it works.  Explain how it got rounded to 2 dec places.
        Should include explanation of how mult and div are used to shift the decimal
        position, and how that works with the round() function.  (If you dont know,
        skip it, and come back later.)

Q005: 

 
       Almost the same as Q004, EXPLAIN THE FOLLOWING
        AND WHY IT IS DONE:

        vara1= Math.round(100*Math.random())/100;

        alert(vara1+ "= a randomly-generated number between 0 - 1 [2 decimal places]");

Q006: 

  EXPLAIN EACH OF THE FOLLOWING LINES:

        alert("The sine of PI = approximately 0! -- Try it!");
        alert("The sine of " + 3.141692 + " = " + Math.sin(3.141692) + " in radians.") ;
        varc = Math.sqrt(mv);
        alert("The sqrt of " +mv + " = " +varc + "  The sqrt squared = " +   Math.pow(varc,2));
        alert("The sine of " + mv + " = " + Math.sin(mv));

Q007: 
            I HAD TO DO SOME PROGRAMMING TRICKS TO GET ADDITION TO WORK:
            GO FIND IT, EXPLAIN IT, AND WHY I HAD TO DO IT THAT WAY:

Q008: 

     
          EXPLAIN THE 'length' function -- how it works, and EXPLAIN
          the substr function.

          lmv = mv.length;
          alert ("lmv = mv.length ");
          alert ("The method 'lmv = mv.length' returns length of mv, stored in lmv.");                  
          alert ("The length of " + mv + " = " + mv.length);
          alert (mv + ".length" + " = " + lmv);
          alert ("Position is counted from 0 position");
          mmv = mv.substr(0,1);

Q009:

1 <body BGCOLOR="yellow"> 2 <center> 3 <h2> Inputting Numbers </h2> 4 <form> 5 <table WIDTH=90%> 6 <tr> 7 <td colspan=3> 8 Enter a String............... 9 <input NAME=inputNum TYPE="text" SIZE=8 VALUE="" 10 onBlur=checkNum()><p> 11 </td> 12 </tr> 13 </table> 14 </form> 15 </center> 16 </body> 
        Explain each line like this:
         1.  starts BODY, sets screen background color to yellow.
         .
         9   the form characteristics are: it accepts a field called 
             'inputNum' which is text, length of 8, initialized to null.

Q010: 

          I used "Glassbox" approach here contrasted with
          "Blackbox" -- Glassbox (GB) means opening up the process
          so you can see what is happening inside. 

          Give an example from this lesson of GB.
          Does it help you?  Comments.





757790js.htm 11SEP01