| Lesson 2: Boolean Today we are going to discuss how JavaScript allows us to manipulate information, a key to interacting with our webpage's visitors. All programing languages have some form of storage for information. The areas the information is stored in has to have a name or address of some sort so the program can look for it when needed. These names and their derivative addresses are most often called variables. 1) Variable Types In most programming languages, a variable can only hold one type of data based upon it's declaration/initialization (see below). However, JavaScript is untyped which means we can store either text strings or numerical values or entire objects (only one type at any given time) or even boolean values in any variable. JavaScript also kindly does type conversion for you automatically in most situations (ie. changes 1 to '1'), and even when it doesn't, it is very simple to script these changes when necessary. Common JavaScript data types are broken into two main groups: primitive type- numbers=(any real number) boolean=(true or false) [note-the null and undefined values are actually special primitive types]; reference types- objects=(any JavaScript object such as a function) arrays=(a group of values contained in a logical reference structure) [note-strings are a special type of array created by a "string" of alpha-numeric characters, such as text or a function] functions=(sets of javascript commands referenced by a variable name) 2) Variable Declaration and Assignment A) Declaring a variable in javascript creates the variable name, leaving it untyped and it's value as undefined, example: var a; tells the program that a is a variable set aside, but nothing else. B) Assigning a value to a variable replaces the undefined value with the assignment value, and can be done at the same time as declaring the variable, or after declaring it, (note- attempting to assign to an undelcared variable will either create a new global variable or cause a runtime error depending on platform and coding). So both var a;a=0; and var a=0; are valid, but just a=0; will either create a global variable named a just as if you used var a; , or will create a runtime error depending on the platform and situation. This means it's best to always declare all variables at the begining of your scripting to protect against errors . C) Undefined can mean two things: i) In the case of an undeclared variable, it means the variable itself is undefined, and it can create a runtime error that will prevent execution of a block of coding ii) In the case of an unassigned variable, it is a special value that the variable is set to by default, and will not affect the runtime operations outside of the directives and or needs of the code block it's scope affects. This means that if you have not declared a variable, and try to use it anyway, you may get an error that may stop the rest of the page from working. However, if you have declared the variable, but not assigned a value to it, you will receive a special "undefined" value for the variable that may or may not cause an error that will stop the page from working depending on the code block in which it occurs. 3) Variable Scope A) The place you declare a variable determines the scope of that variable in relation to the rest of your scripting. B) Declaring a variable with a var statement outside of any functions or objects will create a variable with a global scope, meaning it and it's value are available to any other portion code on that page (and in some cases other pages). C) Declaring a variable within a function or object limits the scope of the variable to the function or object in which it was declared, meaning that a variable first declared in a function can only have it's value checked and or changed withing that function. The scope of the variable can affect not only where and by what code blocks the variable's value can be accessed, but also can create multiple variables of the same name, each with limited scope, and each would only be accessible from withing it's own scope limitations. So how can we use a Boolean value of a variable to make a page interactive? Let's try a simple script that will give a different color background based upon the the user's choice: Sample 2 Boolean-Variable/User Interaction 1) HTML to incorporate the scripting: A) The variable declaration, including the function (which is a variable), and initial assignment (initialization) are done in the head section in most cases B) We use the onClick event handler of the form's buttons to interact with the user. 2) DOM A) Each time you create a new variable, you create a new object which then becomes a part of the DOM of the page, and can be accessed accordingly by JavaScript. B) The document object has color properties that include the bgColor (background color) which allows us to change the color settings of the document (default is the HTML body tag's bgcolor parameter) C) The function uses a if/then/else statement (you will learn more on these later) which compares (notice the == used to compare rather than assign as = does) the value of the variable userLikes to one possible boolean value (false), and acts in one way if the variable's value is equal to that value, and in another way if it is not. 3) User Interaction Once either of the buttons are clicked, the event handler in the used button both changes the boolean value of the variable userLikes, and calls a function to utilize the user's new choice [note-these statements within the event handler are seperated by semicolons just as any other code block with multiple statements on one line]. This simple script allows the user to change a variable's value, and in the process make a fundamental change to the page while viewing it, causing the page to become interactive, and creating a more memorable impression in the process. Notes- 1) Always remember that an unassigned boolean variable actutally has a third value of undefined until assigned a value of true or false, just as any variable has a special value of undefined when declared but not assigned a specific value. 2) Remember that any variable can have more than one occurance due to scope, and the ability to access any variable is directly dependent upon the variable's scope. It is highly recomended that you do some further reading into the scope, data typing, and type converting capabilities of JavaScript. |