A Gentle

Introduction to
Programming

(with Python)
Tariq Rashid, July-August 2015
Ambition

Very Gentle Introduction

to coding and Python, zero expertise assumed

Confidence
to explore further,
understand suppliers and techies
 The Journey
data science?

using libraries digital

services?
graphics

repetitive work reusable

blocks

“Hello World!” working with

data

languages
tech overview

The “1s and 0s”

Deep Inside Tech is .... Numbers

Computers do stuff with numbers:

add, multiply, subtract, divide, shift, chop, invert, ….

That’s it!
There is no other magic.
It’s all numbers ...
Networks
It’s all numbers ...
Desktops

Applications
It’s all numbers ...

Smartphone Apps

Android / iOS
It’s all numbers ...
Digital Movies

Digital Music
It’s all numbers ...

Digital Web Services

The 1s and 0s

This is a computer …. (kinda)

on / off
lightbulb
switch

battery
The 1s and 0s

on / off
input lightbulb output
switch

battery
The 1s and 0s

This one is a bit more useful.

0
on / off
switches
lightbulb 0
0

battery
The 1s and 0s

1
on / off
switches
lightbulb 0
0

battery
The 1s and 0s

1
on / off
switches
lightbulb 1
1

battery
The 1s and 0s Comput
ation:
Only wh
en both inp
uts are
on
Turn on
the outpu
t light

1
on / off
switches
lightbulb 1
1

battery
The 1s and 0s Comput
ation:
Only wh
en both inp
uts are
on
Turn on
the outpu
t light

e :
Recip

IF
1 r e i s low
rat u
tempe s after 8pm
on / off ND it’ lightbulb 1
switches
A
THEN ating
1 n t he he
o
Turn
battery
Programming

Programming

Is Telling Computers What to Do

... and How …

“Recipes”
Ye Olde Programming!

… those wires again!

Modern Programming!

… live demo!
Loads of Programming Languages!

different tools for

different jobs
Popular Languages 2014

…. Go Python!
Enough Theory!

Let’s code!

( fire up your Python )

Traditional First Program

Hello World!
Let’s Decode Some Python ...

print ( “Hello World!” )

IPython … Python in a Browser
IPython
Python instructions

… and the result!

Play button
awaiting your next instruction
“Execute my command with extreme
prejudice”
Have a Play!

Can you print out other words?

What About Simple Arithmetic?
2 times 3

… is 6

the star * symbol means “multiply” in

many programming languages
Have a Play Again!

Can you do other kinds of arithmetic?

What does this code do? Why?

print ( “3 * 4” )
Well Done!

You're now coding!

Ken Thompson, UNIX Dennis Ritchie, C

Richard Stallman, Tech Freedom
World’s First Programmer!

Ada Lovelace, World’s First Programmer

Next Time ...

Working with more data - with variables, arrays, ...

Automating lots of work - with loops, iterators, ...

Welcome back to Part 2!

Working with more data - with variables, arrays, ...

Automating lots of work - with loops, iterators, ...

Data Nitty Gritty

3
Data Nitty Gritty

data

memory
Variable - the name of a storage box

3
a
variable name
Variable - the name of a storage box

5
3
b
a
variable names
Just like school maths

In maths we write:
3
a=3
a
Data Nitty Gritty

In Python we also
write:
3
a=3
a
… try it!
Python Variables
code starting with the hash
symbol # are ignored
we can use them as comments

shortcut!
Changing Data is Useful

animation is … changing data

Changing Data

7
3
a replace the 3 with a 7
Changing Data

the box name stays

7 the same
a
… where did the 3 go?
Changing Data - Try it!

before ... a is 3

after ... a is 7
Arithmetic on Variables

What does this do?

a=7

b=a*3

print (b)
Arithmetic on Variables - Try It!
Different Kinds of Data

Numbers:

a=7 Decimals:

b = 3.14159
Text:

c = “cat”
Different Kinds of Data

Numbers:

a=7 Decimals: “string”

b = 3.14159
Text:
“integer”
c = “cat”
“floating point”
Data Types - Try it!
A Collection of Data is Useful

List (of numbers, for example)

9 3 4 8 1 5
Python Lists

List

9 3 4 8 1 5
0 1 2 3 4 5 index

the data in box 3 is 8

the zeroth element is 9
 Lists are variables too

Selecting from a List

a= 9 3 4 8 1 5
0 1 2 3 4 5 index

variable name
a[3] = 8
a[0] = 9
Making a Python List

a= 9 3 4 8 1 5
0 1 2 3 4 5

a = [ 9, 3, 4, 8, 1, 5 ]
Python Lists - Try it!
make the list using
square brackets

yup, it checks out fine

selecting individual list items

