1. onclick 이벤트
<button onclick="javascript 코드;">Click Me!!</button>버튼을 누르면 이벤트가 실행되는 코드. onclick에 직접 자바스크립트 코드를 작성하는 경우도 있지만 보통은 간편하게 사용하기 위해 function을 활용하여 작성한다.
2. function
function 함수이름(parameter){
//함수내용 작성
}
3. function & onclick 사용해서 열고 닫는 버튼 만들기(openBtn, closeBtn)
<body>
<div class="alert-box" id="alert">Alert Box
<button onclick="closeBtn();">close!</button>
</div>
<button onclick="openBtn();">open!</button>
<script>
function openBtn(){
document.getElementById('alert').style.display = 'block';
}
function closeBtn(){
document.getElementById('alert').style.display = 'none';
}
//긴 코드를 한 단어로 축약 가능. 재사용.
</script>
</body>.alert-box {
background-color: rgb(76, 76, 211);
color: yellow;
padding: 20px;
border-radius: 5px;
}
open을 누르면 alert box가 보이고 close를 누르면 사라진다.
4. parameter 사용하기(toggleBtn)
function을 사용해서 두가지 기능을 구현해 보았는데 parameter를 사용하면 함수를 하나만 만들고도 열고 닫기 버튼을 만들 수 있다.
=> 함수 하나로 다양한 기능 실행이 가능하다.
<body>
<div class="alert-box" id="alert">Alert Box
<button onclick="toggleBtn('none');">close!</button>
</div>
<button onclick="toggleBtn('block');">open!</button>
<script>
function toggleBtn(word){
document.getElementById('alert').style.display = word;
}
</script>
</body>open의 경우 display = 'block'으로, close의 경우 display = 'none'이므로 버튼을 누를 때 string을 인수로 받아서 block, none만 바꿔주면 된다.
'Javascript' 카테고리의 다른 글
| Event Handler(이벤트 핸들러) 등록 (0) | 2023.02.02 |
|---|---|
| Javascript로 HTML 조작하기: 열고 닫는 버튼 만들기 (0) | 2023.02.02 |
| Javascript로 HTML 조작하기: selector(id, class, tag...) (2) | 2023.02.01 |
| js/gsap plugin 배경색 바꾸기 (0) | 2022.11.29 |
| images marquee banner 만들기 (0) | 2022.11.25 |