STC 2016 Programming Language Storytime

Sarah Kiniry cPanel, Inc.

StorytimeProgramming 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 Office 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 files or settings?

@SarahKiniry #STC16

How do I find the story?

Code Clues

1

2

3

What does the application do?

What text will the user see?

Which files or settings?

Code CommentsFunction Names

Variable (Setting) Names

File LocationsPrint 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

CommentsText 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-linecomments 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

FunctionsReusable 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

// 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

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();

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!

Creating Functions

// This is the format to define a function.type functionname(parameters) { code }

C

@SarahKiniry #STC16

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

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();

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!

Creating Functions

// This is the format to define a function.function functionname(parameters) { code }

JavaScript, PHP

@SarahKiniry #STC16

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

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);

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

Creating Functions

# This is the format to define a function.sub functionname { code }

Perl

@SarahKiniry #STC16

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

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 }

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

Creating Functions

# This is the format to define a function.def functionname(parameters) code end

Ruby

@SarahKiniry #STC16

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

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

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

Creating Functions

# This is the format to define a function.def functionname(parameters): code return[value]

Python

@SarahKiniry #STC16

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]

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]

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!

VariablesThe 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

DirectoriesLinux: /example/directory or example/directory/

Windows: C:\example\directory or ..\example\directory\

Settings managed, unmanaged; blue, green, red; 0, 1

@SarahKiniry #STC16

Variables

my $file = example.txt;

$color = blue;

$do_something = 1;

@SarahKiniry #STC16

Hello World!

The Hello World Story

1

2

3

What does the application do?

What text will the user see?

Which files or settings?

@SarahKiniry #STC16

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

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

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

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, 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, 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, JavaScript!

<script language=“Javascript">

// Write to browser window.document.write("Hello World!");

</script>

@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!

/* 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, 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.<?phpecho "Hello World!";?>

@SarahKiniry #STC16

Hello, PHP!

// Tell them hello in PHP.<?phpecho "Hello World!";?>

Hello, PHP!

// Tell them hello in PHP.<?phpecho "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, 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!"

=beginReally 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!"

=beginReally though, who knew there were two programming languages named after gemstones, even if one is kind of misspelled?=end

Hello, Ruby!

#!/usr/bin/ruby -w

# First Perl, now Ruby? Shiny.

puts "Hello, world!"

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

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

The Harder Stuff

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

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

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

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

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

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

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

What’s The Story?

1

2

3

What does the application do?

What text will the user see?

Which files or settings?

@SarahKiniry #STC16

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

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

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

More JavaScript

JavaScript code example from w3schools.com

@SarahKiniry #STC16

More JavaScript

JavaScript code example from w3schools.com

@SarahKiniry #STC16

Questions?

@SarahKiniry #STC16