-
[JavaScript] alert 박스, onclick, function, EventListener 기초프로그래밍 언어/JavaScript 2022. 11. 11. 00:07
📑 자바스크립트로 html 변경
VSCode에서 Live Server 다운 후 코드 입력한 파일 우클릭 하고 아래 사진처럼 클릭 시 브라우저에 입력한 코드 결과 바로 보면서 작업할 수 있다.
자바스크립트를 이용하여 html의 문자를 변경하려고 한다. 어떻게 해야할까?
<h1 id="hello">안녕하세요</h1> <script> document.getElementById('hello').innerHTML = '안녕'; </script>위와 같이 html 태그에 id 값을 주고 스크립트 태그 안에서 태그 요소를 가져오고 html 문구를 바꿔주면 된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- html 조작하기위해 자바스크립트 사용하는 것.! --> <!-- <h1 style="color: blue" id="hello">안녕하세요</h1> --> <h1 id="hello">안녕하세요</h1> <h1 id="hi">안녕하세요</h1> <script> //문서(html) .(~의) element(html 요소) byId(id에 의해서 id가 즉 hello인 것) document.getElementById('hello').innerHTML = '안녕'; document.getElementById('hello').style.color = 'red'; document.getElementById('hello').style.fontSize = '16px'; // document.getElementById('바꿀 html 요소 id').무엇을 = '어떻게 바꿀지' //getElementById('바꿀 html 요소 id')를 셀렉터라고 한다. //ex) document.getElementById('hello').style.color = 'red'; document.getElementById('hi').innerHTML = 'JS 고수예요'; </script> </body> </html>위의 예제를 살펴보면 getElementById로 요소의 id값을 가져오는 것은 동일하며, 각각 그 다음 dot(.)뒤에 원하는 작업을 적어주면 된다.
작업 결과 📑 기본적인 UI 만들기
웹 페이지에선 탭, 모달창, 서브메뉴 등 수백개의 동적 UI를 만들 수 있다. UI를 만드는 법은 아래와 같다.
📌 1. HTML CSS로 미리 UI를 디자인 해놓고 필요하면 평소에 숨김
📌 2. 버튼을 누르거나 할 경우 UI를 보여달라고 자바스크립트를 이용해서 코드를 짠다.일단 HTML 파일에서 div 태그에 class값을 준다.
<link rel ="stylesheet" href="main.css"> <div class="alert-box">알림창</div>css 파일을 따로 만든 다음에 .alert-box에 속성값들을 지정해준다. ( . 은 클래스 #은 아이디)
.alert-box{ background-color: skyblue; padding: 20px; color: white; border-radius: 5px; display: none; /* display: none; 은 요소가 보이지 않고 만약 block으로 주면 잘 보인다.*/ }이렇게 되면 html 알림창이라는 태그에 css 속성이 적용되는 걸 확인 가능하다. 그 다음 버튼을 누르면 Alert UI 보여주게 설정해보자. 현재 display:none으로 되어있어 화면에서 보이지 않는다.
자바스크립트로 버튼 클릭 시 알림창 닫기, 보이기
<button onclick="document.getElementById('alert').style.display='none';">닫기</button> <button onclick="document.getElementById('alert').style.display='block'">버튼</button>물론 위에서 id 값을 가져오므로 알림창 div 태그에 id 값 추가해줘야한다.
여기서 잠깐!!! 이렇게 되면 중복된 코드도 많고 onclick 값이 너무 지저분하다. 이는 함수를 이용해 해결이 가능하다.
📑 자바스크립트 function 이용하기
function을 선언하는 방식은 아래와 같다.
function 자유롭게 함수명 작성(){
축약하고 싶은 코드
}그럼! function을 이용해 onclick=""에 넣었던 값들을 show, close와 같이 function {} 안에 넣어주면 끝!!! 근데 이또한 깔끔하지 않다. 왜냐! 버튼 클릭해서 열고 닫는 함수 로직이 똑같고 그저 none, block만 다르기 때문이다. 따라서 파라미터를 함수에 만들어서 넣어주면 된다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel ="stylesheet" href="main.css"> </head> <body> <!-- UI 만드는 step 1.HTML/CSS로 미리 디자인--> <div class="alert-box" id="alert"> <!-- 알림창 <button onclick="document.getElementById('alert').style.display='none';">닫기</button> --> 알림창 <button onclick="alertButton('none')">닫기</button> </div> <!-- UI 만드는 step 2. 버튼을 누르면 보여달라고 한다.--> <!-- <button onclick="alert 박스 보여줘~~ 이렇게 코드 짜면 된다. 이 안에">버튼</button> --> <!-- <button onclick="document.getElementById('alert').style.display='block'">버튼</button> --> <button onclick="alertButton('block', '아이디를 입력해주세요')">버튼1</button> <button onclick="alertButton('block', '비번을 입력해주세요')">버튼2</button> <div id="plus" >값<button onclick="plus(8,12)">숫자 버튼</button></div> <!--자바스크립트 코드는 html 아래 작성해야 잘 동작한다.--> <script> /* 함수 생성해보기 function alertShow(){ document.getElementById('alert').style.display='block'; } function alertClose(){ document.getElementById('alert').style.display='none'; } */ //파라미터 사용해보기 function alertButton(behavior, alertComent){ document.getElementById('alert').style.display=behavior; document.getElementById('alert').innerHTML = alertComent; } function plus(a,b){ document.getElementById('plus').innerHTML= a+b; } </script> </body> </html>📑 이벤트 리스너
html 태그 버튼에 onclick 속성 넣는 것도 깔끔하지 않다. 그럼 어떻게 해야할까??? 바로 이벤트 리스터를 이용하면 된다.
아래 코드를 통해 살펴보자.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel ="stylesheet" href="main.css"> </head> <body> <!--클래스는 중복이 가능하기 때문에 document.getElementsByClassName('title')[0] 이런식으로 적어줘도 된다. 참고참고. --> <div id="alert" class="alert-box">알림창 입니다.</div> <button onclick="showalert('block','아이디를 입력하세요')">버튼 1</button> <button onclick="showalert('block','비번을 입력하세요')">버튼 2</button> <button id="close">닫기</button> <script> //이벤트 리스너 addEventListener() 사용하기 //해당 id의 요소를 클릭하면 함수가 실행된다. //이벤트 명을 적으면 된다. click, keydown, scroll,mouseover 이런 식으로! 유저의 행동 감시 //함수명은 생략 가능한다. 그럼 콜백함수라고 하는데 파라미터자리에 들어가는 함수를 의미한다. document.getElementById('close').addEventListener('click', function(){ //코드 입력~~~~~ document.getElementById('alert').style.display = 'none'; }); function showalert(behavior, sentence){ document.getElementById('alert').style.display = behavior document.getElementById('alert').innerHTML = sentence } </script> </body> </html>닫기 버튼을 아래와 같은 이벤트 리스너 함수의 파라미터 값으로 깔끔하게 변경해줬다.
document.getElementById('요소 아이디').addEventListener(' 이벤트 동작 명' , function() { 실행될 코드 } )
여기서 function이 바로 콜백함수라는 것.! 많이 들어봤는데 개념에 대해 제대로 몰랐었다. 이번 기회로 점점 잡혀가는 느낌!
반응형'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
[JavaScript] html과 js 실행 순서, $('document').ready(function(){}) 쓰는 이유 (0) 2022.11.13 [javaScript] jQuery로 코드 변경해보기 (html, css, class 제어, 이벤트리스너) (1) 2022.11.12 [javascript 기초] const & let & var 차이점, Arrays, Object (0) 2022.09.14 [Ajax란? ] 제이쿼리와 $.ajax() , $.get(), $.post() 메서드 (0) 2022.09.01 [jQuery란?] 정의&사용법 , $(document).ready(), 선택자 종류, toggle (0) 2022.08.24