Creative Computing

Index of /

Week 10

Vibes this week?

Be Your Own Resource

At some point in your life as a designer, you will inevitably be asked to do something you're not 100% knowledgable about. Likewise, part of being a programmer involves learning and experimenting with unfamiliar topics. Having the ability to independently research and learn new things on your own will greatly increase your facility and skillset as both a designer and a programmer.

This Week ...

iFrames

The iframe tag allow us to embed one HTML page inside another. This is really useful if you want to demonstrate a working code example or contextualize another page on the internet.

To display content in an iframe, you need to define three attributes:

src: the URL of the page you want to display. This can be a local file (i.e., project.html) or another resource on the internet.
width: the width of your iframe
height: the height of your iframe

Local Resource

<iframe src="demo.html" width="100%" height="375px"></iframe>

tiny

Week 7 demo

External Resource

<iframe src="http://www.patatap.com/" width="100%" height="375px"></iframe>

Patatap

Document Object Model (DOM)

The Document Object Model (DOM) refers to how the browser renders the page once it's loaded. The DOM is also a web standard, meaning you can create, access, and change any object on the HTML page using JavaScript.

Objects in the HTML document are talked about much like branches on a family tree. There are parents, siblings and children; ancestors and descendants. A DOM tree might look like this:

The same document, in HTML:

CSS: IDs, nested & combined selectors

JSFiddle example
Using getElementById(), className, and combined CSS selectors

IDs

In CSS, we use a hash # to target an element by its ID:

HTML

<div id="object-id-name"></div>

CSS

#object-id-name { ... }

Classes

To target elements by class names in CSS, we use a period .

<div class="object-class-name"></div>

CSS

.object-class-name { ... }

Nested Selectors

We can use nested selectors to target all elements which are children of a specified parent element:

HTML

<div class="parent-object">
    <div></div>
</div>

CSS

.parent-object div { ... }

HTML

<div class="parent-object">
    <div class="child-object"></div>
</div>

CSS

.parent-object .child-object { ... }

Assignment

  1. Research, Resource, Demonstration, Presentation. Investigate and summarize a topic related to JavaScript. Create a resource documenting your topic, how we use it, and what we might do with it and present this to the class.

  2. Archive your pattern project. Use this as an opportunity to begin applying a systematic approach to documenting and presenting your work.