FOP: User Input & Strings

Plan your own Mad Libs: Today we will be working on how to store user input and create lines of text using the information a user has provided. Pay attention to the App Lab version demonstration of this game The app should be a “how-to” Mad Libs (e.g., “How to take care of your pet ostrich”). Afterwards, you list steps with key components left open for user input. There should be at least 3 steps in their instructions. Their app should accept at least 3 pieces of user input. Plan out your app on your paper using a similar structure for the app lab game. You can change your ideas later in the lesson and be creative with this app.

Strings and the getText Command: Strings are a data type found inside of most programming languages. Strings are simply an arbitrary length sequence of ASCII characters. var name = “William”; Sometimes we want to grab text that a user has typed into our app. For this we need to use the getText command which will grab the text from UI Element you specify on the screen. Imagine you have a text input box which has the id “nameInput”. To grab the text from the text input box call the command below: getText(“nameInput”); // You can store the text you get inside a variable as so. var name = getText(“nameInput”);

String Concatenation: You can also create Strings that are made up of other variables. This is called concatenation. Look at the example below: var name = “William”; var age = 25; var message = “My name is “ + name + “ and I am “ + age + “ years old.” console.log(message); What will get printed out to the user is : My name is William and I am 25 years old. NOT: My name is name and I am age years old

String Capitalization: You can also convert any String into uppercase or lowercase by using the appropriate commands: str.toUpperCase(); str.toLowerCase(); Pay attention to the example below: var name = “William”; console.log(name.toUpperCase); name = name.toLowerCase(); console.log(name);

Newline \n: To create formatted text within Strings, you can use the new line symbol. Take a look at the example below: var message = “Step 1: Create the layout \nStep 2: Write the Code \nStep 3: Debug”; write(message); The output when calling write would look like so: Step1: Create the layout Step 2: Write the Code Step 3: Debug

Remember Local vs Global Variables: If you want to use variables that you’ve created on multiple screens, you should consider declaring those variables global. To do this simply create your variables in the beginning of your code outside of any function. You’ll probably want to do this for your Mad Libs Game