SlideShare a Scribd company logo
Introduction to Programming
Well, Kind Of.
THATCamp New England 2010
Julie Meloni // @jcmeloni // jcmeloni@gmail.com
What’s missing in the slides...
• A lot of extemporaneous talking about how
everyone is already a programmer.
• In fact, you all probably know a lot of this, but
just didn’t know the terms.
• What’s more, the applications of the future come
from the needs of the present: your needs.
▫ When you can articulate them to someone who
can do the codework, we all win.
Why Program?
• Express complex logic and perform
computations.
▫ We make the computer do what we want it to do.
▫ These behaviors come from our imaginations.
▫ The processes come from our needs and desires.
• Do things that take a long time or are difficult
for humans to do (counting, comparing,
repeating)
What is a “Programming Language”?
• An artificial language with a limited purpose
• A means of expressing computations (math) and
algorithms (logic)
Thanks, @wayne_graham. I “repurposed” some of your content on this slide and the next.
What Does a Programming Language
Look Like?
• ...a lot like human language. They have:
▫ Syntax (form)
▫ Semantics (meaning)
 signs/words (variables, symbols, numbers,
strings)
 expressions
 flow control (decisions, conditions, loops,
narrative)
 complex entities (methods, structures, & objects)
A Few Types of Programming Uses
• Job control or shell scripting; text processing
• Graphical User Interface (GUI) programming
• Application-specific programming
• Web applications
▫ Front-end
▫ Back-end
Some Programming Languages You May
Have Heard About
• C++
• Java
• JavaScript (completely unrelated to the former)
• Perl
• Python
• Ruby
• PHP
A Few Basic Programming Components
(pretty much regardless of language)
• Variables & Arrays
• Operators
• Flow Control
• Functions
Putting together these pieces adds up to
programming (or scripting, or in general “writing
some stuff to tell the computer what to do”)
Variables & Arrays
• A variable is a bucket that holds one piece of
information.
• Examples (language doesn’t matter here; the
concept does):
▫ $string_variable = “THATCamp”;
▫ $numeric_variable= 4;
▫ $myname = “Julie”;
Variables & Arrays
• An array is a type of variable (or bucket) that holds
many pieces of information.
• Example (language doesn’t matter here; the
concept does):
▫ $THATCamps = array(“Prime”, “New England”,
“Pacific Northwest”)
 $THATCamps[0] holds “Prime”
 $THATCamps[1] holds “New England”
▫ $THATCamps = array(“1” => “Prime”; “NE”=> “New
England”, “PNW” => “Pacific Northwest”)
 $THATCamps[“NE”] holds “New England”
Operators
• Arithmetic
▫ +, -, *, / (add, subtract, multiply, divide)
• Assignment
▫ = (“Assign the value of 4 to the variable called a”)
 $a = 4;
▫ += (“Add the value of 5 to the variable that already
holds 4”)
 $a += 5; // $a now holds 9
▫ .= (“Attach the value ‘World’ to the end of ‘Hello’ to
make a new value for the string variable”)
 $string = “Hello”;
 $string .= “World”; // would print “HelloWorld” (no
space because we didn’t add that!)
Operators
• Comparison
▫ == (“when I compare the value in variable a to the value in variable be,
that comparison is true”)
 $a == $b
▫ != (“when I compare the value in variable a to the value in variable be,
that comparison is not true”)
 $a != $b
▫ === (“when I compare the type of and value in variable a to the type of
and value in variable be, that comparison is true”)
 $a === $b
▫ >, >= (“the value of variable a is greater than (or greater than or equal
to) the value of variable b”)
 $a > $b
▫ <, <= (“the value of variable a is less than (or less than or equal to) the
value of variable b”)
 $a < b
