---
# System prepended metadata

title: 10 網頁元素(DOM)_學生版 - 取得文字、數值和其他輸入
tags: [互動藝術程式創作入門, Creative Coding, 程式設計, 學生版, 第九章]

---

---
tags: 程式設計,第九章,學生版,互動藝術程式創作入門,Creative Coding
---

# 10 網頁元素(DOM)_學生版 - 取得文字、數值和其他輸入
## 單元介紹


---

## 文字輸入(輸入文字方框)

![](https://i.imgur.com/FroW3on.gif)


---

### 使用設定一個輸入方框指令
並設定它顯示的位置

```javascript=
inputElement =createInput("Hello")
inputElement.position(50,50)
```
### 取得裡面的輸入文字
```javascript=
var txts = inputElement.value();
```

---


```javascript=
function setup() {
  createCanvas(windowWidth, windowHeight);
  //產生一文字框
  inputElement = createInput("") //新增一文字框
  inputElement.position(50,50) //把文字框放在(50,50)
  inputElement.style("font-size","50px") //文字大小
  inputElement.style("color","#90f1ef") //文字顏色
  inputElement.style("background-color","#0fa3b1") //文字框背景顏色
  inputElement.style("width","500px")
  inputElement.style("border","8px solid #90f1ef") //框線大小、實心、顏色
  //滑桿設定
  sliderElement = createSlider(10,50,20,0.1) //最小值10，最大值50，起始值20，每滑一步0.1
  



```

---
## 滑桿元件

![](https://i.imgur.com/QOpXlUa.gif)


---
### 設定一個滑桿
```javascript=
sliderElement= createSlider(10,50,20,0.01)//初始值，最大值，預設值，間距
```
### 取一個值
```javascript=
textSize(sliderElement.value())
```

---


```javascript=
function setup() {
  createCanvas(windowWidth, windowHeight);
  //產生一文字框
  inputElement = createInput("") //新增一文字框
  inputElement.position(50,50) //把文字框放在(50,50)
  inputElement.style("font-size","50px") //文字大小
  inputElement.style("color","#90f1ef") //文字顏色
  inputElement.style("background-color","#0fa3b1") //文字框背景顏色
  inputElement.style("width","500px")
  inputElement.style("border","8px solid #90f1ef") //框線大小、實心、顏色
  //滑桿設定
  sliderElement = createSlider(10,50,20,0.1) //最小值10，最大值50，起始值20，每滑一步0.1
  sliderElement.position(600,50) //把滑桿放到座標(600,50)
  //按鈕
  btnElement = createButton("open")
  btnElement.position(800,50)
  btnElement.style("font-size","50px")
  btnElement.style("border","10px solid #ffd6e0")
  btnElement.style("border-color","green")
  btnElement.mousePressed(goCrazy)

function draw() {
  background(220);
  txts = inputElement.value()
  //顯示的文字

  fill(colorPickerElement.value())
  txt_width = sliderElement.value()
  textSize(txt_width)
  //文字的寬度+10為間距
  textLength = textWidth(txts)+50
  for(y=210;y<height;y=y+txt_width+20){
    for(x=0;x<width;x=x+textLength){
      text(txts,x+random(-randomValue,randomValue),y+(-randomValue,randomValue)) //把文字放在(x,y)
    }
  }
}



```




---
## 產生一個按鈕

![](https://i.imgur.com/cwHVl6l.gif)


---

### 設定一個按鈕
```javascript=
btnElement =createButton("瘋狂")
```
### 案下滑鼠執行的程式碼
```javascript=
btnElement.mousePressed(goCrazy)
```

## 函數內容的寫法
```javascript=
function goCrazy() {
 if(randomValue>0){
	 randomValue=0
 }
	else
	{
		randomValue=10
	}
}
```
---

```javascript=
function setup() {
  createCanvas(windowWidth, windowHeight);
  //產生一文字框
  inputElement = createInput("") //新增一文字框
  inputElement.position(50,50) //把文字框放在(50,50)
  inputElement.style("font-size","50px") //文字大小
  inputElement.style("color","#90f1ef") //文字顏色
  inputElement.style("background-color","#0fa3b1") //文字框背景顏色
  inputElement.style("width","500px")
  inputElement.style("border","8px solid #90f1ef") //框線大小、實心、顏色
  //滑桿設定
  sliderElement = createSlider(10,50,20,0.1) //最小值10，最大值50，起始值20，每滑一步0.1
  sliderElement.position(600,50) //把滑桿放到座標(600,50)
  //按鈕
  btnElement = createButton("open")
  btnElement.position(800,50)
  btnElement.style("font-size","50px")
  btnElement.style("border","10px solid #ffd6e0")
  btnElement.style("border-color","green")
  btnElement.mousePressed(goCrazy)

  

function draw() {
  background(220);
  txts = inputElement.value()
  //顯示的文字

  fill(colorPickerElement.value())
  txt_width = sliderElement.value()
  textSize(txt_width)
  //文字的寬度+10為間距
  textLength = textWidth(txts)+50
  for(y=210;y<height;y=y+txt_width+20){
    for(x=0;x<width;x=x+textLength){
      text(txts,x+random(-randomValue,randomValue),y+(-randomValue,randomValue)) //把文字放在(x,y)
    }
  }
}




```

---
## 產生一個顏色選擇器
![](https://i.imgur.com/zjfpMOg.gif)


---
### 設定一個顏色選擇器
```javascript=
colorPicker = createColorPicker('#ed225d');//括號內的值，為預設值
```
### 取得顏色值
```javascript=
fill(colorPicker.value())
```
---

```javascript=
function setup() {
  createCanvas(windowWidth, windowHeight);
  //產生一文字框
  inputElement = createInput("") //新增一文字框
  inputElement.position(50,50) //把文字框放在(50,50)
  inputElement.style("font-size","50px") //文字大小
  inputElement.style("color","#90f1ef") //文字顏色
  inputElement.style("background-color","#0fa3b1") //文字框背景顏色
  inputElement.style("width","500px")
  inputElement.style("border","8px solid #90f1ef") //框線大小、實心、顏色
  //滑桿設定
  sliderElement = createSlider(10,50,20,0.1) //最小值10，最大值50，起始值20，每滑一步0.1
  sliderElement.position(600,50) //把滑桿放到座標(600,50)
  //按鈕
  btnElement = createButton("open")
  btnElement.position(800,50)
  btnElement.style("font-size","50px")
  btnElement.style("border","10px solid #ffd6e0")
  btnElement.style("border-color","green")
  btnElement.mousePressed(goCrazy)

  //顏色選擇器
  colorPickerElement = createColorPicker('#5fa8d3')
  colorPickerElement.position(1000,50)
}
var randomValue=0
var stop = true  //true時，停止，false代表目前抖動
function goCrazy(){
  if(stop){
  randomValue = 10
  btnElement.html( "stop")
  stop = false
  }else
  {
    randomValue = 10
    btnElement.html( "stop")
    stop = true
  }
}

function draw() {
  background(220);
  txts = inputElement.value()
  //顯示的文字

  fill(colorPickerElement.value())
  txt_width = sliderElement.value()
  textSize(txt_width)
  //文字的寬度+10為間距
  textLength = textWidth(txts)+50
  for(y=210;y<height;y=y+txt_width+20){
    for(x=0;x<width;x=x+textLength){
      text(txts,x+random(-randomValue,randomValue),y+(-randomValue,randomValue)) //把文字放在(x,y)
    }
  }
}







```

---

## 產生一個旋鈕

![](https://i.imgur.com/6odALq9.gif)


---

### 產生一個旋鈕
```javascript=
radioElement=createRadio()
radioElement.option("一般")
radioElement.option("旋轉(rotate)")
radioElement.option("大小(scale)")
radioElement.style("background-color",'white')//設定為CSS格式
```




### 取得值
```javascript=
mode = radioElement.value()
```


---
![](https://i.imgur.com/cQPlNqJ.gif)

```javascript=



```
---
![](https://i.imgur.com/0Gv7CnE.png)

---

![](https://i.imgur.com/xbhTKK9.gif)


---
![](https://i.imgur.com/fStzTMi.gif)


```javascript=
var txts = inputElement.value();
	if(txts=="pizza"){
		txts="🍕"
	}
```

---
## 使用CSS格式設定

![](https://i.imgur.com/LENMnR5.png)

```javascript=
	btnElement.style("border-color",'green')
	btnElement.style("border-width",'10px')
	btnElement.style("color",'green')
	btnElement.style("font-size",'20px')
```


---
粒子系統




---

![](https://i.imgur.com/15uNbxu.gif)

```javascript=
function userInput(){
	
	txts.push({
		x: width/2,
		y: 50,
		text: this.value()
	})
	// this.value('')
	// print(txts)
}
```
---


```javascript=



```



---

![](https://i.imgur.com/5sCiosS.gif)

```javascript=



```

---
## 設定往x與y的速度值

![](https://i.imgur.com/xRoAUIx.gif)

```javascript=



```


---
```javascript=



```

---
## 碰到底回彈

![](https://i.imgur.com/WGZCbHh.gif)

```javascript=



```
---
加入一個slider



![](https://i.imgur.com/CPh2wgv.gif)

```javascript=




```

### 目標
* 瞭解如何使用網頁元素與使用者互動
* 能夠取得文字、選項跟輸入的資料
* 瞭解如何擺放跟佈局網頁元素
* 能夠綁定網頁元素事件

---

## 課程重點
#### DOM（Document Object Model, 文件物件模型）超快速介紹


---

##### DOM 是什麼？
DOM 是一個樹狀的文件結構，藉由一層一層包覆的結構把網頁的內容架構起來。如果你在 Chrome 瀏覽器中點擊右鍵，選擇檢查的話，就會靠看到很多個用 <>...</> 包覆起來的資料，他們分別都是一個 DOM 元素，也是網頁的組成基礎喔 🐜。!


---


![](https://i.imgur.com/K8GufzU.png)


---

##### DOM 可以幹嘛？
* 除了最基礎的呈現資訊外， HTML 內建的 DOM 元件也包含了許多我們會與使用者互動的元素，如輸入框、選單、表單等，此外如果是網頁工程師，也很常會對 DOM 元素進行更改，以達到資訊更新、動畫呈現的目的。


---

##### p5 的 DOM 元件
* 像是文字輸入框、滑桿、下拉選單、顏色選取器之類的元件，都是 html（網頁的架構語言）內建的元素，p5 進一步幫我們把這些元件包裝好，讓我們可以快速的使用他們來跟使用者互動。


---

* 如何使用 p5 的 DOM 元件？
    * 創建一個新的 dom 元件，並綁訂在一個變數上，方便之後的操作：inputElement )
    * 設定元件的位置：inputElement.position(50,50)
    * 取得元件的內容/數值：let txt = inputElement.value()
    * 設定樣式：inputElement.style('width','80px')
    * 綁定事件（像是滑鼠點擊、輸入之類的事件，例如：
        * buttonElement.mousePressed(要執行的函數名稱)
        * inputElement.input(要執行的函數名稱)
        * selectElement.changed(要執行的函數名稱)


---

#### CSS 超級入門
* 什麼是 CSS?
    * 是一種設定網頁樣式的網頁樣式語言，用來設定網頁上的內容要怎麼呈現。像是文字的字形、大小、粗細、圖片的大小與位置，以及 CSS 動畫等。
    * 一般網頁的設定方式：直接針對 DOM 元件來設定

```css=
    // <p></p> p 元件是網頁中常用的段落元件
    // 如果我們對內建的 p 樣式不滿意
    // 我們可以透過下面的 css 來修改他：
    p { //最前面是要修改的項目，刮號內是要設定的細節
        color: 'gray'; //設定顏色
        font-size: 24px; //設定大小
        font-weight: bold; //設定粗細
    }
    
```




* 參考：
    * MDN 的 CSS 基礎
    * The CSS Zen Garden：有許多只透過修改 CSS 的樣式就讓網站有完全不同的風格的範例。
* 直接設定 p5 DOM 元件的 CSS 樣式
    * 使用 element.style(樣式項目, 數值)
    * 常用的修改項目
        * font-size
        * border-color
        * border-width
        * background-color
        * color



---

#### 範例練習


---

##### [DOM 操作練習](https://www.openprocessing.org/sketch/901354)


![](https://i.imgur.com/QZbQxPQ.gif)


---


##### [彈彈文字與圖片變化](https://www.openprocessing.org/sketch/901354)


![](https://i.imgur.com/7n7HeHS.gif)


---



### 內容回顧


---

#### 小技巧與心法
結合 input 作為 fill() 裡面的參數，動態改變顏色樣式


```javascript=
let clr = input()
fill(clr)
```


---


* 設定 0-1 之間來回的數值：使用 sin：sin((frameCount/20 + o/10)+1)/2
* 彈跳的重力感覺：在每一次彈跳更新的時候的時候設定 vx *= 0.999
* 從字串設定一個陣列的色票："ff0000-ff8200-ffc100-ffeaae".split("-").map(tx=>"#"+tx)
* mac 表情符號快捷鍵：Control–Command–空白鍵 😁
* windows 採用windows符號加上小數點即可產生😍


---


#### p5 語法們
* text：在畫面上創造文字物件。
* textWidth：取得文字在畫面上的寬度
* DOM 元件們
* createInput()
    * 清空 input: this.value('')


---

* createSlider()
* createButton()
* createColorPicker()
* createRadio()
* createSelect()
    * element.option()


---

* createImg()
    * element.attribute(“src”, “fish.png”)
* 通用的屬性與事件綁定
    * element.value()
    * element.size()
    * element.style()
    * element.attr()
    * element.input(函式名稱)
    * element.change(函式名稱)



---

### 課後問題


---

#### 補充
12:30左右 加上() 代表執行 function MDN css 44:00 this 1:01 右鍵->檢查水母



---

#### 案例參考


---

[https://paperplanes.world/](https://paperplanes.world/)
![](https://i.imgur.com/12FICQn.png)



---


[https://experiments.withgoogle.com/collection/chrome](https://experiments.withgoogle.com/collection/chrome)

![](https://i.imgur.com/LExJjIe.png)

---

[https://musiclab.chromeexperiments.com/Song-Maker/](https://musiclab.chromeexperiments.com/Song-Maker/)
![](https://i.imgur.com/QwLY6wm.jpg)


---

[https://forest-mt.seekrtech.com/](https://forest-mt.seekrtech.com/)
![](https://i.imgur.com/wgAEw4O.jpg)


---

[https://jayweeks.com/medusae/](https://jayweeks.com/medusae/)

![](https://i.imgur.com/lYwAT41.jpg)


---


[http://wiki.polyfra.me/#](http://wiki.polyfra.me/#)
