cs_intro_2016

View Github Repository Open presentation in a new window

aaronr

See all presentation from aaronr

cs_intro_2016

0 0

cs_intro_2016

Intro to CS slides. Targeting 1.5 hour intro to CS for high school students

On Github aaronr / cs_intro_2016

Computer Science

Aaron Racicot - aaronr@z-pulley.com reprojected.com / @reprojected / github.com/aaronr

Who I am?

  • SW Developer
  • Environmental Scientist
  • Open Source Advocate

Computer Science (UW)

Bridging the Gap

Environmental Science (OHSU)

Work for NOAA

Environmental Response

Computer Science

Like looking under the hood of a car...

Looking behind a website...

Looking inside of a device...

Coding can be a fun

Coding can be a job

Many types

of computers

Computers are

everywhere

"Computer science is the

scientific and practical

approach to computation

and its applications."

"Its fields can be divided

into a variety of theoretical

and practical disciplines."

Theoretical

How do you sort numbers?

Practical

  • How do you make a website (writing html, javascript and web services)
  • How do you write a program to drive a car (Google self driving cars)
  • How do you cast a shadow when creating animation (Ray Tracing)

But why?

End goal is to map some domain

problem to computer science

to help solve that problem

It will change your life!

Starting at the bottom

  • Computers crunch numbers... its all math
  • The brains are the CPU
  • Short term memory is the RAM
  • Long term memory is the Hard drive
  • The language the brain (CPU) speaks is "code"
  • Analog <-> Digital

Finishing at the top

  • Systems interact with humans (or other systems)
  • Interfaces are constantly changing
  • Asynchronous vs Synchronous

Language

is important

Computers speak

many languages

... called Code

Not all code

looks scary

Languages (code)

  • Low level languages (Assembly Language)
  • High-level languages (C, C++, Java, Python, Javascript)
  • Code is just the syntax (English, French, Spanish)
  • Logic is the common element (i.e. you can say "Car" in many languages)

Code constructs

Variables

>>> x = 1
>>> x
1
>>> y = 2
>>> y
2
>>> x + y
3
>>> x = 10
>>> x + y
12

Input and Output 

z-air: aaronr$ python
Python 2.7.10 (default, Oct 23 2015, 18:05:06)
[GCC 4.2.1 Compatible Apple LLVM 7.0.0 (clang-700.0.59.5)] on darwin
Type "help", "copyright", "credits" or "license" for more information.

>>> name = raw_input("Enter your name: ")
Enter your name: Aaron
>>> name
'Aaron'

If/Then/Else

>>> name == 'Aaron'
True

>>> if name == 'Aaron':
...     print "Hi there Aaron"

Hi there Aaron

Boolean Logic

>>> True == 1
True
>>> False == 0
True
>>> True and False
False
>>> True and True
True
>>> True or False
True
>>> False or False
False
>>> not True
False

Loops

>>> for x in xrange(10):
...        print "x = %d" % x
x = 0
x = 1
x = 2
x = 3
x = 4
x = 5
x = 6
x = 7
x = 8
x = 9

>>> x = 10
>>> while x > 0:
...     print "x = %d" % x
...     x = x - 1
...
x = 10
x = 9
x = 8
x = 7
x = 6
x = 5
x = 4
x = 3
x = 2
x = 1


import numpy as np
import matplotlib.pyplot as plt

mu, sigma = 100, 15
x = mu + sigma * np.random.randn(10000)

# the histogram of the data
n, bins, patches = plt.hist(x, 50, normed=1, facecolor='g', alpha=0.75)

plt.xlabel('Smarts')
plt.ylabel('Probability')
plt.title('Histogram of IQ')
plt.text(60, .025, r'$\mu=100,\ \sigma=15$')
plt.axis([40, 160, 0, 0.03])
plt.grid(True)
plt.show()

Critical Thinking

Mathematical Logic

Logic

HTML

Hyper Text Markup Language

    <div class="col-md-4 scoreboard">
      <h1 id="score">Score = 0</h1>
    </div>

Head

<head>
  <title>Aaron's Pong Game</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <style>
    .scoreboard {
      background-color: #2ba6cb;
    }
  </style>
</head>

Body

<body>
  <div class="container">
    <div class="col-md-4 scoreboard">
      <h1 id="score">Score = 0</h1>
    </div>
    <div class="col-md-8 gameboard">
      <center>
        <h1 class="cover-heading">My Pong Game</h1>
        <canvas id="pong" data-processing-sources="pong.pde"/></canvas>
      </center>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.16/processing.js"></script>
</body>

CSS

Cascading Style Sheets

By Class

  <style>
    .scoreboard {
      background-color: #2ba6cb;
    }
  </style>

By ID

  <style>
    #scoreboard {
      background-color: #2ba6cb;
    }
  </style>

The difference between an ID and

a class is that an ID can be used

to identify one element, whereas

a class can be used to identify

more than one.

JavaScript

high-level, dynamic, untyped, and

interpreted programming

language

$(document).ready(function() {

    var map = L.map('map', {maxZoom: 22}).setView([48.03, -122.4085], 14);

    var featureLayer = L.mapbox.featureLayer()
        .loadURL('/gisdata/geojson/citylimitsline_4326.geojson')
        .addTo(map);
});