Operators
• Logical
▫ && (and)
▫ || (or)
▫ ! (not)
Flow Control (conceptual structures virtually
independent of language, although might look a
little different)
• if
if (something is true) {
do something here
}
• if ... else ... else if
if (something is true) {
do something here
} else if (something is true) {
do something here
} else {
do something here
}
Flow Control (conceptual structures virtually
independent of language, although might look a
little different)
• while
while (something is true) {
do something here
}
• for
for (something is true) {
do something here
}
Flow Control (conceptual structures virtually
independent of language, although might look a
little different)
• switch
switch (some_variable) {
case “some_value”:
do something here
break;
case “some_other_value”:
do something here
break;
default:
do something here
}
Procedures and Functions
• Scripts can contain linear, procedural code.
• Scripts can also contain references to reusable bits
of code, called functions.
▫ Built-in language functions
▫ Functions you write yourself.
• [Note at this point in the presentation I talked a bit
about how every element you see in an application
can be boiled down to its logical structures and the
code you want to execute within those structures.]
Some Application Examples
• Static web site with some snippets of interactivity
▫ The example I used was a simple form on a web site.
• A library catalog with a content discovery mechanism
▫ I showed VIRGO (http://search.lib.virginia.edu).
• Custom Web-based application like NINES
▫ That would be http://nines.org
• WordPress/dynamic platform such as Omeka
▫ I showed two Omeka sites: Lincoln at 200 (http://lincolnat200.org) and
MITH’s Vintage Computers (http://mith.umd.edu/vintage-computers/)
▫ Clicked through to show exhibit & item conceptually same in both sites
(because of framework).
▫ Data goes in, data is pulled out; it exists in one place but accessed many ways
Let’s Design an Application
• What do you want it to do?
• What type of programming is required?
• Does language matter?
• What elements of programming are required (GUI?
Actions? Frameworks? etc)
• What can you leverage?
• What comes next?
▫ Being logical, being incremental, being procedural,
being functional, being a programmer...and then
talking to specialists.
And then...
• Asked the group for examples of ideas/tools/things
they wanted to do. Some examples:
▫ Discover similarities between two data sets
▫ Social annotation of images/primary sources
▫ Visualizing relationships between data
• Turns out you need three things for all of the
projects/ideas people had:
▫ Primary material
▫ Metadata
▫ Interface/use thoughts
And THEN...
• We walked through several examples and kept coming
back to:
▫ Logical construction of actions; explain it to someone in
“pseudocode”
 “If I click on this link, I want X to happen, and if I select this
form element and that form element together, I want Y to
happen”, etc.
▫ Most processes can be broken into smaller processes, all
loopy or controlled structures in some way.
▫ If you can think of what you want to see or do, you can tell
the computer how to do it so you can see it.
▫ You don’t need to be a Comp. Sci. person to do any of the
above – just an imaginative and relatively logical person.

More Related Content

PPTX
Learning About JavaScript (…and its little buddy, JQuery!)
PPTX
Speaking 'Development Language' (Or, how to get your hands dirty with technic...
PPTX
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
PDF
jQuery Introduction
PDF
fuser interface-development-using-jquery
KEY
Nothing Hard Baked: Designing the Inclusive Web
KEY
User Interface Development with jQuery
PPTX
jQuery Presentation
Learning About JavaScript (…and its little buddy, JQuery!)
Speaking 'Development Language' (Or, how to get your hands dirty with technic...
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
jQuery Introduction
fuser interface-development-using-jquery
Nothing Hard Baked: Designing the Inclusive Web
User Interface Development with jQuery
jQuery Presentation

What's hot (20)

PDF
JavaScript
PPTX
Getting Started with jQuery
PPTX
Lecture 5: Client Side Programming 1
PPTX
JavaScript and jQuery Basics
PPTX
Lecture 6: Client Side Programming 2
PDF
JavaScript - Chapter 8 - Objects
PPT
jQuery introduction
PPTX
Getting Started with Web
PDF
Unit 4(it workshop)
PPTX
FFW Gabrovo PMG - jQuery
PPTX
FFW Gabrovo PMG - JavaScript 1
PDF
jQuery -Chapter 2 - Selectors and Events
PDF
Learn css3
PDF
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
PPT
PDF
ePUB 3 and Publishing e-books
PDF
JavaScript DOM Manipulations
PPT
PDF
JavaScript and BOM events
JavaScript
Getting Started with jQuery
Lecture 5: Client Side Programming 1
JavaScript and jQuery Basics
Lecture 6: Client Side Programming 2
JavaScript - Chapter 8 - Objects
jQuery introduction
Getting Started with Web
Unit 4(it workshop)
FFW Gabrovo PMG - jQuery
FFW Gabrovo PMG - JavaScript 1
jQuery -Chapter 2 - Selectors and Events
Learn css3
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
ePUB 3 and Publishing e-books
JavaScript DOM Manipulations
JavaScript and BOM events
Ad

Similar to Introduction to Programming (well, kind of.) (20)

PPTX
Introduction to Coding
PPTX
Introduction to computer programming
PDF
Programming for Problem Solving
PPT
Introduction To Programming
PPT
Computer Programming Computer Programming
PPTX
Cs1123 2 comp_prog
PPT
Chapter 5( programming) answer
PPT
Chapter1.ppt
PPT
Introduction to Programming
PDF
Programming skills
PPTX
Coding with Maker Tech
PPTX
Developing a Coding Program for Users - SWFLN Makerpalooza - Session 4
PPTX
UNIT 2 ECSE-2.pptx
PPT
programming.ppt
PPT
computer programming introduction ppt.ppt
PPT
Chapter 1- C++ programming languages +.ppt
PPTX
Paradigms
PPT
Learn Programming with Livecoding.tv http://goo.gl/tIgO1I
PDF
Introduction to programming by MUFIX Commnity
PDF
Introduction To Programming (2009 2010)
Introduction to Coding
Introduction to computer programming
Programming for Problem Solving
Introduction To Programming
Computer Programming Computer Programming
Cs1123 2 comp_prog
Chapter 5( programming) answer
Chapter1.ppt
Introduction to Programming
Programming skills
Coding with Maker Tech
Developing a Coding Program for Users - SWFLN Makerpalooza - Session 4
UNIT 2 ECSE-2.pptx
programming.ppt
computer programming introduction ppt.ppt
Chapter 1- C++ programming languages +.ppt
Paradigms
Learn Programming with Livecoding.tv http://goo.gl/tIgO1I
Introduction to programming by MUFIX Commnity
Introduction To Programming (2009 2010)
Ad

More from Julie Meloni (11)

PPTX
Everything I learned about a diverse workforce in tech, I learned…in the gove...
PPTX
Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...
PPTX
Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...
PPTX
Development Lifecycle: From Requirement to Release
PPTX
Everyone's a Coder Now: Reading and Writing Technical Code
PPTX
Community, Cohesion, and Commitment
PDF
Residential Learning Communities and Common Reading Programs
PPTX
Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...
PPTX
Let's Remediate!
PPT
Entering the Conversation
PPTX
Mavericks: The Ultra-Collaborative Composition Classroom
Everything I learned about a diverse workforce in tech, I learned…in the gove...
Developing and Deploying Open Source in the Library: Hydra, Blacklight, and B...
Libra: An Unmediated, Self-Deposit, Institutional Repository at the Universit...
Development Lifecycle: From Requirement to Release
Everyone's a Coder Now: Reading and Writing Technical Code
Community, Cohesion, and Commitment
Residential Learning Communities and Common Reading Programs
Managing Your (DH) Project: Setting the Foundation for Working Collaborativel...
Let's Remediate!
Entering the Conversation
Mavericks: The Ultra-Collaborative Composition Classroom

Introduction to Programming (well, kind of.)

  • 1. Introduction to Programming Well, Kind Of. THATCamp New England 2010 Julie Meloni // @jcmeloni // jcmeloni@gmail.com
  • 2. What’s missing in the slides... • A lot of extemporaneous talking about how everyone is already a programmer. • In fact, you all probably know a lot of this, but just didn’t know the terms. • What’s more, the applications of the future come from the needs of the present: your needs. ▫ When you can articulate them to someone who can do the codework, we all win.
  • 3. Why Program? • Express complex logic and perform computations. ▫ We make the computer do what we want it to do. ▫ These behaviors come from our imaginations. ▫ The processes come from our needs and desires. • Do things that take a long time or are difficult for humans to do (counting, comparing, repeating)
  • 4. What is a “Programming Language”? • An artificial language with a limited purpose • A means of expressing computations (math) and algorithms (logic) Thanks, @wayne_graham. I “repurposed” some of your content on this slide and the next.
  • 5. What Does a Programming Language Look Like? • ...a lot like human language. They have: ▫ Syntax (form) ▫ Semantics (meaning)  signs/words (variables, symbols, numbers, strings)  expressions  flow control (decisions, conditions, loops, narrative)  complex entities (methods, structures, & objects)
  • 6. A Few Types of Programming Uses • Job control or shell scripting; text processing • Graphical User Interface (GUI) programming • Application-specific programming • Web applications ▫ Front-end ▫ Back-end
  • 7. Some Programming Languages You May Have Heard About • C++ • Java • JavaScript (completely unrelated to the former) • Perl • Python • Ruby • PHP
  • 8. A Few Basic Programming Components (pretty much regardless of language) • Variables & Arrays • Operators • Flow Control • Functions Putting together these pieces adds up to programming (or scripting, or in general “writing some stuff to tell the computer what to do”)
  • 9. Variables & Arrays • A variable is a bucket that holds one piece of information. • Examples (language doesn’t matter here; the concept does): ▫ $string_variable = “THATCamp”; ▫ $numeric_variable= 4; ▫ $myname = “Julie”;
  • 10. Variables & Arrays • An array is a type of variable (or bucket) that holds many pieces of information. • Example (language doesn’t matter here; the concept does): ▫ $THATCamps = array(“Prime”, “New England”, “Pacific Northwest”)  $THATCamps[0] holds “Prime”  $THATCamps[1] holds “New England” ▫ $THATCamps = array(“1” => “Prime”; “NE”=> “New England”, “PNW” => “Pacific Northwest”)  $THATCamps[“NE”] holds “New England”
  • 11. Operators • Arithmetic ▫ +, -, *, / (add, subtract, multiply, divide) • Assignment ▫ = (“Assign the value of 4 to the variable called a”)  $a = 4; ▫ += (“Add the value of 5 to the variable that already holds 4”)  $a += 5; // $a now holds 9 ▫ .= (“Attach the value ‘World’ to the end of ‘Hello’ to make a new value for the string variable”)  $string = “Hello”;  $string .= “World”; // would print “HelloWorld” (no space because we didn’t add that!)
  • 12. Operators • Comparison ▫ == (“when I compare the value in variable a to the value in variable be, that comparison is true”)  $a == $b ▫ != (“when I compare the value in variable a to the value in variable be, that comparison is not true”)  $a != $b ▫ === (“when I compare the type of and value in variable a to the type of and value in variable be, that comparison is true”)  $a === $b ▫ >, >= (“the value of variable a is greater than (or greater than or equal to) the value of variable b”)  $a > $b ▫ <, <= (“the value of variable a is less than (or less than or equal to) the value of variable b”)  $a < b
  • 13. Operators • Logical ▫ && (and) ▫ || (or) ▫ ! (not)
  • 14. Flow Control (conceptual structures virtually independent of language, although might look a little different) • if if (something is true) { do something here } • if ... else ... else if if (something is true) { do something here } else if (something is true) { do something here } else { do something here }
  • 15. Flow Control (conceptual structures virtually independent of language, although might look a little different) • while while (something is true) { do something here } • for for (something is true) { do something here }
  • 16. Flow Control (conceptual structures virtually independent of language, although might look a little different) • switch switch (some_variable) { case “some_value”: do something here break; case “some_other_value”: do something here break; default: do something here }
  • 17. Procedures and Functions • Scripts can contain linear, procedural code. • Scripts can also contain references to reusable bits of code, called functions. ▫ Built-in language functions ▫ Functions you write yourself. • [Note at this point in the presentation I talked a bit about how every element you see in an application can be boiled down to its logical structures and the code you want to execute within those structures.]
  • 18. Some Application Examples • Static web site with some snippets of interactivity ▫ The example I used was a simple form on a web site. • A library catalog with a content discovery mechanism ▫ I showed VIRGO (http://search.lib.virginia.edu). • Custom Web-based application like NINES ▫ That would be http://nines.org • WordPress/dynamic platform such as Omeka ▫ I showed two Omeka sites: Lincoln at 200 (http://lincolnat200.org) and MITH’s Vintage Computers (http://mith.umd.edu/vintage-computers/) ▫ Clicked through to show exhibit & item conceptually same in both sites (because of framework). ▫ Data goes in, data is pulled out; it exists in one place but accessed many ways
  • 19. Let’s Design an Application • What do you want it to do? • What type of programming is required? • Does language matter? • What elements of programming are required (GUI? Actions? Frameworks? etc) • What can you leverage? • What comes next? ▫ Being logical, being incremental, being procedural, being functional, being a programmer...and then talking to specialists.
  • 20. And then... • Asked the group for examples of ideas/tools/things they wanted to do. Some examples: ▫ Discover similarities between two data sets ▫ Social annotation of images/primary sources ▫ Visualizing relationships between data • Turns out you need three things for all of the projects/ideas people had: ▫ Primary material ▫ Metadata ▫ Interface/use thoughts
  • 21. And THEN... • We walked through several examples and kept coming back to: ▫ Logical construction of actions; explain it to someone in “pseudocode”  “If I click on this link, I want X to happen, and if I select this form element and that form element together, I want Y to happen”, etc. ▫ Most processes can be broken into smaller processes, all loopy or controlled structures in some way. ▫ If you can think of what you want to see or do, you can tell the computer how to do it so you can see it. ▫ You don’t need to be a Comp. Sci. person to do any of the above – just an imaginative and relatively logical person.