Fundamentals of Programming

A little JavaScript tutorial for CAR 2011.

by jashkenas

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<h1>Fundamentals of Programming&hellip;</h1>

<div class="para">
    All JavaScript (JS) code will be written in a monospaced font, and looks <tt>"like&nbsp;this"</tt>. You can paste JS into the "JavaScript" area on the left, and click the "Run" button at the top of the screen to run it.
</div>

<div class="para">
    The white area below is a &lt;canvas&gt;, an element that we'll be using for drawing, later on.
</div>

<div class="para center">
    <canvas id="canvas" width="300" height="300"></canvas>
</div>

<script>
        window.sketch = new Processing.Sketch();
        window.run = function(draw) {
          sketch.attachFunction = function(processing) {
            window.p = processing;
            processing.setup = function() {
              p.background(255);
            };
            processing.draw = draw;
          }; 
          new Processing(document.getElementById("canvas"), sketch);
        };
    
        window.twitterURL = "http://api.twitter.com/1/statuses/public_timeline.json?callback=?";
    </script>

<h2>Words and Numbers</h2>

<ol>
    <li>Make the browser print a word. 
        <pre>alert("New York");</pre>
    </li>
    <li>Let's add the name of the state. 
        <pre>alert("New York" + " " + "NY");</pre>
    </li>
    <li>How many letters are in "Columbia"? 
        <pre>alert("Columbia".length);</pre>
    </li>
    <li>Substitute a variable for the same thing. 
<pre>var school = "Columbia";
alert(school.length);</pre>
    </li>
    <li>Change the variable to point to a new value. 
<pre>var school = "Columbia";
school = "NYU";
alert(school.length);</pre>
    </li>
    <li>Let's try numbers.
        <pre>alert(3);</pre>
   </li>
    <li>Try some basic math.
        <pre>alert(3 - 1 * 2);</pre>
   </li>
    <li>Calculate the tip on your dinner bill.
        <pre>alert(3 * 15.00 * 0.15);</pre>
   </li>
    <li>Try using a variable.
       ...

CSS

body {
    font-family: "Palatino Linotype", Palatino, Georgia, serif;
    background: url(http://documentcloud.org/viewer/images/DV/embed/pagesbg.jpg);
    margin: 10px; 
    overflow-y: scroll;
    overflow-x: hidden;
}

h1, h2 {
    font-size: 20px;
    padding: 4px 7px;
    margin-bottom: 20px;
}
h2 {
    margin-top: 30px;
    font-size: 18px;
}

tt, pre, code, textarea {
    font-size: 11px;
    font-family: Menlo, Monaco, Consolas, monospace;   
    border: 1px solid #ddd;
    background: #fff;
    color: #4c4c4f; 
}
tt {
    padding: 1px 3px;
}
pre, textarea {
    display: block;
    margin: 10px 0 3px;
    padding: 5px 7px;   
}
#canvas {
    margin: 3px auto;
    background: #fff;
    border: 1px solid #aaa;
}

ol {
    list-style-type: decimal;
    padding-left: 24px;  
}

.para, li {
    color: #333;
    font-size: 14px;
    line-height: 18px;
    border: 1px solid #ddd;
    padding: 4px 7px;
    margin: 15px 0;
    background: rgba(255,255,255,0.4);   
}
.center {
    text-align: center;