# 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**)

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LPQj8HOYlM5oDrOB-bW%2F-LPRAvxN5dSfViwUXjf7%2Fdom-body-a.png?alt=media\&token=87c0dbc7-8e37-4de5-9845-bcc4dc3567e4)

![](https://3008602149-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LENuoEyK2N20-qT-Oc8%2F-LPQj8HOYlM5oDrOB-bW%2F-LPRB61R6fayLxZYdXjP%2Fpic_htmltree.gif?alt=media\&token=27cf34cb-06a1-4f42-a6b4-b01718dd80cd)

```
<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>