You Thought You Weren't A Programmer



@MaptimeSF
@mapsense
@jhnklly
john@mapsense.co

Table of Contents

Downloadtime!

Get A Text Editor

Meettime!

Name, geolocation, code experience?

Follow along

https://jhnklly.github.io/hello_code

All questions are important.
It's okay to cheat off others.
(Actually, kinda required.)
(I.e., be friendly and help each other.)

Definitiontime!

HTML & CSS & JavaScript

  • HyperText Markup Language
  • Cascading Style Sheets
  • Not Java; just script

Goaltime!

Demystify. Empower.

You don't need to be fluent in “beep-boop-boop-beep” to make pretty things with code.

  • Type some code into a text editor
  • View that code in a browser
  • Style it: add colors, pictures, links
  • I.e., make a web page!

Hacktime!

http://maptime.io/

  • View › Developer › View Source
    (Cmd + Opt + U)
  • Right-click › Inspect Element
    (Cmd + Opt + I)
  • Vandalize Beautify

index.html


Hello, World!

Put your text editor on one half of the screen & browser on the other.

Don't worry if you miss things!

Exposure gradually brings fluency.

We'll stop to test when the code block has an orange border.

"Tags" = Markup = <angle brackets>



<h1>Hello, World!</h1>

Style?



h1 { color: green; }

<h1>Hello, World!</h1>

CSS gets

  • {curly brackets}
  • colons :
  • semi-colons;

Style!

CSS also needs to be inside <style> tags.


<style>
    h1 { color: green; }
</style>

<h1>Hello, World!</h1>

Proper form

<!doctype html>
<html>
    <head>
        <style>
            h1 { color: green; }
        </style>
    </head>

    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

Other Important Tags

  • p = paragraph
    <p>I'm a paragraph.</p>
  • a = anchor, for links
    <a>I'm a link.</a>
  • div = division
    <div>I'm a div.</div>
  • img = image
    <img />

<body>
    <h1>Hello, World!</h1>

    <img src="https://placekitten.com/g/200/300" />

    <div>I'm a div.</div>

    <a href="http://maptime.io">I'm a link.</a>

    <p>Feline ipsum dolor ocelot, tabby so
    bobtail. Norwegian forest such lynx. Nip nap.
    </p>
</body>

Tags can have attributes and "values".


<div id="unicorn" class="fantanimal">I'm a div.</div>

<a href="http://maptime.io">I'm a link.</a>

<p class="ipsum fantanimal">Feline ipsum dolor ocelot, tabby so
        bobtail. Norwegian forest such lynx. Nip nap.</p>

We select “elements” in the “DOM” via “class” or “id”.

Whuck?

  • Element: think "tag"
  • DOM = Document Object Model
  • To style by id use hash: #name_of_id
  • To style by class use dot: .name_of_class

hash #id hash #id hash #id hash #id hash

dot .class dot .class dot .class dot .class

element element element element

<style>

    #unicorn { border: 1px dotted green; }

    .fantanimal { font-size: 2em; }

    .ipsum { font-style: italic; }

    a { font-family: 'Gotham', sans-serif; }

</style>

All together now

<!doctype html>
<html>
    <head>
        <style>
            #unicorn { border: 1px dotted green; }
            .fantanimal { font-size: 2em; }
            .ipsum { font-style: italic; }
            a { font-family: 'Gotham', sans-serif; }
        </style>
    </head>

    <body>
        <div id="unicorn" class="fantanimal">I'm a div.</div>

        <a target="_blank" href="http://maptime.io">I'm a link.</a>

        <p class="ipsum fantanimal">Feline ipsum dolor ocelot, tabby so
                bobtail. Norwegian forest such lynx. Nip nap.</p>
   </body>
</html>
I'm a div.
I'm a link.

Feline ipsum dolor ocelot, tabby so bobtail. Norwegian forest such lynx. Nip nap.

Paws 4 Questions

HTML & CSS just for style

JavaScript for behavior

Text inside script tags is special.

Unless you put quotes around it—then it's "just text".


<script>
    alert("I'm an alert!");
</script>

Use var to initialize variables


<script>
    var text_var = "Meow.";

    alert("I'm an alert!" + text_var);
</script>

Use + to add numbers.

var variable1 = 3000;
var variable2 = 857;

alert(variable1 + variable2);

(See how easy this is?)

Also use + to join text.

var text_var = " Meow. ";
var call_it_what_you_want = " Woof. ";

alert(text_var + call_it_what_you_want);

if (this condition is true) {

do this; }

<script>var text_var = " Meow.";
    var number_var = 0;

    if (number_var >= 0) {
        alert(number_var + text_var);
    }
</script>

What if you want to “alert” 1 million times?

var text_var = "Meow.";
var number_var = 0;

while (number_var < 7) {
    alert(number_var + text_var);
    number_var = number_var + 1;
}

Arrays & for loops


var colors = ['red','orange','yellow',
    'green','blue','indigo','violet'
];

for (i = 0; i < 21; i++) {
    var element = '
' +
        i +
        '
';

    document.write(element);
}

We ♡ libraries

They're full of functions & power.

<script src="http://d3js.org/d3.v3.min.js">
</script>

<script>
d3.select('body')
    .append('div')
        .text('D3time!')
        .attr('style','color: orange; font-size: 100px;');
</script>
D3time!

Cut & Paste & Discuss D3

<script src="http://d3js.org/d3.v3.min.js">
</script>

<script>
var colors = ['red','orange','yellow',
    'green','blue','indigo','violet'
];

d3.select('body').selectAll('div')
    .data(colors)
    .enter()
    .append('div')
        .text('♥')
        .attr('style',function(d) {
            var css = 'color: ' + d;
            return css;
        });
</script>
♥
♥
♥
♥
♥
♥
♥

Now you know how to code!

#nailedIt

Questions?

https://jhnklly.github.io/hello_code



@MaptimeSF
@mapsense
@jhnklly
john@mapsense.co