Code flow

<slidy theme="aa" />

A Computer Glossary

Husband & wife design superstars Charles & Ray Eames produced this animation explaining the "mood" and jargon of computation for the IBM pavilion at the 1968 Worlds Fair in San Antonio Texas.

Hello World

http://rosettacode.org/wiki/Hello_world/Newbie

print "Hello world!"

 ++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.

+

http://www.retas.de/thomas/computer/programs/useless/piet/explain.html

Imperative & Declarative Languages

There are many kinds of languages used in software; A typical website might involve HTML (for the basic page structure and linking), CSS (for setting visual properties of (groups) of elements), JavaScript (for dynamic content in the browser), and then PHP (scripting on the server) and SQL (to access a database). Broadly said, formal languages belong to one of two categories: Imperative & Declarative.

Imperative languages

Imperative, a linguistic reference to the command of language, as in "put the candle back".

Imperative languages are:

• Procedural
• Explicit about how to do something.
• Represent the majority of common "programming languages" like Javascript, C, Python, and PHP.
  • JavaScript, Python
  • PHP (though it's itself embedded within HTML, a declarative language)
  • C, C++
  • A "macro" in an application like Photoshop

A silly example, of an "imperative" style program.

 To exit a room:
 1. Walk to the door.
 2. Is the light on?
    YES?: Turn off the light.
    NO?: do nothing.
 3. Open the door.
 4. Walk outside.

Declarative languages

Declarative, a linguistic reference to the descriptive mood of a language as in "The sky is blue".

Declarative languages:

• Broadly speaking describe conditions to be met,
• Must be interpreted, to be converted into actual results
• Is therefore open to responding to different contexts
• Examples of declarative languages would be:
  • HTML
  • CSS (Cascading Style Sheets)
  • SQL (or Structured Query Lanuage used to describe data to access a database)
  • LISP, Prolog, Haskell ("higher level" programming languages)
  • Regular Expressions (a pattern language to search & replace text)

A silly example of a declarative style program:

 Saving Electricity Policy
 When a room is unoccupied, the light should be switched off.

Javascript

We will be doing exercises in Javascript which has the advantage of being built-in to every modern web browser.

Browsers like Firefox, and Chrome have built in "consoles" to access / test out Javascript.

Expressions

Some expressions for the console...

5

3

Tristram

(error!)

"Tristram"

'SHAndy'

Operations

Basic symbols like "*" and "+" behave as you would expect, doing basic math. Javascript differentiates between numbers and text and some operators (like "+") change their behaviour depending on the input.

5 * 3

100 - 1

3 * 8

"Tristram" + "Shandy"

try:

5 + 2

"5" + 2

"5" - 2

The last result may be surprising and has to do with Javascript deciding (in the case of subtraction) that you must want the 5 to be treated like a number.

Operations: Functions

Math.sqrt (25)

Math.sqrt (26)

Objects

"Tristram".toUpperCase

?!

"Tristram".toUpperCase()

Assignment

Assignment is the process of storing an expression in a "name", called a variable.

x = 5 * 3

name = "Tristram"

In-place Assignment (++)

A typical thing to do use a variable's current value to compute some new value (ie incrementing a numeric variable, or adding something to the end of a textual variable). When an expression using a variable is then assigned to the same variable name, it's called an "in-place assignment". There's no confusion about then things happen, the expression (on the right of the equals sign) is computed first using the current value of the variable, and then the new value is stored in the variable, effectively changing it's value (and losing the old value).

x = 7

x = x + 1

x += 1

x++

name = "Tristram"

name = name + " Shandy"

name += " Shandy"

DOM

c=document.getElementById("c")

Reaching into the document and grabbing hold of the page.

Canvas

See Canvas

The canvas tag was introduced by Apple and has been standardized to become part of HTML5.

Handouts

Assignment, GeneralImperative + ProgramHighLow