JavaScript Variables and Input Basics

1. JavaScript 101 Lesson 2: Input and Variables

2. Lesson Topics • How to include data in your script by using a variable • How to declare (create) a variable • How to name a variable (rules for identifiers) • How to assign a value to a variable using = (assignment)

3. Lesson Topics (cont.) • How to use the prompt statement to collect information from Web page visitor • How to display (output) the contents (value) of a variable • About string formatting methods • How to combine strings using + operator (string concatenation)

4. Using Variables • Programs mostly collect, evaluate, and process information • Programs need to include information (data) • Programming languages use variables to represent information or data • JavaScript variables can represent numbers, strings (character data), and Boolean(logical) values in JavaScript

5. Declaring Variables • First step in including variables in your program is a declaration • Declaration creates a variable • Example:var myName; • “var” is a keyword that indicates that this is a variable declaration • Keyword (see Intro) has a defined meaning in JavaScript

6. Variables need a name • The name of a variable is called an identifier • A legal identifier in JavaScript is governed by the following rules: The first character must be a letter or an underscore(_) The remaining characters may be numbers, letters, and underscore

7. Assigning Values to Variables • The equal sign, =, is called the assignment operator in JavaScript and it is used to assign values to variables myName = “Fred”; • Values are always copied from right to left

8. Using prompt and variables • The JavaScript statement prompt asks Web visitors a question and records (saves) their answer • Example:var visitorName = prompt(What is your name?”,”Enter your name here”);(see p. 2-3 to see how this statement appears)

9. Syntax of prompt statement • Syntax:var varname=prompt(“your question”,”default entry”); • varname stores answer from visitor • “your question” is what program asks the visitor • “default entry” is answer that program will save if visitor doesn’t input a response (i.e. visitor just hits enter)

10. Displaying a Variable • Variables save useful information for your program • To display information saved in a variable use document.write with the variable’s name (no quote marks) • Example:var myName = “Sam”; document.write(myName); • This displays Sam in a Web document

11. String Formatting Methods • JavaScript has string formatting methods that alter appearance of text var sentence = “An Example”; document.write(sentence.bold()); //displays the string in bold document.write(sentence.italics()); //displays the string in italics

12. Concatenating Strings • Concatenation is an operation that combines strings (puts them together) • The + operator is used to combine strings var part1 = “This sentence ”; var part2= “has 2 pieces” var sentence = part1 + part2;

13. In the lab • This lab uses variables and the prompt method • Open Notepad and create a new HTML document named lesson0201.html • Enter the code on p. 2-6 exactly as you see it • Save the file and open it using either Internet Explorer or Netscape • Add modifications/changes described on p. 2-7

14. Mad Lib • Next example is a JavaScript program that writes a simple Mad Lib • Mad Lib is a game where potentially humorous story is written down, with blanks in the place of some important words • Before reading story, storyteller asks other to fill in the blanks without knowing the context • Then resulting story is read

15. JavaScript Mad Lib • Save code from previous exercise • Create a new document named lesson0202.html • Will use variables, prompt, and concatenation to create a JavaScript Mad Lib • Enter the code on p. 2-8 • Once your program is running, add modifications (p. 2-8)

16. Lesson Summary • How to declare variables • JavaScript rules for identifiers • Used assignment operator (=) to assign value to a variable • Used the prompt method to ask a visitor a question and record their response

17. Lesson Summary cont. • Combined strings (concatenation and + operator • Displayed the value of a variable with document.write • Used string formatting methods