[웹해킹] Webhacking.kr 16번 풀이

*웹해킹.kr 16번 풀이

문제 페이지에 들어가니 왠 큰 별 하나와 꼬다리 별 두어개가 있다. 마우스를 갖다대니 꼬다리 별 하나가 사라진다.

무슨 문제인가 싶어 소스코드를 죽 둘러보니 눈에 띄는 한 줄이 있다.

onload는 body를 로드할 때 실행할 내용, onkeypress는 body가 활성화된 상태에서 아무키나 눌렀을 때 실행할 내용을 뜻한다.

event.keyCode는 입력된 키의 값을 반환하는 메서드이며 그 값은 Ascii Code이다.

(단, onkeypress일 때만이다. onkeydown에서는 다른 값이 들어가게 된다.)

그러면 kk함수와 mv함수를 각각 살펴보기로 하자.

mv함수는 일단 kk함수를 호출하고 있다. 이 내용은 좀있다 살펴보기로 하고 둘째줄부터 보자.

cd라는 값은 mv함수가 받아온 값, 즉 event.keyCode이다. 다시 말해, 입력된 키의 Ascii Code 값이다.

if문을 한 줄씩 살펴보면

cd가 100(="d")이면 star의 위치가 오른쪽으로 50 증가한다. (left라는 말에 낚이지 말자. left란 개체의 왼쪽 끝의 위치를 뜻한다.)

cd가 97(="a")이면 star의 위치가 왼쪽으로 50 증가한다.

cd가 119(="w")이면 star의 위치가 위쪽으로 50 증가한다.

cd가 115(="s")이면 star의 위치가 아랫쪽으로 50 증가한다.

cd가 124(="|")면 "(현재 페이지)+String.fromCharCode(cd)"로 페이지를 이동한다.

참고로 chrome에서는 제대로 작동이 되지 않는다. 아마 font의 id로 설정이 되어서 코드 자체를 무시하는 것 같다.

(서로 다른 웹서핑 프로그램간의 스크립트에 대한 반응은 상당히 상이한 편이다. 이런 경우는 실제로도 꽤 많이 발생한다.)

이번에는 kk함수를 살펴보자.

rndc는 1부터 9000000 사이의 난수이다. 그리고 아마 x, y는 별의 좌표를 뜻하는 것 같다. 화면상의 작은별 말이다.

innerHTML은 해당 객체의 스크립트 내용을 반환한다. 여기에 id가 aa인 *을 추가한다. rndc는 랜덤한 색상을 위한 떡밥이었다. 어쨌거나 계속 추가되는 별들은 마우스를 갖다대면 내용이 사라질 운명이다.

결론은 특정 문자를 입력하면 해당 페이지로 이동한다는 사실을 코드를 보고 알 수 있느냐이다.

여러 문제에 나오는 코드들을 보고 배우다 보면 쉽게 찾을 수 있을 거라 생각한다. 물론 착실하게 배우면 훨씬 더 좋을 것이다.