웹조작 및 이벤트 활용
1. 웹조작
1-1. 대상 선택
- getElementBy ~ ()
- getElementsBy ~ ()
- querySelector
등등 더 많은 방법이 있음(ById처럼 특정 태그를 지정해서 선택가능)
1-2. 조작
- .innerHTML =
- .style.color =
💡그 외 필요한것들은 구글링할 것
<이미지>텍스트를 <동영상> 텍스트로 변경하기
1. 대상을 선택
➡️ "이미지" 태그찾기
2. 조작
➡️ "이미지" → "동영상"
💡 태그는 개발자 도구로 찾을 수 있음( F12 → 화살표이모티콘 선택)
이미지 태그는 이렇게 생겼음
➡️ a태그안에 innerhtml로 있음!
그런데 여기선 id값이 없어서 html을 조작하여 태그를 바꿔줌
a 태그 안에 id가 추가된 것을 확인할 수 있음
id값을 이용해서 document에서 선택할 수 있음
➡️ 웹의 어떤 요소든 선택해서 원하는대로 바꿀 수 있음
2. 이벤트 등록
2-1. inline
➡️ onclick="alert('');"
2-2. addEventListener
이벤트를 등록하는 가장 권장되는 방식이다.
사용자로고를 클릭했을때 알림창 띄우기
선택하기 위해 "ahhyeon" 이라는 id값을 만들어줌
id를 지정해서 getElementById로 선택할 수 있음
➡️ document.getElementById("ahhyeon")
태그를 선택 후 .addEventListener 작성
➡️ addEventListener(type, listener);
➡️ document.getElementById("ahhyeon").addEventListener('click', function(event) {
alert("만나서 반갑습니다!");
});
3. 활용
< 메이플 스토리 >
1. 몬스터 : 스톤골렘
2. 무기 : 금비표창
3-1. 무기버튼(공격)을 누르면 몬스터가 사라지도록 만들기
➡️ style.visibility 속성을 사용하여 HTML 요소 숨기기
3-2. 무기버튼을 한번 더 클릭하면 다시 나타나도록 만들기
➡️ IF 로직
➡️ style.visibility 속성을 사용하여 HTML 요소 숨기기
✍️ if - else if
status값이 없다면 hidden으로 바꾸기
현재 hidden인 상태라면 아무것도 없게 만들기
