Summer 2007 week 3: 5/25

Hello everybody,
Welcome to the blog for DMA106, JavaScript, to those of you who haven't visited yet. Although this blog is meant to serve as a supplement to the class, and it definitely can go a long way to keeping you caught up if you miss a class here or there, as I will repeat here almost everything I cover in class, it is by no means a replacement. Please remember, your grade will suffer seriously if you do not attend class.
    I think we did a lot of nice work this past Friday, and I was quite happy with how you all seem to be picking up the material. Not that it is easy by any means for most of you, but I can see you getting it little by little. You'll notice by now that a little bit of persistence, and a lot of tedious attention to detail really pay off.
    Also, if you cannot get something in the homework on your own, please find someone (especially me) to help you during the week before your homework is due. As I mentioned to everyone, if you spend some time on a particular piece of homework and cannot get it to work, move on to the next thing is there is something else to do. That way I will be able to see that you tried all of it. If you do not make an attempt, then I cannot see where your mistakes are to help you.

    Hope you've all had a nice long weekend. See you Friday.
Good Luck, Carter-

1. TOPICS:
   
   • Operators:
     
     • LINK   Numerical Operators,
       
     • LINK   Comparison Operators,
       
     • LINK   Logical Operators,
       
     • LINK   Assignment Operators
       
   • Operations:
     
     • LINK   Numerical Operations,
       
     • LINK   Comparison Operations,
       
     • LINK   Conditional Operations
       
   • LINK   User-defined Functions:
     
   • New Built-in Functions:
     
     • LINK   typeof(),
       
     • LINK   eval(),
       
     
     
   
   
2. HOMEWORK:
   
   1. From the book—Using Notepad, Textpad, or TextEdit (Mac), please type an .html document that contains the following questions and answers from the book (please include all necessary scripts, and please try to distinguish the questions from the answers):
      
      1. Chapter 4: 1, 2 and 3;
         
      2. Chapter 5: 1, 3 - 5, and 7;
         
      
      
   2. Type the User-Defined Function below:
      
      1. Declare a new variable with the name userName.
         
      2. Initialize the variable with a prompt() function that requests the user's name.
         
      3. Next, declare another variable named choice, and initialize it with a confirm() function that tells the user to click okay if they want a greeting displayed in an alert() function or a document.write() function.
         
         for example:
         "OKAY: --> alert();\nCANCEL: --> document.write()"
         
         **NOTE**
         the two characters, \n, function like a <br/> tag within alert(), confirm(), and prompt() functions.
         
         
      4. Now, declare a third variable named display, and initialize it with a conditional operation.
         
      5. The first operand of the conditional operation should be the choice variable, followed by a question mark.
         
      6. The second operand of the conditional operation should be the string: "alert('hello, '+ userName)".
         
      7. The third operand , and final, of the conditional operation should be the string: "document.write('hello, '+ userName)".
         
      8. Finally, in the next line, type the eval() function with the variable, display between the parentheses.
         
      
      
   
   
