Variables, Operators, and IO

Essence of computation

data
- digital and analog data
- voltages
- binary
- integers
- real numbers
- strings
instructions
- opcodes
- abniac

Adding code to HTML

using the <script></script> pair
notes on javaScript syntax
lower case
use of semicolons
indentation
the // comment operator

Now we write some code -

output

Simple output - the alert box

Most graphical languages have some kind of dialog boxes.
These act like the output statements in more traditional languages
Modality - program execution halts while waiting for response the function syntax
Output statements will have some string (text) value which should be shared with the user

Example - hello world:
<html>
<script>
  //hello world
  //the classic first program
  alert("hello world");
</script>
</html>

Variables

variables -

contain some kind of data
like refrigerator containers
different containers for different kinds of stuff

Characterstics of a variable:

name - naming conventions
type - what sort of stuff it holds
initial value - what does it start out holding
scope - we'll talk about this later

Creating a variable:

How it's usually done
How it's done in javascript - the var statement
javascript and 'loose' typing

Using a variable:
referring to the value of a variable
  alert(theResult); 
assigning a value to a variable
userName = "George";
Example - hello world with a variable
  <script>
    var theName = "Wally";
    alert "Hello!";
    alert theName;
  </script>
Example - an adding program
  <script>
    //Adder
    //adds up two values and returns the results
    var num1 = 5;
    var num2 = 7;
    var answer = 0;

    //add 'em up
    answer = num1 + num2;
  </script>

Input

modal input
most GUI languages have some kind of modal (dialog based) input statement
again similar to the input statements of older languages
almost always associated with some kind of assignment

the prompt statement

syntax: variable = prompt(question)
an input usually requires some kind of question
the answer is usually stored in a variable

Example - hello world with an input variable
  <script>
    var theName = "";
    theName = prompt("What is your name?");
    alert "Hello!";
    alert theName;
  </script>

Operators and functions for manipulating variables

Type Conversion
- parseInt()
- parseFloat()
- toString()
- eval()
Mathematical
- +, -, *, /
- +=, -=, ++, --
- Math.pow()
- Math.random()
String concatenation
- +, +=
- operator overloading
- avoiding complex concatenations
String case conversion
- variableName.toUpperCase()
- Creating case - insensitive comparisons
example:
```
    alert ("Well, " + userName + ", " + num1 + " plus " + num2 + " equals " + result);
```
or
```
    response = "Well";
    response += userName;
    response += ", ";
    response += num1;
    response += " plus ";
    response += num2;
    response += " equals ";
    response += result;
    alert(response);
    
```
Drawing it all together:

Example
```
  <script>
    //the deluxe adder
    //does all kinds of cool stuff
    var userName = "";
    var num1 = 0;
    var num2 = 0;
    var response = 0;
    var reply = "";

    //get the input
    userName = prompt("What's your name?");
    num1 = prompt("What's the first number?");
    num2 = prompt("What's the second number?");

    //ensure we really have numbers
    num1 = parseFloat(num1);
    num2 = parseFloat(num2);

    //do the processing
    result = num1+num2;
    response = "Well, ";
    response += userName;
    response += ", ";
    response += num1;
    response += " plus ";
    response += num2;
    response += " equals ";
    response += result;

    //do the output
    alert(response);
  </script>
```
STAIR and pseudocode

The rationalization
STAIR is never more useful than when it is applied to the process of writing programs. It is clear that programming can become difficult quickly. Here is how you can use STAIR to manage the process:
- State the problem
  In many of our assignments, the problem will be given to you. Often, though, you will encounter smaller sub-problems that you might not know how to handle. Also, as we move through the semester, you will see that the problem statements get much more general.
  
  Be sure to state the problem in HUMAN language. It is very tempting to start spouting off syntax here, but that's not the best thing to do yet.
  
  WRITE the problem down. This is really good advice.
  
  for example, this is how we might write the problem down for the 'hello world' example above:
