Silly story generator

번역이 완료되지 않았습니다. Please help translate this article from English

이 모듈에서 배운 지식들을 바탕으로 랜덤하게 꾸며진 이야기(silly stories)가 만들어지는 재미있는 앱을 만들어 볼 것이다. 즐겨보자!!

선행요소: 사전에 이 모듈에서 배운 항목을 모두 학습하고 평가하여야 함
목적: 변수, 숫자, 연산, 스트링 및 어레이 같은 자바스크립트의 기본항목들에 대한 전반적인 이해

시작하기

이 평가하기(assements)를 시작하기 전에, 아래와 같은 것을 하여야 한다.:

  • HTML 예제 파일이 있는 사이트(grab the HTML file)로 이동하여 파일을  카피하여 자기 컴퓨터에 디렉토리을 새롭게 만들고 파일이름 index.html로 저장한다. 이 안에는 예제를 위한 CSS가 포함되어 있다
  • 또 다른 가공전의 텍스트가 있는사이트 (page containing the raw text) 로 가서 별도의 브라우저 탭으로 열어 놓아라. 이것은 나중에 필요하다.

Alternatively, you could use a site like JSBin or Glitch to do your assessment. You could paste the HTML, CSS and JavaScript into one of these online editors. If the online editor you are using doesn't have a separate JavaScript panel, feel free to put it inline in a <script> element inside the HTML page.

Note: If you get stuck, then ask us for help — see the Assessment or further help section at the bottom of this page.

프로젝트에 대한 간략한 설명

이제 프로젝트 시작을 위해 가공하지 않은 HTML/CSS 그리고 몇몇 텍스트를  만들고 확인했씁니다. 이제 아래와 같은 기능을 하는 프로그램을 만들기 위해 JavaScript를 코딩해야 합니다.

  • "랜덤한 이야기 만들기('Generate random story') 버튼를 누를 때 마다 꾸며진 이야기(silly stories)를 만들어야 합니다..
  • "Enter  custome name" 필드에 값이 입력되어있지 않을 경우 기본 이름을 Bob으로 지정합니다."랜덤한 이야기 만들기('Generate random story')"버튼을 클릭 하면 아래 사진에서 "Chris saw the ~.." 로 시작하는 문장이 "Bob saw the ~.."로 표시되게 합니다. .
  • "랜덤한 이야기 만들기('Generate random story')"을 클릭 하면 프로그램이 "US", "UK" 라디오 체크버튼을 확인하여 각 국가에 맞는 온도, 수량, 무게 등 단위를 설정하세요. 아래 사진의 예를 들면 "~ weights 300 pounds, and ~" 부분이 해당됩니다.
  • "랜덤한 이야기 만들기('Generate random story')"을을 누르면 꾸며진 이야기('silly stories')가 랜덤하게 계속 만들어지게 하세요.

이 스크린샷은 프로그램 출력의 예시 입니다.:

더 많은 아이디어를 얻으려면, 완성된 예(have a look at the finished example )를 참고하세요(소스코드는 엿보기 없기!)

완료하기

이번 섹션에선 프로젝트를 어떻게 진행해야 하는지 자세하게 설명합니다.

기본 셋업:

  1. "index.html"파일과 같은 디렉토리에 "main.js"라는 이름의 파일을 새롭게 만든다
  2. 외부의 자바스크립트 파일("main.js")을 HTML 파일("index.html" )에 연결시키 위해서,   HTML파일에 "main.js를 언급하는 <script> 엘리먼트를 삽입해야 합니다.. </body>태그 바로 앞에 이 스크립트 태그를 넣습니다..

변수와 함수:

  1. 가공전의 텍스트 파일에서, "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" 바로 밑의 코드를 모두 복사해서 main.js파일에 붙여넣습니다. main.js 자바스크립트 파일은 'customName' 변수에 "Enter custom name"의 값을 저장하고, 'randomize' 변수에는 "Generate random story" 버튼을 저장합니다. HTML 바디에 끝에 있는 class가 story인 <p>엘리먼트는 story 변수에 저장하며 해당 엘리먼트에 랜덤한 이야기가 작성됩니다. 또한, randomValueFromArray() 함수는 배열을 가져와서 배열이 가진 항목 중 하나를 랜덤하게 반환합니다..

  2. 가공전 텍스트 파일의 두번째 섹션 "2. RAW TEXT STRINGS"에는 프로그램에 자동으로 입력되어 랜덤 이야기 엘리먼트에 출력하는 문자열이 포함되어 있습니다.  main.js 에 아래 설명대로 변수를 만듭니다. :

    1. 먼저 storyText변수에 "It was 94 fahrenheit outside, so ~~" 로 시작하는 문장을 모두 저장합니다..
    2. insertX. 배열에 Willy the Goblin, Big Daddy, Father Christmas을 저장합니다.
    3. insertY. 배열에 the soup kitchen, Disneyland, the White House를 저장합니다..
    4. insertZ. 배열에 마지막 남은 값들을 저장합니다.

