1. Project 4: Working with Variables Essentials for Design JavaScript Level One Michael Brooks

2. Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives Declare a variable Manipulate a variable numerically Use a string variable Understand data typing in JavaScript Recognize variable name limitations Make a Boolean comparison

3. Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Why Would I Do This? Variables:  Are named storage areas which are used to hold information  Are a fundamental part of any programming or scripting language  Allow us to keep track of changing values during the course of a computer program or script

4. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 Why Would I Do This? (continued) Information that can be stored within a variable can include:  Numbers  The result of a mathematical calculation  A true or false value  The result of a comparison between two values  A value entered by a user  Text  Other types of information such as array values

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Why Would I Do This? (continued) Properties are simply variables which exist inside of objects and are used to hold such things as:  the background color of a Web page  the width of the browser window Properties of objects are variables that usually have an initial value

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Visual Summary Variables are temporary storage areas for information A variable has a name and an assigned value You must declare the variable name before using the variable The act of assigning a value to a variable name “declares the variable”  In either case, you must declare the variable name before you can use the variable in your code the statement document.write(a); is an invalid statement until you declare the variable (a)

7. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Visual Summary (continued) You can assign numbers, text strings, or calculations to variables For example, you can assign two numbers to two variables with the following statements: price=100; taxRate=0.04;

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 8 Visual Summary (continued) Using two simple statements, you can calculate and tell the user the amount of tax he will pay on the item: taxAmount=price * taxRate; document.write("You will pay " + taxAmount + " in taxes on this item.");

9. Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Visual Summary (continued) A variable can also include a string value  Strings are always enclosed within quotes In JavaScript, this can mean double or single quotes, as long as the quotes are used in matching pairs for instance, if you want to use a variable to hold someone’s last name, you could use the following statement: lastName="Smith";

10. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Visual Summary (continued) You can also use the following statements, all of which are valid: lastName='Yamamoto'; fullName="Jack O'Malley"; line1="Jack said, 'save yourself', then left";

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Visual Summary (continued) The following statements are invalid because they violate JavaScript syntax rules: lastName='Smith"; fullName="Jack O"Malley"; line1="Jack said, "save yourself', then left"";

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Visual Summary (continued) The idea of the variable’s scope is also worth noting  A variable can have a local scope or a global scope  In general, a variable with a local scope only exists within a function a variable created within a function is only available within the function and is considered a local variable variables declared outside functions can be used anywhere (they have global scope), and are considered global variables

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Visual Summary (continued) You can use the keyword var to declare a variable  The term “declaring a variable” simply means you create a variable, and then assign a name to it  JavaScript requires you to declare a variable before it is used

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Visual Summary (continued) If you initialize a variable, you assign a beginning value to the variable  These statements are valid: var a=10; var b=23;  You can also combine the statements using the var keyword: var a=10, b=23;

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Declaring a Variable Variable rule number one: you must declare a variable before you can use it  To declare a variable, you can use the var statement or you can assign an initial value to the variable  A variable would have a value of undefined if it was declared without assigning an initial value

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Declaring a Variable (continued)  To declare a variable that has an assigned value, you can write the following line of code:  The var keyword is optional in most circumstances if you assign a value to the variable, you can declare the variable without using the var keyword, as in angle=90 var angle=90;

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Declaring a Variable (continued) Data Types  JavaScript does not require you to declare the data type before using the variable and determines the variable’s data type when you assign information to the variable  The type of data assigned to the variable determines how the variable is used in JavaScript for instance, in the statement city="Cleveland"; JavaScript treats the variable as a string variable because you assigned a string value to the variable

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Declaring a Variable (continued) if you decide to change the variable to use a numeric code for the city, you could include a second assignment statement, such as city=10; this statement converts the variable into a numeric variable if the statement were written with quotes around the number: city="10"; the variable would still be considered a string variable

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Declaring a Variable (continued) Use the var Keyword  JavaScript simply reports a value of undefined, if no value or data type has been determined  When programmers create new variables, most add comment statements to their code to identify the exact purpose of each variable  Being able to identify the purpose of each variable is useful when you review or use code that you did not write  Example of JavaScript reporting a value of undefined Example of JavaScript reporting a value of undefined

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Declaring a Variable (continued) var.html // create two variables var number; var name; // output the value of the variables document.write(number); document.write(" "); document.write(name); A value of undefined returns for these variables, since no value was assigned

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Writing Assignment Statements In a statement such as: variableName="value"  The equal sign is the assignment operator An assignment operator is a character or characters that assign a value to a variable

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Writing Assignment Statements (continued) Declare by Assigning Values  It is not necessary to use the var keyword to create the variables before assigning data to them  The act of assigning a value is sufficient to declare the variable Example of creating variables by assigning data to them Example of creating variables by assigning data to them

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Writing Assignment Statements (continued) var.html // create two variables number=30; name="Michael"; // output the value of the variables document.write(number); document.write(" "); document.write(name); The values stored in the variables return to the user

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Writing Assignment Statements (continued) Variations of Variable Assignments  The var keyword allows you to use a single statement to create multiple variables  It also allows you to assign multiple values to the variables  Example of using a single statement to create multiple variables Example of using a single statement to create multiple variables

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Writing Assignment Statements (continued) var.html // create two variables var number=30; var name="Michael"; // output the value of the variables document.write(number); document.write(" "); document.write(name); The var keyword allows you to use a single statement to create multiple variables

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Writing Assignment Statements (continued) Use a Method to Assign a Variable  Much of the power behind programming languages is due to variables and decision statements: they allow you to gather information, and then make decisions based upon that information they allow you to add interactivity to your Web sites, and create the critical distinction between non-interactive technologies (HTML) and technologies such as JavaScript  Example of using a method to declare a variable Example of using a method to declare a variable

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 Writing Assignment Statements (continued) var.html // create a variable name=prompt("What is your name?",""); // output the value of the variable document.write(name); A prompt box appears allowing you to assign a value to the variable name

28. Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Manipulating a Variable Numerically You can manipulate variables that hold mathematical values in a number of ways  Whenever you increase the value of a variable by 1, you increment the variable:  If you decrease the value of a variable by 1, you decrement the variable: total=total+1;total++; total=total-1;total--;

29. Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Manipulating a Variable Numerically (continued) Basic Mathematical Manipulation  You can use basic mathematical manipulations to assign a variable value  One of the primary purposes of a computer program is to adjust to current values when completing calculations, which makes variables especially useful  Example of using basic mathematical manipulations to assign a variable value Example of using basic mathematical manipulations to assign a variable value

30. Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Manipulating a Variable Numerically (continued) variablemath.html numberOne=56; numberTwo=2; total=numberOne*numberTwo; document.write(numberOne+" multiplied by "+numberTwo+ " equals "+total); This code multiplies two variables, stores the result in a third variable called total, and display the result

31. Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Manipulating a Variable Numerically (continued) Increment Variables  The process of incrementing a variable is common in many programming situations  You can accomplish the task using shorthand notation Example of incrementing variables

32. Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Manipulating a Variable Numerically (continued) incrementing.html number=1; number=number+1; document.write(number); incrementing.html number = 1: number++; document.write(number); These two codes return the same result to the browser

33. Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Manipulating a Variable Numerically (continued) Decrement Variables  The process of decrementing a variable is common in many programming situations  You can accomplish the task using shorthand notation Example of decrementing variables

34. Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Manipulating a Variable Numerically (continued) incrementing.html number=10; number=number-1; document.write(number); incrementing.html number = 10; Number--; document.write(number); These two codes return the same result to the browser

35. Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Using String Variables Variables that possess string values are referred to as string variables  String variables are useful for holding any type of textual information, such as an address, name, or description  String variables are also string objects You can use string methods to manipulate string variables

36. Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 Using String Variables (continued) Assign Strings to Variables  You can assign text string values to variables, and then used the values in a simple script  You must always enclose text strings within matching quotes otherwise, JavaScript assumes you are using a variable name and tries to insert a value stored in the variable

37. Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 Using String Variables (continued) assignstrings.html firstName="Joe"; //create last name lastName="Smith"; //display information document.write(firstName); document.write(" "); document.write(lastName); This code viewed in the IE browser

38. Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 Using String Variables (continued) Concatenate Variables  You can create a file name within JavaScript by concatenating (combining) a variable name with a period and a file extension  The term concatenate simply means you combine two or more text string values into a single text string  Concatenation is an important part of every scripting language  Examples of concatenations Examples of concatenations

39. Copyright (c) 2004 Prentice-Hall. All rights reserved. 39 Using String Variables (continued) concatenate.html firstName="Joe"; //create last name lastName="Smith"; //display information fullName=firstName+lastName document.write(fullName); The name looks strange because the first and last names are not separated by a space Next Example

40. Copyright (c) 2004 Prentice-Hall. All rights reserved. 40 Using String Variables (continued) concatenate.html firstName="Joe"; //create last name lastName="Smith"; //display information fullName=firstName+lastNamefullN ame=firstName+" "+lastName; document.write(fullName); You insert a third text string (a space) between the other two text strings, so the full name will be displayed correctly

41. Copyright (c) 2004 Prentice-Hall. All rights reserved. 41 Understanding Data Typing in JavaScript In JavaScript, variables behave differently according to the type of data stored in the variable JavaScript language is described as a loosely typed language:  JavaScript does not require you to declare the data type when you create the variable  Working with a loosely typed language is simpler than working with a strictly typed language

42. Copyright (c) 2004 Prentice-Hall. All rights reserved. 42 Understanding Data Typing in JavaScript (continued) Strictly typed languages require you to specify the data type used with a specific variable when you create the variable  In strictly typed languages, it is difficult (sometimes impossible) to convert a variable to a different data type  It is easier to write code in a loosely typed language than a strictly typed language — it is also easier to make mistakes

43. Copyright (c) 2004 Prentice-Hall. All rights reserved. 43 Understanding Data Typing in JavaScript (continued) You can store several different data types within variables  For example, you can store string values, numerical values, or Boolean values in a variable (more on Boolean values later)  The variable can have a variety of methods available, depending on the type of data stored within the variable

