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
Data weave 2.0 language fundamentals
PDF
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
PPTX
Domain-Driven Design: The "What" and the "Why"
PDF
DIG1108C Lesson3 Fall 2014
PPTX
DataWeave 2.0 Language Fundamentals
PPTX
Dapper: the microORM that will change your life
PPTX
Rubyconf2016 - Solving communication problems in distributed teams with BDD
PDF
Intro to JavaScript
PDF
Hacking Map API's Workshop - Where2.0 2009
PDF
Where2009 - Hacking Map APIs
PDF
Leveling Up at JavaScript
PDF
High quality Front-End
PPTX
Semanticmerge
PDF
Systems Monitoring with Prometheus (Devops Ireland April 2015)
PPTX
CPP02 - The Structure of a Program
PPTX
James Coplien - Trygve - October 17, 2016
PPTX
Trends in programming languages
PDF
jQuery Features to Avoid
PPT
PHP - Introduction to PHP
KEY
The Inclusive Web: hands-on with HTML5 and jQuery
Data weave 2.0 language fundamentals
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Domain-Driven Design: The "What" and the "Why"
DIG1108C Lesson3 Fall 2014
DataWeave 2.0 Language Fundamentals
Dapper: the microORM that will change your life
Rubyconf2016 - Solving communication problems in distributed teams with BDD
Intro to JavaScript
Hacking Map API's Workshop - Where2.0 2009
Where2009 - Hacking Map APIs
Leveling Up at JavaScript
High quality Front-End
Semanticmerge
Systems Monitoring with Prometheus (Devops Ireland April 2015)
CPP02 - The Structure of a Program
James Coplien - Trygve - October 17, 2016
Trends in programming languages
jQuery Features to Avoid
PHP - Introduction to PHP
The Inclusive Web: hands-on with HTML5 and jQuery
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 // [email protected]
  • 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.