Lesson 2: Input and Variables JavaScript 101 Lesson 2: Input and Variables

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)

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)

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

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

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

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

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)

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)

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”

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

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;

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

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

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)

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

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