44. Copyright (c) 2004 Prentice-Hall. All rights reserved. 44 Understanding Data Typing in JavaScript (continued) Enter Values Dynamically  You can use prompt() methods in variable assignments to declare the variables  JavaScript knows the data type based on the type of value entered and how the value is used  Example Example

45. Copyright (c) 2004 Prentice-Hall. All rights reserved. 45 Understanding Data Typing in JavaScript (continued) datatyping.html //create first name number1=prompt("What is the first number?",""); //create last name number2=prompt("What is the second number?",""); total=number1*number2; //display information document.write(number1+" multiplied by "+number2+" equals "+total);

46. Copyright (c) 2004 Prentice-Hall. All rights reserved. 46 Understanding Data Typing in JavaScript (continued) Data Typing Errors  Errors involving data types are common problems in JavaScript; they are referred to as data type errors the same holds true in many scripting languages, since the languages are often designed to make code writing simple

47. Copyright (c) 2004 Prentice-Hall. All rights reserved. 47 Understanding Data Typing in JavaScript (continued) Use parseInt()  Errors involving data types are common problems in JavaScript; they are referred to as data type errors the same holds true in many scripting languages, since the languages are often designed to make code writing simple  Example of a data type error Example of a data type error

48. Copyright (c) 2004 Prentice-Hall. All rights reserved. 48 Understanding Data Typing in JavaScript (continued) datatyping.html number1=prompt("What is the first number?",""); number2=prompt("What is the second number?",""); // convert strings to integers number1=parseInt(number1); number2=parseInt(number2); total=number1+number2; document.write(number1+" plus "+number2+" equals "+total);

49. Copyright (c) 2004 Prentice-Hall. All rights reserved. 49 Understanding Data Typing in JavaScript JavaScript includes simple rules concerning variable names:  Variable names are case sensitive  Variable names must start with an alphabetic character, an underscore ( _ ), or a dollar sign ($)

50. Copyright (c) 2004 Prentice-Hall. All rights reserved. 50 Recognizing Variable Name Limitations Variable names can contain:  alphabetic characters  numeric digits  dollar signs  underscore characters Variable names cannot contain special characters such as asterisks (*), slashes (/, \), colons, semi-colons, or spaces

51. Copyright (c) 2004 Prentice-Hall. All rights reserved. 51 Recognizing Variable Name Limitations (continued) You cannot assign any of the JavaScript reserved words as variable names  Reserved words are names of commands used in the programming language  JavaScript’s reserved words include words currently used in the language, as well as words planned for future use in JavaScript  Example of JavaScript’s reserved words Example of JavaScript’s reserved words

52. Copyright (c) 2004 Prentice-Hall. All rights reserved. 52 Recognizing Variable Name Limitations (continued)

53. Copyright (c) 2004 Prentice-Hall. All rights reserved. 53 Recognizing Variable Name Limitations (continued) Correct Capitalization Errors in Variable Names  Changing the case in a variable name will cause an error  To avoid making similar mistakes, choose a standard way to create variable names (a naming convention) and stick with it Example of Correct Capitalization Errors in Variable Names Example of Correct Capitalization Errors in Variable Names

54. Copyright (c) 2004 Prentice-Hall. All rights reserved. 54 Recognizing Variable Name Limitations (continued) cap.html //create a variable myPick="item3"; //use a variable alert(mypick); Change the alert() statement to correct the variable name (capitalize the “P” in “Pick”) to eliminate the error

55. Copyright (c) 2004 Prentice-Hall. All rights reserved. 55 Making a Boolean Comparison Boolean values refer to a data type that is set to either true or false  Boolean values are not string values; rather, Booleans are used to refer to variables or questions that require a yes or no answer A Boolean variable that determines whether an event has occurred is usually referred to as a flag

56. Copyright (c) 2004 Prentice-Hall. All rights reserved. 56 Making a Boolean Comparison Boolean variables are often used to hold the answer to a yes-or-no question Boolean values represent a different kind of data type than string or integer values

57. Copyright (c) 2004 Prentice-Hall. All rights reserved. 57 Making a Boolean Comparison (continued) Assign Boolean Values to a Variable  The words true and false are JavaScript reserved words for this reason, they can’t be used as variable names, and JavaScript knows they aren’t variables when you use them without quotes in code statements Example of Assigning Boolean Values to a Variable Example of Assigning Boolean Values to a Variable

58. Copyright (c) 2004 Prentice-Hall. All rights reserved. 58 Making a Boolean Comparison (continued) boolean.html answer=true; document.write(answer);

59. Copyright (c) 2004 Prentice-Hall. All rights reserved. 59 Making a Boolean Comparison (continued) Use Boolean Operators  Using Boolean values, you can create decision statements, which are questions the interpreter must answer based on the relationship of the variables Example of Using Boolean Operators

60. Copyright (c) 2004 Prentice-Hall. All rights reserved. 60 Making a Boolean Comparison (continued) boolean.html answer=17<3; document.write(answer);