3. INTRODUCE:
   
   1. Operators: In the last class, you were introduced to the elements in JavaScript known as operators. Below, you will find listed many of the ones we will consider in class this term:
      
      1. Numerical Operators:
         
         1. Addition ( + ) —Combines two quantities (numbers) to form a sum.
            
         2. Subtraction ( - )—Reduces one quantity by another quantity.
            
         3. Multiplication ( * ) —The process by which one quantity is added to itself a given number of times: also ×.
            
         4. Division ( / ) —The process of determining precisely how many times one quantity is contained in, or may be divided by, another quantity: also ÷.
            
         5. Incrementation ( ++ ) —The process of increasing a quantity by one.
            
         6. Decrementation ( -- )—The process of decareasing a quantity by one.
            
         
         
      2. Comparison Operators:
         
         1. Less Than ( < ) —Compares two quantities (numbers) based on whether one is smaller than the other or not.
            
         2. Greater Than ( > )—Compares two quantities (numbers) based on whether one is larger than the other or not.
            
         3. Less Than or Equal To ( <= ) —Compares two quantities (numbers) based on whether one is smaller than the other or whether they are the same.
            
         4. Greater Than or Equal to ( >= ) —Compares two quantities (numbers) based on whether one is larger than the other or whether they are the same.
            
         5. Not Less Than ( !< ) —Compares two quantities (numbers) based on whether one is NOT smaller than the other.
            
         6. Not Greater Than ( !> ) —Compares two quantities (numbers) based on whether one is NOT larger than the other.
            
         7. Equal To ( == ) —Compares two quantities (numbers) based on whether they are the same or not.
            
         8. Not Equal To ( != ) —Compares two quantities (numbers) based on whether they are NOT the same.
            
         
         
      3. Logical Operators:
         
         1. And ( && ) —An element used to combine two operations or solutions as one compound operation or one compound solution.
            
         2. Or ( || ) —An element used to present an option between two or more solutions or operations.
            
         3. Not ( ! ) —An element which eliminates the possibility of a particular solution or operation.
            
         
         
      4. Assignment Operators:
         
         1. Assignment ( = ) —An element used to provide a new value to another element such as a variable or array.
            
         2. Assignment-Addition ( += ) —An operator used to increase the current value of an element by a given number and assign the element the new value.
            
         3. Assignment-Subtraction ( -= ) —An operator used to decrease the current value of an element by a given number and assign the element the new value.
            
         
         
      
      
   2. Operations—these are actions taken upon elements of data, on numbers and strings for example, by operators that change or alter their values in some way.
      
      1. Numerical Operations—This group of operations are perhaps the most intuitively to our understanding than most of the others. Save one or two of them, they need no real explanation; therefore, below you will see examples of various numerical operations:
                   o p e r a t i o n
             5             −             1
           operand 1     operator     operand 2
             3             ×             8
           operand 1     operator     operand 2
             4             ÷             2
           operand 1     operator     operand 2
             7             %             2
           operand 1     operator     operand 2
             6             +             9
                   o p e r a t i o n
         
          
         
      2. Comparison Operations—This group of operations are probably also recognizable at first glance; however, the results of these operations are probably less than clear, no pun intended. If we are to understand operations in the way they are defined above, as actions upon elements of data resulting in another element of data, then maybe it can be made more clear. In this case, the resulting data is of a completely different type. If what is being compared by the operators are two numerical values (two elements of numerical data), then the result is actually an element of boolean data. What results from all of the operations below, is simply a true or false:
                   o p e r a t i o n
             5             <             1
           operand 1     operator     operand 2
             3             >             8
           operand 1     operator     operand 2
             4             ÷             2
           operand 1     operator     operand 2
             7             <=             2
           operand 1     operator     operand 2
             6             >=             9
           operand 1     operator     operand 2
             3             !<             3
           operand 1     operator     operand 2
             8             !>             9
           operand 1     operator     operand 2
             6             ==             6
           operand 1     operator     operand 2
             4             !=             4
                   o p e r a t i o n
         
          
         
      3. Conditional Operations—These operations are arguably the most NON-intuitive element within the whole of the JavaScript scripting language. The reason I say this is that there is nothing in our prior education that might suggest to us how to interpret them. Without having the structure explained to us first, an example of one of these operations would probably remain inscrutable. That being said, once described and demonstrated, they are rather simple to use. Much like learning new words, it just takes a bit of time for us to learn their meanings and then to get used to employing them ourselves.
             First, unlike all other operations we have considered such as the examples above, this is the only type with three (3) operands. Moreover, they do not employ any of the operands discussed so far in class. Their structure follows the following pattern:
               conditional operation structure
             operand 1 ?   operand 2 :   operand 3 ;
         
                     conditional operation
         example: (5 < 6) ? "doremifa" : "solatido" ;
         
         Now, let us see if we can understand what's going on with this operation: in this kind of operation, the computer only evaluates the first operand. But what does this mean? What does it mean to evaluate? In this case, the computer will only consider, process, or calculate the first operand. The computer will not evaluate in any depth the second or third operands. Their meaning or values is of no consequence to the function of this operation. However, the value of the first operand, is of great consequence. The computer will evaluate the first operand and attempt to determine whether it equals, or is equivalent to, or evaluates to true or false.
             To simplify matters, in my example above, I have only made the first operand meaningful. The second and third operands are just seemingly random strings of characters. The computer wouldn't be able to make real sense of these two anymore than we could. The first one, on the other hand, will either be true or false.
             In this case, five is indeed less than six, so this little expression—the first operand—will evaluate to true, and not false. But what does this mean? What happens after that?
             In this sort of operation, if the first operand evaluates to TRUE then the result of the operation is operand 2; however, if the first operand evaluates to FALSE then the result of the operation is operand 3. Therefore, in the above example, since 5 is less than 6, it is the same as true: the first operand then is true. The result of this conditional operation is therefore operand 2, which is equal to the string, "doremifa".
       
      
   3. User-defined Functions—In JavaScript, a function is an action that is performed or taken by JavaScript. Another name for a function is the term method as there is no difference between the two elements. For reasons that will be explained at a later time, the terms are often used interchangeably. Up to this point already in the first three weeks of class, we have identified a number of built-in functions that help to form the basis of what JavaScript does as a scripting language. Each of these functions performs an action: alert() , confirm() , prompt() , parseInt() , and typeof() . Now, whether we use these functions that have already been defined by the language itself, or whether we as users and programmers create and define our own functions makes little difference. A function is always visually identified by the pair of opening and closing parentheses that follows its name, and it always performs an action or series of actions. A user-defined function is no different. Here are the four (4) elements required for creating a new user-defined function:
      
      1. the function keyword
         
      2. a unique name that is not one of the reserved JavaScript keywords;
         
      3. a pair of parentheses to enclose what we will later learn are called parameters, or arguments;
         
      4. a pair of curly brackets that delimits the extents of the code to be included in the function.
         
       
      
      <script language="javascript" type="text/javascript">
       <!--
      
      
      1.   function compOp()
         
      2.   {
         
      3.    var userNum = prompt("Please type
         
      4.        a number.","");
         
      5.    var temp = parseInt(userNum);
         
      6.    var ans = (temp % 2)? "ODD" : "EVEN";
         
      7.    alert("Your number, " + temp +
         
      8.        ", is "+ans);
         
      9.   }
         
      
       //-- >
      </script>
      
      Now, let us go over this script line-by-line so that we can determine what is happening.
      
      
      Line 1:
      function compOp()
      Here is the simple function declaration including:
      
      1. the function keyword;
         
      2. the unique name of the function: compOp;
         
      3. the opening and closing parentheses; and
         
      4. the opening, line 2, and closing line 9, curly brackets for the entire function.
      
      Lines 3-4:
      var userNum = prompt("Please type a number.","");
      The first variable declaration and its initialization including:
      
      1. the var keyword;
         
      2. the unique name of the variable: userNum;
         
      3. the assignment operator ( = ); and
         
      4. the prompt() function which requests data from the user.
      
      Line 5:
      var temp = parseInt(userNum);
      The second variable declaration and its initialization including:
      
      1. the var keyword;
         
      2. the unique name of the variable: temp;
         
      3. the assignment operator; and
         
      4. the value assigned, which is a JavaScript built-in function, parseInt(), which converts string data to numerical data. Recall, that anything that the user types into the prompt() function will, strictly speaking, be a string. Therefore, in order for any numerical operations are to be performed on this user's number, it must first be converted from a line of characters (string data) to numerals (numerical data) Without this, the remainder of the script will not function properly.
      
      Line 6:
      var ans = (temp % 2)? "ODD" : "EVEN";
      The third variable declaration and its initialization including:
      
      1. the var keyword;
         
      2. the unique name of the variable: ans;
         
      3. the assignment operator; and
         
      4. the value assigned, which comes from a conditional operation. The first operand uses the modulo operator which provides the remainder when the number in temp is divided by 2. If the number is odd then the remainder will be 1. If the number is even, however, then the remainder will be 0. This is a lucky coincidence, because it just so happens that 0 & 1 are the numerical equivalents of FALSE and TRUE. Morover, they are what the conditional operation works with. If the remainder of operand1 is 1, then operand2, "ODD", will be the result of this operation; however, if the remainder of operand1 is 0 then operand3, "EVEN", will be the result. Try it and see if it works for you. Then, try switching the places of "ODD" and "EVEN" to see what happens.
             Whatever the result of the operation, it gets assigned to the variable, ans.
      
      Line 7-8:
      alert("Your number, " + temp + ", is "+ans);
      This line is a simple alert() function which concatenates a statement together so that the user can see whether his number is ODD or EVEN.
      
      1. The first term of the concatenated statement is the string—"Your number, ".
         
      2. The second term of the concatenated statement is the variable, temp, which contains the user's number entered in at the prompt at the beginning of the script.
         
      3. The third term of the concatenation is a very short string, ", is ".
         
      4. And the fourth and final term of the concatenation another variable, ans, which contains the result of the comparison operation, either the string "ODD" or the string "EVEN".
      
      
       
      
   4. New Built-in Functions—Below, find a couple of new Built-in Functions explained. Although we have not yet used either of these in class, they have come up in the reading, and I will be mentioning them from time to time. Please review and make sure you understand. A couple of quick experiments should do the trick to help you comprehend their place in a script.
      
      1. typeof()—This function works with a piece of data and identifies what its data type is, whether it is numerical, string, or boolean, for example:
             var myData = 1000;
             var myType = typeof(myData);
             alert(myType);
         Above, we have two variables. The first one has 1000 as its numerical value. The second one is given a value by the typeof() function. Between the parentheses, you should notice that we have the other variable myData. This variable contains an element of numerical data, so the value of the variable, myType, will be numerical. Therefore, what you will see in the alert() box, is simply the word numerical.
         
      2. eval()—This function is similar to the parseInt() function in that it converts data from one form to another. In this case, it converts string data not into numerical data, but rather into JavaScript code itself. For example. it could convert the string "alert('hello, how are you?')" or even something as simple as "10 + 10" into a line of JavaScript code. Try a simple comparison between two alerts. They are typed like so:
             var myString = "10 + 10";
             var convertedString = eval(myString);
         
             alert(myString);
             alert(convertedString);
         
         
      
      
   
   

Summer 2007 week 2: 5/18

1. TOPICS:
   
   • Data Types:
     
     • LINK   Numerical Data,
       
     • LINK   String Data,
       
     • LINK   Boolean Data,
       
   • Basic Built-in Functions:
     
     • LINK   alert() function,
       
     • LINK   document.write() function,
       
     • LINK   confirm() function,
       
     • LINK   prompt() function,
       
     • LINK   parseInt() function,
       
   • Miscellaneous:
     
     • LINK   Concatenation vs. Addition,
       
     • LINK   Variables,
       
     
     
   
   
2. HOMEWORK:
   
   1. Reading—Chapters 1 & 2 in the text
      
   2. Next, from the end of class—Using Notepad, Textpad, or TextEdit with a Mac, please type an .html document with a script that does the following:
      
      • First, declares a variable with the name num1.
        
      • Second, initializes that variable with a prompt() function.
        
      • The prompt() function should request the user's age from the user.
        
      • Third, declares a second variable with the name num2.
        
      • Fourth, initializes this second variable with another prompt() function.
        
      • The prompt() function should request a second number from the user, his/her birth year.
        
      • Fifth, declares a third variable named sum.
        
      • Sixth, initializes this variable with a numerical operation that adds together num1 and num2.
        
      • Seventh, uses a document.write() function to display both the numerical operation and its sum.
        
      
      
   3. Create a second document—In this second document, create another script that does the following:
      
      • requests 2 numbers from the user;
        
      • Then, uses a document.write() function.
        
      • Display both the answer and the operation that multiplies these two numbers in this function.
        
      
      
   4. Create a third document—In this third document, create another script that requests the user's name, and then uses his/her name in a greeting using a document.write() function.
          For example, the greeting could say:
      Good evening, Carter, welcome to JavaScript class.
      You will get extra credit if you can make the user's name a different color.
      
   5. From the book—Do question 5 at the end of chapter 3.
      
   
   
3. REVIEW: Last week, you were introduced to the three types of data defined by JavaScript:
   
   1. JavaScript Data Types  
      
      1. Numerical Data—This is perhaps the easiest data type to recognize as it pertains to something that we can intuitively recognize, things that we deal with on a daily basis, numbers. 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 type is also relatively intuitive as the term itself, STRING, refers simply to a 'string of characters' set between quotation marks. The term 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. Or, it may be some non-sensical series of character lined-up one after the other. 
         
      3. Boolean Data—This type simply includes 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()—This is perhaps the easiest function to remember as 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. Furthermore, like the alert(), some information or data is sent by the script to the user, usually in the form of a request for information. However, as a result of this 'request', this function IS in fact interactive which makes it a TWO-WAY exchange of information. This is because the user must provide some data of his/her own back to the script. The user thusly affects the outcome of the script. 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 means to parse the data provided as an integer; and broken down into plain English, means to PROCESS THE INFORMATION AS A 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. 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. INTRODUCE: Friday, we began working on a short script that put to use much of what we have covered in the first two classes. Most importantly, it requires that you begin to understand the jargon that is used to describe the computer processes encapsulated in a script. We'll go through it step by step as we did in class:
   
   1. Step 1: declare a variable with the name num1—to declare a variable simply means to create a new variable, and we do this with two (2) terms: the var keyword and a unique name. For example:
        var num1;
      
      
   2. Step 2: initialize that variable with a prompt() function
      
   3. Step 3: The prompt() function should request a number from the user—to initialize a variable means to give it a value for the first time, and we do this by using the assignment operator ( = ), followed by an element of data, an operation, or a function that produces an element of data. For example, in what follows, we initialize num1 with a prompt() function which results in an element of data:
        var num1 =
          prompt("Please type a number below","");
      
      
   4. Step 4: declare a second variable with the name num2—this step follows along a similar pattern to step 1:
        var num1 =
          prompt("Please type a number below","");
        var num2;
      
      
   5. Step 5: initialize this second variable with another prompt() function.
      
   6. Step 6: The prompt() function should request a second number from the user—this step follows along a similar pattern to step 2:
        var num1 =
          prompt("Please type a number below","");
        var num2 =
          prompt("Please type a SECOND number below","");
      
      
   7. Step 7: declare a third variable named userSum.
        var num1 =
          prompt("Please type a number below","");
        var num2 =
          prompt("Please type a SECOND number below","");
        var userSum;
      
      
   8. Step 8: initialize the third variable with a numerical operation that adds together num1 and num2—instead of providing a prompt() function to provide a value for this variable, in this step, we add the previous two variables together. This is known as a numerical operation.
        var num1 =
          prompt("Please type a number below","");
        var num2 =
          prompt("Please type a SECOND number below","");
        var userSum = num1 + num2;
      
      
   9. Step 9: alert the user to the value of userSum—for this step, we simply place the variable, userSum, inside an alert() function to reveal its value.
        var num1 =
          prompt("Please type a number below","");
        var num2 =
          prompt("Please type a SECOND number below","");
        var userSum = num1 + num2;
        alert(userSum);
      
      What we see as a result of this last step, however, is NOT a sum at all; but rather, the result of concatenation. If the user were to type the number 10 as a result of the first prompt(), and then the number 20 as a result of the second prompt(), the result that would appear in the final alert() function would be 1020.
          Seeing this in the alert() box at first might be a bit perplexing, since we should all know that the sum of 10 and 20 is 30. Why then the 1020 result? Obviously, something else has happened instead of addition. As mentioned, what occurred instead is concatenation. But why would this happen even though the user types numbers at the prompt() ? The answer is that the prompt() function always results in string data, even if what is typed in the box is a number. Therefore, instead of addition:
        10 + 20 = 30;
      we will have concatenation:
        "10" + "20" = "1020";
      That is why we would see something like 1020 in the alert() function. But then the question is: how do we change the string data from the prompt() into numerical data? And the answer to that would be by using the parseInt() function.
      
      
   10. Step 10: use the parseInt() function to convert the string data that comes from the prompt() function into numerical data. Let us go slowly and take this step-by-step. Here is what we know so far, that the following statement, for example, results in string data:
         var num1 =
           prompt("Please type a number below","");
       This means that whatever the user types at the prompt() function, even if it is a number, will be a string and it will be stored in the num1 variable. We also know how the parseInt() function works like so:
         var num1 =
           parseInt(a string goes here)
       Above, we can see that an element of string data goes in between the parentheses of the parseInt() function, converting the string to an integer (a whole number) which will be stored in the variable, num1. For example:
         var num1 =
           parseInt("1001")
       As a result of the parseInt() function, the string "1001" is converted into the integer 1001. Once this occurs, the number is placed inside of the num1 variable.
           Now, if we put together what we know about the prompt() function and the parseInt() function, we might come out with a satisfying result:
       
       1. The prompt() function results in a string that the user types in the blank space provided, even if the user types a number there;
          
       2. The parseInt() function converts the string data in between its parentheses into numerical data;
          
       3. A variable stores a single element of data, whether it be numerical, string, or boolean.
          
       4. The assignment operator ( = ) transfers a value on its right side into a variable, for example, on its left side.
          var num1 =
            parseInt(prompt("Please type a number below",""))
          Above, the string from the prompt() function is converted into an integer by the parseInt() function, transferred by the assignment operator ( = ) into and stored by the variable, num1. As a result of all 10 steps, we get the following little script:
          var num1 =
            parseInt(prompt("Please type a number below",""));
          
          var num2 =
            parseInt(prompt("Please type a SECOND number below",""));
          
          var userSum = num1 + num2;
          
          alert(userSum);
          
          
       
       
   
   

Summer 2007 week 1: 5/11

hi everybody,
sorry i didn't post this earlier. i've actually been rather ill since our class on friday night. in any case, i did say that you needed to check this blog over the course of the week to find out what you homework for our second class this week.

as mentioned in class, please make sure you purchase the required text and bring it to class. i will be checking to see who has the book and who doesn't. also, i want you all to find out the definition of the term variable in JavaScript, and then demonstrate its use with the alert() function that we learned in our last class.

good luck, carter-

1. TOPICS:
   
   • LINK   Data Types,
     
   • LINK   Built-in Functions,
     
   • LINK   Variables,
     
   • LINK   Concatenation
     
   
   
2. HOMEWORK: see homework above in the introductory note.
    
   
3. INTRODUCE:
   
   1. JavaScript Data Types
      
      1. Numerical Data—This is perhaps the easiest data type to recognize as it pertains to something that we can intuitively recognize, things that we deal with on a daily basis, numbers. 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 type is also relatively intuitive as the term itself, STRING, refers simply to a 'string of characters' set between quotation marks. The term 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. Or, it may be some non-sensical series of character lined-up one after the other.
         
      3. Boolean Data—This type simply includes 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()—This is perhaps the easiest function to remember as 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. Furthermore, like the alert(), some information or data is sent by the script to the user, usually in the form of a request for information. However, as a result of this 'request', this function IS in fact interactive which makes it a TWO-WAY exchange of information. This is because the user must provide some data of his/her own back to the script. The user thusly affects the outcome of the script. 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 means to parse the data provided as an integer; and broken down into plain English, means to PROCESS THE INFORMATION AS A 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. 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"