Computational Thinking

Joel Gethin Lewis

Lecture 2

What I'm going to talk about today:

  1. Student FAQ
  2. Form.
  3. Matching socks and finding your size.
  4. Introduction to p5.js.
  5. Variables and Data Types in JavaScript.

Student FAQ

  • Why learn code?
  • I was bad in maths - will I ever learn code?
  • What coding languages are out there, what's the difference and similarity?
  • Which coding language should I learn?
  • What is a code editor and which one should I use?

Student FAQ PS

  • "Using Programming Language Concepts to Teach General Thinking Skills" by Martin Rinard
  • https://people.csail.mit.edu/rinard/paper/wowcs08.pdf
  • "The field of programming languages provides a uniquely favourable context for teaching certain fundamental concepts that arise in almost all modern human endeavours. These concepts include:"

Student FAQ PS

  • Understanding the central role that one’s perspective plays in the entire problem conceptualization, formulation, and solution process,
  • Understanding that multiple perspectives are available, with different perspectives appropriate for different problems,

Student FAQ PS

  • Understanding how automation can greatly improve human productivity and that there is an appropriate division of tasks between automated systems and humans, and
  • Understanding a precise notion of abstraction, that abstraction is inevitably present in every activity, and that different abstractions are appropriate for different purposes and situations.

Form.

Thanks again to Rune Madsen for putting his course online:

http://printingcode.runemadsen.com/lecture-form/.

http://printingcode.runemadsen.com/lecture-form-2/.

Don't forget to click to the slides and press 's' Joel!

Matching socks and finding your size.

Thanks again to Ali Almossawi for writing his book.

Read the Matching socks and Finding your size chapters of "Bad Choices" Joel!

Introduction to p5.js.

The website for p5.js is: https://p5js.org

The following content is all from the "Learn" section of the p5.js website.

Hello p5.js and Get Started and finally some Examples.

Don't forget you can right click or CTRL click any time to save a png!

Variables and Data Types in JavaScript.

Before we get on to how JavaScript stores information in Variables and Data Types, I want to go back to the previous lecture. Remember how we learnt to count in binary?

Does anyone know what a Megabyte is?

Variables and Data Types in JavaScript.

A million bytes! (Actually a bit more).

What is a byte?

Variables and Data Types in JavaScript.

A byte is 8 bits.

(I remember this by saying Beight in my head).

What is a bit?

Variables and Data Types in JavaScript.

A bit is a Binary digIT.

A 1 or a 0.

So everything stored on a computer is just a 1 or a 0.

Variables and Data Types in JavaScript.

Turns out it's much easier to encode binary numbers as hexadecimal numbers to make them a bit more readable.

Hexadecimal means base 16! So: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

Variables and Data Types in JavaScript.

Each byte (eight bits) can be encoded as two base 16 numbers.

11010100 in binary would be D4 in hex.

FFFF3 in hex would be 11111111111111110011 in binary!

Variables and Data Types in JavaScript.

Lets open a JPEG in a Hex Editor to see what it looks like.

Open BobDylanSelfPortraitSigned.jpg.

We can see when the photo was taken and with which camera!

Lots of files have this kind of information encoded in them. Usually in ASCII encoding.

Demonstrate looking up A in the editor in a ASCII table.

Variables and Data Types in JavaScript.

The following content is all from the JavaScript Basics section of the p5.js wiki.

How JavaScript gets added to webpages.

The JavaScript console.

Variables.

Types: Numbers, Strings and Booleans.

Assignment and operators.

Thanks!