STC 2016 Programming Language Storytime

Sarah Kiniry
cPanel, Inc.
Storytime
Programming Language

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 Ofﬁce Manager,
needs-an-intervention level
Trekkie.
technicolorwriter.com 
@SarahKiniry
@SarahKiniry
#STC16

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

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

Code Clues
1
2
3
Code Comments
Function Names
Variable (Setting) Names
File Locations
Print Functions
Files
Directories
Variables
Code comments, function names,
setting names, and ﬁle locations.
Display methods, like print, and
other output functions.
File names, ﬁle paths, and other
variables.
@SarahKiniry
#STC16

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.

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

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

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

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.

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

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

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

Creating Functions
code
}
// This example defines a function.
public static void printyay() {
System.out.println ("Yay!");
}
Java*, C#
@SarahKiniry
#STC16

Creating Functions
code
}
}
Java*, C#
@SarahKiniry
#STC16
// This uses the defined function.
printyay();

Creating Functions
code
}
}
Java*, C#
@SarahKiniry
#STC16
printyay();
Yay!

Creating Functions
type functionname(parameters) {
code
}
C
@SarahKiniry
#STC16

Creating Functions
code
}
int printyay() {
printf("Yay!");
}
C
@SarahKiniry
#STC16

Creating Functions
code
}
int printyay() {
printf("Yay!");
}
C
@SarahKiniry
#STC16
printyay();

Creating Functions
code
}
int printyay() {
printf("Yay!");
}
C
@SarahKiniry
#STC16
printyay();
Yay!

Creating Functions
function functionname(parameters) {
code
}
JavaScript, PHP
@SarahKiniry
#STC16

Creating Functions
code
}
function multiply(a,b) {
return a * b;
}
JavaScript, PHP
@SarahKiniry
#STC16

Creating Functions
code
}
return a * b;
}
JavaScript, PHP
@SarahKiniry
#STC16
multiply(3,2);

Creating Functions
code
}
return a * b;
}
JavaScript, PHP
@SarahKiniry
#STC16
multiply(3,2);
6

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

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

Creating Functions
Perl
@SarahKiniry
#STC16
# This uses the defined function.
dothingstovars(“red”);
$variables = @_;
return $variables;
}
sub functionname {
code
}

Creating Functions
Perl
@SarahKiniry
#STC16
dothingstovars(“red”);
$variables = @_;
return $variables;
}
sub functionname {
code
}
blue

Creating Functions
def functionname(parameters)
code
end
Ruby
@SarahKiniry
#STC16

Creating Functions
code
end
def Texas(name)
var = "Howdy, " + name
return var
end
Ruby
@SarahKiniry
#STC16

Creating Functions
Ruby
@SarahKiniry
#STC16
Texas(Bob)
code
end
def Texas(name)
return var
end

Creating Functions
Ruby
@SarahKiniry
#STC16
Texas(Bob)
code
end
def Texas(name)
return var
end
Howdy,
Bob

Creating Functions
def functionname(parameters):
code
return[value]
Python
@SarahKiniry
#STC16

Creating Functions
def print_return(my_words)
print my_words
return[]
Python
@SarahKiniry
#STC16
code
return[value]

Creating Functions
Python
@SarahKiniry
#STC16
print_return(“Hey everybody!")
print my_words
return[]
code
return[value]

Creating Functions
Python
@SarahKiniry
#STC16
print_return(“Hey everybody!")
print my_words
return[]
code
return[value]
Hey
everybody!

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.

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

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

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

The Hello World Story
1
2
3
@SarahKiniry
#STC16

1
2
3
What does the application do? 
This application displays a message to the user.
@SarahKiniry
#STC16

1
2
3
What text will the user see? 
The user will see the text “Hello World.”
@SarahKiniry
#STC16

1
2
3
The user will see the text “Hello World.”
Which ﬁles or settings? 
No other ﬁles or settings are involved.
@SarahKiniry
#STC16

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

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

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

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

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

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

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

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

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

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

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

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

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

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. """

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

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>
@SarahKiniry
#STC16

What’s The Story?
1
2
3
@SarahKiniry
#STC16

What’s The Story?
1
2
3
This application switches between two images.
@SarahKiniry
#STC16

What’s The Story?
1
2
3
“Javascript Can Change Images”
@SarahKiniry
#STC16

What’s The Story?
1
2
3
“Javascript Can Change Images”
Which ﬁles or settings? 
pic_bulbon.gif and pic_bulboff.gif, width=100,
height=180
@SarahKiniry
#STC16

More JavaScript
@SarahKiniry
#STC16

Questions?
@SarahKiniry
#STC16

STC 2016 Programming Language Storytime

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to STC 2016 Programming Language Storytime (20)

STC 2016 Programming Language Storytime