| Lesson 1: confirm(): Today we are going to build on what we have learned in the previous two lessons, and discuss ways to compare variables and their associated values, and how to create various interactions with our users as a result of these comparisons. There are three basic sets of characters used for comparisons in JavaScript (comparitors or comparison operators), each of which returns a boolean (true or false) value for the statement when a script is run: 1) Equality- Uses auto type conversion for instance, if you compare '1' to 1, the equality comparitor will convert the '1' string to the number 1, resulting in a true value. For booleans, a value of true converts to 1 and value of false converts to 0. A) equals == '1'==1 is true 1==true is true '1'==true is true '0'==true is false B) does not equal != '1'!=0 is true 1!=false is true '1'!=false is true '0'!=false is false 2) Identity- No type conversions performed following the same example as above, the identity comparitor will not convert the '1' string to a number, so it will result in a false value when comparing '1' to 1 (nor will it convert boolean or objects, if it's not the same type, it doesn't have the same identity) A) equals === '1'===1 is false 1===true is false 'true'===1 is false because there is no type conversion performed B) does not equal !== '1'!==1 is true 1!==true is true true!==1 is true once again due to a lack of type conversion when checking identity 3) Comparison Operators- Uses auto conversion from objects to primitives (for instance, functions to strings containing their script statements), then from string to number or boolean to number as necessary, for instance a function would be converted to a string containing it's statements for comparison, and a string or boolean or number would be converted down the line as necessary. If both items to be compared cannot be converted to strings or numbers, these operations always return false! A) less than < '1'<2 is true 1<2 is true '0' '2'>1 is true 2>1 is true 0>false is false C) less than or equal <= '1'<=2 is true '1'<=1 is true '1'<=0 is false D) greater than or equal >= '1'>=2 is false '1'>=1 is true '1'>=0 is true Notes-it is always best to perform conversions in advance of comparisons to prevent runtime errors on various platforms. Notice the convenience of JavaScript's auto type conversion when making comparisons from form inputs which always return strings for values. Sample 2 confirm(); and comparisons 1) HTML to incorporate the script: We kept it basic here so, comparisons are complex enough! :-) 2) DOM Nothing new here, we are using the window object to create the confirm, then altering the bgColor property of the document object based upon a returned boolean value form the user, and the current value of the document object. The if/else statement will perform one set of scripts if the expression it is evaluating is true (such as '1'==1), and the set of scripts following an else statement if the expression evaluates to false (when used, else is not mandatory, you can just have it do nothing if not true). The confirm() statement returns true if the user presses the confirm button, and false if the user chooses the cancel button. The second if/else statement compares the current background color, and will change it if the equality is true, or change it back if not. [Note-pay attention to the use of the curly brackets in nesting these comparisons so that one set is only performed when the other is true, meaning the changes cannot be made unless at least two comparisons evaluate to true] 3) User Interaction By using comparisons, we can offer multiple choices to the user, and then script reactions based upon many different potential values returned from the user as a result of these choices. Rather than just telling the user something, and hoping that our statement leaves a memorable impact such as with an alert(), we can offer the user choices, and by comparing the choice values through our scripting, offering unlimited number of interactions as a result, in the process creating a unique and hopefully much more memorable experience! |