내일배움캠프 React트랙 6일차 회고 (2022.11.07)
오늘은 이런 것을 공부했다.
요약하자면 셀렉터, 이벤트 리스너, 콜백함수
동적 UI 만드는 스텝 (Alert 박스 만들기)
<script>
function show() {
document.getElementById('alertbox').style.display = "block";
}
function hide() {
document.getElementById('alertbox').style.display = "none";
}
</script>
</head>
<body>
<div id="alertbox">알림창임<button onclick='hide()'>닫기</button></div>
<button onclick='show()'>띄우기</button>
</body>1. 부트스트랩을 이용할 때 요소들을 합성하는 방법이 궁금했는데 답은 html에 있었다. html 엘리먼트내에 html을 추가할 수 있다.
ex)위의 코드에서 alertnox내에 닫기버튼을 추가시킨것처럼...
2. UI를 평소에 숨기고 싶으면 display : none 주면 된다.
다시 보여주고 싶으면 display : block 넣으면 보인다.
싫으면 visibility : hidden 이것도 있다.
function에 사용가능한 파라미터 문법
<script>
function show_hide(x) {
document.getElementById('alertbox').style.display = x;
}
</script>
</head>
<body>
<div id="alertbox">알림창임<button onclick="show_hide('none')">닫기</button></div>
<button onclick="show_hide('block')">띄우기</button>
</body>⚠️caution!!
1. 파라미터 인자에는 따옴표나 큰따옴표 붙이지 않기 -> 'x'(x) x(o)
2. html문서내에서 함수와 파라미터를 동시에 선언할때는 따옴표안에 따옴표를 집어넣거나 큰따옴표안에 큰따옴표를 집어넣으면 오류가 생기므로, "show_hide('none')"와 같이 큰따옴표안에 따옴표를 집어넣는식으로 코드를 작성하자.
function get_arguments(arg1, arg2){
return arg1 + arg2
}
alert(get_arguments(10, 20));
alert(get_arguments(20, 30));와 같이 여러개의 인자를 포함시키는 함수도 작성가능하다.
숙제
버튼1 누르면 '아이디입력하세요' 라는 alert 박스가 떠야함
버튼2 누르면 '비번입력하세요' 라는 alert 박스가 떠야함
숙제 답안코드
<script>
function show_hide(x) {
document.getElementById('alertbox').style.display = x;
document.getElementById('alertbox').innerHTML = x;
}
function pop(y) {
document.getElementById('alertbox').style.display = 'block';
document.getElementById('title').innerHTML = y;
}
</script>
</head>
<body>
<div id="alertbox"><p id="title">알림창임</p><button onclick="show_hide('none')">닫기</button></div>
<button onclick="pop('아이디 입력하셈')">버튼1</button>
<button onclick="pop('비밀번호를 입력하세요')">버튼2</button>
</body>⚠️caution!!
1. innerHTML메소드는 id내에 모든 값을 변경시키므로 적용시킬 범위를 잘 조정해줘야한다. 만약 위의 코드에서 <p>엘리먼트를 따로 두지않는다면 '닫기'버튼이 사라지게 된다.
자바스크립트 이벤트리스너
getElementsByClassName 셀렉터
<p class="title1"> 테스트1 </p>
<p class="title1"> 테스트2 </p>
<script>
document.getElementsByClassName('title1')[0].innerHTML = '안녕';
</script>이러면 첫 <p> 태그 내용이 안녕으로 바뀐다.
getElementsByClassName('클래스명')[순서] 이렇게 쓰면 됩니다. getElementsByClassName('클래스명')만 입력하면,
클래스로 지정된 모든 엘리먼트가 선택된다.
getElementsByClassName 셀렉터 뒤에 위치하는 [0] 과 같은 숫자는, class로 지정된 모든 html 요소들중
맨위를 첫번째 순서로 시작해서 지정해주면 된다.
addEventListener() 함수
이벤트 리스너 사용구조
document.getElementById('어쩌구').addEventListener('click', function(){
//실행할 코드
});이렇게 작성하면 'id가 어쩌구인 요소를 -> 클릭하면 -> 안의 코드를 실행해주세요~' 라는 뜻이다.
이 이벤트리스너를 쓰면 버튼 같은 곳에 onclick 넣을 필요가 없는 것이다.
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none'
});이렇게 작t성하면 버튼내의 엘리먼트인 onclick을 빼도 된다.
event란?
유저가 웹페이지 접속해서 클릭, 스크롤, 키보드입력, 드래그 등을 할 수 있는데 이와 같이 유저가 브라우저와 상호작용하는 행위를 전문용어로 이벤트라고 정의한다.
어떤 요소 클릭시엔 click 이벤트, 마우스갖다대면 mouseover 이벤트, 스크롤하면 scroll 이벤트, 키입력하면 keydown 이벤트
... etc 몇십가지가 있다.
셀렉터로찾은요소.addEventListener('mouseover', function(){
실행할코드
});▲ 셀렉터로 찾은 요소에 마우스를 스윽 갖다대면, 특정 코드를 실행해준다.
셀렉터로찾은요소.addEventListener('scroll', function(){
실행할코드
});▲ 셀렉터로 찾은 요소가 스크롤되면 특정 코드를 실행해준다. (당연히 그 요소에 스크롤바가 있어야됨)
셀렉터로찾은요소.addEventListener('keydown', function(){
실행할코드
});▲ 셀렉터로 찾은 요소에 키보드로 글자를 입력하면 특정 코드를 실행해준다. (그 요소가 글자를 입력할 수 있는 input 이런거여야 함)
이벤트 종류는 수십가지가 있다.
https://developer.mozilla.org/en-US/docs/Web/Events
(이벤트 목록이다. 필요할 때 찾아쓰면 된다.)
콜백함수
셀렉터로찾은요소.addEventListener('scroll', function(){} );이벤트 리스너 생김새를 잘 보면 함수같이 생겼다. (실제로 뒤에 소괄호 붙으면 다 함수입니다.)
근데 addEventListener() 함수에는 파라미터 자리에 2개의 자료를 집어넣는데,
저렇게 함수 파라미터자리에 들어가는 함수를 전문용어로 '콜백함수'라고 한다.
콜백함수는 그냥 뭔가 순차적으로 실행하고 싶을 때 많이 보이는 함수형태인데,
그냥 함수안에 함수 넣으라고 하면 "아 저건 콜백함수구나~" 라는 반응만 보이면 된다.