1. Lesson 2: Input and Variables
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
Emphasize that is displays Sam, not “myName”

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