Skip to content

Spring 2014: Week 3

Jump to bottom Edit New page
lmccart edited this page Oct 21, 2014 · 2 revisions

##HTML

  • Primary task of web browser is to display HTML objects in a window. HyperText Markup Language (HTML) is the core language of nearly all Web content. Most of what you see on screen in your browser is described, fundamentally, using HTML. More precisely, HTML is the language that describes the structure and the semantic content of a Web document.
  • HTML uses a pre-defined set of elements to identify content types. Elements contain one or more "tags" that contain or express content. Tags are surrounded by angle brackets, and the "closing" tag (the one that indicates the end of the content) is prefixed by a forward slash. Some examples include <html>, <head>, <body>, <img>, <title>, <p>, <div>, <a>, <br>, <em>, <h1>, <h2>, <canvas>, <embed>.
  • document object -- HTML document
  • window object -- window or frame that displays the document.
    • Also serves as the global object and global execution context for client-side JavaScript code.
    • Has built-in self-referential property “window” and “self” (the two are interchangeable, window is a little more common).
    • Because window is the highest global object, all global vars are actually properties of window. The following statements are equal:
    var x = 10;
window.x = 10;
    • Generally you are working in one window or frame. It is possible to write JS applications that span multiple windows. For these, global variables in one window are not accessible from other windows.
  • There are a few other built-in objects besides document and window, including navigator, history, location, frames[], screen. You don’t need to do much with these now, but just FYI.

##CSS

  • Web browsers display HTML-structured text styled with Cascading Style Sheets (CSS). HTML defines the content, CSS supplies the presentation.
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  • https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started
  • You can set style properties inline using the style attribute.
    • Inside the quotes, you place one or more property:value pairs, separated by semicolons.
    <div style=”width:400px; background:#FF0000; font-size: 18px;”>This is some text.</div>
  • Inline style is a good quick fix, but a better way to style an HTML page is to use an external stylesheet file. This lets you keep a better separation between content and presentation and avoid repeating code.
    • Create a file like style.css, and link to it in the header of the HTML file.
    <link rel="stylesheet" type="text/css" href="style.css">
    • Inside style.css, you create CSS rules linking a particular selector to one or more property:value pairs.
    selector {
   property: value;
   property: value;
   property: value;
}
    • A selector may be:
      • A general tag type, specified by p, body, a.
      • A class, specified by “.” and the name of the class. Classes can be applied to multiple elements in an HTML document.
      • An id, specified by “#” and the id. IDs should only be applied to one element in an HTML document.
    <p class="key" id="principal">
p {
  font-size: 14px;
}
.key {
  color: green;
}
#principal {
  font-weight: bolder;
}
    • Selectors can be strung together. They follow the hierarchy of the tree, child rules take precedence over parent rules.

##JS

  • JavaScript aids in the presentation of HTML.
  • You can include JS directly in your HTML file using the <script> tag.
    • A document may contain multiple <script> blocks. They are executed in order and constitute one program (you may refer to variables and functions in other blocks).
  • The <script> tag also supports a src attribute. This allows you to link to an external .js file.
<script src="sketch.js" type="text/javascript"></script>
  • An external file contains pure JS and no <script> tags.
  • This allows you to simplify the HTML code and separate the content and behavior.
  • If there are multiple files that use the same JS code, you can have the code in one file and link to it from different HTML files, rather than copying it over. It also means your browser can cache these files and not spend time reloading the same code.
  • JavaScript was the original scripting language of the web and the most common, but there are others. Browsers choose which ones to support. For this reason, it’s a good idea to specify which type of script you are using.
    • You can link in the head to indicate that all scripts will be JavaScript unless otherwise specified.
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    • You can also specify as part of the script tag.
    <script type="text/javascript"></script>

##HTML manipulation with p5.js

var cnv = createCanvas(600, 400);
Create other elements
var elt = createHTML();
var fish = createHTMLImage(“fish.jpg”);
  • Setting properties:
    • .position()
    • .size()
    • .id()
    • .class()
    • .mousePressed()
    • .mouseOver()
    • .mouseOut()
    • .show()
    • .hide()
    • .style()
  • Accessing elements:
    • getId()
    • getClass()
  • Mouse coordinates:
    • mouseX/Y relative to canvas
    • winMouseX/Y relative to (0,0) of window

##Asynchronous JS behavior

  • JS has what is known as an event-driven programming model. Meaning, your program responds to asynchronous events such as mouse and keyboard input. Of course, there is also the the draw loop that is happening constantly and drawing to canvas. These are slightly different models for thinking about running your program.
  • JS is single threaded and synchronous. Generally, the code runs in order and one thing happens at a time. However, a line of code may trigger an asynchronous event, and JS does not wait for each of these events to complete before going onto the next line. Some examples include loading images or JSON, querying an API or database, etc.
  • This is generally dealt with with something called callbacks, functions that you designate to run when another function completes or returns.
  • In p5, there is a function called preload(). preload() comes before setup() and load operations called here are guaranteed to be complete before setup() is called.

##Resources

##Homework

Add a custom footer
Add a custom sidebar
Clone this wiki locally