Learning To Code
GIS and Sociological Geography » Syllabus » Learning To Code

Goals

The goal of this module is to learn enough javascript to be able to be able to complete a tutorial on web mapping using something like Leaflet. End goal is to move toward being able to create things like these:

PhillyBikeTheft
London Crime Map

Lizzy Diamond's Slide Show can help get us started.

Tools

We will use CodeAcademy to get started in javascript.

Background

What is an object?

What is a web page?

  1. What we see.
  2. What we code.
  3. How the browser handles it (and hence, how we can write code that manipulates it)

A Little Bit of HTML

Hypertext Markup Language is a coding system used to define the way text and other elements are displayed by browsers. For the most part, all HTML consists of matched "tags" surrounding that indicated what the generic style of text is. Some examples:


<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>
Sed quis posuere elit. Aliquam <i>Italic Text</i> at accumsan lorem, quis porta odio. Vivamus a vestibulum nulla, vel semper tellus. Aliquam convallis nulla at nisl posuere, ut malesuada felis consectetur. Integer vel cursus lectus. Integer condimentum non quam sit amet tincidunt. Pellentesque lobortis libero vel libero viverra, at placerat nunc semper. Nam fringilla sapien id dui dapibus gravida. Suspendisse a ornare nunc. Quisque gravida a <b>Bold Text</b> justo id congue. Proin lacinia consectetur hendrerit. Donec id magna vitae est aliquet egestas.
</p>
<p>An "unordered" (bullet) list of items
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</p>
<p>
An ordered (numbered) list of items
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</p>

We can draw a sort of "family tree" diagram of the page:

2013-11-14_08-50-54.png

Try It Yourself: Draw the tree diagram for the following HTML:

<html>
<head>
<title>This is an Important Page</title>
</head>
<body>
<h1>An Important Heading</h1>
<p>
What do we need to do this weekend?
</p>
<p>
<ol>
<li>Work on SOC128</li>
<li>Have fun (working on SOC128)</li>
<li>Post on FB (about working on SOC128)</li>
</ol>
</p>
</body>
</html>

+ Hints and Solutions

<head>
<script>

function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}

</script>
</head>
<body>

<h1>My First JavaScript</h1>
<p id="demo">This is a paragraph.</p>

<button type="button" onclick="displayDate()">Display Date</button>

</body>

You Try It: There are many web-based workbenches where you can see code in action and try it for yourself.

<script>
function newText(where,what)

{

document.getElementById(where).innerHTML=what;

}

</script>

<h3>My Second Try</h3>

<p id="demo2">This is a paragraph.</p>
<p id="demo3">This is another paragraph.</p>

<button type="button" onclick="newText('demo2','THIS IS A NEW PARAGRAPH')">

Change the Paragraph Text

</button>
<button type="button" onclick="newText('demo3','THIS IS A NEW ANOTHER PARAGRAPH')">

Change the other Paragraph Text

</button>

References

Chris Essig Creating responsive maps with Leaflet, Google Docs
TimesMachine

codinghtmlleaflet