Day 18 - 网页元素DOM-取得文字，数值和其他输入 - input,colorpicker,sliderbar

DOM（Document Object Model, 文件物件模型）超快速介绍

DOM 是什麽？
- DOM 是一个树状的文件结构，藉由一层一层包覆的结构把网页的内容架构起来。如果你在 Chrome 浏览器中点击右键，选择检查的话，就会靠看到很多个用 <>...</> 包覆起来的资料，他们分别都是一个 DOM 元素，也是网页的组成基础喔 ?。

DOM 可以干嘛？

除了最基础的呈现资讯外， HTML 内建的 DOM 元件也包含了许多我们会与使用者互动的元素，如输入框、选单、表单等，此外如果是网页工程师，也很常会对 DOM 元素进行更改，以达到资讯更新、动画呈现的目的。

CSS 超级入门

什麽是 CSS?
- 是一种设定网页样式的网页样式语言，用来设定网页上的内容要怎麽呈现。像是文字的字形、大小、粗细、图片的大小与位置，以及 CSS 动画等。
- 一般网页的设定方式：直接针对 DOM 元件来设定
```
// <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

制作一个文字编辑

let button;
let inputElement;
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	inputElement = createInput('Hello'); //制作一个input
	inputElement.position(0, 0); // 设定座标
}
// function myInputEvent() {
//   console.log('you are typing: ', this.value());
// }
function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	background(0);
	let txt = inputElement.value(); //抓取 input value
	fill(txt); //填色
	textSize(50); //设定大小
	// text(txt,width/2,height/2); //设定位置
	let textLength = textWidth(txt) + 10;
	for(var o=0;o<height;o+=100){
		for(var i=0;i<width;i+= textLength){
			text(txt,i,o)// render text
		};
	}
}

增加 sliderbar

let button;
let inputElement;
let sliderElement; //制作滑感
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
	inputElement = createInput('Hello'); //制作一个input
	inputElement.position(0, 0); // 设定座标
	sliderElement = createSlider(10,50,20,0.01);
	sliderElement.position(0, 120);
}
// function myInputEvent() {
//   console.log('you are typing: ', this.value());
// }
function draw() {
	// ellipse(mouseX, mouseY, 20, 20);
	background(0);
	let txt = inputElement.value(); //抓取 input value
	let sliderValue = sliderElement.value();

	fill(txt); //填色
	textSize(sliderValue); //设定大小
	// text(txt,width/2,height/2); //设定位置
	let textLength = textWidth(txt) + 10;
	for(var o=0;o<height;o+=100){
		for(var i=0;i<width;i+= textLength){
			text(txt,i,o)// render text
		};
	}
}

  我们接下来再做一个按钮去做一下 互动弹跳 去做按钮的设定

  ```jsx
  let button;
  let inputElement;
  let sliderElement; //制作滑感
  let buttonElement;
  let randomValue  =0 ;
  function setup() {
  	createCanvas(windowWidth, windowHeight);
  	background(100);
  	inputElement = createInput('Hello'); //制作一个input
  	inputElement.position(0, 0); // 设定座标
  	sliderElement = createSlider(10,50,20,0.01);
  	sliderElement.position(0, 120);
  	buttonElement = createButton('go crazy');
  	buttonElement.position(0,150);
  	buttonElement.mousePressed(goCrazy); // 增加按钮事件
  }
  // function myInputEvent() {
  //   console.log('you are typing: ', this.value());
  // }
  function goCrazy(){
  	// print('Crazy')
  	if(randomValue > 20){
  		randomValue = 0;
  	}else{
  		randomValue +=5;
  	}

  }
  function draw() {
  	// ellipse(mouseX, mouseY, 20, 20);
  	background(0);
  	let txt = inputElement.value(); //抓取 input value
  	let sliderValue = sliderElement.value();

  	fill(txt); //填色
  	textSize(sliderValue); //设定大小
  	// text(txt,width/2,height/2); //设定位置
  	let textLength = textWidth(txt) + 10;
  	for(var o=0;o<height;o+=100){
  		for(var i=0;i<width;i+=textLength){
  			text(txt,i+random(randomValue,-randomValue),o+random(randomValue,-randomValue))// render text
  		};
  	}
  }
  ```

  ![https://ithelp.ithome.com.tw/upload/images/20211003/20103744VJ8sCmqjRY.png](https://ithelp.ithome.com.tw/upload/images/20211003/20103744VJ8sCmqjRY.png)

  增加我们自己的颜色选取

  ```jsx
  let button;
  let inputElement;
  let sliderElement; //制作滑感
  let buttonElement;
  let randomValue  =0 ;
  let colorPickerElement; // 增加颜色选曲
  function setup() {
  	createCanvas(windowWidth, windowHeight);
  	background(100);
  	inputElement = createInput('Hello'); //制作一个input
  	inputElement.position(0, 0); // 设定座标
  	sliderElement = createSlider(10,50,20,0.01);
  	sliderElement.position(0, 120);
  	buttonElement = createButton('go crazy');
  	buttonElement.position(0,150);
  	buttonElement.mousePressed(goCrazy); // 增加按钮事件
  	colorPickerElement = createColorPicker('#ed225d'); //放入预设颜色
  	colorPickerElement.position(0,200);  // picker定位
  }
  // function myInputEvent() {
  //   console.log('you are typing: ', this.value());
  // }
  function goCrazy(){
  	// print('Crazy')
  	if(randomValue > 20){
  		randomValue = 0;
  	}else{
  		randomValue +=5;
  	}

  }
  function draw() {
  	// ellipse(mouseX, mouseY, 20, 20);
  	background(0);
  	let txt = inputElement.value(); //抓取 input value
  	let sliderValue = sliderElement.value();
  	let selectColor = colorPickerElement.value(); //拿取 选到的颜色

  	fill(txt); //填色
  	textSize(sliderValue); //设定大小
  	let lineCount = 0;
  	// text(txt,width/2,height/2); //设定位置
  	let textLength = textWidth(txt) + 10;
  	for(var o=0;o<height;o+=100){
  		lineCount++;
  		if(lineCount %2 ==0){

  			fill(selectColor);
  		}else{
  			fill('white');
  		}
  		for(var i=0;i<width;i+=textLength){
  			text(txt,i+random(randomValue,-randomValue),o+random(randomValue,-randomValue))// render text
  		};
  	}
  }
  ```

  就可以制作出你想要的 选取文字颜色的做法

  ![https://ithelp.ithome.com.tw/upload/images/20211003/201037449eio55co7g.png](https://ithelp.ithome.com.tw/upload/images/20211003/201037449eio55co7g.png)

  ## 范例

  [https://openprocessing.org/sketch/1272822](https://openprocessing.org/sketch/1272822)

  ## 参考文章

  [https://course.creativecoding.in/note/chap/10](https://course.creativecoding.in/note/chap/10)

<<: Day18 - (补上昨天程序码) + BBT介绍

>>: Day 18 利用 Kubernetes 建立 Prometheus Service