Code flow: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
 
(21 intermediate revisions by one other user not shown)
Line 5: Line 5:
[[File:EamesComputerGlossary.gif]]
[[File:EamesComputerGlossary.gif]]


Husband & wife design superstars [[wikipedia:Charles & Ray Eames|Charles & Ray Eames]] produced this animation explaining "the particular jargon" of computation for the IBM pavilion at the [[wikipedia:HemisFair '68|1968 Worlds Fair in San Antonio Texas]].
Husband & wife design superstars [[wikipedia:Charles & Ray Eames|Charles & Ray Eames]] produced this animation explaining the "mood" and jargon of computation for the IBM pavilion at the [[wikipedia:HemisFair '68|1968 Worlds Fair in San Antonio Texas]].


== Code ==
== Hello World ==


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


http://rosettacode.org/wiki/99_Bottles_of_Beer
<source lang="python">
print "Hello world!"
</source>


== Expression / Evaluation ==
<source lang="bf"> ++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.</source>[[wikipedia:Brainfuck|+]]
 
http://www.retas.de/thomas/computer/programs/useless/piet/hw1-11.gif
 
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...
Some expressions for the console...
Line 20: Line 80:


  3
  3
Tristram
(error!)


  "Tristram"
  "Tristram"
Line 26: Line 90:


== Operations ==
== 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
  5 * 3
Line 34: Line 100:


  "Tristram" + "Shandy"
  "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.
https://www.destroyallsoftware.com/talks/wat


== Operations: Functions ==
== Operations: Functions ==
Line 57: Line 135:
  name = "Tristram"
  name = "Tristram"


== Assignment ++ ==
== 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 = x + 1
Line 64: Line 146:


  x++
  x++
name = "Tristram"


  name = name + " Shandy"
  name = name + " Shandy"


== DOM ==
  name += " Shandy"
 
  c=document.getElementById("c")
 
Reaching into the document and grabbing hold of the page.
 
== [[Canvas]] ==
 
See [[Canvas]]


The [[wikipedia:Canvas element|canvas]] tag was introduced by Apple and has been [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html standardized to become part of HTML5].
== Next step ==
== Using a function to control when things happen in the page ==


== Loop ==
[[Looping with Canvas]]


== Handouts ==
== Handouts ==
Assignment, GeneralImperative + ProgramHighLow
* [[File:Assignment.pdf]]
* [[File:GENERAL ImperativeDeclarative.pdf]]
* [[File:ProgramHighLow.cwk (DR).pdf]]


== Debug / Trace ==
[[Category:Slidy Presentations]]

Latest revision as of 15:26, 1 October 2012

<slidy theme="aa" />

A Computer Glossary

EamesComputerGlossary.gif

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!"
 ++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.

+

hw1-11.gif

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.

https://www.destroyallsoftware.com/talks/wat

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"

Next step

Looping with Canvas

Handouts

  • Assignment.pdf
  • GENERAL ImperativeDeclarative.pdf
  • ProgramHighLow.cwk (DR).pdf