Homework 2 : ASCII Animation

이 숙제는 JavaScript 의 이해와 HTML 사용자 인터페이스와의 상호 작용을 테스트합니다.
다음 웹 페이지의 모양과 동작이 일치하도록 제출물을 작성해야 합니다 (스크린 샷은 Windows의 Firefox에서 켑쳐된 것으로, 당신의 시스템에서는 다소 다를 수 있습니다.):

기본 골격 파일 anni.html 을 수정하여 ASCII Animations 을 생성하고/보기 위한 사용자 인터페이스(UI)를 가진
완성된 anni.html 페이지를 만드는 것입니다
당신의 페이지에는 페이지를 스타일링할 CSS 스타일 시트를 <head> 섹션에 만들어 넣습니다
페이지를 만든 후에는 UI 컨트롤을 클릭하면 해당 동작이 발생하도록 <head> 섹션 자바스크립트 코드를 작성하여 UI 가 상호 작용을 하도록 해야합니다.
최종적으로는 aani.html 파일 하나만을 제출해 야합니다

외관의 세부 사항:

페이지는 ASCII Animation 이라는 title 을 가져야 합니다.
페이지가 다음과 같은 JavaScript 에 연결되어야 합니다. http://jun.hansung.ac.kr/CWP/examples/sample.js
전체 페이지는 #CCCCFF 의 배경 색상을 가집니다.
페이지의 모든 텍스트에 대한 선호되는 글꼴은 시스템에 사용할 수있는 기본 sans-serif 글꼴로 크기 14pt, bold 입니다.
페이지의 맨 위에 중앙 정렬된 32pt bold 글씨로 제 목을 포함합니다.
제목 내용 영역 및 페이지의 다른 이웃 내용 사이에 margin 이 없습니다.
페이지의 제목 아래에는 80 열 및 20 행 크기의 중 앙정렬된 text area 가 오며, 너비는 페이지 크기의 90% 와 높이는 400px 로 한다.
처음에는 12pt bold monospace 글꼴을 사용합니다.
CSS width/height 속성은 텍스트 상자의 크기를 설정하는 것입니다, 하지만 페이지에 대한 유효성을 검사를 위해서 텍스트 영역 HTML 요소의 rows/cols 속성을 삽입해야합니다.
텍스트 상자 아래는 몇 가지 필드 세트로 그룹진 컨트롤 세트가 온다.

각각을 5px black border (10px border radius) 로 둘르며, 상단에 레이블이 있게 합니다
필드 세트들이 수평 행에 표시되도록 하려면, 요소의 visibility 및 display 속성을 사용하시오.
필드 세트의 수직 정렬을 설정하여 꼭대기가 줄 지어 있게 하십시오.
text area 및 control field 세트는 수평에서 중심에 오도록 한다.

동작 세부사항:

다음은 페이지의 하단에 컨트롤의 그룹과 각 컨트롤의 동작입니다. (참고: 페이지에서 form 태그를 사용하지 마시오.)

Play 콘트롤:

Start:

클릭하면 애니메이션이 시작.
페이지가 정지 상태 일 때, 애니메이션의 모든 프레임을 볼 수 있게 합니다.
프레임들은 5 개의 equal("=") 사인과 줄 바꿈 ("\n") 문자로 분리됩니다. ("=====\n")
애니메이션이 시작되면, 텍스트 상자에 현재 어떤 텍스트들도 애니메이션의 프레임을 만들기위해 분리됩니다.
애니메이션 되는 동안, 첫 번째 프레임부터 시작하여 한 순간에 하나의 프레임이 보여집니다.
기본적으로 애니메이션이 매 250 milli-second 마다 프레임을 변경합니다.
애니메이션의 마지막 프레임에 도달하면, 다시 돌아가 반복하여, 무한 반복합니다.
(자바 스크립트 타이머, setInterval() 함수를 사용하여 애니메이션을 구현해야합니다.)

Stop:

클릭하면 진행 중인 애니메이션을 정지합니다.
애니메이션이 중지되면 애니메이션이 시작하기 직전의 상자에 있는 텍스트를 상자에 반환합니다.

Animation:

