Skip to content

Section 1: Up and Running

Jump to bottom
Eric Beug edited this page Dec 8, 2017 · 2 revisions

Section 1: Up and Running

Text Editor with syntax-highlighting

Most operating systems come with a built in text-editor like textEdit(Mac) or notepad(windows), and most terminal applications come with Nano built in. Unfortunately these don't have things like syntax-highlighting or autocomplete that are very nice to have contextual features when learning to program.

  • Brackets Free and open-source, written in Javascript, comes with a built in webserver that we can easily use for this class / Mac Linux Windows (preferred option)

  • Some Other Options:

    • Sublime Free trial, then optionally $80 with a nag that pops up every once and a while / works on Mac Linux Windows
    • Atom Free and open-source / works on Mac Linux Windows
    • BBEdit Free version Mac only
    • vim/emacs – the longstanding nerd war of CLI editors

Filepath, Directory Structure & Filetypes

  • Users/path/to/your/folder/
  • index.html
  • file.js

1.a: HTML & The DOM

HTML: Hyper Text Markup Language

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for the World Wide Web.[2] Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

- Wikipdedia

DOM: Document Object Model

The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

- W3schools (a great canonical source for web standards)

<html>

  <head>
    <title>Section 1:</title>
    <link href="style.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.15/p5.js"></script>
  </head>

  <body>
    <h1>This is a heading!</h1>
    <p>And this is just a paragraph with some info in it.</p>
    <h2>Here is a smaller heading!</h2>
    <script src="section_1.js"></script>
  </body>

</html>

HTML Syntax

HTML mostly works by the browser looking for open and closing tags. Notice that at the top and bottom of the document, <html> is an opening tag that tells the browser, that until we see a closing tag: </html>, to interperet everything in between as html. Note that the closing tag has a forward slash in it. Most html tags work in this fasion, although there are some exceptions.

Head and Body

Note that inside the html document there are more multi-line "sections" with open and closing tags

<head> 

</head>

and

<body> 

</body>

Probably no one will ever come up with a satisfactory explanation for why these tags are so anthropomorphic. An HTML page is a pretty poor example of an animal, but nonetheless the inventors chose head and body. Inside the head is where things like the page title, and any CSS stylesheets and external javascript libraries will be loaded into our browswer. The body, conversely, is where to put all of the contents that are to be displayed on your web page.

For the things inside the <body> </body> tags, we refer to them as "elements." An example is this paragraph element: <p>And this is just a paragraph with some info in it.</p>

Further reading on the DOM as it relates to p5js

Loading in the browser

instructions for brackets

  1. copy and paste the above code into your index.html file and save it
  2. Click the little lightning bolt on the top right to launch this page in a web-browser.
  3. Notice the address at the top will be something like: http://127.0.0.1:56052/section_1/index.html

instructions for another code editor

  1. copy and paste the above code into your index.html file and save it
  2. find the path to this file (e.g. Users/path/to/your/folder/index.html
  • open the browser of your choice
  • paste or type the full path as the URL starting with: file://Users/path/to/your/folder/index.html
  • OPTIONAL: Start a local server on your computer:

Play Around

  1. Try changing the text between the title tags<title>Page Title</title> and see what happens.
  2. Try adding a new heading or paragraph to your HTML document.
  3. Each time you make a change, save your file and refresh your browser.

1.b: Javascript syntax in HTML context (in-line)

Go back to our index.html file and add a new paragraph <p> tag with an id of "demo": <p id="demo"></p> inside the body tag. This is in-line javascript that is manupulating the content of HTML through the DOM tree.

<script>document.getElementById("demo").innerHTML = "Hello JavaScript!";</script>

source: W3Schools

Give it a try! your code might now look something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <p id="demo">
      <script>document.getElementById("demo").innerHTML = "Hello JavaScript!";</script>
    </p>

  </body>
</html>

Takeaway:

  • We just stuck some javascript code in our HTML code! wat??
  • The code "excecuted" because we referenced it between <script> </script> tags (this is what our browser does with scripts – it loads them as a program to run)
  • We used javascript to dynamically change our otherwise static web page.
  • if the syntax looks crazy and you feel lost DON'T PANIC we'll get there!
  • bonus points: see what happens if you give another element in the body

1.c Loading external files (or scripts) into your HTML

As I mentioned p5js is a set of tools that extends Javascript. In order to use these new tools them we need to tell our HTML page that we want to use them. We can do that by embedding an external script into our page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.15/p5.js"></script>

Add this line inside the <head></head> tags. This will tell our HTML page that we want to load it. Alternatively, you can download p5js into your directory and load it locally. What this means is that instead of putting all this (massive amount of) javascript into our code, we are just including it in the file, and making our browser aware of it. Pretty neat!

Loading p5js library locally

The p5js library is included in the course github repo, but for future reference the most up to date versions are available via:

Food for thought:

Something to think about is that this doesn't seem to change anything about our page, but actually it does. By including this file we've made all of the magical functionality of p5js available to our browser.

Clone this wiki locally