분류 javascript

JavaScript로 암호 시스템 구축 (1)

컨텐츠 정보

  • 조회 198 (작성일 )

본문

우리가 사용할 암호는 로마 황제 Julius Caesar의 이름을 딴 Caesar 암호입니다. 그것은 가장 간단한 암호 중 하나이며 정해진 수의 장소를 따라 각 문자를 이동시킵니다. 예를 들어 'Hello World'라는 문구는 3의 시프트 (Julius Caesar가 사용한 것으로 생각되는 시프트)를 사용하여 'KHOOR ZRUOG'가됩니다.


완성 된 코드의 예는 여기에서 볼 수 있습니다. 작동 방식에 대한 느낌을 얻으려면 비밀 메시지를 작성해보십시오.


시작하려면 좋아하는 텍스트 편집기를 시작하고 다음을 'caesar.html'로 저장하십시오.


<!doctype html>

<html lang='en'>

<head>

<meta charset='utf-8'>

  <title>Caesar Cipher</title>

</head>

<body>

  <h1>Caesar Cipher</h1>

  <form>

    <label>Plaintext:</label>

    <textarea name='plaintext'>Top Secret</textarea>

    <label>Shift:</label>

    <input type='number' name='shift' value='5' min='1' max='26'>

    <input type='submit' value='encrypt'>

</form>

<h2>Output</h2>

  <div id='output'>

  </div>

<script src='main.js'>

</script>

</body>

</html>


메시지를 입력하기 위한 텍스트 영역이 있는 양식이 포함 된 표준 HTML 페이지입니다. 'type'속성이 'number'인 입력 필드도 있으며 대부분의 브라우저에는 스테퍼 화살표가 표시되어 사용자가 값을 늘리거나 줄일 수 있습니다. 1에서 26까지의 값을 제한하고 기본값을 3으로 설정할 수 있습니다 (Caesar를 기리기 위해). 맨 아래에는 'id'가 'output'인 빈 'div'요소가 있으며 암호화 된 메시지를 표시하는 데 사용됩니다.


JavaScript에서 양식을 사용하는 데 대한 정보가 필요하면 제 책의 8 장에서 다룹니다.


이제 암호화를 수행하기 위해 JavaScript 코드를 작성하고 작성하십시오!


'main.js'라는 파일을 만들어 'caesar.html'파일과 같은 폴더에 저장하십시오.


알파벳이라는 전역 변수를 만드는 것으로 시작하겠습니다. 이것은 알파벳의 모든 문자를 저장하는 배열입니다.


const alphabet = [

  'A','B','C','D','E','F',

  'G','H','I','J','K','L',

  'M','N','O','P','Q','R',

  'S','T','U','V','W','X',

  'Y','Z'

];


이 배열은 문자가 알파벳 안에 있는 위치를 찾아 정해진 수의 장소를 따라 이동하는 데 유용합니다. 또한 이 변수를 간단히 업데이트하여 대체 알파벳을 사용할 수 있음을 의미합니다.


더 자세한 내용이나 새로 고침이 필요한 경우 변수는 내 책의 1 장에서 다루고 배열은 내 책의 3 장에서 다루게 됩니다.


이제 페이지의 다양한 부분에 액세스 할 수 있는 방법이 필요합니다. 이를 위해 Document Object Model 또는 DOM을 사용합니다.





암호 시스템