using the index
Changing List Data

a = [ 9, 3, 4, 8, 1, 5 ]

a= 9 3 4 8 1 5
0 1 2 3 4 5

a[2] = 0

a= 9 3 0 8 1 5
0 1 2 3 4 5
Changing List Data

a = [ 9, 3, 4, 8, 1, 5 ]

a= 9 3 4 8 1 5
0 1 2

i t!
3 4 5

Try
a[2] = 0

a= 9 3 0 8 1 5
0 1 2 3 4 5
Oops!

what happened ?!?!

error message!
Reaching Too Far Out!

a [6] doesn’t exist!

a[5] = 5

a= 9 3 4 8 1 5
0 1 2 3 4 5 index

a[3] = 8
a[0] = 9
Classic Coder Errors

Forgetting lists start at … 0 .. not 1

Software Bug!

Going beyond the end of a list is a major

method of security hacking!

Buffer Overflow!
Computers Love Repetitive Work!
Computers don’t mind doing lots of
repetitive number calculations.

Working through a list is useful start ...

Working Through a List - Try it!

what does this new code do?

Working Through a List - Try it!

it’s called
iterating
over a list
Working Through a List - Try it!

woah!

what’s all this?

can you work it out?

Next Time ...

Reusable code - functions, libraries, …

Working with more data - arrays, ...

Visualising data - bitmaps, plots, ...

Welcome back to Part 3!

Reusable code - functions, libraries, …

Working with more data - arrays, ...

Visualising data - bitmaps, plots, ...

Functions

Python functions are kinda like school maths functions

do some working out

inputs function output

Useful Recipe - Volume of a Block

volume = width * length * height

volume h
v=w*l*h

l
w

In Python …

v=a*b*c
Our First Function

def volume(w, l, h):

v=w*l*h
return v
Our First Function
create a new
… give it a name ... … takes these inputs
function
...

def volume(w, l, h):

v=w*l*h … does this work ...

return v

… finally returns an
answer ...
Our First Function - Block Volume

l
v=w*l*h v

inputs function output

Functions - Try it!

reusable code

reused here!

.. and again here!

Functions - Try it!

reusable code

Hurrah!

e a t e d s ome
u ’ ve j us t cr reused here!
Yo l e c o de!
reu s a b

.. and again here!

Functions - Puzzle 1
Functions - Puzzle 1

radius

circumference = 2 * pi * radius
Functions - Puzzle 2
Functions - Puzzle 2

palindrome !
Google is a Coder’s Best Friend!

Google is really really good at helping coders ...

explains that string

reversal we saw
Libraries of Reusable Code

Linux

It’s how coding is done at scale, with lots of coders.

And how Open Source projects often share cool useful stuff.
Let’s Use Somebody Else’s Work
Libraries - extend your Python’s powers with
somebody else’s code

somebody else’s module somebody else’s module

importing
my Python libraries somebody else’s module

somebody else’s module

my functions
Python Documentation is Good
Have a look at the Python docs for the math
library

https://docs.python.org/3/library/math.html

(just an example, you could look at other Python libraries yourself)

Python Documentation is Good
Imported Powers - Try it!
Imported Powers - Try it!
import that library
so we can use it

not a function, just a variable …

… remember them?

library name dot function

Another Kind of Collection

List 9 3 4 8 1 5

9 3 4 8 1 5
Array
4 2 5 0 0 1

2 7 3 1 4 0
 Python Arrays
index
Array
0 9 3 4 8 1 5

a= 1 4 2 5 0 0 1

2
2 7 3 1 4 0
variable name 0 1 2 3 4 5 index

a[1,3] = 0
a[2,0] = 2
 Python Arrays
index
Array
array [ ro
w, colum
0 9 3 4 8 n1 ] 5

a =in fact 4
1 2 5 0 0 1
yo u can ha
ve many
dimensio
2
2 7 3 1 4 0 ns ...
array [dim
1, dim2, d
variable name 0 1 2 3
im3 4…] 5 index

a[1,3] = 0
a[2,0] = 2
We need HELP!!
Numpy to the Rescue!

Numpy is a very popular and useful library.

It’s used loads in data science.

Numpy does arrays really rather well...

Numpy Arrays

a = np.array ( )
it’s a function
just like we saw
before
Numpy Arrays

a = np.array (
[ ]
arrays are enclosed by
) square brackets
Numpy Arrays

a = np.array (
[ [1, 2, 3],
3 by 3
array of numbers

[4, 5, 6], row by row

[7, 8, 9] ]
)
Numpy Arrays - Try It!
import numpy library
but we’ll call it np from
now on

create the 3 by 3 array

and print it out to be sure

accessing elements with

indices

taking row and column

slices
Array Functions - All At Once!

you can do stuff to an

array as a whole!
vs doing it to each element at a time

powerful efficient
so can write concise clean code for working on large data
Array Functions - Try it!

multiply every element by 10

find the mean (average)

sum over all elements

sine function …
(trigonometry from school)
Graphics! … What Does This Do?
Graphics! … What Does This Do?
… and this?
making a List … remember
them !

applying sin() to the array

… and this?
.. and there’s loads of libraries

Lots of example online:

http://scipy-lectures.github.io/intro/matplotlib/matplotlib.html

http://matplotlib.org/basemap/users/examples.html

Have an explore yourself!

 Images

Image processing
with Python is easy

decode it for homework if you fancy a

challenge!
Next Time ...

Web Application - we’ll make our own little app ... (not just a static page)

Mini Challenge! - two teams …. ;)

Welcome back to Part 4!

Web Application - we’ll make our own little app ... (not just a static page)

Mini Challenge! - two teams …. ;)

Let’s Make a Web Application

Not just a web page …

.. a proper interactive web application.

Let’s Make a Web Application
Let’s Make a Web Application

t h e se w ork?
Ho w do

u nde r t he hood?
What’s
o v i ng parts?
nm
What ar e the mai
Anatomy of (many) Web Applications

browser

internet

user
web application
Anatomy of (many) Web Applications
web application server

front end builder

logic

data storage
Anatomy of (many) Web Applications
web application server
lue and
g
on
coordinati n
front end ual desig
visbuilder

logic
customer
records business
process
data storage
Talking to a Web Application

GET /contact

OK … stuff ...

browser

talking in a
language called
HTTP
web application
Demo - Let’s Talk to a Web Server

connect to web server

request a page

response code; OK

content of response

this is what the browser

uses to compose the page
Flask - A Small Python Web Framework

GET /contact

OK … stuff ...

handlers

route URLs to handlers

Flask - Let’s Try It!
import flask library
so we can use it

create a flask object -

this contains all the machinery like

routing requests

registering URL handlers -

the URL and code to run

run the web server

.. until you kill it

Flask - Let’s Try It!
Add a Pinch of HTML
a string which contains HTML
code

if we return it, the browser will

decode and display it

head and body

“hello” and horizontal rule

Add a Pinch of HTML
<title>My Hello Page</title>

<h2>Hello</h2>

<hr>
Twitter Clone - The Logic

URL is /
URL is /submit
form to submit new
tweet

submit
add tweet to list

list of
redirect back to / previous tweets
Twitter Clone - Python Code
import Flask

list of tweets

html code template

the XXXX will be replaced later

main home page shows tweets

submit page with form

redirect back to home page

Twitter Clone - copy and paste this code if you need to
# import flask

import flask #create the application object

app = flask.Flask(__name__)

# python list of tweets

tweets = ["First tweet - Hello, World!"]

# html for page @app.route('/')

html_template = """ def home_page():

<!DOCTYPE html> # replace XXXX with tweets

<html> html = html_template.replace('XXXX', '<hr><p>'.join(tweets))

<head> return html

<title>My Tweet App</title>

<style>

body {background-color: linen; }

body {font-family: Sans-Serif;} @app.route('/submit', methods = ['POST'])

</style> def submit():

</head> tweet = flask.request.form['content']

tweets.append(tweet)

<body> return flask.redirect('/')

<h2>Submit a Tweet</h2>

<form action="submit" method="post">

<textarea name="content" cols="50" rows="4"></textarea> app.run()

<input type="submit" value="submit my tweet">

</form>

<h2>Previous Tweets</h2>

XXXX

</body>

</html>

"""
Twitter Clone - Let’s Try It!
Twitter Clone - Let’s Try It!

SUCC
ESS!
Spy Challenge!

1. Write a function to encrypt a

message.

2. Write a function to decrypt a

message.

* use Google to help

Encrypt and Decrypt

Encrypt:

● lowercase the text message

● rotate up the letters by the number given by the key
(if you go past “z”, wrap around to “a”)

Decrypt: - just the opposite

● rotate down the letters by the number given by the key
Encrypt - Illustrated

Encrypt

A p p l E z

a p p l e z

shift up by 2 wrap around

key is 2

c r r n g b
Decrypt

Decrypt just do the opposite

Functions - Reminder

def function_name (parameters):

do something
do more

return the_answer
Competition!

TEAM 1 TEAM 2

encrypt decrypt
encrypted
message message
message
 In just 4 sessions we’ve …
data science?

using libraries digital

services?
graphics

repetitive work reusable

blocks

“Hello World!” working with

data

languages
tech overview

The “1s and 0s”

Want To Do More?

meetup.com
Link to These Slides

https://goo.gl/6eQaMi