> For the complete documentation index, see [llms.txt](https://icl.doyoki.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://icl.doyoki.com/week-07.md).

# Week 07

{% embed url="<https://youtu.be/Z-5cVpWhp30>" %}

{% embed url="<https://youtu.be/nKzrupwnI0M>" %}

{% embed url="<https://vimeo.com/244397751>" %}

Week6 #7

## 1. Multiple JS files

#### <https://editor.p5js.org/kdoodoo/sketches/B1yC6roi7>

#### You can keep your file in a separate js file.&#x20;

## 2. DOM element and Callback Function

#### Document Object Model (**DOM**)

![](/files/-LPRAvxN5dSfViwUXjf7)

![](/files/-LPRB61R6fayLxZYdXjP)

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
```

## P5.dom library

#### <https://p5js.org/reference/#/libraries/p5.dom>

### Example

#### <https://editor.p5js.org/kdoodoo/sketches/rJfcgPsjm>

### Example

#### <https://editor.p5js.org/kdoodoo/sketches/rJ9XZwijm>

### Example

#### <https://editor.p5js.org/kdoodoo/sketches/SJfe7PjsX>

####

## Callback function

#### Callback function is simple that&#x20;

1. &#x20;**The function createButton is attached to the variable button.**
2. **And when the button is pressed, I want changeColor function os called.**

   ```
   button.mousePressed(changeColor);
   ```

### Callback is simply one function is called and the other function is continuously called.&#x20;

```
  var button = createButton("Color??");
  button.mousePressed(changeColor);
```

### Example

#### <https://editor.p5js.org/kdoodoo/sketches/rJS8rDjsm>

## Assignment

1. Have multiple .js file (at least 2)
2. Have DOM element (it can be anything, button, slider, check, wordform, etc)

#### <https://goo.gl/forms/BLQxwU8giiMkDzxk2>