23_10_06 JS공부정리

https://nomadcoders.co/javascript-for-beginners-2/lectures/3743

All Courses – 노마드 코더 Nomad Coders

[노마드코더] 2.2강~

 

<배운것>

-html type='range'속성을 이용해서 게이지바를 만들 수 있음.

-최솟값, 최댓값, 기본값,칸당 변화크기를 다음과같이 설정할 수 있음.

    <input id="line-width" type="range" min="1" max="10" value="5" step="0.05">

-이 range input의 변화이벤트는 "change"임

linewidth.addEventListener("change", onLineWidthChange)

-range값의 변화값은 event객체 안의 target.value에서 알 수 있음

function onColorChange(event){

    ctx.strokeStyle = event.target.value;

}

 

 

-html type='color'속성을 이용해서 색을 선택하는 기능을 넣을 수 있음

    <input type="color" id="color">

-마찬가지로 color input의 변화이벤트는 "change"임

color.addEventListener("change", onColorChange)

-이것도 event객체에서 target.value값으로 선택할 수 있음(rgb를 16진 트리플렛으로 반환함 예:#cd84f1)

function onColorChange(event){

    ctx.strokeStyle = event.target.value;

}

 

-data-(이름) = (값) 을 붙여서 전달하고자하는 데이터를 담는 속성이다.

js에서 어떤 태그를 선택할때 이 속성을 이용해 데이터를 전달하면 유용하다.

-이름부분은 event.target.dataset객체에서 키값이 되고, 값부분은 값으로 전달됨.

<div class="color-option" style="background-color: #cd84f1;" data-color="#cd84f1"></div>

이런식으로 event.target안에 dataset의 형태로 데이터가 전달됨

 

-getElementsByClassName은 유사배열을 반환하므로, foreach를 사용하기위해서는 Array.from()을 씌워서 배열으로 바꾸어주어야함.

const colorOptions = Array.from(document.getElementsByClassName("color-option")); //Array.from()으로 감싸기

colorOptions.forEach(element => {

    element.addEventListener("click", onColorChoose)    //forEach를 이용해서 배열각각의 요소에 이벤트리스너 달기

});