JavaScript 입문과 웹 UI개발(5)-자바스크립트 이벤트 리스너
2022. 9. 30. 11:20ㆍ애플코딩 javascript 강의
반응형
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p class="title1">알림창임</p>
<button id="close">닫기</button>
</div>
<button onclick="showbox1('block')">버튼1</button>
<button onclick="showbox2('block')">버튼2</button>
<script>
//id 말고 class를 이용한 selector가 있다 => getElementByClassName
//id의 경우 중복을 허용하지 않지만 class는 중복해서 여러 태그에 사용가능
// 그래서 여러개의 클래스중 몇번째를 나타내는지 index를 명시할 수 있다.
// document.getElementsByClassName('클래스명')[0].innerHTML="내용";
//id와 class 말고도 tagname이나 name으로도 찾을 수 있는 방법이 있는데
//주로 id와 class를 사용한다
//addEventListener를 이용해서 이벤트 발생시 적용될 기능을 함수로 나타낼 수 있다
//밑애 onclick없이 addEvetnListener로 click 이벤트를 처리했다.
//addEventListener는 감시하는 역학을 하는데 click, mouseover, scroll 등등 약 20가지의
//이벤트를 감시해서 이벤트 발생시 콜백함수를 실행해준다.
//콜백함수를 일단 파라미터 자리에 들어가는 함수라고 생각하면 된다.
// document.getElementById("???").addEventListener("이벤트",function(){
// 함수 내용
// });
//닫기
document.getElementById("close").addEventListener("click",function(){
document.getElementById("alert").style.display='none';
});
//아이디를 입력해주세요 알림창
function showbox1(aa){
document.getElementsByClassName('title1')[0].innerHTML="아이디를 입력해주세요";
document.getElementById("alert").style.display=aa;
};
//비밀번호 입력해주세요 알림창
function showbox2(aa){
document.getElementById("alert").style.display=aa;
document.getElementById("hi").innerHTML="비밀번호 입력해주세요";
};
</script>
</body>
</html>main.css
.alert-box{
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
/* 숨길때는 none 나타낼때는 block */
}알림창임
강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(7)-jQuery 사용법 간단정리 (0) | 2022.09.30 |
|---|---|
| JavaScript 입문과 웹 UI개발(6)-서브메뉴 만들어보기와 classList 다루기 (1) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(4)-function의 파라미터 문법 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(3)- JavaScript function 문법 사용법 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(2)-동적 UI 만드는 스텝(Alert 박스 만들기) (0) | 2022.09.30 |