계산기 순서도 그리기
계산기를 켰을 때 초기작업
시작 → 숫자1을 저장할 변수를 선언한다 → 연산자를 저장할 변수를 만든다 → 숫자2를 저장할 변수를 선언한다
→ 계산 결과를 저장할 변수를 선언한다 → 대기
숫자 버튼 클릭 → 숫자를 변수에 저장한다 → 대기
└연산자 변수에 값이 비어있는가? ---예→입력한 숫자가 첫 번째가 된다(숫자1변수에 입력한 숫자를 대입한다)
└아니오→입력한 숫자가 두 번째가 된다(숫자2변수에 입력한 숫자를 대입한다)
→ 숫자2 변수에 값이 존재한다는 것은 숫자1 변수와 연산자 변수에 값이 존재한다는 것을 의미한다
연산자 버튼 클릭
└숫자1 변수에 값이 존재하는가? ---예→ 연산자를 변수에 저장한다→대기
└ 기존의 number1과 선택한 연산자를 화면에 출력한다
└아니오→숫자를 먼저 입력하라고 알림한다
=버튼 클릭
└숫자2 변수에 값이 존재하는가?---예→숫자1과 숫자2를 연산자를 적용해 계산한다→계산한 값을 변수에 대입한다→화면에 출력한다→ 끝
└숫자2 변수에 값이 존재하지 않는다면 알림한다
***사용자의 입력 직전에는 대기가 존재한다
-------------------------------------------------------------------------------------------------------
box-sizing: border-box; border를 기준으로 가로 길이(width)와 세로 길이(height)를 계산한다.
border를 기준으로 하면 contents(내용물) + padding + border 를 포함한 값을 기준으로 하겠다는 것
input태그의 readonly속성은 사용자로부터 직접적인 입력을 막는다
-------------------------------------------------------------------------------------------------------
오늘날의 웹 콘텐츠 대부분은(→ 인터넷에 있는 다양한 정보나 자료들은) 사용자가 지목하는 장치가 마우스일 것이라 가정한다.
→ 사용자가 화면에 보이는 정보 및 자료들을 지목할 때 사용하는 장치가 마우스일 것이라 가정하고,마우스로 클릭했을 때 반응하도록 설계했을 것이다.그러나 마우스 이외에도 펜/스타일러스와 터치 화면과 같은 많은 장치들이 다른 유형으로지목하는 입력장치를 지원하기 때문에
기존의 지목하는 장치 이벤트 모델에 대한 확장이 필요하다.
Pointer events가 그 필요를 해결한다. Pointer events는 지목하는 장치(pointing device)에 대해 발생하는 DOM events다
→ 포인터 이벤트는 마우스, 터치스크린, 펜 등 다양한 유형의 pointing devices 에서 발생하는 이벤트를 처리하는 DOM 이벤트다.포인터 이벤트는 마우스, 펜/스타일러스 또는 터치와 같은 포인팅 입력 장치를 처리할 수 있는 단일 DOM 이벤트 모델을 만들기 위해 설계되었다.
*** PointerEvent 인터페이스는 포인터에 의해 발생한 DOM(Document Object Model) 이벤트의 상태,
이벤트를 유발한 장치의 유형(ex. ponterType: mouse), 접촉점의 위치와 크기, 접촉면에 가해진 압력 등을 나타낸다.
- 포인터: 화면과 같은 디스플레이 장치에서 특정 위치나 지점을 가리킬 수 있는 입력 장치를 가리킨다.
이 입력 장치들은 화면 상에서 사용자가 원하는 위치를 지정하거나 선택할 수 있는 도구를 제공한다.
포인터는 마우스, 펜, 터치스크린의 접촉점 등을 모두 포함한다.
- PointerEvent.pointerType: 이벤트를 유발한 장치 유형(마우스, 펜, 터치 등)을 나타낸다.
PointerEvent 인터페이스의 읽기 전용 속성인 pointerType은 특정 포인터 이벤트를 유발한 장치 유형을 나타낸다.
→ 포인터 이벤트가 발생했는데 해당 이벤트를 발생시킨 장치가 무엇인지를 알려준다
poninterType의 속성값으로는 "mouse", "pen", "touch" 가 있다. 데이터 타입은 문자열이다.
ex.
1) "mouse": 마우스 장치에 의해 이벤트가 생성된다.
2) "pen": 펜 또는 스타일러스 장치에 의해 이벤트가 생성된다.
3) "touch": 손가락과 같은 것으로 터치에 의해서 이벤트가 생성된다.
- 브라우저가 포인터 장치 유형을 인식할 수 없을 때 (pointerType의) 값은 빈문자열("")일 수 있다.
- 브라우저가 위에 나열된 것 이외의 다른 포인터 장치 유형을 지원하려면, 그 값에는 벤더 접두어가 붙어야 하며,
이는 서로 다른 장치 유형의 이름이 충돌하는 것을 피하기 위해서다.
if the browser pointer device types other than those listed above, the value should be vendor-prefixed
to avoid conflicting names for different types of devices.
***벤더(vendor)는 소프트웨어나 하드웨어를 제공하는 회사나 제작자를 의미한다.
웹 브라우저별 벤더 접두어
-webkit- : Chrome/Safari
-ms-: Edge
-moz-: Firefox
만약 브라우저가 게임 패드와 같은 포인터 장치 유형을 지원하고,
이 장치 유형에 대해 특정 기능을 구현했다고 가정하면 이 기능을 사용할 때
-webkit-, -ms-, -moz- 와 같은 벤더 접두어를 붙여야 한다.
예를 들어 게임 패드로 제어하는 포인터 장치 기능이 pointer-events라고 할 때,
이를 각 브라우저에서 지원하게 하기 위해서
Chrome/Safari: -webkit-pointer-events
Firefox: -moz-pointer-events
Edge: -ms-pointer-events
이런 식으로 접두어를 사용해서 동일한 이름의 기능이 서로 다른 브라우저에서 충돌하지 않게 할 수 있다.
해당 장치에 대해 브라우저간 이름 충돌을 피하기 위해서
- MouseEvent 인터페이스는 사용자가 마우스와 같은 포인팅 장치로 상호작용할 때 발생하는 이벤트를 나타낸다.
이 인터페이스(MouseEvent)를 사용하는 흔한 이벤트로는 click, mouseup, mousedown, dbclick 이 있다.
MouseEvent는 UIEvent로부터 파생됐고, UIEvent는 Event로부터 파생됐다.
Event ◁--- UIEvent ◁--- MouseEvent
***dbclick event
dbclick 이벤트는 포인팅 장치 버튼이(ex. 마우스의 기본 버튼) 더블 클릭될 때 발생한다.
매우 짧은 시간 내에 동일한 요소에서 두 번 연속으로 클릭될 때 발생하는 이벤트다.
The dbclick event fires when a pointing device button (such as a mouse's primary button) is double-clicked;
that is, when it's rapidly clicked twice on a single element within a very short span of time.
-------------------------------------------------------------------------------------------------------------------------
코드
html---------------------------------------
<button id="num-0"> 0</button>
script----------------------------------------
// html문서에서 id의 값이 num-0인 요소를 얻고,
// 해당 요소에 리스너 함수를 더한다 → 해당 요소에 클릭이 발생할 때마다 리스너 함수를 실행한다.
// addEventListener() 메서드의 두 번째 인자의 자리는 리스너 함수가 자리하기 때문에 리스너 함수라고도 하고,
// 해당 리스너 함수 자리에 화살표 함수를 작성했기 때문에 함수의 종류인 화살표 함수라고도 불릴 수 있다.
//
document.querySelector('#num-0').addEventListener('click', (event) => {
// event, event.target, event.target.value
console.log(event); // event를 파라미터로 받고, 받은 event를 콘솔에 찍으면 PointerEvent객체가 찍힌다.
console.log(event.target); // PointerEvent가 갖는 target을 찍으면 클릭이 발생한 요소가 찍힌다.
// PointerEvent가 갖는 target(요소: 여기서는 버튼요소)의 value에 접근하면 버튼의 내용물인 0이 찍힐 줄 알았는데 빈 값이 찍힘.
// console.log(event.target.value); (x)
console.log(event.target.textContent);
console.log(event.target.innerText);
});
버튼요소에서 버튼이 가지는 값을 어떻게 접근해야 할까?
event.target(이벤트가 발생한 요소)가 가지는 속성에 value는 없고,
innerHTML과 innerText가 있었는데 이 두 속성이 갖는 값이 내가 원하는 값을 나타내고 있었다.
innerHTML과 innerText의 차이----------------------------------------------------------------------------
innerText는 HTMLElement(요소)가 갖는 속성이다.
HTMLElement 인터페이스의 innerText는 html요소의 렌더링된 텍스트 콘텐츠를 나타내는 속성이다.
여기서 렌더링된 이라는 말은 실제 웹 페이지에서 화면에 표시되는 텍스트를 의미한다.
innerText는 브라우저가 사용자에게 보여주는 텍스트를 의미한다.
innerText는 페이지에 실제로 표시되는 텍스트를 반환한다.
만약 css로 인해 숨겨진 텍스트는 innerText에 포함되지 않는다.
*** css에서 display:none으로 텍스트를 숨길수 있다.
innerText는 요소의 "보이는" 텍스트만 포함한다. 즉 CSS나 Javascript에 의해서 숨겨진 텍스트는 포함되지 않는다.
반면 innerHTML은 요소 내의 HTML 마크업을 포함한 모든 콘텐츠를 반환한다.
즉, HTML 태그 자체도 텍스트로 포함되며, 숨겨진 텍스트도 포함될 수 있다.
*** 버튼 요소가 갖는 콘텐츠(내용물)는 innerText 속성과 textContent 속성으로 접근이 가능하다.
그럼 HTMLElement.innerText 와 Node.textContent의 차이는? ----------------------------------------------------------------------------
Node.textContent는 <script>와 <style> 요소를 포함한 모든 요소의 콘텐츠를 가져온다.HTMLElement.innerText는 사람이 읽을 수 있는 요소만 처리한다.
event.target.id 콘솔에 찍으면 click 이벤트가 발생한 요소에 접근해서 해당 요소의 id의 값을 접근할 수 있다.
----------------------------------------------------------------------------
operator변수에 값이 존재한다면 num2변수에 파라미터로 전달받은 변수(number)가 갖는 값을 대입하고,operator변수에 값이 존재하지 않는다면 num1변수에 파라미터로 전달받은 변수(number)가 갖는 값을 대입한다.
if(operator) {
num2 += number;
} else {
num1 += number;
}
위 식을 삼항 연산자로 간단히 나타내려면 아래와 같이 나타낼 수 있다.
operator ? num2 += number : num1 += number;
----------------------------------------------------------------------------
고차함수(higher-order function)
고차함수라고 불릴 수 있는 조건에는 하나 이상의 함수를 인자로 받거나 함수를 결과로 반환하는 것이다.
함수가 함수를 인자로 받거나 함수가 그 결과로 함수를 반환하는 경우에 해당 함수를 고차함수라고 한다.
Higher order functions are functions that take one or more functions as arguments,
or return a function as their result.
map과 reduce와 같은 다양한 다른 유형의 고차함수가 있다.Callback Function(콜백 함수): 고차함수에서 파라미터(매개변수)로써 전달된다.
// 콜백함수: 고차함수에서 파라미터로써 전달된다.
// callbackFunction 함수 선언 및 구현
function callbackFunction() {
console.log('I am a callback function');
}
// 고차함수(higher order function)
// higherOrderFunction 함수 선언 및 구현
function higherOrderFunction(func) {
console.log('I am higher order function');
func();
}
higherOrderFunction(callbackFunction); // higherOrderFunction 호출
higherOrderFunction() 함수에 파라미터로 callback function를 전달하기 때문에 higherOrderFunction() 함수는 고차함수다.
----------------------------------------------------
코드 리뷰
html문서에서 id가 "num-0"인 요소를 얻고, 특정 이벤트가 발생하면 작동할 함수를 작성
document.querySelector('#num-0').addEventListener('click', 클릭이 발생할 때마다 작동할 함수);
이렇게 작성하면 작동이 안된다
└onClickNumber(event.target.innerText)
└onClickNumber
→ 클릭할 때마다 onClickNumber 함수가 작동하도록 설계, onClickNumber 함수는 이벤트가 발생 관련 정보를 갖고 있는PointerEvent객체를 받아 PointerEvent 속성 target에 접근해 요소를 얻고, 해당 요소가 갖는 콘텐츠(내용물)의 값을 얻어
연산자 변수에 값이 존재한다면 number2에 해당 값을 더해서 대입하고(복합대입 연산자) 연산자 변수에 값이 존재하지 않는다면
해당 값을 number1 변수에 더해서 대입한다.
onClickNumber 라는 함수 표현식과 onClickNumber() 라는 함수 호출이 다른점
addEventListener() 메서드의 두 번째 매개변수로 전달하는 리스너 함수자리에
onClickNumber를 작성했을 때, onClickNumber()와 같은 함수 호출을 작성했을 때 차이
- 함수 호출 시점과 함수 참조 방식에서 차이가 있다.
onClickNumber()는 함수 호출을 나타낸다. addEventListener에 전달되기 전에 즉시 호출되어 버린다.onClickNumber() 함수가 호출되고 실행된 후 그 반환 값이 addEventListener의 두 번째 인수로 전달된다.반환 값을 정의하지 않은 함수는 기본적으로 undefined를 반환하고, 이벤트 핸들러가 작성되어야 하는 자리에반환 값인 undefined가 자리하면서, 유효한 함수가 아닌 undefined로 인해 아무런 일이 일어나지 않게 된다.
onClickNumber()가 click이라는 이벤트가 발생한 후에 호출되는 것이 아니라 즉시 호출되고,
반환 값으로 undefined가 리스너 함수 자리에 위치하면 id가 "num-0'인 요소를 클릭해도 유효하지 않은 undefined로
인해 아무 일도 일어나지 않는다. 그런데 함수 표현식을 사용하면 click 이벤트가 발생할 때 호출될 이벤트 핸들러로 등록된다.
addEventListener는 지정한 이벤트가 발생하면 등록된 함수를 실행한다.
*** 함수 표현식이란 함수를 정의하는 방식을 의미하는 것으로 함수 자체를 가리킨다.
onClickNumber는 변수나 상수에 할당된 함수로 보통 function 키워나 화살표 함수 () => {} 로 정의된다.
각 모든 요소를 얻어 addEventListener() 함수를 작성하고, click 이벤트가 발생할 때마다 onClickNumber 함수가 호출되도록
작성했다. 해당 요소에서 클릭 이벤트가 발생했을 때 onClickNumber가 호출되고, PointerEvent 인터페이스를 구현한 객체를 얻어
해당 객체에서 이벤트가 발생한 요소를 얻어(event.target) 해당 요소의 내용물을 const number 변수에 담고,
해당하는 값을 연산자 변수의 값 유무를 판단하여 연산자 변수에 값이 있다면(사용자가 연산자를 클릭했었다면)
number2 변수에 해당 값을 담고, 연산자 변수에 값이 없다면 해당 값을 number1에 담도록 설계하였다.
const onClickNumber = (event) => {
// 클릭 이벤트가 발생한 정보 관련하여 PointerEvent 인터페이스를 구현한 객체를 매개변수로 전달받고,
// 이벤트가 발생한 요소의 내용물을 얻어 number라는 상수에 대입하고, const number = event.target.innerText; // 연산자가 존재한다면 number2 변수에 number의 값을 대입하고, // 연산자가 존재하지 않는다면 number1 변수에 number1의 값을 대입한다. operator ? number2 += number : number1 += number;
// $result 변수가 가리키는 요소의 값에 number의 값을 더하여 대입한다.
$result.value += number;
// number1, number2, operator 변수를 반환한다.
return { number1, number2, operator, }
}
사용자가 연산자를 선택했을 때 만약 number1이 존재한다면 클릭한 연산자를 operator변수에 대입하고,
화면상에 기존에 선택했던 number1과 operator에 담긴 값을 함께 보여준다.
만약 연산자를 클릭했을 때 number1이 없다면 숫자를 먼저 선택하라고 알림한다.
```
input의 type이 number라면 어떻게 연산자를 출력할 것인가?
과정을 출력하지 않고 연산만 한 뒤에 값만 출력한다?
<input readonly type="number" id="result" />
<input readonly type="text" id="result" />
const $result = document.querySelector('#result');
if(number1) {
operator += event.target.textContent;
$result.value += operator;
} else {
alert('더할 숫자를 먼저 선택해주세요');
}
```
C(clear)버튼을 클릭했을 경우
<input readonly type="text" id="result" />
const $result = document.querySelector('#result');
const onClickClear = () => {
$result.value = '';
number1 = '';
operator] = '';
number2 = '';
}
$result.addEventListener('click', onClickClear);
----------------------------------------------------------------------------------------------------------------------------------
자바스크립트에서 함수가 함수를 리턴하는 함수는 고차함수다.
매개변수로 함수를 받거나 함수를 반환하거나 둘 중 하나의 조건에만 해당한다면 고차함수다.
두 가지의 조건을 모두 갖춘 고차함수도 존재할 수 있다(매개변수도 함수, 반환 값도 함수인 고차함수)
| 고차함수 경우의 수 | ||
| 조건 | 매개변수가 함수인 경우 | 반환값이 함수인 경우 |
| 1 | o | x |
| 2 | x | o |
| 3 | o | o |
고차함수 - 함수 자체를 반환하는[리턴하는] 함수
hello라는 함수를 선언(일반적인 함수 선언문)
hello라는 함수를 호출하면 world() 함수가 반환된다(호출이 아닌 world()함수 자체가 반환된다)
function hello() {
return function world() {
return 'Hello World';
}
}
hello함수를 호출하고(hello()) 그 반환 값을 상수 a에 대입한다.
상수 a에는 world() 함수 자체가 담긴다. 상수 a는 world() 함수를 참조한다.
const a = hello();(→ const a = world(); 와 같다)
(함수가 )함수를 반환하는 이유(return function() {})
*** addEventListener('이벤트 유형', 이벤트 리스너) → 이벤트 리스너 인자에는 함수 자체가 들어가야 한다.
만일 함수 인자 부분에 함수호출을 작성하게 되면 해당 함수를 호출함으로써 반환되는 값이(리턴값) 이벤트 리스너 자리에 위치하기 때문에 함수 실행이 되지 않는다. 예를 들어 각 버튼마다 다른 동작을 하도록 구현하려면 함수를 호출할 때 인자를 전달하면 된다.
함수명() 과 같이 함수호출을 이벤트 리스너에 등록하게 되면 이벤트 리스너에는 함수가 등록되는 것이 아니라 반환 값이 등록되는 것이기 때문에 함수 실행이 이루어지지 않는다. 그래서 반환 값을 함수로 전달하는 것이다. 호출한 함수에 아예 함수 자체를 반환하면
반환된 함수가 이벤트 리스너로 등록되게 된다.
```
const c = function(n) { ---> 화살표 함수로 표현한다면 (n) => { } 이렇게 작성할 수 있고,
return function() {
console.log(n);
}
}
화살표 함수로 표현하여 고차함수를 더 간결하게 표현할 수 있다.
- 매개변수가 하나일 경우 괄호를 생략할 수 있다.
- 화살표 함수는 중괄호랑 return이 붙어 있으면 생략이 가능하다.
const c = (n) => {
return () => { console.log(n); };
그래서 const c = n => () => { console.log(n); }; 이렇게 간결하게 적을 수 있다.
document.getElementById('c1').addEventListener('click', c(1));
```
-------------------------------------------------------------------------------------
*** 콜백함수란 함수의 인자로 전달되어 함수 안에서 실행되는 함수를 의미한다.
함수를 반환하는 함수를 이벤트 리스너로 등록하기
→ 이벤트 리스너(이벤트 처리기로 생각해도 될 듯)에는 함수 호출이 아닌 함수 자체를 등록해야 한다.
동일한 함수를 사용하되 각 요소마다 다른 값을 전달하여 해당 값으로 함수가 작동되어야 하는 경우 호출한 함수가
함수를 반환하게 한다(고차함수 사용)
*** 1급 객체 공부하기
동기적으로(순서대로 진행된다는 의미?) 실행되는 콜백함수의 예시
```
one함수 선언
function one(value) { console.log(value);}
two함수 선언
function two(callback) { const value = 'callback test'; callback(value);};
two함수 호출two(one);
```
two함수를 호출하면서 one함수를 매개변수로 전달two함수 호출되고, 상수 value에 'callback test'가 대입되고(초기화)매개변수로 전달받은 함수에 value를 전달한다.호출된 one함수가 전달받은 value값이 one함수의 내부 명령문 실행으로 value값이 콘솔에 찍힌다.결과는 callback test가 찍히고 undefined가 반환됨. 임의로 반환값을 작성하지 않은 함수들은 모두 return undefined; 다.
실행순서를 다시 정리하자면1. two(one); ----------------------- one함수를 two 함수에 매개변수로 전달하면서 two함수 호출여기서 one함수는 콜백함수가 된다. two함수의 인자로 전달되어 two함수의 내부에서 실행되는 함수니까2. two함수 호출, 상수 value에 'callback test' 대입함(변수 선언 및 초기화), value를 인자로 전달하면서 one함수 호출3. one 함수가 value가 가지는 값인 'callback test'를 인자로 전달받으면서 호출됨 ----- one('callback test');one 함수 내부에서 전달받은 인자를 콘솔에 찍는 명령어 동작함. 결과적으로 'callback test'가 출력된다.
setTimeout과 setInterval 메소드도 함수를 인자로(콜백함수) 전달받는 고차함수
addEventListener 메소드도 콜백함수가 필요하다. addEventListenr도 고차함수
addEventListener 메소드가 콜백함수를 사용할 때 필요한 개념: 클로저
*** 클로저(closure): 내부 함수에서 외부 함수의 환경에 작성된 변수 등에 접근할 수 있고, 변경할 수 있는 관계를 나타낸다.
```
function outter(value) {
// 인자로 전달된 value는 outter함수의 지역변수 역할을 한다.
return function() {
// outter 함수가 반환하는 함수가 외부 함수(outter) 환경의 지역변수인 value를 참조할 수 있다.
console.log(value);
}
}
const inner = outter('value');
inner();
```
outter() 함수는 매개변수를 전달받아 해당 매개변수가 반환 값에 사용되도록 선언
outter() 함수의 반환 값은 함수다. outter함수 내부의 함수가 외부의 함수인
outter함수의 지역변수에 접근하여 해당 매개변수를 사용하도록 설계되어 있다.
outter() 함수를 호출하면서 'value'를 인자로 전달하고 있다.
outter() 함수 내부에서 'value'가 반환 값(함수)에 사용되어
전달받은 데이터를 콘솔에 찍는 함수 자체를 반환한다.
해당 함수는 inner변수에 대입된다.
inner가 참조하는 함수를 호출하고, 실행되어 콘솔에 value가 출력된다.
--------------------------------------------------------------------------------------
target.addEventListener() 함수의 두 번째 인자로 전달하는 리스너 함수(함수 자체)는 첫 번째 인자로 전달하는 이벤트가
지정한 대상(target)에서 인지할 경우 호출된다. 리스너 함수는 그 자리에 바로 작성할 수 있고(function() {}, () => {})
혹은 별도로 분리하여 작성한 뒤 해당 함수를 참조하는 변수를 리스너 함수 자리에 작성할 수 있다.
target.addEventListener('click', function() { console.log('클릭됨'); });
예를 들어 target이 버튼 요소를 참조하고 있고, 버튼 요소에 클릭이벤트가 발생하면 두 번째 인자인 함수가
작동되어 콘솔에 '클릭됨'이 출력된다. 이 함수를 별도로 분리한다면 아래와 같이 작성할 수 있다.
버전1: const onClickButton = function() { console.log('클릭됨'); };
버전2: const onClickButton = () => { console.log('클릭됨'); };
target.addEventListener('click', onClickButton);
이벤트가 발생했을 때 리스너 함수가 작동하는데 이때 이벤트가 발생한 객체를(이벤트가 발생한 객체 관련 정보를 갖고 있음)
참조하고 싶은 경우 리스너 함수에 PointerEvent의 target속성으로 접근한 이벤트 객체를 인자로 전달하면 된다.
함수 안에서 이벤트 리스너를 등록해야 하는 경우
querySelectorAll()의 반환 값인 유사배열 NodeList도 length 속성으로 선택자로 지정한 요소가 몇 개 담겨있는지 확인할 수 있다.
NodeList에 고차함수인 forEach() 함수 사용가능하다.
html문서--------------------------------------------------------------
<button type="button"> Button Appear</button>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
1. Button Appear버튼을 클릭하면 <div>태그 안에 button요소가 생기게 할 것임
const $button = document.querySelector('button');
// $$divs는 NodeList임 ---> NodeList(5) [div, div, div, div, div]
const $$divs = document.querySelector('div');
const createButton = () => {
$$divs.forEach( (div) => {
div.innerHTML = '<button>Example</button>';
});
};
$button.addEventListener('click', createButton);
ver2.
const divs = [...document.getElementByTagName('div')];
상기처럼 코드를 작성했는데 에러발생: Uncaught TypeError: document.getElementByTagName is not a function or
its return value is not iterable. document.getElementByTagName이 함수가 아니거나 이 함수가 반환하는 값이 iterable(순회가능) 하지 않다. getElement가 아니라 getElements로 작성해야 했다.
정정 → const divs = [...document.getElementsByTagName('div')];
스프레드 문법을 사용하고 배열로 받기 div요소가 배열로 반환된다.
const appearBtn = document.getElementsByTagName('button')[0];
태그이름이 button인 것중 인덱스가 0번째인 버튼 요소를 appearBtn 변수에 대입한다.
html문서에서 첫 번째 button 요소를 선택하는 코드다.
***document.getElementsByTagName('선택자'); 이 코드가 반환하는 값은 HTMLCollection 객체다.
HTMLCollection 객체는 유사배열이다.
function makeBtn() {
// makeBtn() 함수는 Button Appear 버튼을 클릭한 이후에 실행되는 이벤트리스너 함수
// makeBtn() 함수 실행 순서
// 1. html문서에 존재하는 모든 div요소를 배열로 담은 divs를 사용해서 각 div요소를 하나씩 순회한다.
divs.forEach( (element) => {
// 2. 순회하면서 진행할 작업들
// - html문서에서 button요소를 만들어서 btn 상수에 담는다.
const btn = document.createElement('button');
// 해당 button 요소가 갖는 내용물에 Example을 대입한다.
btn.textContent = 'Example';
// 그리고 그 버튼을 클릭했을 때 실행할 작업을 설정하기 위해 addEventListener() 함수를 작성한다.
btn.addEventListener('click', function (e) {
console.log('callback test');
});
// 완성된 버튼요소를 해당 노드(div요소)의 자식 노드리스트중 마지막 자식으로 붙인다.
element.appendChild(btn);
});
}
appearBtn.addEventListener('click', makeBtn);
---------------------------------------------------------------------------------
콜백함수에 지역변수 전달
함수 안에서 이벤트리스너를 등록할 때 외부 함수의 지역변수를 인자로 전달해야 하는 경우
:댓글을 불러오고 댓글 삭제와 수정버튼을 만들때
추후 개인적인 미니 프로젝트 진행시 댓글 불러오기, 불어온 댓글에 삭제와 수정버튼을 달아보기
참고---------------------------------------------------------------------------------
📚 return function() 함수를 리턴 하는 기법은 어디에 사용될까?
자바스크립트의 함수를 리턴하는 함수 클로저에서도 보았고 우리는 자바스크립트 코딩하면서 가끔 함수 자체를 리턴하는 함수를 한번쯤은 보았을 것이다. function hello(){ return function world(){ return
inpa.tistory.com
addEventListener 콜백함수 제대로 이해하기
오랜만에 프론트엔드 코드를 만져보니, 별게 다 헷갈린다. 가끔씩 참조할 수 있도록 콜백함수에 관련된 부분을, 그 중에서도 이벤트 리스너 부분을 집중적으로 정리해본다. 코드 중 비동기처리
velog.io
'공부기록용' 카테고리의 다른 글
| [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(2) (4) | 2024.11.13 |
|---|---|
| [ KISA ] Next.js를 활용한 검색 최적화 대응 웹사이트 구축하기(1) (1) | 2024.11.12 |
| [ javascript ] nullish 병합 연산자(??), 쿵쿵따 게임 실습 (2) | 2024.11.09 |
| [ javascript ] 순서도 정리 및 복습, 옵셔널 체이닝(?.) (0) | 2024.11.06 |
| [ javascript ] 끝말잇기 게임 프로그래밍 (3) | 2024.11.05 |