● Default 코드 , 출력 장면 :
- index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<a id="link" href="https://www.codeit.kr/">Link</a>
<input type="checkbox" id="checkbox">
<input type="text" id="input" placeholder="input">
<p id="text">
I Love Codeit!
</p>
<script>
</script>
</body>
</html>- 출력장면
● 실습 1 : JavaScript 코드를 이용하여, link의 링크 접속시, 접속기능은 안되고, "꺼져"라는 경고창 출력 //href 속성삭제 X
- 답 :
const link = document.querySelector('#link');
link.addEventListener('click',function(event)
{
event.preventDefault();
alert('꺼져 병신아');
});● 실습 2 : checkBox 태그가 unchecked 되어있을 때, input 입력을 막고, "체크하고 입력해 병신아" 경고창 출력되도록 하기
- 답 :
const inputNode = document.querySelector('#input');
const checkBoxNode = document.querySelector('#checkbox');
inputNode.addEventListener('keydown',function(event){
if(!checkBoxNode.checked)
{
event.preventDefault();
alert('체크박스에 체크하고, 입력해 병신아');
}
});
● 실습 3 : 웹페이지 창에서 우클릭 방지 코드 작성
- 답 :
document.addEventListener('contextmenu',function(event){
event.preventDefault();
alert('복 붙 금 지 ㅋ');
});
'CodeIt_Sprint > 인터렉티브_자바스크립트' 카테고리의 다른 글
| (11)인터렉티브_자바스크립트_키보드 관련 event (1) | 2024.12.04 |
|---|---|
| (10)인터렉티브_자바스크립트_마우스 클릭 관련 세부 event.type 3가지, 마우스 포인터 이동 관련 세부 event.type (1) | 2024.12.03 |
| (8)인터렉티브_자바스크립트_이벤트 버블링 (0) | 2024.11.29 |
| (7)인터렉티브_자바스크립트_태그에 이벤트 핸들러 등록,제거하기, 이벤트객체 => 동작에 대하여, 어떤 event동작, 태그항목이 관련되어있는지의 정보 객체 (0) | 2024.11.29 |
| (6)인터렉티브_자바스크립트_dataset속성 (0) | 2024.11.29 |