ASCII 애니메이션의 드롭 다운 목록.
애니메이션 중 하나가 선택되면(onchange), 주 text area 는 선택 된 애니메이션의 모든 텍스트를 표시합니다.
사용 가능한 선택 사항은 다음과 같습니다 : Blank, Exercise, Juggler, Bike, Dive, MyAnni.
처음에는 Blank 애니메이션이 선택되고, 텍스트 입력 상자에는 텍스트가 표시되지 않는다.
당신의 anni.html 페이지는 제공된 파일 sample.js에 연결되어야 합니다.
sample.js은 EXERCISE, JUGGLER , BIKE, 와 DIVE 라는 전역 문자열 변수로 animations를 선언합니다.
이 파일을 편집해야 하지만 anni.js 파일은 이러한 변수를 참조 할 수 있습니다.
예를 들어, 페이지에 id=" myTextArea" 인 텍스트 영역이 있는 경우 : document.getElementById("mytextarea").value = JUGGLER;
제공된 sample.js 파일은 인덱스에서 ANIMATIONS 이라는 이름의 전 역 변수 배열을 정의하며, 이는 "Bike"와 "Exercise" 과 같은 애니메이션의 이름과 동일한 문자열인 인덱스를 해당 이미지에 대한 전체 애니메이션 텍스트를 나타내는 긴 문자열 값에 매핑해준다.
이러한 배열을 사용하면 중복을 방지 할 수 있습니다. 다음은 애니메이션의 배열을 사용하는 간단한 예입니다:
var whichOne = "Juggler";
document.getElementById("mytextarea").value = ANIMATIONS[whichOne];
사용자가 새 것으로 변경하기 전에 기존의 애니메이션을 중지한다고 가정합니다.
여러분 자신 만의 애니메이션을 만들어 MyAnni 라는 이름으로 추가하시오.

Font Size:

font sizes 의 드롭 다운 목록.
font sizes 중 하나가 선택 될 때, 바로 text area의 본문에서 font size 를 설정
드롭 다운 목록에 나열된 font sizes 및 설정 해당 font size 는 다음과 같습니다 :

Tiny (7pt), Small (10pt), Medium (12pt), Large (16pt), Extra Large (24pt), XXL (32pt)

처음에는 Medium 이 선택되고, 텍스트의 크기는 12pt 로 하시오.
애니메이션이 재생되는 중에 이러한 버튼 하나가 클릭된 경우, 글꼴 크기가 즉시 변경됩니다.
드롭 다운 목록에서 각 옵션에 값 속성을 설정함으로써 긴 if/else 문장을 방지 할 수 있습니다.

Speed:

"Turbo", "Normal", 과 "Slo-Mo"로 표시된 세 개의 라디오 버튼을 포함합니다.
버튼 하나가 클릭되면 박스가 체크되고 애니메니션의 속도가 변하게 된다.
Turbo는 50ms의 지연을 사용하여, Normal 은 250ms이 며, Slo-Mo 에서 1500ms입니다.
처음에는 Normal 버튼을 체크하고 지연은 250ms입 니다.
애니메이션이 재생되는 중에 버튼을 클릭하는 경우, 변경이 즉각적으 로 일어나야한다 (사용자가 변화를 확인하기 위해 애니메이션을 중지하고 다시 시작하지 말아야 합니다)
상자를 선택하는 것이 애니메이션이 아직 시작되지 않았을 경우 시작되는 원인이 되어서는 않된다.
또한 그것이 프레임에 표시되는 것을 재설정 안된다. 그냥 바로 지연을 변경해야 합니다.

Hint : radio button 이벤트 처리.

HTML	Speed : <label><input id="slow" name="speed" value="800" type="radio"> Slow </label> <label><input id="normal" name="speed" value="250" checked="checked" type="radio"> Normal </label> <label><input id="fast" name="speed" value="50" type="radio"> Fast</label>
JavaScript	window.onload = function() { document.getElementById("slow").onclick = changeSpeed; document.getElementById("normal").onclick = changeSpeed; document.getElementById("fast").onclick = changeSpeed; }; function changeSpeed() { speed = this.value; // your answer should be here }

Control 활성(Enabling)/비활성(Disabling):

지정된 시간에 사용자가 클릭 할 수 없도록, 요소가 사용되지 않게 GUI를 수정합 니다.
처음과 애니메이션이 진행되지 않을 때마다 버튼을 비활성화 되어야합니다.
애니메이션이 진행되는 경우, Start 과 animations 의 선택 상자가 비활성화 되어야합니다.
Size box 와 Speed 라디오 버튼은 항 상 활성화되어 있어야합니다.
disabled 속성으로 enable 또는 disable 을 콘트롤 하시오.
예를 들어, customerlist 라는 id를 갖는 제어를 비활성되도록 설정하려면 :
document.getElementById("customerlist").disabled = true;