이 실력 테스트의 목적은 여러분이 우리의 함수 — 코드 재사용, 함수 만들기, 그리고 함수 반환 값 문서를 이해했는지 평가하기 위함입니다.
참고: 아래의 인터랙티브 에디터에서 해답을 시도해 볼 수도 있지만, 과제를 하기 위해 코드를 다운로드하고 CodePen, jsFiddle, 또는 Glitch와 같은 온라인 툴(tool)을 사용하는 것이 도움이 될 지도 모릅니다.
만약 막히면, 도움을 요청하세요 — 이 페이지 아래의 {{anch("Assessment or further help")}} 섹션을 보세요.
참고: 아래의 예제에서, 만약 코드에 오류가 있다면, 답을 찾는 걸 돕기 위해 페이지의 결과 패널에 (또는 다운로드한 경우, 브라우저의 JavaScript 콘솔에) 오류가 출력될 것입니다.
아래의 몇몇 문제들은 여러분에게 문제 해결을 위해서 몇몇 DOM 조작 코드를 작성하기를 요구합니다 — 새로운 HTML 요소 생성하기, 특정한 문자열 값과 동일한 텍스트 콘텐츠 설정하기, 그리고 페이지에 존재하는 요소 내부에 중첩하기와 같은 — 모두 JavaScript를 통해서.
우리는 이것을 아직 이 코스에서 분명하게 가르치지 않았지만, 여러분은 이것을 사용하는 몇몇 예제를 보았고, 우리는 여러분이 문제에 성공적으로 답하기 위해 어떤 DOM API들이 필요한지에 대해 검색하기를 원합니다. 좋은 시작점은 우리의 문서 조작하기(Manipulating documents) 튜토리얼입니다.
첫 번째 과제에서, 여러분은 제공된 배열 (names)에서 무작위 이름을 제공된 단락(para)에 출력하고, 그리고서 한 번만 실행되는 간단한 함수 — chooseName() — 를 만들어야 합니다.
완성된 예제를 다시 만들기 위해 아래의 코드를 업데이트해 보세요:
{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions1.html", '100%', 400)}}
여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.
우리의 두 번째 함수에 관계된 과제에서, 여러분은 제공된 <canvas>에 (참조 변수 canvas, context는 ctx에서 이용가능), 다섯 개의 제공된 입력 변수를 기반으로 하여, 직사각형을 그리는 함수를 만들 필요가 있습니다.
x — 직사각형의 x 좌표.y — 직사각형의 y 좌표.width — 직사각형의 너비.height — 직사각형의 높이.color — 직사각형의 색깔.인터랙티브 에디터의 경우 코드가 업데이트될 때, 많은 직사각형들이 다른 직사각형 위에 그려지지 않도록, 여러분은 그리기 전에 캔버스를 지우기를 원할 것입니다.
완성된 예제를 다시 만들기 위해서 아래의 코드를 업데이트해 보세요:
{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions2.html", '100%', 400)}}
여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.
이 과제에서는, 여러분은 과제 1에서 제기된 문제를 개선시킬 목적으로 이 과제에 다시 돌아왔습니다. 우리가 여러분이 만들기를 원하는 세 가지 개선점은:
random()으로 리팩토링하는데, 이 함수는 매개변수로서 무작위 숫자가 사이에 위치할 두 기준점을 취하고, 결과를 반환합니다.chooseName() 함수가 무작위 숫자 함수를 사용하고, 매개변수로서 선택할 배열을 취하고 (함수를 더 적응성 있게 만듭니다), 결과를 반환하도록 함수를 업데이트하세요.para)의 textContent에 출력하세요.완성된 예제를 다시 만들기 위해 아래의 코드를 업데이트해 보세요:
{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions3.html", '100%', 400)}}
여러분의 에디터나 온라인 에디터에서 작업하기 위해서 이 과제의 시작점을 다운로드하세요.
여러분은 이 예제들을 위의 인터랙티브 에디터에서 연습할 수 있습니다.
만약 여러분의 작업을 평가받고 싶으시거나 막혀서 도움을 요청하기를 원하신다면: