This document provides an overview of how to interpret code to understand what a program is doing without running it. It discusses using code comments, function names, variable names, file locations, print functions, file names and other variables to understand the program's purpose. Specific programming languages are also discussed including examples of "Hello World" programs in Java, JavaScript, C, C#, PHP, Perl, Ruby and Python.

1. Sarah Kiniry
cPanel, Inc.
Storytime
Programming Language

2. About Me
Jason (hubby!)
Backend Perl developer,
extremely patient about being
my in-home tutor, taught me a
whole lot of The Things.
Sarah Kiniry (me!)
Technical Writer, former Stage
Manager and Box Office Manager,
needs-an-intervention level
Trekkie.
technicolorwriter.com
@SarahKiniry
@SarahKiniry
#STC16

3. If you can learn to read,
you can learn to read code.

4. Just read the story!
1
2
3
What does the application do?
What text will the user see?
Which files or settings?
@SarahKiniry
#STC16

5. How do I find the story?

6. Code Clues
1
2
3
What does the application do?
What text will the user see?
Which files or settings?
Code Comments
Function Names
Variable (Setting) Names
File Locations
Print Functions
Files
Directories
Variables
Code comments, function names,
setting names, and file locations.
Display methods, like print, and
other output functions.
File names, file paths, and other
variables.
@SarahKiniry
#STC16

7. Comments
Text in code that the computer doesn’t try to run.
Instead, it’s there for the developer’s reference.
Sometimes, it’s also used to temporarily “turn off”
code without deleting it.

8. Comments
// Single-line comments
// require a comment
// for each line.
do(thing); // comment
/* Multi-line
comments use beginning
and end characters for
multiple lines. */
Single-line comments…
• Can be used on the same line as code (a
trailing comment).
• Comment character at the beginning of the
comment only.
• A line break ends the comment.
Multi-line comments…
• Comment character at the beginning and
end of the comment.
• Generally, these exist on separate lines
from the code.
@SarahKiniry
#STC16

9. Single Line
// Java, JavaScript, C, C#, PHP
# PHP, Perl, Ruby, Python
@SarahKiniry
#STC16

10. Multi Line
/* Comment */ Java, JavaScript, C, C#, PHP
// Comment
Comment
C
=pod
=cut
Perl
=begin
=end
Ruby
""" """ Python
@SarahKiniry
#STC16

11. Functions
Reusable code that performs one or more actions.
Sometimes, the code that you’re looking at is a
function, while sometimes it uses existing functions.
* This is a lazy use of the term. These actions can be
subroutines, methods, procedures, etc.

