0. UI 만드는 Step
- HTML/CSS로 먼저 디자인
- disable or enable (display)
1. basic step
<!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>
<div class="alert-box" id="alert">알림창</div>
<button onclick="document.getElementById('alert').style.display='block'">버튼</button>
</body>
</html>- alert-box를 만들어서 onclick 시 수행해야하는 기능을 부여
- 버튼 누르면 display none or 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>
<div class="alert-box" id="alert">
알림창
<button onclick="document.getElementById('alert').style.display = 'none';">닫기</button>
</div>
<button onclick="document.getElementById('alert').style.display='block';">버튼</button>
</body>
</html>- 알림창 닫기 기능 추가
- 닫기 누르면 알림창이 사라진다.
- 그런데 위처럼 js code를 짜다 보니 자동완성도 안되고, 더럽고.. 개빡친다..
2. Function
<!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>
<div class="alert-box" id="alert">
알림창
<button onclick="setDisplay('none')">닫기</button>
</div>
<button onclick="setDisplay('block')">버튼</button>
<script>
function setDisplay(displayAttribute) {
document.getElementById("alert").style.display = displayAttribute;
}
</script>
</body>
</html>- javascript function name은 camelCase
- 긴 코드에 대해 재사용성을 높이기 위해서 사용한다. + 자주쓰는 기능의 경우
- script는 미리 HTML을 조작해놔야 javascript를 사용할 수 있기에 조작할 html 하단에 짜야된다.
- 함수의 기능 중 가변적인 기능을 할 수 있기 위해 Parameter를 위와 같이 전달 가능하다.
- 파라미터는 여러개 가능하다.
- 비슷한 기능을 하면 하나의 함수로 만드는 것이 중요
<!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>
<div class="alert-box" id="alert">
<p>알림창</p>
<button onclick="setDisplay('none')">닫기</button>
</div>
<button onclick="setDisplay('block', '아이디 입력하세요')">버튼1</button>
<button onclick="setDisplay('block', '비밀번호 입력하세요')">버튼2</button>
<script>
function setDisplay(displayAttribute, wantedContent) {
document.getElementById("alert").innerHTML = wantedContent;
document.getElementById("alert").style.display = displayAttribute;
}
</script>
</body>
</html>
- 버튼 1 누르면 '아이디 입력하세요', 버튼 2 누르면 '비밀번호 입력하세요' 구현
getElementByClassName selector
<!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>
<div class="alert-box" id="alert">
<p>알림창</p>
<button calss="alert-box" onclick="setDisplay('none')">닫기</button>
</div>
<button onclick="setDisplay('block', '아이디 입력하세요')">버튼1</button>
<button onclick="setDisplay('block', '비밀번호 입력하세요')">버튼2</button>
<script>
function setDisplay(displayAttribute, wantedContent) {
document.getElementsByClassName("alert-box")[0].innerHTML = wantedContent;
document.getElementsByClassName("alert-box")[0].style.display = displayAttribute;
}
</script>
</body>
</html>- getElementByClassName은 item 요소들을 array로 가져오므로 Indexing 해서 사용해야된다.
addEventListner
<!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>
<div class="alert-box" id="alert">
<p class="alert-contents">알림창</p>
<button class="alert-contents" id="close">닫기</button>
</div>
<button onclick="setDisplay('block', '아이디 입력하세요')">버튼1</button>
<button onclick="setDisplay('block', '비밀번호 입력하세요')">버튼2</button>
<script>
document.getElementById("close").addEventListener('click', function() {
document.getElementById("alert").style.display = 'none';
});
function setDisplay(displayAttribute, wantedContent) {
document.getElementsByClassName("alert-contents")[0].innerHTML = wantedContent;
document.getElementById("alert").style.display = displayAttribute;
}
</script>
</body>
</html>- scroll, click, drag .. 등이 event
- 유저의 행동을 감시하는 녀석이다. 이걸 사용하면 click 정의안해도된다.
- callback 함수를 적용해줘야된다.
OnePunchLotto