```
  write a program that asks for the user's name and says hello to that
  person.  This proves we can do something simple but interesting in
  javascript.
```
- Tools
  In programming, you should think of the major constructs as tools. Specific code structures are not the tools, but the implementation!! For example, think of creating a variable as a tool. That concept exists in some form in every programming language, but it is implemented differently. For now, we're still thinking generically. This is not the place to worry about the syntax of the var statement, where semicolons go, or other details.
  
  You should also think of your data as a tool. For now, that means variables. Figure out in general what variables you want to use.
  
  Identify all the major constructs you will want to use in your program. For example, the tools step in "Hello Wally" might look like this:
```
  I need: 
    new program
    input statement to get user name
    variable to hold user name
    output statement to say hi to user
    end program
```
- Algorithm
  In programming, I see the algorithm step as having two phases. First, you take a look at the tools you will need, and put them in the correct order. Secondly, you need to 'fill out the details' of each step.
  
  You will still be writing phrases in English, but now you're anticipating all the things you'll need to know to convert it to an honest-to-gosh programming language like javascript or perl. As we describe the various structures, we will always explain the things you need to think about whenever you use the structure. As an example, take a look at the newest incarnation of 'Hello World':
```
  create a new program called 'hello world' by Andy on 5/19/99
  create a string variable called userName that will start at ""
  ask the user "what is your name?" and store the response in userName
  output "hi" and the value of userName  to user
  end program
```
  It really doesn't make sense to start writing code until you have this level of pseudocode finished.
- Implementation
  In our context, implementation is converting pseudocode into code. It should be a really easy step, because all you should need to do is figure out how each of the steps you've already outlined is converted to the language you are using. You will usually need some kind of syntax reference, but it is not difficult if you did a good job on the earlier steps. Take a look at the Implementation of "Hello World" into javascript:
```
  create a new program called 'hello world' by Andy on 5/19/99
  //Hello world, by Andy on 5/19/99

  create a string variable called userName that will start at ""
  var userName = ""; //string for user's name

  ask the user "what is your name?" and store the response in userName
  userName = prompt("What is your name?");

  output "hi" and the value of userName  to user
  alert("Hi, " + userName + "!");

  end program
  no conversion needed here
```
- Refinement
  The code will almost never work right the first time through. Debugging methods vary depending on the browser you are using, but there are a few common things you can check on:
  - Are you sure this is the problem you were trying to solve?
  - Are there any tools that could make this easier? (notice a pattern yet?)
  - Is your algorithm sound? In other words, are there mistakes in semantics (the logic?) These can be very hard to find, but so far we don't know many things that can cause semantic errors. Just you wait.
  - Did you implement properly? Lots of things can go wrong here, from mispellings to wrong punctuation and capitalization errors. This stuff is annoying, but reasonably easy to fix.
For your first few programs, we are going to REQUIRE that in addition to the program itself, you turn in a STA analysis, using the guidelines described above. You'll hate it, but it really is a smart habit to get into.
Laboratory Assignment
You are going to make a page which does a simple math game. The program will ask the user for two numbers, x and y. Then it will tell the user what x+y, x-y, x*y, and x/y is. The program should work no matter what values the user puts in, although you can presume they do not put 0 in for the second value. If you have time, you can try to deal with this problem, but don't work on it until everything else is done.

On the page that will contain the script, write down your S, T, and A parts of the STAIR process for algorithm design. Use HTML to format the STA summary. This is not an optional part of the assignment. Do it FIRST, not as an afterthough.

Once you have a good idea of the code, implement it in javascript as a part of the page. Here are some screen shots to get you started:
Have fun!!!
© Andy Harris
Indiana University / Purdue University, Indianapolis
email: aharris@.cs.iupui.edu
homepage: www.cs.iupui.edu/~aharris

Variables, Operators, and IO

Essence of computation

Adding code to HTML

Now we write some code -

output

Simple output - the alert box

Example - hello world:

Variables

variables -

Characterstics of a variable:

Creating a variable:

Using a variable:

Example - hello world with a variable

Example - an adding program

Input

modal input

the prompt statement

Example - hello world with an input variable

Operators and functions for manipulating variables

example:

Drawing it all together:

Example

STAIR and pseudocode

The rationalization

State the problem

Tools

Algorithm

Implementation

Refinement

Laboratory Assignment