►
Description
As a part of the City of Boston's One Boston Day celebration, The Department of Innovation and Technology (DoIT) hosted a free hour of coding, led by Boston's CIO, Santiago Garces.
A
B
A
Great
so
again
in
the
in
the
spirit
of
the
exercise
that
we're
going
to
be
doing
today,
I'll
ask
the
people
that
have
experienced
particularly
Michael
Evans
from
monam
who's
joining
us
volunteering
to
help
us
conduct.
They
are
our
work
today
help
each
other
out.
If,
if
someone's
struggling
one
of
the
people
that
feels
that
have
a
little
bit
more
proficiency,
we
can
kind
of
go
to
decide
and
and
help
the
the
person
that's
struggling.
A
C
A
An
hour
learning
so
to
get
started.
I'm
gonna
share
on
the
on
the
chat,
the
link
to
the
exercise,
we're
going
to
be
following
an
exercise
that
has
been
created
for
us
as
part
of
this
International
movement
about
the
hour
of
code,
so
I'm
going
to
share
the
link
with
you
also
that
we
can
go.
You
can
use
your
favorite
browser
to
to
go
to
the
exercise
and
then
I'll
share
my
screen
in
a
minute
and
as
I
mentioned,
you
could
go
a
little
bit
faster.
A
A
B
A
So
for
today's
exercise
we
chose
to
do
use
this
coding
tutorial
for
Community
mapping.
Mapping
and
data
analysis
is
something
that
we
use
all
the
time
and
again
because
our
city
is
a
geographic
space.
There's.
Our
hope
is
that
we're
inspiring
you
all
to
go
and
build
tools
that
help
you
make
our
city
better
generally
and
I'm.
Assuming
everybody
can
see
my
screen.
A
So
you
have
on
the
left
side.
You'll
have
a
panel
that
can
walk
you
through.
The
exercises
is
where
you
can
go
at
your
own
pace
and
if
you
want
to
go
a
little
bit
faster,
you
can
go
a
little
bit
faster
in
the
center.
You
have
the
area
where
you'll
be
able
to
input
code,
you'll
be
able
to
type
in
there
and
then
that
will
generate
the
commands
on
the
top
right
side.
You'll
see
a
little
screen,
but
right
now
it's
purple.
A
A
A
A
We'll
start
again,
as
I
mentioned,
we're
going
to
be
programming
in
people,
use
the
term
programming
or
coding
interchangeably,
but
we're
going
to
be
using
JavaScript,
which
is,
if
you
haven't
heard
of
it.
It's
a
language
that
you
use
almost
every
time
that
you,
if
you
use
the
internet
you're
more
than
likely
using
JavaScript,
you
might
not
see
it,
but
it
is
the
language
that
most
of
the
web
pages
used
to
make
interactive
content.
A
So,
if
you're
on
Google
Microsoft,
if
you're
almost
anywhere
you'll,
be
you,
you
can
see
JavaScript
code,
so
we're
gonna
get
started.
It
says,
like
JavaScript,
is
one
of
the
fundamental
languages
that
we're
using
in
websites
and
it's
also
used
another
in
other
applications.
But
so
data
is,
let's
just
open
it
up
a
little
bit
this
I'd
imagine
any
everybody
has
heard
a
little
bit
about
data.
A
D
Oh
Santi
I
I
could
go.
This
is
Michael
I,
actually
work
for
the
city,
so
on
sort
of
a
weekly
basis,
I'll,
look
at
3-1-1
data
and
that
that's
basically
data
about
services
that
the
city
is
delivering
so
filling
potholes
filling.
You
know,
fixing
graffiti
that
sort
of
thing
and
just
checking
out.
You
know
how
well
the
the
city
is
still
is
delivering
those
services.
A
A
A
So
well
can
continue
so
again,
there's
so
many
interesting
applications
where
you
can
build.
You
can
use
programming
and
data
to
try
to
solve
a
problem
that
we
care
about,
like
you
could
be
thinking
about.
Helping
us
understand
when
there's
a
trash
can
that's
overflowing
or
if
there's
a
place
that
you
know
like
you,
could
map
your
favorite
public
art
and
create
interactive
guides
for
people.
So
there's
a
number
of
fun
applications.
A
Keep
going
but
start
thinking,
maybe
about
and
put
it
in
the
chat.
If
you
have
some
applications
of
things
that
you
think,
that
would
be
fun
that
you
could
enable
particularly
applications
that
could
leverage
Maps
to
to
represent
information
around
the
city
and
just
put
it
in
the
chat
and
again
the
tutorial
will
give
you
some
of
the
fundamentals
and
then
you
can
go
on
and
there's
a
whole
world
again.
Our
hope
is
that
this
is
just
a
an
appetizer
if
you
will
into
a
whole
world
and
some
of
us.
C
A
B
A
Click
some
things
happen
on
the
screen
and
basically
a
lot
of
times
when
we're
interacting
with
websites.
This
is
what's
happening
behind
the
scenes.
There's
a
piece
of
code
that
is
getting
executed,
so
we'll
dig
in
a
little
bit
deeper
into
what
what
the
what
the
code
that
we
just
saw
is
in
a
minute.
B
A
B
C
B
A
You
go
I
like
trying
different
things:
I,
don't
like
always
following
exactly
the
the
the
example
button:
okay,
great
and
I'm,
saying
that
people
have
some
great
ideas
for
for
application.
So
you
see
that
we're
already
starting
to
be
able
to
interact
with
this
map
without
type
clicking
on
a
button.
We're
able
to
change
the
way
that
the
map
looks
just
the
real
code,
which
is
I,
think
pretty
cool
and
you're
already
coding.
A
Able
because
we've
zoomed
out
a
little
bit
we're
able
to
see
hopefully
the
map
of
the
city.
What
is
that
you're
saying
Beacon
Hill
now:
okay,
we're
going
to
the
next
place
so
now
we're
gonna
type,
a
couple
of
other
commands
and
now
we're
going
to
try
to
move
a
little
bit
around
the
map.
So
we
can
type
the
command
on
the
left.
My
graphic.
A
Is
Hayward
shifting
to
to
the
east
and
then
let's
see,
if
we
make
it
positive,
what
happens?
You
see
we're
going
even
a
little
bit
beyond
the
the
edge
of
the
map,
which
is
pretty
cool,
and
you
see
that
in
this
case
the
our
environment
is
interactively
as
soon
as
we're
making
changes
on
the
console.
It's
inter
like
it's
interpreting
and
you
see
the
changes
instantaneously
and
the
on
the
map,
which
is
pretty
cool.
A
A
A
C
A
E
I
guess
my
question
is
I
feel
like
we're
not
like
this
is
not
code.
This
is
what
an
end
user
would
do.
Oh
I
want
this
map
to
be
bigger.
I
want
this
map
to
be
smaller.
That
coding
is
really
saying.
Okay
when
anyone
says
blow
up
or
blow
out.
This
is
the
parameter
like
does
that
make
sense
that
question
I
feel
like.
A
Yeah,
no,
it
makes
sense.
So
in
some
ways,
what
we're
starting
to
see
is:
how
is
it
that
we
can
change
an
object
based
on
the
code
there's
when
you're
creating
an
application
like
a
user
and
application?
Usually
what
we
create
is
code
that
allows
you
know
like
when
you
what
happens
when
you
press
a
button
or
what
happens
when
you
type
submit.
C
A
Like
when
you
send
submit,
or
when
you
type
into
a
box,
that's
that's
kind
of
what
we're
doing
right
now
is
showing
what?
How
is
it
that
the
code
is
changing.
Some
element
I
think
that
what
you're
thinking
about
is
more
on
the
back
end.
So
is
it?
How
is
it
that
we
move?
Let's
say
that
we
wanted
to
extract
all
of
the
three-on-one
submissions
that
we've
received,
but
you
actually
use
very
similar
code.
A
E
A
B
B
A
And
again,
as
we
as
it
picks
up
a
little
bit
as
we,
we
don't
know
exactly
where
everybody
is
starting
from.
So
some
things
might
seem
kind
of
basic
and
some
things
might
seem
a
little
bit
daunting
to
others
and
that's
okay,
I,
find
it
helpful
and
one
of
the
things
that
I've
learned
is
that
it
is
helpful
even
for
very
experienced
programmers
to
go
back
to
the
fundamentals
to
make
sure
that
you're,
you
know.
A
This
particular
concept
that
we're
about
to
learn
is
supplied
almost
everywhere.
So
in
programming.
We
think
about
objects.
So
we
think
that
there's
something
that
has
a
number
of
different
attributes.
In
this
case
we've
been
treating
that
graphic
one
as
an
object
and
we've
been
changing
different
attributes,
different
values
of
the
of
these
attributes,
but
we're
about
to
get
deeper
on
that.
So
we're
about
to
create
an
empty
object,
we're
going
to
assign
when
we
type
Bear
bar
that
is
Javascript.
A
It's
a
JavaScript
construct
to
assign
a
variable,
so
we're
going
to
say
that
there's
a
new
and
you
can
see
that
the
editor
is
changing
a
little
bit
the
colors
to
tell
us
that
some
things
are
like
specifically
the
JavaScript
part
and
then
what
are
things
that
we're
adding
so
we're
deciding
that
we're
going
to
call
this
thing
called
Apple
and
we
are
going
to
create
an
empty
object.
There's
nothing
at
this
point
Apple
and
we
could
have
called
it
whatever
we
wanted,
but
could
be.
A
So
now
we're
going
to
add
some
parameters
to
we're
going
to
create
this
value,
values
and
keys.
So
key
being
the
thing
that
allows
us
to
find
what
value
and
the
value
being
the
actual
content
of
the
valley.
So
the
interests
applying
the
exercise,
we're
going
to
make
a
valley
and
I
think
that
what
they're
trying
to
show
is
that
some
of
these
values
could
be
something
like
a
picture
or
something
else
that
is
or
yeah.
A
A
So
we're
we're
just
starting
to
build
out
our
objects.
So,
okay,
we
have.
We
have
the
first
part,
the
first
key,
which
is
the
icon
that
we're
gonna,
give
it
an
X
and
A
Y.
I.
Think
that
at
this
point
it
won't
even
show
in
the
map
just
yet
we'll
get
it
to
show
there
later,
but
so
I
am
adding
these
other.
A
A
A
C
A
E
A
A
B
A
And
then
just
change
to
to
Black,
which
is
which
is
pretty
neat
and
makes
it
a
little
bit
easier
for
us
to
read
so
I
think
that
what
they,
what
the
tutorial
is
telling
us
now
is
when
we
pass
that
string
hello
to
the
Disney
concept,
that
we
have
a
function
called
text,
we're
passing
a
parameter.
We're
telling
text
is,
if
you
think,
like
a
verb
and
we're
giving
it
a
subject,
we're
giving
it
something
that
the
verb
can
now
act
on.
A
A
So
we've
created
another
text
box,
but
now
it's
a
little
bit
upset.
It's
actually
I've
said
50
in
this
case,
I
think
with
their
pixels
is
the
unit.
So
we
added
two
more
arguments
to
text.
So
text
is
smart
enough
that
when
we
pass
other
things
with
it,
it
knows
that
the
other
two
parameters,
that's
that's.
What
like
the
different
components
of
the
of
the
function,
is
that
it
should
move
it
a
little
bit
enough.
B
A
C
A
A
And
it
she's
giving
us
some
pointers
around
restrictions
in
JavaScript.
These
are
the
kinds
of
things
that
change.
When
you
talk
about
JavaScript
or
python,
or
Java,
some
other
programming
languages,
each
one
has
like
slightly
different
rules,
and
these
are
some
of
the
rules
that
exist
in
JavaScript.
Some
of
them
are
shared
across
the
board,
but
we
can't
start
the
name
of
a
variable
with
the
number
we
can't
have
spaces
and
we
can't
have
any
punctuation
marked.
Besides
an
underscore,
we
should
like
go
ahead.
Do
you
wanna
unmute
yourself,
foreign.
E
A
A
A
C
A
Yeah
I
think
it's
not
going
to
change
anything,
because
what
it
would
be
trying
to
do
is
change
the
the
text
if
it
had
any
color,
but
because
it's
an
icon,
it's
not
a
something
that
it
knows
how
to
change
the
color
okay.
So
now
Priscilla
asks
a
great
question
says
you
asked
so
what
happened?
We
also
put
other
data
in
there.
We
have
put
the
X
and
the
Y,
but
that's
not
getting
represented
in
the
in
the
map.
So
what
we're
going
to
do
now
is
actually
go
back
and
reference.
A
A
D
D
Right,
yeah,
the
the
console
is
really
useful.
You
know
when
you're
programming,
you
know
sometimes
there's
an
error.
You
know
you
need
to.
You
know,
figure
out
what
a
function
does
or
or
what's
in
a
particular
object.
So,
for
example,
here
when
you
know,
when
Santi
defined
Apple,
icon,
Apple
underscore
icon
actually
I
mean
this
is
kind
of
like
magical
stuff.
When
you
start
programming,
you
know,
swanty
put
in,
you
know:
Apple
dot
icon,
which
was
the
the
actual
icon
and
then
apple.x
apple.y
to
you
know
visualize
that
on
the
map.
D
D
A
A
A
Of
error
that
happens
all
the
time
when
you,
when
you
get
a
little
bit
deeper
into
programming,
but
so
hopefully
you
start,
you
can
see
how
powerful
this
stuff
is.
So
you
have
objects
that
are
ways
of
for
us
to
organize
different
data,
and
we
can
organize
and
add
other
types
of
information
to
these
objects.
We
can
use
functions
to
interact
with
the
objects
to
change,
attributes
and
values
of
the
objects,
and
sometimes
we
can
use
some
of
these
functions
to
create
and
interact
with
with
other
parts.
B
C
A
A
Of
that
we
have
a
rectangle
and-
and
you
can
see
the
value
of
the
of
the
variables,
because
right
now,
if
I
want
to
change
the
color
of
the
rectangle
I,
actually
have
no
way
of
I
have
no
way
of
calling
it
out.
I
can't
you
know
remember
when
we
went
back
and
we
changed
the
color
of
the
graphic
of
the
of
the
text.
We
can't
do
that
without
a
variable
name
but
I
I'm,
assuming
that
this
thing
is
going
to.
B
A
C
A
Yep
we
see
there
is
an
object
that
was
given
to
us
for
free
when
we
started,
but
I
didn't
even
know
about
this.
Zone
I
was
about
to
be
confused
and
frustrated,
but
there
is
a
win.
It
is
640
and
maybe
what
we
should
do
then,
is
also
change
the
x
of
this
to
be
zero,
so
the
we
can
get
back
to
the
leftmost
corner.
C
A
Okay,
so
now
it's
saying
we
need
to
change
the
color
of
the
rectangle
to
be
green.
So,
in
order
to
be
able
to
call
on
the
rectangle,
I'm
gonna
have
to
change
this
statement
and
say
it's
a
variable
and
I'm
going
to
call
it.
My
rectangle
in
on
this
point,
I
will
disagree
with
what
the
tutorial
is
doing.
Usually
it's
better
to
name
your
variables,
things
that
you
can
understand
what
it
is.
Even
if
it's
a
little
bit
longer,
it
won't
impact
the
performance
like
older
versions
of
computer
software.
A
D
A
B
A
D
A
This
is
why,
in
our
work,
we
are
very
diligent
about
telling
our
teams
to
be
well
to
document
things
well,
to
be
very
clear
because
a
lot
of
times
you
might
be
having
an
impact
on
someone
else
that
you
don't
even
know
it
and
the
way
that
we
that
we
have
to
do
our
job.
But
this
is
exciting.
We're
able
to
change
the
color
of
the
triangle
to
Green,
okay.
Well,
we
are
going
to
change
this.
B
A
A
B
B
A
Follow
Michael's
advice:
I
want
to
use
the
lock
because
I'll
be
able
to
see
if
I
call
out
title
I
will
actually
be
able
to
see.
Oh
yeah,
you
see.
This
is
what
the
console's
so
beautiful,
because
I
can
see
the
entirety
of
the
object
below
I
can
see
what,
because
I
we
didn't
build
text
text
was
given
to
us,
and
now
we
need
to
change
the
size
of
the
of
the
font,
which
is
not
height.
A
The
good
thing
is
like
here:
when
we
go
to
the
console,
you
can
see
that
we're
actually
interacting
with
the
with
the
object
and
changing
the
font
size,
which
is
pretty
cool,
Old
Line
I'd,
like
green
I,
was
with
green
okay.
So
now
we're
going
to
start
binding
real
data
to
our
object,
all
right
team
we're
we
got
to
quits
time.
If
we
want
to
create
a
an
object
that
is
empty,
which
of
the
three
are
we
going
to
use?
A
Put
it
in
the
chatter,
we're
going
to
use
the
first
option
with
the
brackets?
Are
we
going
to
use
the
quotes,
or
are
we
going
to
use
the
bra
yeah
yeah?
Those
are
called
brackets.
This
is
the
first
I,
don't
know
my
typography,
but
you
know
option
one
option:
two
or
option
three:
what
do
you?
What
do
you
think.
A
Correct
it
is
the
brackets
that
instantiate
objects
remember,
the
quotes
create
actually
a
string,
and
then
we
haven't
covered
that,
but
the
but
the
square
brackets.
What
they
do
is
they
create
an
array
which
is
a
list,
but
if
you,
if
you
love
coding-
hopefully
hopefully
you
find
this
fun
and
you
want
to
keep
learning
more
and
then
you
can
learn
about
a
race
and
you
can
teach
the
next
one
of
these.
You
can
go
and
host
an
hour
of
code
and
teach
some
of
your
friends
how
to
code.
A
A
A
But
when
we
are
inside
of
an
object,
we
assign
Keys
repair
objects
and
values
using
the
colon
and
remember
that
if
we
want
to
have
a
number
of
different,
we
could
see
a
little
bit
of
the
answers
here
in
the
console.
If
we
want
to
add
other
attributes,
we
use
the
coma
to
add
to
make
a
list
and
remember
that
we
have
to
use
the
quotes
if
we're
going
to
be
using
a
string.
A
So
we're
now
going
to
start
creating
interactivity,
so
we're
going
to
have
a
function
that
is
going
to
get
executed
and
just
let's
look
at
the
function
for
just
a
quick
second
I
know
that
we're
getting
close
to
time,
but
canvas
is
the
object,
the
the
square
where
we
have
our
map
and
when
Mouse
clicked
is
a
function.
It's
a
well
it's
yeah
and
we
have
right
now
an
empty
function.
It
doesn't
have
a
name
and
it
doesn't
have
any
arguments
but
we're
about
to
describe
what's
going
to
happen
when
we
click
the
mouse.
C
A
A
That
when
he
sees
the
last
slash
and
then
information
that
that's
what
we
call
the
comment,
so
it's
code
that
is
not
getting
executed,
but
it
it
is
really
helpful
to
know,
especially
if
you
wanted
to
leave
a
note
for
yourself
later
or
for
another
developer.
But
even
sometimes
it's
really
helpful
to
leave
like
what.
C
A
B
C
A
A
C
A
A
A
C
A
C
A
On
the
Apple,
it's
changing
the
title
and
before
when
I
was
looking
as
well
as
getting
frustrated
if
I
clicked
anywhere,
it
wasn't
doing
anything,
but
when
I
like
the
Apple,
now
it
actually
is
registering
so
it's
it's
awesome,
pretty
cool
because
we
don't
have
a
way
of
clicking
back.
We
only
do
it
when
you
click.
This
is
where
we're
having
to
use
the
reversal
to
get
it
back
to
say
the
original
thing,
but
this
is.
C
A
A
B
A
B
A
A
B
B
A
B
A
A
A
A
All
right,
let's
see
if
it
changes
yeah
there
you
go,
that
was
working,
just
got
a
little
stuck
with,
because
we've
just
been
editing.
Usually
you
would
have
code,
that's
a
little
bit.
Cleaner,
more
separated
is
kind
of
hard
to
tell
where
we
were,
but
this
is
great.
So
when
we
click
on
the
green
monster,
it
says
green
monster
and
when
we
click
on
the
Red
Apple
it
shows
this
is
my
Apple,
so
you
can
again
feel
free
to
keep
playing
with
these
things.
A
A
To
being
able
to
to
do
this,
you
can
see
how
powerful
this
is
in
some
sense,
if
you
wanted,
you
could
actually
start
putting
together
icons
for
the
your
favorite
places
within
Boston
Common,
and
you
could
make
it
that
when
you
click
on
the
map,
you
would
be
able
to
see
what
the
naming
of
where
the
Frog
Pond
is.
Where
the
Gazebo
is,
and
you
you
with
the
skills
that
you've
learned
today,
you
should
be
able
to
do
that.
A
E
This
sort
of
goes
back
to
my
I
guess
original
question
when
you've
shown
us
all
this
a
lot
of
times,
I'm
thinking
to
myself,
oh
I
can
do
that
with
the
basic
word
processing
program
as
an
end
user
or
a
spreadsheet,
and
so
I'm.
Trying
I
in
the
end,
like
our
word
processing
program,
is
a
JavaScript
behind
it's
so
much
more
complicated,
but
JavaScript
is
creating
all
of
the
things
that
as
end
users,
we
have
the
opportunity
to
then
play
with.
A
C
A
Like
you
have
a
list
of
data,
imagine
that
you
had
2000
I'm
gonna
make
up
a
number,
but
right,
like
imagine
that
you
have
2
000
benches
and
you
had
the
location
of
all
the
benches
and
you
wanted
to
map
them
up.
So
you
could
do
that
by
hand,
but
with
code.
What
we've
shown
is
that
you
could
interpret
all
of
those
as
pieces
of
data
that
then
you
can
have
the
computer
go
unmapped
for
you,
because
you
can
be
passing
the
same
way
that
we
passed
here
the
location
as
an
attribute
yeah
the
function.
A
You
could
be
doing
that
for
for
for
each
element.
It's
just
we
did
it
in
one
hour.
We
can't
we
can't
quite
learn
all
of
it,
but
like
what
you
would
probably
want
to
start
looking
at
is
arrays
and
iterators
to
be
able
to
do
that.
So
remember
that
we
talk
about
like
the
the
square
brackets,
where
you
can
have
a
list
of
things
and
then
you
can
go
through
each
of
those
to
do
something.
E
E
A
So
again,
Japanese
group
tends
to
be
used
way,
overly,
like
mostly
for
interactive
things.
So
this
is
one
like
you.
We
wanted
to
use
it
today
for
the
map
they're.
What
is
nice
is
like
again
once
you
imagine,
if
you've
created
this
app
and
you
wanted
not
only
the
person
that
had
the
one
app
but
anytime,
that
anyone
access
the
app
would
be
able
to
do
the
same
kind
of
things.
That's
also
why
you
use
JavaScript
right,
like
if
you
think
about
your
word
document.
A
You
usually
think
I
have
One
Word
document,
but
if
you
wanted
a
like
a
thousand
people
like
a
video
game,
a
thousand
people
that
have
the
same
video
game
could
be
interactive,
but
but
yeah
it's
just.
This
is
the
this
is
the
beginning,
and
when
you
start
playing
a
little
bit
more
with
it,
you
see
that
there's
so
much
power
behind
this.
A
B
A
Is
amazing,
there's
this
website
called
GitHub
where
there's
a
repository
of
a
lot
of
code,
and
you
would
be
amazed
the
kinds
of
things
that
where
the
code
is
open
there
and
you
can
see,
there's
billions
of
lines
of
code
that
people
are
generating
every
day
and
yet
to
your
point.
Teams
like
ours
spend
a
lot
of
time
working
on
building
the
code,
but
also
a
lot
of
time,
reading
and
deciphering.
How
is
it
the
what
what
could
break
or
how
could
we
write
something
to
be
a
little
bit
more
efficient.