---
# 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=
var inputElement

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	inputElement=createInput("Hello")
	inputElement.position(50,10)
    
function draw() {
	background(0)
	var txts=inputElement.value();
    fill(255)
	textSize(50)
	var textLength=textWidth(txts)+100
	for(var x=0 ;x<width;x=x+textLength){
		text(txts,x,height/2)
	}
}
```

---
## 滑桿元件

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


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

---


```javascript=
var inputElement

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	inputElement=createInput("Hello")
	inputElement.position(50,10)
	sliderElement= createSlider(10,50,20,0.01)//初始值，最大值，預設值，間距
    sliderElement.position(350,10)
}
function draw() {
	background(0)
	var txts=inputElement.value();
	fill(255)
	textSize(50)
	textStyle(BOLD)
	var textLength=textWidth(txts)+100
	var textHeight=sliderElement.value()+30
	for(var x=0 ;x<width;x=x+textLength){
		text(txts,x,height/2)
	}
}
```




---
## 產生一個按鈕

![](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=
var inputElement,sliderElement,btnElement
var randomValue=0

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	inputElement =createInput("Hello") 
	inputElement.position(50,50)
	sliderElement=createSlider(30,100,50,1)
	sliderElement.position(300,50)
	btnElement=createButton("CRAZY")
	btnElement.position(450,50)
	btnElement.mousePressed(goCrazy)
}

function goCrazy() {
 if(randomValue>0){
	 randomValue=0
 }
	else
	{
		randomValue=10
	}
}

function draw() {
	background(0)
	var txts =inputElement.value()
	fill(255)
	textSize(sliderElement.value())
	textStyle(BOLD)
	var textL=textWidth(txts)+30
	var textH=sliderElement.value()+30
	for(var i=0;i<height;i+=textL){
		for(var j=0;j<width;j+=textH){
		text(txts,i+random(-randomValue,randomValue),j+random(-randomValue,randomValue))
		}
	}
}
```

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


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

```javascript=
var inputElement,sliderElement,btnElement,colorPicker
var randomValue=0 //預設值為0(文字靜止)，第一次按下按鈕，值就會變成10(文字抖動)，第二次按，又回到0(文字靜止)


function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	inputElement =createInput("Hello")
	inputElement.position(50,50)
	sliderElement= createSlider(30,100,50,1)//最小值，最大值，預設值，間距
	sliderElement.position(300,50)
	btnElement =createButton("瘋狂")
	btnElement.position(450,50)
	btnElement.mousePressed(goCrazy)
	
	colorPicker = createColorPicker('#ed225d');//括號內的值，為預設值
	colorPicker.position(550,50)
	
}

function goCrazy() {
 if(randomValue>0){
	 randomValue=0  //randomValue>0條件成立，執行此行
 }
	else
	{
		randomValue=10  //randomValue>0條件不成立，執行此行
	}
}
function draw() {
	background(0);
	var txts = inputElement.value();
	textSize(sliderElement.value())
	textStyle(BOLD)
	var textLength=textWidth(txts)+80
	var textHeight = sliderElement.value()+30
	for(var y=0;y<height;y=y+textHeight){
		push()
		if(int(y/textHeight)%2==0){     //int(y/textHeight)算出第幾行，%2除2求餘數
			fill(colorPicker.value())  //偶數行
			translate(-50,0)
		}
		else
		{  
			fill(255)  //奇數行
		}
			for(var x=0;x<width;x=x+textLength){
				text(txts,x+random(-randomValue,randomValue),y+random(-randomValue,randomValue))   //顯示文字在(width/2,height/2)座標上
			}
		pop()
	}
}
```

---

## 產生一個旋鈕

![](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=
var inputElement
var txts=[]
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(0);
	inputElement =createInput("") 
	inputElement.position(50,50)
	inputElement.input(userInput)
}

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

function draw() {
	background(0);
	fill(255)
	textSize(50)
	for(var i =0;i<txts.length;i++){
		let txt =txts[i]	
}
```

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

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

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

function draw() {
	background(0);
	fill(255)
	textSize(50)
	for(var i =0;i<txts.length;i++){
		let txt =txts[i]	
		text(txt.text,txt.x,txt.y)
		txt.x=txt.x+txt.vx
		txt.y=txt.y+txt.vy
		txt.vy=txt.vy+0.1
	}
}
```


---
```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/#)


10 網頁元素(DO ... 數值和其他輸入.md
選擇開啟工具

目前顯示的是「10 網頁元素(DOM)_學生版 - 取得文字、數值和其他輸入.md」。