Summer 2007 week 4: 6/01

hi everybody,
hope you had a nice weekend, but now here we are with another week ahead of us. you all did great in the last class. i felt very good about how the class is going so far when i left TCI for the weekend. so please, as i mentioned in class on friday, don't fall behind with your homework.

please let me know if you need help.
carter-

1. TOPICS:
   
   • LINK   Defining: Operations, Operators, Operands,
     
   • LINK   More on Conditional Operations,
     
   • LINK   More on User-Defined Functions,
     
   • LINK   Introducing IF/ELSE Statements (Conditional Statements),
     
   • LINK   A review of the primary issues discussed in the first three (3) classes,
     
   
   
2. HOMEWORK: Using Notepad or TextPad (or TextEdit with a Mac), please type an .html document with all the necessary scripts listed below. Where possible for the questions, create user-defined functions:
   
   • Do the questions from the end of chapter 6;
     
   • Please do the following script
     
     1. First, requests the user's name;
        
     2. Second, requests a number from the user;
        
     3. Third, requests a 2nd number from the user;
        
     4. Fourth, determines whether the 1st number is greater than, less than, or equal to the 2nd number using conditional statements (IF/ELSE);
        
     5. And then, that finally tells the user (using his/her name) whether the first number or second number is greater via an alert() function.
           Click Here to see example below:
        
     
     
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   alert!

   Hey, Maria, your 1st number, 18, is LESS THAN your 2nd number, 67.

   close

   
   
   
    
   
3. REVIEW: During these first three (3) weeks of class, you have been introduced to the three types of data defined by JavaScript:
   
   1. JavaScript Data Types
      
      1. Numerical Data—Perhaps the easiest type to recognize as it pertains to something intuitive, that we deal with on a daily basis, number. It includes all numbers, both positive (greater than zero) and negative (less than zero), integers (whole numbers such as 1, 2, 3, -17, 200, etc.), and decimals (1.5, .23, 22.87, etc). Moreover, it also includes numerical expressions; that is, numbers expressed in terms of equations, simple equations such as 1 + 1, more complex equations such as 5 * ((5 + 1) / (25 - 8)), as well as much more complicated mathematical equations that include geometrical, algebraic, and trigonometric functions, and calculus.
         
      2. String Data—This is also relatively intuitive as the term itself, STRING, refers simply to a 'string of characters' set between quotation marks. Characters here refers to any alpha-numeric character (numbers and letters), both lower and upper case, the hypen, the underscore, as well as all the other characters used in HTML. String data can be common English, such a a word ("hello"), a phrase ("very good food"), or longer strings such as sentences or paragraphs, or even whole 'pages' of HTML.
         
      3. Boolean Data—This includes simply the values TRUE and FALSE, and their numerical equivalents, 1 and 0.
         
      
      
   2. JavaScript Basic Built-in Functions
      
      You have also been introduced to some basic built-in JavaScript functions. Remember, a function is a an action that JavaScript takes. The built-in functions we have covered up to now are as follows:
      
      1. alert()—Perhaps the easiest function to remember, it causes the browser to display a small 'alert' window. It is designed as a ONE-WAY communication of information (data) from the browser or script to the user. It is NOT interactive in that the user cannot respond by sending any information of his/her own.
         
      2. document.write()—Like the alert(), the document.write() is designed as a ONE-WAY communication of information (data) from the browser or script to the user. It is NOT interactive in that the user cannot respond by sending any information of his/her own; however, it does not produce an alert box. Instead, the information is 'written' directly into the browser window, the page itself, otherwise known as the 'document'. For this reason, the information sent from the script or browser, may also contain HTML or CSS.
         
      3. prompt()—This function is similar to the alert box in that it produces a small window that pops up above the browser window. Also similar is the fact that some information or data is sent by the script to the user, usually in the form of a request for information. As a result, this function IS in fact interactive in that the user does provide some data of his/her own back to the script, thus affecting the outcome. The type of data the user sends back is restricted only by the request made.
         
      4. confirm()—This function is also similar to the alert function in that it produces a small window that pops up above the browser window. Furthermore, it is similar to the prompt() function as well in that this function is also interactive. The user here must also provide some data of his/her own back to the script, and likewise affecting the outcome. However, the type of data the user sends back may only be in the form of boolean data as the space provided for responding to the request in the confirm box comes only in the form of 2 buttons, OKAY (true) and CANCEL (false). The request, then, must fit the restraints of this model in that TRUE or FALSE must be satisfactory responses.
         EXAMPLES:
             Good—Click okay if you need more time.
             Bad—What color is your hair?
         
      5. parseInt()—This function is different than the other four listed above in that it does not necessarily produce any physical changes or results, such as the appearance of a pop-up window, or the change of the appearance of the web-page itself. What it does is perhaps more typical of most JavaScript functions as it works INTERNALLY on the script itself, more specifically, altering the data within the script somehow. The task of this function is to change one type of data into another type of data, from STRING DATA to NUMERICAL DATA. The term 'parseInt' broken down refers to the phrase "Parse the data provided as an Integer", which simply means PROCESS AS A WHOLE NUMBER. The string data is placed between the parentheses, and the function, parseInt(), will therefore convert it from a string to a number, such as:
             parseInt("1001") = 1001 >> converting the string "1001" to the integer 1001.
         
      
      
   3. Variables—A variable in JavaScript is a special item. It serves as a container, like a cup, but which instead of containing liquids and drinks stores a single piece of information, or data. Once created, a variable may contain any piece of data of any type (numerical, string, boolean), but it may only contain one element of data at a time. This piece of data that it stores is known as its value. Moreover, this value may be changed at any time and as many times as required.
          A variable is created, or declared with two things:
      1. var keyword
         
      2. unique name
      
      A variable is then given some data to hold, assigned a value, by using the assignment operator   = and then its value. To give a variable some data, to assign it a value, for the first time is called initializing a variable.
      1. declaring a variable —> var myName
         
      2. initializing a variable —> myName = "Carter"
      
      
   
    
   
