정보실

웹학교

정보실

javascript JavaScript로 암호 시스템 구축 (2)

본문

const form = document.forms[0];

const output = document.getElementById('output');


이 코드는 전역 변수를 사용하여 암호화 된 메시지를 표시 할 양식 요소와 div 요소를 참조합니다. 이렇게 하면 나중에 코드에서 이러한 요소를 쉽게 참조 할 수 있습니다.


DOM은 제 책의 6 장에서 다룹니다.


누군가 암호화하려는 메시지를 입력하면 '제출'버튼을 누르면 암호화 된 메시지가 표시됩니다. 제출 버튼을 눌렀을 때 발생하고 텍스트 영역에 작성된 내용에 액세스 할 수 있는 이벤트 핸들러를 사용해야 합니다.


form.addEventListener ('submit',event => {

  event.preventDefault();

  output.innerHTML = [... form.plaintext.value ].map(char => encrypt(char)).join('');

}

);


이벤트는 제 책 7 장에서 다룹니다.


이 이벤트 처리기에는 약간의 진행이 있으므로 각 줄을 자세히 살펴 보겠습니다.


event.preventDefault(); 


이것은 실제로 서버에 제출하기를 원하지 않기 때문에 양식을 제출하는 기본 동작을 방지하는 데 사용됩니다.


output.innerHTML = [... form.plaintext.value ].map(char => encrypt(char)).join(''); 


이 줄은 출력 div의 innerHTML 속성을 암호화 된 메시지로 업데이트합니다. textarea 안에 포함 된 메시지는 form.plaintext.value를 사용하여 액세스 할 수 있습니다. 사용자가 입력 한 다양한 문자가 포함 된 문자열입니다. 여러 메소드를 함께 연결하여 이 문자열을 암호화 된 메시지로 변환합니다.


우선, 스프레드 연산자를 사용하여 문자열을 배열로 바꿉니다. 그런 다음 map 메소드를 사용하여 각 문자를 반복하고 암호화 기능을 적용하여 다른 문자로 변환합니다.


마지막으로 join( '') 메서드를 사용하여 배열을 다시 출력 div에 표시 할 수 있는 문자열로 변환합니다.


남은 것은 위의 이벤트 핸들러에서 map 메소드가 사용하는 encrypt() 함수를 작성하는 것입니다. 이것은 시저 암호를 적용하는 코드입니다.






  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 26회 ]  작성일19-08-15 16:51

웹학교