0	index
1	Essence of Computation
2	Adding Code to HTML
3	Output
4	Example - Hello World
5	Variables
6	Characteristics of a Variable
7	Creating a Variable
8	Using a Variable
9	Example - Hello World with a Variable
10	Example - An Adding Program
11	Input
12	The Prompt Statement
13	Example: Hello World with an Input Variable
14	Operators and Functions for Manipulating Variables
15	Mathematical
16	String Concatenation
17	String Case Conversion
18	Example
19	STAIR and pseudocode
20	Tools
21	Algorithm
22	Implementation
23	Refinement
24	Requirements for First Few Programs
	outline

created using slideshow.cgi by Andy Harris

CSCI N341 Web Programming: Variables, Operators and IO

1. Essence of Computation

Data:
- digital and analog
- voltages
- binary
- integers and real numbers
- strings
Instructions:
- opcodes
- abniac

CSCI N341 Web Programming: Variables, Operators and IO

2. Adding Code to HTML

<script>…..</script>
JavaScript syntax
Lower case
Identification
The // comment operator

CSCI N341 Web Programming: Variables, Operators and IO

3. Output

The Alert box - simple output
Most graphical languages have some kind of dialog box
These act like the output statements in more traditional languages
Modality - program execution halts while waiting for response

CSCI N341 Web Programming: Variables, Operators and IO

4. Example - Hello World

<HTML>
<Script>
//Hello World
//The Classic First Program
alert("Hello World");
</Script>
</HTML>

CSCI N341 Web Programming: Variables, Operators and IO

5. Variables

Contain some kind of data
Like refrigerator containers
Different containers for different kinds of stuff

CSCI N341 Web Programming: Variables, Operators and IO

6. Characteristics of a Variable

Name - naming conventions
Type - what sort of stuff it holds
Initial value - what does it start out holding
Scope - discuss later

CSCI N341 Web Programming: Variables, Operators and IO

7. Creating a Variable

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

CSCI N341 Web Programming: Variables, Operators and IO

8. Using a Variable

Referring to the value of a variable
Example: alert(the Result);
Assigning a value to a variable
Example: userName = "George";

CSCI N341 Web Programming: Variables, Operators and IO

9. Example - Hello World with a Variable

<Script>
var theName = "Wally";
alert ("Hello!");
alert (theName);
</Script>

CSCI N341 Web Programming: Variables, Operators and IO

10. Example - An Adding Program

<Script>
//Adder
//Adds up two values and returns the results
var num1 = 5;
var num2 = 7;
var answer = 0;
//add them up
answer = num1 + num2;
</Script>

CSCI N341 Web Programming: Variables, Operators and IO

11. Input

Modal input
- most GUI languages have some kind of modal input statement
- similar to the input statement of older languages
- almost always associated with some king of assignment

CSCI N341 Web Programming: Variables, Operators and IO

12. The Prompt Statement

Syntax: variable = prompt(question)
An input usually requires some kind of question
The answer is usually stored in a variable

CSCI N341 Web Programming: Variables, Operators and IO

13. Example: Hello World with an Input Variable

<Script>
var theName = "";
theName = prompt("What is your name?");
alert("Hello!");
alert(theName);
</Script>

CSCI N341 Web Programming: Variables, Operators and IO

14. Operators and Functions for Manipulating Variables

Type conversion
- parseInt()
- parseFloat()
- toString()
- eval()

CSCI N341 Web Programming: Variables, Operators and IO

15. Mathematical

+, -, *, /
+=, -=, ++, --
Math.pow()
Math.random()

CSCI N341 Web Programming: Variables, Operators and IO

16. String Concatenation

+, +=
operator overloading
avoiding complex concatenations

CSCI N341 Web Programming: Variables, Operators and IO

17. String Case Conversion

VariableName.toUpperCase()
Creating case-insensitive comparisons

CSCI N341 Web Programming: Variables, Operators and IO

18. 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);

CSCI N341 Web Programming: Variables, Operators and IO

19. STAIR and pseudocode

State the problem
- Be sure to state the problem in HUMAN language
- WRITE the problem down

CSCI N341 Web Programming: Variables, Operators and IO

20. Tools

Think of the major constructs as tools
- Specific code structures are not the tools, but the implementation!
- think of your data as a tool (variables)
- identify all the major constructs

CSCI N341 Web Programming: Variables, Operators and IO

21. Algorithm

Two phases
- first - look at the tools you will need and put in correct order
- second - fill out the detail of each step
- still writing in English

CSCI N341 Web Programming: Variables, Operators and IO

22. Implementation

Converting pseudocode into code

CSCI N341 Web Programming: Variables, Operators and IO

23. Refinement

Debugging methods vary depending on the browsers you are using
A few common things to check:
- Are you sure this is the problem you were trying to solve?
- Any tools that could make this easier?
- Is your algorithm sound?
- Mistakes in the semantics(the logic)?
- Implement properly? (misspellings, wrong punctuation, etc.)

CSCI N341 Web Programming: Variables, Operators and IO

24. Requirements for First Few Programs

The program itself
STA analysis

outline

Essence of Computation

Data:
- digital and analog
- voltages
- binary
- integers and real numbers
- strings
Instructions:
- opcodes
- abniac

Adding Code to HTML

<script>…..</script>
JavaScript syntax
Lower case
Identification
The // comment operator

Output

The Alert box - simple output
Most graphical languages have some kind of dialog box
These act like the output statements in more traditional languages
Modality - program execution halts while waiting for response

Example - Hello World

<HTML>
<Script>
//Hello World
//The Classic First Program
alert("Hello World");
</Script>
</HTML>

Variables

Contain some kind of data
Like refrigerator containers
Different containers for different kinds of stuff

Characteristics of a Variable

Name - naming conventions
Type - what sort of stuff it holds
Initial value - what does it start out holding
Scope - discuss later

Creating a Variable

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

Using a Variable

Referring to the value of a variable
Example: alert(the Result);
Assigning a value to a variable
Example: 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 them up
answer = num1 + num2;
</Script>

Input

Modal input
- most GUI languages have some kind of modal input statement
- similar to the input statement of older languages
- almost always associated with some king 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);

STAIR and pseudocode

State the problem
- Be sure to state the problem in HUMAN language
- WRITE the problem down

Tools

Think of the major constructs as tools
- Specific code structures are not the tools, but the implementation!
- think of your data as a tool (variables)
- identify all the major constructs

Algorithm

Two phases
- first - look at the tools you will need and put in correct order
- second - fill out the detail of each step
- still writing in English

Implementation

Converting pseudocode into code

Refinement

Debugging methods vary depending on the browsers you are using
A few common things to check:
- Are you sure this is the problem you were trying to solve?
- Any tools that could make this easier?
- Is your algorithm sound?
- Mistakes in the semantics(the logic)?
- Implement properly? (misspellings, wrong punctuation, etc.)

Requirements for First Few Programs

The program itself
STA analysis