[SuNiNaTaS(써니나타스)] 7번 문제 풀이
오늘(3.13)은 어제 6번 문제에 이어서 7번 문제를 풀기로 했다. 하얀색 바탕이 파란색 바탕으로 바뀌는 것을 보니 기분이 좋았다. 하나씩 채워가는 모습을 보면서 이런 맛에 문제를 푸는 것 같다.
7번 문제를 클릭하게 되면 아래의 사진처럼 처음에는 아이유 사진이 나온다. 아이유 사진 위에는 'Do U Like girls?'라는 문구와 함께 스크롤을 내리다보면 끝부분에서는 윤아 사진을 볼 수 있다. 맨 처음에 문구는 단순히 물어보는 문구인 것 같다. 해당 박스에 난수 값을 입력해도 아무일도 일어나지 않았기 때문이다.
(처음에 아이유 사진이 엄청 크게 나와서 놀랐다......)
그리고 아이유와 윤아 사진 중간에 'YES' 입력 버튼 하나가 덩그러니 있었다.
(뭘까...?)
저렇게 덩그러니 있는 것들은 한번 눌러보고 싶은 욕구가 생기기 마련이다. 그래서 바로 클릭해봤더니 아래와 같은 팝업창이 떴다.
'실패... 내가 너무 느리다'라고 한다.... 이제 해당 페이지에서는 아무것도 발견할 수 없어서 html 소스코드를 확인해보기로 했다. 들어가자마자 힌트가 있었다.
'Faster and Faster'
힌트는 빠르게 하라는 데 어떤걸 빠르게 하는지 감이 안잡혔다. 그래서 소스코드 안에 숨겨져 있는 것을 자세히 확인해보기로 했다.
<head>부분을 확인해보니 스크립트를 발견했다. 이벤트 부분인 것 같았다.
(이벤트 : 사용자가 어떤 행동을 취했을 때, 그로 인해서 변화가 이루어지는 것을 말한다. 여기서 행동은 "사용자가 클릭했을 때", "스크롤을 내렸을 때" 등을 의미한다.)
소스코드 해석
function noEvent() { // noEvent라는 함수
if (event.keyCode == 116 || event.keyCode == 9) { // keyCode가 116,9일때 실행한다.
alert('No!'); // 'No!'을 출력한다.
return false; // false 값을 반환한다.
}
else if (event.ctrlKey && (event.keyCode = 78 || event.keyCode == 82)) {
// Ctrl을 누르면서 keyCode 값이 78이거나 82일때 실행한다.
return false; // false 값을 반환한다.
}
}
document.onkeydown = noEvent; // 행동을 했을 때 noEvent 함수가 실행된다.
더 자세히 설명하자면
event.keyCode
해당 함수는 Javascript로 사용자의 키 입력을 감지하는 함수입니다. 아래 표는 event.keyCode 모음을 나타낸 것이다.
즉, 해당 소스코드
event.keyCode == 116 || event.keyCode == 9
116은 'F5', 9는 'tab'으로 7번 문제 페이지에서 'F5'와 'tab'을 입력시 'No!' 팝업창이 출력되고 false 값을 반환하는 것이다.
또,
event.ctrlKey && (event.keyCode == 78 || event.keyCode == 82)
78은 'n', 82는 'r', ctrlKey는 'Ctrl키를 누르는 것'으로 결국 'Ctrl'을 누르면서 'n'키나 'r'을 누르면 false 값을 반환하는 것이다.
event.ctrlCode
해당 함수는 이벤트 발생시 어떤 키를 눌러야 되는지 알 수 있는 함수이다.
| 속성 | 개요 |
| ctrlKey | Ctrl 키를 눌렀는 가 |
| altKey | Alt 키를 눌렀는 가 |
| shiftKey | Shift 키를 눌렀는 가 |
| which | 키 코드의 종류 |
다시 문제풀이로 돌아와서 'F5'랑 'Tab'키를 눌렀을 때, 아래의 화면처럼 'No!'라는 팝업창이 뜨게 된다.
여기서 우리가 유추할 수 있어야 하는 것은 아까 중간에 봤던 'YES'버튼을 빠르게 눌러야지 문제가 해결 되는 것 같았다. 왜냐하면 스크립트 외에도 소스코드에서 힌트가 더 있었기 때문이다.
아래의 화면처럼 form 형식의 소스코드를 확인할 수 있었다. 소스코드를 간략하게 설명해보자면
해당 form의 이름은 'frm'으로 'post'방식으로 'YES'에서 submit 하게 된다면 './web07_1.asp' 페이지로 넘어가는 것이다.
좀 더 자세히 설명을 하자면 일단 오른쪽 'YES' 코드는
<input type = "submit" value = "YES">
입력받은 데이터를 서버에 전송하기 위한 'submit'란 type을 사용한 것인데, 이때 입력할 수 있는 버튼이 자동으로 생기게 된다. 이때 버튼 안의 값을 'YES'라고 넣은 것이다.
즉,
1. 서버에 데이터를 전송할 수 있는 버튼(submit)이 생성
2. 버튼 안에 값을 'YES'로 지정
3. 이따가 설명할 <form> 태그 안에 입력된 'action' 속성으로 지정한 서버로 데이터가 전송!
이제 왼쪽 코드
<form method = "post" action = "./web07_1.asp" name = "frm">
- form 데이터를 "post" 방식으로 전송하는 것이다. 다시말해 form 데이터를 HTTP POST 메소드로 전송하는 것이다.
- action은 데이터를 받을 때 전송하는 서버를 적어 놓은 것이다.
- name은 form의 이름을 "frm"으로 지정하겠다는 말이다.
그러면 문제를 풀기 위해서 해야하는 작업은 재빠르게 'YES' 버튼을 눌러야 하는 것인데, 아까 내가 직접 'YES'버튼을 눌렀을 때는 실패라고 팝업창이 떴다. 그렇기에 'F12'에서 'Console'을 이용하기로 했다.
아래의 화면처럼 "frm.submit()"을 입력하게 계속 엔터를 눌렀다.
반복적으로 엔터를 눌러주니 축하한다는 팝업창과 함께 키값이 나왔다.
키값을 복사해서 AUTH 창에 넣어주니 문제가 풀렸음을 알려줬다.
물론 점수도 올라갔다.
[잘못된 풀이]
form에서 web07_1.asp 서버로 데이터가 옮겨지는 것이니깐 콘솔을 이용해서 문제를 푸는 것이 아닌 바로 그 서버로 옮기게끔 입력을 했다. 아래의 화면처럼 도메인 주소창에 "/web07_1.asp"을 입력해서 넘어가게끔 했다.
결과는 아래의 화면과 같았다.
*해당 블로그는 개인적인 공부와 정보 공유를 위해 만들었습니다.
'공부 > Suninatas' 카테고리의 다른 글
| [SuNiNaTaS(써니타나스)] 2번 문제 풀이 (3) | 2020.03.15 |
|---|---|
| [SuNiNaTaS(써니나타스)] 8번 문제 풀이 (4) | 2020.03.14 |
| [SuNiNaTaS(써니나타스)] 6번 문제 풀이 (8) | 2020.03.12 |
| [SuNiNaTaS(써나나타스)] 5번 문제 풀이 (4) | 2020.03.11 |
| [SuNiNaTaS(써니나타스)] 4번 문제 풀이 (8) | 2020.03.06 |