12. Functions
sub do_something {
my $value = @_;
if $value {
return "Yay!";
}
…
do_something($value);
Function definition…
• Includes all of the code that will run
anytime the function is used.
• Creating a function that’s used elsewhere.
• Sets the function name.
Function use…
• Could be a custom-written function, or one
that’s built into the programming language.
• Often, custom functions are defined in
other code, not in the same file.
@SarahKiniry
#STC16

13. Using Functions
function($value)
function "$value"
@SarahKiniry
#STC16

14. Creating Functions
// This is the format to define a function.
class type functionname(parameters) {
code
}
*Java uses a “class” structure, so when you see this in code it’s going to be nested in a class.
Java*, C#
@SarahKiniry
#STC16

15. Creating Functions
// This is the format to define a function.
class type functionname(parameters) {
code
}
// This example defines a function.
public static void printyay() {
System.out.println ("Yay!");
}
*Java uses a “class” structure, so when you see this in code it’s going to be nested in a class.
Java*, C#
@SarahKiniry
#STC16

16. Creating Functions
// This is the format to define a function.
class type functionname(parameters) {
code
}
// This example defines a function.
public static void printyay() {
System.out.println ("Yay!");
}
*Java uses a “class” structure, so when you see this in code it’s going to be nested in a class.
Java*, C#
@SarahKiniry
#STC16
// This uses the defined function.
printyay();

17. Creating Functions
// This is the format to define a function.
class type functionname(parameters) {
code
}
// This example defines a function.
public static void printyay() {
System.out.println ("Yay!");
}
*Java uses a “class” structure, so when you see this in code it’s going to be nested in a class.
Java*, C#
@SarahKiniry
#STC16
// This uses the defined function.
printyay();
Yay!

18. Creating Functions
// This is the format to define a function.
type functionname(parameters) {
code
}
C
@SarahKiniry
#STC16

19. Creating Functions
// This is the format to define a function.
type functionname(parameters) {
code
}
// This example defines a function.
int printyay() {
printf("Yay!");
}
C
@SarahKiniry
#STC16

20. Creating Functions
// This is the format to define a function.
type functionname(parameters) {
code
}
// This example defines a function.
int printyay() {
printf("Yay!");
}
C
@SarahKiniry
#STC16
// This uses the defined function.
printyay();

21. Creating Functions
// This is the format to define a function.
type functionname(parameters) {
code
}
// This example defines a function.
int printyay() {
printf("Yay!");
}
C
@SarahKiniry
#STC16
// This uses the defined function.
printyay();
Yay!

22. Creating Functions
// This is the format to define a function.
function functionname(parameters) {
code
}
JavaScript, PHP
@SarahKiniry
#STC16

23. Creating Functions
// This is the format to define a function.
function functionname(parameters) {
code
}
// This example defines a function.
function multiply(a,b) {
return a * b;
}
JavaScript, PHP
@SarahKiniry
#STC16

24. Creating Functions
// This is the format to define a function.
function functionname(parameters) {
code
}
// This example defines a function.
function multiply(a,b) {
return a * b;
}
JavaScript, PHP
@SarahKiniry
#STC16
// This uses the defined function.
multiply(3,2);

25. Creating Functions
// This is the format to define a function.
function functionname(parameters) {
code
}
// This example defines a function.
function multiply(a,b) {
return a * b;
}
JavaScript, PHP
@SarahKiniry
#STC16
// This uses the defined function.
multiply(3,2);
6

26. Creating Functions
# This is the format to define a function.
sub functionname {
code
}
Perl
@SarahKiniry
#STC16

27. Creating Functions
# This is the format to define a function.
sub functionname {
code
}
# This example defines a function.
sub dothingstovars {
$variables = @_;
do_something($variables);
return $variables;
}
Perl
@SarahKiniry
#STC16

28. Creating Functions
Perl
@SarahKiniry
#STC16
# This uses the defined function.
dothingstovars(“red”);
# This example defines a function.
sub dothingstovars {
$variables = @_;
do_something($variables);
return $variables;
}
# This is the format to define a function.
sub functionname {
code
}

29. Creating Functions
Perl
@SarahKiniry
#STC16
# This uses the defined function.
dothingstovars(“red”);
# This example defines a function.
sub dothingstovars {
$variables = @_;
do_something($variables);
return $variables;
}
# This is the format to define a function.
sub functionname {
code
}
blue

30. Creating Functions
# This is the format to define a function.
def functionname(parameters)
code
end
Ruby
@SarahKiniry
#STC16

31. Creating Functions
# This is the format to define a function.
def functionname(parameters)
code
end
# This example defines a function.
def Texas(name)
var = "Howdy, " + name
return var
end
Ruby
@SarahKiniry
#STC16

32. Creating Functions
Ruby
@SarahKiniry
#STC16
# This uses the defined function.
Texas(Bob)
# This is the format to define a function.
def functionname(parameters)
code
end
# This example defines a function.
def Texas(name)
var = "Howdy, " + name
return var
end

33. Creating Functions
Ruby
@SarahKiniry
#STC16
# This uses the defined function.
Texas(Bob)
# This is the format to define a function.
def functionname(parameters)
code
end
# This example defines a function.
def Texas(name)
var = "Howdy, " + name
return var
end
Howdy,
Bob

34. Creating Functions
# This is the format to define a function.
def functionname(parameters):
code
return[value]
Python
@SarahKiniry
#STC16

35. Creating Functions
# This example defines a function.
def print_return(my_words)
print my_words
return[]
Python
@SarahKiniry
#STC16
# This is the format to define a function.
def functionname(parameters):
code
return[value]

36. Creating Functions
Python
@SarahKiniry
#STC16
# This uses the defined function.
print_return(“Hey everybody!")
# This example defines a function.
def print_return(my_words)
print my_words
return[]
# This is the format to define a function.
def functionname(parameters):
code
return[value]

37. Creating Functions
Python
@SarahKiniry
#STC16
# This uses the defined function.
print_return(“Hey everybody!")
# This example defines a function.
def print_return(my_words)
print my_words
return[]
# This is the format to define a function.
def functionname(parameters):
code
return[value]
Hey
everybody!

38. Variables
The names of stored values that code uses to
perform actions. This can mean strings (text),
numbers, or boolean values (true/false).
There are also methods of storing groups of values,
such as arrays or hashes.

39. Variables
variable_name Java, JavaScript, C, C#, Python
$variable_name PHP, Perl, Ruby
@variable_name Perl, Ruby
%variable_name Perl
(and arrays
and hashes)
@SarahKiniry
#STC16

40. Important Value Types
Files example.txt, example.jpg, example.php
Directories
Linux: /example/directory or example/directory/
Windows: C:exampledirectory or
..exampledirectory
Settings managed, unmanaged; blue, green, red; 0, 1
@SarahKiniry
#STC16

41. Variables
my $file = example.txt;
$color = blue;
$do_something = 1;
@SarahKiniry
#STC16

42. Hello World!

43. The Hello World Story
1
2
3
What does the application do?
What text will the user see?
Which files or settings?
@SarahKiniry
#STC16

44. The Hello World Story
1
2
3
What does the application do?
This application displays a message to the user.
What text will the user see?
Which files or settings?
@SarahKiniry
#STC16

45. The Hello World Story
1
2
3
What does the application do?
This application displays a message to the user.
What text will the user see?
The user will see the text “Hello World.”
Which files or settings?
@SarahKiniry
#STC16

46. The Hello World Story
1
2
3
What does the application do?
This application displays a message to the user.
What text will the user see?
The user will see the text “Hello World.”
Which files or settings?
No other files or settings are involved.
@SarahKiniry
#STC16

47. Hello, Java!
/* This is a Hello World script. */
class HelloWorldApp {
public static void main(String[] args)
{
// Display the string.
System.out.println("Hello World!");
}
}
@SarahKiniry
#STC16

48. Hello, Java!
/* This is a Hello World script. */
class HelloWorldApp {
public static void main(String[] args)
{
// Display the string.
System.out.println("Hello World!");
}
}
@SarahKiniry
#STC16

49. Hello, Java!
/* This is a Hello World script. */
class HelloWorldApp {
public static void main(String[] args)
{
// Display the string.
System.out.println("Hello World!");
}
}
@SarahKiniry
#STC16

50. Hello, JavaScript!
<script language=“Javascript">
// Write to browser window.
document.write("Hello World!");
</script>
@SarahKiniry
#STC16

51. Hello, JavaScript!
<script language=“Javascript">
// Write to browser window.
document.write("Hello World!");
</script>
@SarahKiniry
#STC16

52. Hello, JavaScript!
<script language=“Javascript">
// Write to browser window.
document.write("Hello World!");
</script>
@SarahKiniry
#STC16

53. Hello, C!
/* Hello World */
void main()
{
printf("Hello World!");
}
@SarahKiniry
#STC16

54. Hello, C!
/* Hello World */
void main()
{
printf("Hello World!");
}

55. Hello, C!
/* Hello World */
void main()
{
printf("Hello World!");
}

56. Hello, C#!
/// Let’s say Hello.
using System;
namespace HelloWorld
{
class Hello
{
static void Main()
{
Console.WriteLine("Hello World!");
}
}
}
@SarahKiniry
#STC16

57. Hello, C#!
/// Let’s say Hello.
using System;
namespace HelloWorld
{
class Hello
{
static void Main()
{
Console.WriteLine("Hello World!");
}
}
}

58. Hello, C#!
/// Let’s say Hello.
using System;
namespace HelloWorld
{
class Hello
{
static void Main()
{
Console.WriteLine("Hello World!");
}
}
}

59. Hello, PHP!
// Tell them hello in PHP.
<?php
echo "Hello World!";
?>
@SarahKiniry
#STC16

60. Hello, PHP!
// Tell them hello in PHP.
<?php
echo "Hello World!";
?>

61. Hello, PHP!
// Tell them hello in PHP.
<?php
echo "Hello World!";
?>

62. Hello, Perl!
#!/usr/bin/perl
# We’ll call this a Perl of wisdom.
print "Hello World!";
@SarahKiniry
#STC16

63. Hello, Perl!
#!/usr/bin/perl
# We’ll call this a Perl of wisdom.
print "Hello World!";

64. Hello, Perl!
#!/usr/bin/perl
# We’ll call this a Perl of wisdom.
print "Hello World!";

65. Hello, Ruby!
#!/usr/bin/ruby -w
# First Perl, now Ruby? Shiny.
puts "Hello, world!"
=begin
Really though, who knew there were two
programming languages named after
gemstones, even if one is kind of
misspelled?
=end
@SarahKiniry
#STC16

66. Hello, Ruby!
#!/usr/bin/ruby -w
# First Perl, now Ruby? Shiny.
puts "Hello, world!"
=begin
Really though, who knew there were two
programming languages named after
gemstones, even if one is kind of
misspelled?
=end

67. Hello, Ruby!
#!/usr/bin/ruby -w
# First Perl, now Ruby? Shiny.
puts "Hello, world!"
=begin
Really though, who knew there were two
programming languages named after
gemstones, even if one is kind of
misspelled?
=end

68. Hello, Python!
# A lot of programming languages use
# hashes for their comment character.
print("Hello, World!")
""" But they tend to diverge when it comes
to multiline comments. """
@SarahKiniry
#STC16

69. Hello, Python!
# A lot of programming languages use
# hashes for their comment character.
print("Hello, World!")
""" But they tend to diverge when it comes
to multiline comments. """

70. Hello, Python!
# A lot of programming languages use
# hashes for their comment character.
print("Hello, World!")
""" But they tend to diverge when it comes
to multiline comments. """

71. The Harder Stuff

72. More JavaScript
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
JavaScript code example from w3schools.com
@SarahKiniry
#STC16

73. More JavaScript
JavaScript code example from w3schools.com
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
@SarahKiniry
#STC16

74. More JavaScript
JavaScript code example from w3schools.com
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
@SarahKiniry
#STC16

75. More JavaScript
JavaScript code example from w3schools.com
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
@SarahKiniry
#STC16

76. More JavaScript
JavaScript code example from w3schools.com
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
@SarahKiniry
#STC16

77. More JavaScript
JavaScript code example from w3schools.com
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
@SarahKiniry
#STC16

78. More JavaScript
JavaScript code example from w3schools.com
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()"
src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("bulbon")) {
image.src = "pic_bulboff.gif";
} else {
image.src = "pic_bulbon.gif";
}
}
</script>
@SarahKiniry
#STC16

79. What’s The Story?
1
2
3
What does the application do?
What text will the user see?
Which files or settings?
@SarahKiniry
#STC16

80. What’s The Story?
1
2
3
What does the application do?
This application switches between two images.
What text will the user see?
Which files or settings?
@SarahKiniry
#STC16

81. What’s The Story?
1
2
3
What does the application do?
This application switches between two images.
What text will the user see?
“Javascript Can Change Images”
Which files or settings?
@SarahKiniry
#STC16

82. What’s The Story?
1
2
3
What does the application do?
This application switches between two images.
What text will the user see?
“Javascript Can Change Images”
Which files or settings?
pic_bulbon.gif and pic_bulboff.gif, width=100,
height=180
@SarahKiniry
#STC16

83. More JavaScript
JavaScript code example from w3schools.com
@SarahKiniry
#STC16

84. More JavaScript
JavaScript code example from w3schools.com
@SarahKiniry
#STC16

85. Questions?
@SarahKiniry
#STC16