<webhacking.kr> old-14

*공부하면서 풀이과정처럼 쓴 글입니다! 틀린 부분이 많을 수도 있어요!*

 

> Ctrl + shift + I

 

old-14코드

 

1. HTML

(12) <form name="pw"> 

<form> 태그는 웹 페이지에서의 입력 양식을 의미한다. 위 코드에선 이름이 pw인 폼을 생성한다. 

 

(13) <input type="text" name="input_pwd">

<input> 태그는 전체 양식을 의미하고 화면에 보이지 않는 추상적인 태그다. 이 태그의 type 속성으로 종류를 나타내고 name을 통해 데이터의 이름을 설정하며 value를 통해 기본 값을 지정한다. 따라서 위 코드에선 일반 문자를 입력할 수 있는 이름이 input_pwd 인 입력창을 만든다. 

 

type 속성   

• text: 일반 문자
• password: 비밀번호
• button: 버튼
• submit: 양식 제출용 버튼
• reset: 양식 초기화용 버튼
• radio: 한개만 선택할 수 있는 컴포넌트
• checkbox: 다수를 선택할 수 있는 컴포넌트
• file: 파일 업로드
• hidden: 사용자에게 보이지 않는 숨은 요소

(14) <input type="button" value="check" onclick="ck()">

<input> 태그의 type 속성으로 버튼을 만들고 기본 값을 check 라고 한다. 

onclick 속성으로는 반드시 JS가 온다. 그 속성 값은 웹 브라우저가 기억하고 있다가, 사용자가 버튼을 클릭 했을때, 기억했던 JS 문법을 실행한다. 따라서 ck()는 JS의 문법을 따라 만들어진 함수이고 버튼을 클릭시 그 함수가 실행된다. 

 

2. JavaScript 

(17) function ck(){

14에서 나온 함수가 여기서 정의된다. 

 

(18) var ul=document.URL;

ul 이라는 변수를 선언하고 초기값을 현재 HTML 웹 페이지의 URL로 설정한다. 

 

(19) ul=ul.indexOf(".kr");

indexOf() 는 괄호 안에 오는 값이 문자열에서 처음 나타나는 포지션을 반환한다. ul 은 웹 페이지의 URL 이므로 

https://webhacking.kr/challenge/js-1/이 문자열에서 .kr 이 나오는 값을 ul 변수에 저장한다. 

이 값을 찾으려면 직접 세어볼 수도 있지만 console 을 이용할 수 도 있다.

 

 

이제 ul 변수에 저장되어 있는 값은 18이다. 

 

(20) ul=ul*30; 

*는 곱하기다. 따라서 새로운 ul의 값은 이전의 ul 에 30을 곱한 값이다. 

18 X 30 = 540 이기에 새로운 ul 의 값은 540이다. 

 

(21) if(ul==pw.input_pwd.value){

if문은 괄호 안의 boolean 연산이 true 일때만 실행된다. 괄호 안에는 ul 을 pw.input_pwd.value 와 같다고 한다 (==). 

pw.input_pwd.value 는 pw = 폼 이름, input_pwd = 입력창의 이름이고 .value 는 그 값을 의미한다. 

따라서 입력창에 입력된 값이 ul 변수와 같을시 {} 안의 코드가 실행된다. 

 

(22) location.href="?"+ul*pw.input_pwd.value;}

location.href 는 전체 URL 을 반환한다. 위의 코드에는 ? 뒤에 ul 곱하기 pw.input>pwd.value 라고 나와있다. 이 뜻은 ul 곱하기 ul 과 같고, 540 X 540 = 291600이다. 이로 인해 540을 입력하면 정답을 풀었다는 화면이 나오고 URL 이 https://webhacking.kr/challenge/js-1/?291600 로 바뀐다. 

 

(23) else { alert("wrong");}

if문이 false 일때 실행되는 코드이다. 540외의 값을 입력했을때 wrong 이라고 알림창이 뜬다. 

 

 

3. 문제 풀이 

540을 입력하고 check 버튼을 누른다. 

 

reference 

<form>, <input> 태그 - https://ofcourse.kr/html-course/form-%ED%83%9C%EA%B7%B8

HTML

indexOf() - https://www.w3schools.com/jsref/jsref_indexof.asp

JavaScript String indexOf() Method

location.href - https://www.w3schools.com/jsref/prop_loc_href.asp

Location href Property