4. INTRODUCE:
   
   1. Operations: An operation consists of two (2) parts, Operators and Operands, demonstrated here with two (2) different kinds of operations:
                    o p e r a t i o n
          5         +         5
        operand 1     operator     operand 2
          6         <         9
                    o p e r a t i o n
      
      1. Arithmetic Operations—these are numerical expressions by which data is manipulated by a particular operator. Data manipulation here refers to simple exercises such as addition and subtraction. For example, each of the following is a numerical operation:
             10 + 10,
             10 - 10,
             10 * 10,
             10 / 10, and
             10 % 10
         They are numerical operations because they result in a single numerical value.
         
         
      2. Comparison Operations—these are not numerical operations in that they do not manipulate numerical data (they do not move or change numbers). The operators here (the symbol in the middle) are not used to produce a sum or a product at the end, resulting in a single piece of numerical data. The result from these is a simple true or false. The script evaluates a comparison between two pieces of data, such as two numbers, and tries to determine if it is true or false: For example, each of the following evaluates a comparison between two numerical values:
             10 < 10,
             10 > 10,
             10 <= 10,
             10 >= 10,
             10 !< 10,
             10 !> 10,
             10 == 10, and
             10 != 10
         
         
      3. Concatenation—Technically, this is just one of many different JAVASCRIPT OPERATIONS; however, because of its importance and widespread, ubiquitous usage, I have discussed it since the first class. Furthermore, I believe it deserves review and mention here. Its actual definitions are as follows:
         
         1. To connect or link in a series or chain.
            
         2. Computer Science. To arrange (strings of characters) into a chained list.
         Both above are significant to us: it is simply placing one character after another in a chain, or even one chain of characters after another chain of characters. What we are speaking about here then is STRING data. In order for concatenation to occur, there must be string data present, but it may also involve other types of data, as the example below suggests. The two (2) short strings here combined:
             "Hello, " + "how are you?"
         result in the longer string
             —> "Hello, how are you"
         Here are some other examples of concatenation:
             "Carter" + "Johnson",
                     —> "CarterJohnson"
         
             "March" + 11, —> "March11"
         
             "March" + "11", —> "March11"
         
             "March + 11", —>
         "March + 11"
         
             "March + 11 =" + "March" + "11",
                     —>
         "March + 11 = March11"
         
          
         
      4. Conditional Operations—like comparison operations, these are not numerical operations either in that they do not manipulate numerical data (they do not move or change numbers). However, they are quite different otherswise: they are the ONLY operations that take three (3) operands; but only the first operand is evaluated, and this is based on whether it is TRUE or FALSE. If the first operand evaluates to true, then the second operand is passed as the returned value, and the third is dismissed altogether. However, if the first operand evaluates to false, then the second operand is dismissed, and the third operand is the one that is passed as the returned value. It follows the following form:
                 c o n d i t i o n a l   o p e r a t i o n
             (6 < 9) : "Ha Ha!" ; "Hee Hee!";
             operand 1       operand 2       operand 3
         
      
      
       
      
   2. User-Defined Functions: There are many built-in functions that make up many of the actions that JavaScript can take. However, a scripter may define her own functions, thereby giving JavaScript new actions to take. Such user-defined functions are actually containers, much like variables; however, unlike variables which hold a single piece of data, a function is a container which hold actions, or rather the code that causes certain actions to occur. A user-defined statement, then, contains JavaScript statements.
          To declare a user-defined function you must type four (4) things:
      
      1. the function keyword,
         
      2. a unique name,
         
      3. a pair of opening and closing parentheses, and
         
      4. a pair of opening and closing curly brackets.
         
      
      Since it has been established that all functions, including user-defined functions, are really containers for code that, when activated, cause JavaScript to take certain actions, it must be made clear where this code goes: it is placed in between the curly brackets. The opening bracket and closing bracket indicate the extents of the code included in the function. Once code is placed between the brackets, it will not be activated unless called upon.
      
          A function is called by using its name followed by the pair of parentheses. One common way this is done is with a link, where, instead of the URL placed after the HREF attribute, the name of the function is placed there as follows:
              <a href="javascript:myFunctionName()"> click here </a>
      where the name of the function, the function being called, or activated, is myFunctionName().
      
      Examples—the following are some examples worked out in class of scripts using conditional operations:
      
      
      
      1. positive/negative number: LINK
         <script language="javascript" type="text/javascript">
         
          function posNegFun()
           {
            var userNum = parseInt(prompt("Please type a number in the blank below.","");
         
            var temp = (userNum < 0)? "NEGATIVE" : "POSITIVE" ;
         
            alert("Your number, " +userNum+ ", is " +temp);
           }
         
         </script >
         
         
      2. okay/cancel button: LINK
         <script language="javascript" type="text/javascript">
         
          function confirmFun()
           {
            var confirmVar = confirm("Please click one of the buttons below, OKAY or CANCEL.");
         
            var temp = (confirmVar)? "OKAY" : "CANCEL" ;
         
            alert("You clicked the " +temp+ " button");
           }
         
         </script >
         
         
      3. odd/even number: LINK
         <script language="javascript" type="text/javascript">
         
          function oddEvenFun()
           {
            var userNum = parseInt(prompt("Please type a number in the blank below.","");
         
            var temp = (userNum % 2)? "ODD" : "EVEN" ;
         
            alert("Your number, " +userNum+ ", is " +temp);
           }
         
         </script >
         
      
       
      
   3. Conditional (IF/ELSE) Statements: If...else statements are known as CONDITIONAL statements because they rely on a condition before selected code is executed. For example, on the condition that the user clicks okay in a confirm() function, some code may be executed. The first part of the statement always begins with the IF keyword followed by the condition set between parentheses:
          if (100 >10)
      If the condition, set between the parentheses above, evaluates to TRUE, then some selected code is executed. Since 100 is in fact greater than 10, then the condition would evaluate to true. As such, whatever code below the condition set between curly brackets will be executed. Otherwise, if the condition does not evaluate to true, if it evaluates to FALSE instead, then the code between the curly brackets is NOT executed:
        if (100 >10)
        {
          alert("The condition is TRUE!");
        };
      If the condition between the parentheses evaluates to true (which in this case it would), then the code between the curly brackets (the alert() function) would be executed. But if the condition does not evaluate to true, then the alert would not be executed. In that case, a second part could be added to take into consideration the possibility that the condition could return FALSE. If so, then another set of code could be executed if there is an else following it as such:
        if (100 >10)
        {
          alert("The condition is TRUE!");
        }
        else
        {
          alert("The condition is FALSE!");
        };
      If there is more than one condition to test for, then you must add an additional IF statement for each condition that the code must test for:
        if (userNumber >10)
        {
          alert("The number is GREATER than 10!");
        }
        else if (userNumber <10)
        {
          alert("The number is LESS than 10!");
        }
        else
        {
          alert("The number is EQUAL to 10!");
        };
      
      if/else...if statements: LINK
      
      There need only be 2 test conditions (and therefore only 2 IF statements) because if the user's number is not greater than 10, and if it is not less then 10, then the only other possibility is that it is equal to 10. There doesn't need to be a condition to test for this possibility.