이벤트 핸들러와 완료되지 않은 함수 정리:

  1. 가공전 텍스트 파일("raw text file")로 돌아가자.
  2. "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" 밑의 코드를 카피하여main.js 파일의 밑에다 붙인다:
    • 버튼이 클릭되었을때  result() 함수가 작동되기 위해서, randomize 변수에 이벤트 리스너의 클릭을 추가한다.
    • 코드에 부분적으로 완료된 result() 함수를 추가한다. 이 프로젝트의  나머지에서 함수가 완료되고 정상적으로 동작하기 위해서 라인을 추가할 것이다.

result() 함수 완료하기:

   

  1. newStory라 불리는 새 변수를 만들고 이것의 값(value)를 storyText. 와 같게 한다.이것은 버튼을 누르고 함수가 수행(run)될 때 마다 새 이야기('story')가 랜덤하게 만들어 질수 있게 한다.  storyText를 직접적으로 변경하고 싶었다면 새로운 이야기('story')를 한번 만드는 것이  가능할 수 있었다.
  2. 세 개의 새로운  변수  xItem, yItem, 와 zItem를 만들고 이 세 개의 어레이를 이용하여 randomValueFromArray() 를 소환한 결과('result')를 이 변수들과 같게 만든다. ((각 경우의 결과('result')는 소환되어진 각각의 어레이에서 나온 랜덤 아이템이 될 것이다.)). 예를 들어 randomValueFromArray(insertX)을 작성함으로써  insertX 에서 문자열의 하나를 랜덤하게 리턴할수 있다.
  3. 그 다음으로  newStory 문자열에 있는 세 개의 placeholders— :insertx:, :inserty:, and :insertz: —에 대신에 xItem, yItem, 와 zItem  문자열로 대치하라. 이 문자열 메소드는 각각의 경우에 newStory와 같게 만드는 메소드를 소환하는 것을 도와준다(,so each time it is called, newStory is made equal to itself, but with substitutions made; 이 영어부분 이해 안되어 번역안됨). 그러므로 버튼이 눌러질때마다 이  placeholder는 꾸며진('silly') 문자열로 랜덤하게 교체된다. As a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.
  4. 첫번째 if 블록에서, 또다른 문자열 메소드를 소환하는데 이 소환은  newStory 문자열에서 찾아지는 이름 'Bob'을  name 변수로 바꾸는 것이다.. 이 블록에서 we are saying "If a value has been entered into the customName 텍스트에 갑(value)가 입력되면, 스토리안의 'Bob'을 'custom name'으로 변경한다."
  5. 두번째  if 블록문에서는 uk 라디오 버튼이 선택되어졌는지 확인한다. uk 라디오 버튼이 눌려졌다면, 이야기('story') 상의 무게('weight')와 온도('temperature') 값 들인  파운드('pounds')와 화씨온도(Fahrenheit) 를 'stones'과 섭씨온도('centigrade')를 바꾸어야 한다. 필요한 것은 아래와 같다.:
    1. 파운드(pound)를  stone, 화씨온도(Fahrenheit) 를 섭씨온도(centigrade)로 변환하는 공식을 참조하라.
    2.  weight 변수를 정의하는 라인에서는, 숫자 300를 300 파운드를 변환한 계산값으로 바꾸고 여기에 문자 stone을 추가하라.  Math.round() 의 전체 결과값 끝에 ' stone' 을 보간한다(concatenate).
    3.  temperature 변수를 정의하는 라인에서는 , 숫자 94를  화씨(Fahrenheit) 94도를 섭씨온도(centigrade)로 변환하는 계산값으로 바꾸로 여기에 섭씨온도(centigrade) 문자를 추가하라.  Math.round() 전체 결과값에 끝에  ' centigrade를 보간한다.(concatenate). 
    4. 두 변수 정의문 바로 밑에, '94 화씨온도('farenheit')를  temperature 변수로,  '300 pounds'을 weight 변수의 내용으로 바꾸는 두줄의 문자열 변환라인을 추가한다 .
  6. 마지막으로, 끝의  두줄에서  story 변수의 textContent 속성(property)을to newStory와 같게 만들라

Hints and tips

  • You don't need to edit the HTML in any way, except to apply the JavaScript to your HTML.
  • If you are unsure whether the JavaScript is applied to your HTML properly, try removing everything else from the JavaScript file temporarily, adding in a simple bit of JavaScript that you know will create an obvious effect, then saving and refreshing. The following for example turns the background of the <html> element red — so the entire browser window should go red if the JavaScript is applied properly:
    document.querySelector('html').style.backgroundColor = 'red';
  • Math.round() is a built-in JavaScript method that simply rounds the result of a calculation to the nearest whole number.
  • There are three instances of strings that need to be replaced. You may repeat the replace() method multiple times, or you can use regular expressions. For instance, var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like'); will replace all instances of 'love' to 'like'. Remember, Strings are immutable!

Assessment

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread for this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

In this module