diff --git a/bouncecode.yml b/bouncecode.yml new file mode 100644 index 00000000..52085ba4 --- /dev/null +++ b/bouncecode.yml @@ -0,0 +1,858 @@ +name: javascripting + +install: + - curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - + - sudo apt-get install -y nodejs + - npm install --global javascripting + +copy: + - README.md + +information: + title: JAVASCRIPTING + +exercises: + - + section: 출력과 변수 + lecture: + - + subject: 소개 + active: + - introduction.js + run: + - node introduction.js + test: + - javascripting select introduction + - javascripting run introduction.js + - javascripting verify introduction.js + cmd: + - touch introduction.js + - javascripting select introduction + - bash + guide: | + 편집기에서 `introduction.js` 파일을 열고 다음 내용을 넣으세요. + + ```js + console.log('hello'); + ``` + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: 변수 + active: + - variables.js + run: + - node variables.js + test: + - javascripting select variables + - javascripting run variables.js + - javascripting verify variables.js + cmd: + - touch variables.js + - javascripting select variables + - bash + guide: | + 변수는 특정 값을 참조하는 이름입니다. 변수는 `var`와 변수의 이름으로 선언합니다. + + 예제를 보세요. + + ```js + var example; + ``` + + 위 변수는 **선언**되었지만, 정의되지는 않았습니다.(아직 특정 값을 참조하지 않았습니다.) + + 특정 값을 참조하게 만든, 변수를 정의하는 예제입니다. + + ```js + var example = 'some string'; + ``` + + # 주의 + + 변수는 `var`를 사용해 **선언**하고 등호(`=`)를 이용해 참조하는 값을 넣어 **정의**합니다. "변수는 값과 같게 만든다."라고 읽을 수 있습니다. + + ## 도전 과제 + + `variables.js`라는 파일에 `example`라는 변수를 선언합니다. + + **`example` 변수를 `'some string'` 값과 같게 만듭니다.** + **Make the variable `example` equal to the value `'some string'`.** + + 그리고 `console.log()`로 `example` 변수를 콘솔에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + section: 문자열 + lecture: + - + subject: 문자열 + active: + - strings.js + run: + - node strings.js + test: + - javascripting select strings + - javascripting run strings.js + - javascripting verify strings.js + cmd: + - touch strings.js + - javascripting select strings + - bash + guide: | + **문자열**은 따옴표로 감싸진 값입니다. + + 이는 작은따옴표도 될 수 있고 큰따옴표도 될 수 있습니다. + + ```js + 'this is a string' + + "this is also a string" + ``` + + ## 주의 + + 일관성을 유지하도록 노력해보세요. 이 워크숍에서는 작은따옴표만 사용하도록 하겠습니다. + + ## 도전 과제 + + `strings.js`라는 파일에 `someString`이라는 변수를 만드세요. 이렇게 하면 됩니다. + + ```js + var someString = 'this is a string'; + ``` + + `console.log`를 사용해 **someString** 변수를 터미널에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: 문자열 길이 + active: + - string-length.js + run: + - node string-length.js + test: + - javascripting select string_length + - javascripting run string-length.js + - javascripting verify string-length.js + cmd: + - touch string-length.js + - javascripting select string_length + - bash + guide: | + 문자열에 얼마나 많은 문자가 있는지 알아야 할 때가 자주 있을 겁니다. + + 이는 `.length` 속성을 이용하면 알 수 있습니다. 다음 예제를 보세요. + + ```js + var example = 'example string'; + example.length + ``` + + ## 주의 + + `example`과 `length` 사이에 마침표가 있는 것을 확인하세요. + + 위의 코드는 문자열 안에 있는 전체 문자의 **수**를 반환합니다. + + ## 도전 과제 + + `string-length.js`라는 파일에 `example`이라는 변수를 선언합니다. + + **`example` 변수에 `'example string'` 문자열을 대입합니다.** + + `console.log`를 이용해 문자열의 **길이**를 터미널에 출력하세요. + + **파일을 저장하고 프로그램이 올바른지 실행하세요.** + - + subject: 문자열 뒤집기 + active: + - revising-strings.js + run: + - node revising-strings.js + test: + - javascripting select revising_strings + - javascripting run revising-strings.js + - javascripting verify revising-strings.js + cmd: + - touch revising-strings.js + - javascripting select revising_strings + - bash + guide: | + 문자열의 내용을 바꿀 경우가 종종 생깁니다. + + 문자열은 내용을 조작하고 살펴보는 내장 기능을 가지고 있습니다. + + `.replace()` 메소드를 사용하는 예제입니다. + + ```js + var example = 'this example exists'; + example = example.replace('exists', 'is awesome'); + console.log(example); + ``` + + `example` 변수가 참조하는 값을 바꾸는 것에 주의하세요. 등호를 다시 사용해야 합니다. 이번에는 `example.replace()` 메소드를 등호의 오른편에 두었습니다. + + ## 도전 과제 + + `revising-strings.js`라는 파일에 `'pizza is alright'` 문자열을 참조하는 `pizza`라는 변수를 정의합니다. + + `.replace()` 메소드를 사용해 `alright`을 `wonderful`로 바꿉니다. + + `console.log()`를 사용해 `.replace()` 메소드의 결과를 터미널에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + section: 숫자 + lecture: + - + subject: 숫자 + active: + - numbers.js + run: + - node numbers.js + test: + - javascripting select numbers + - javascripting run numbers.js + - javascripting verify numbers.js + cmd: + - touch numbers.js + - javascripting select numbers + - bash + guide: | + 숫자는 `2`, `14`, `4353` 같은 정수이거나 십진수이거나 `3.14`, `1.5`, `100.7893423` 같은 실수일 수 있습니다. + 문자열과 다르게 숫자는 따옴표로 감쌀 필요가 없습니다. + + ## 도전 과제 + + `numbers.js`라는 파일에 정수 `123456789`를 참조하는 `example`이라는 변수를 선언하세요. + + `console.log()`를 사용해 숫자를 터미널에 출력하세요. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: 숫자 반올림 + active: + - rounding-numbers.js + run: + - node rounding-numbers.js + test: + - javascripting select rounding_numbers + - javascripting run rounding-numbers.js + - javascripting verify rounding-numbers.js + cmd: + - touch rounding-numbers.js + - javascripting select rounding_numbers + - bash + guide: | + `+`, `-`, `*`, `/`, `%` 같은 익숙한 연산자를 사용해 기본적인 연산을 할 수 있습니다. + + 더 복잡한 연산은 `Math` 객체를 사용해 할 수 있습니다. + + 이 과제에서는 `Math`를 사용해 숫자를 반올림 해보겠습니다. + + ## 도전 과제 + + `rounding-numbers.js`라는 파일에 실수 `1.5`를 참조하는 `roundUp`라는 변수를 선언합니다. + + `Math.round()` 메소드를 이용해 숫자를 반올림합니다. 이 메소드는 숫자를 가까운 정수로 올리거나 내립니다. + + `Math.round()`을 사용하는 예입니다. + + ```js + Math.round(0.5); + ``` + + `roundUp` 변수를 인자로 `Math.round()` 메소드에 넘긴 결과를 참조하는 `rounded`라는 두 번째 변수를 정의합니다. + + `console.log()`를 사용해 숫자를 터미널에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: 숫자에서 문자열으로 + active: + - number-to-string.js + run: + - node number-to-string.js + test: + - javascripting select number_to_string + - javascripting run number-to-string.js + - javascripting verify number-to-string.js + cmd: + - touch number-to-string.js + - javascripting select number_to_string + - bash + guide: | + 가끔 숫자를 문자열로 변경해야 할 때가 있습니다. + + 그런 경우에 `.toString()` 메소드를 사용하면 됩니다. 예제를 보세요. + + ```js + var n = 256; + n = n.toString(); + ``` + + ## 도전 과제 + + `number-to-string.js`라는 파일에 숫자 `128`을 참조하는 `n`이라는 이름의 변수를 선언합니다. + + `n` 변수에 `.toString()` 메소드를 호출합니다. + + `console.log()`를 사용해 `.toString()` 메소드의 결과를 터미널에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + section: 표현식 + lecture: + - + subject: IF 구문 + active: + - if-statement.js + run: + - node if-statement.js + test: + - javascripting select if_statement + - javascripting run if-statement.js + - javascripting verify if-statement.js + cmd: + - touch if-statement.js + - javascripting select if_statement + - bash + guide: | + 지정된 조건을 기반으로, 조건문은 프로그램의 흐름 제어에 사용됩니다. + + 조건문은 이렇습니다. + + ```js + if (n > 1) { + console.log('the variable n is greater than 1.'); + } else { + console.log('the variable n is less than or equal to 1.'); + } + ``` + + 괄호 안에 반드시 논리 구문을 넣어야 합니다. 구문의 결과는 true나 false로 끝나야 합니다. + + else 블록은 생략 가능하며 구문이 false일 경우 실행될 코드가 들어갑니다. + + ## 도전 과제 + + `if-statement.js`라는 파일에 `fruit`라는 이름의 변수를 선언합니다. + + `fruit` 변수가 문자열 타입의 **orange**라는 값을 참조하도록 하세요. + + 그리고 `console.log()`로 `fruit`의 값의 길이가 5보다 크면 **"The fruit name has more than five characters."**를 출력하고, 그렇지 않은 경우엔 "**The fruit name has five characters or less.**"를 출력하세요. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: FOR 반복문 + active: + - for-loop.js + run: + - node for-loop.js + test: + - javascripting select for_loop + - javascripting run for-loop.js + - javascripting verify for-loop.js + cmd: + - touch for-loop.js + - javascripting select for_loop + - bash + guide: | + for 반복문은 이렇게 생겼습니다. + + ```js + for (var i = 0; i < 10; i++) { + // log the numbers 0 through 9 + console.log(i) + } + ``` + + `i` 변수는 반복문 변수가 몇 번이나 실행 되었는지 추적하는데 사용합니다. + + `i < 10;` 구문은 반복문의 한계를 가리킵니다. + 이 반복문은 `i`가 `10`보다 작을 때만 계속됩니다. + + `i++` 구문은 반복할 때마다 `i`를 증가시킵니다. + + ## 도전 과제 + + `for-loop.js`라는 파일에 `total`이라는 변수를 선언하고 그 변수를 숫자 `0`과 같게 합니다. + + `limit`이라는 이름의 두 번째 변수를 선언하고 숫자 `10`과 같게 합니다. + + 변수 `i`가 0부터 시작해 1씩 증가하는 for 반복문을 만듭니다. 이 반복문은 `i`가 `limit`보다 작을 동안만 실행됩니다. + + 각 반복마다 숫자 `i`를 `total` 변수에 더합니다. 이렇게 하려면, 이 구문을 사용하시면 됩니다. + + ```js + total += i; + ``` + + for 반복문 다음에, `console.log()`를 사용해 `total` 변수를 터미널에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + section: 배열 + lecture: + - + subject: 배열 + active: + - arrays.js + run: + - node arrays.js + test: + - javascripting select arrays + - javascripting run arrays.js + - javascripting verify arrays.js + cmd: + - touch arrays.js + - javascripting select arrays + - bash + guide: | + 배열은 값의 목록입니다. 예를 들면 다음과 같습니다. + + ```js + var pets = ['cat', 'dog', 'rat']; + ``` + + ### 도전 과제 + + `arrays.js`라는 이름의 파일에 `tomato sauce, cheese, pepperoni`의 순서대로 세 개의 문자열을 포함하는 배열을 참조하도록 `pizzaToppings`라는 변수를 선언합니다. + + `console.log()`를 사용해 `pizzaToppings` 배열을 터미널에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: 배열 필터 + active: + - array-filtering.js + run: + - node array-filtering.js + test: + - javascripting select array_filtering + - javascripting run array-filtering.js + - javascripting verify array-filtering.js + cmd: + - touch array-filtering.js + - javascripting select array_filtering + - bash + guide: | + 배열을 조작하는 방법은 여러가지가 있습니다. + + 대표적인 사용법으로 특정 값만 가진 배열로 필터링하는 것이 있습니다. + + 이걸 하기 위해 `.filter()` 메소드를 사용할 수 있습니다. + + 여기에 예제가 있습니다. + + ```js + var pets = ['cat', 'dog', 'elephant']; + + var filtered = pets.filter(function (pet) { + return (pet !== 'elephant'); + }); + ``` + + `filtered` 변수는 이제 `cat`과 `dog`만 가지고 있습니다. + + ## 도전 과제 + + `array-filtering.js`라는 이름의 파일에 밑의 배열을 참조하는 `numbers`라는 변수를 정의합니다. + + ```js + [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; + ``` + + 위에 있는 것처럼, `numbers.filter()`의 결과를 참조하는 `filtered`라는 변수를 선언합니다. + + `.filter()` 메소드에 이렇게 생긴 함수를 넘깁니다. + + ```js + function evenNumbers (number) { + return number % 2 === 0; + } + ``` + + `console.log()`를 사용해 `filtered` 배열을 터미널에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: 배열 값에 접근하기 + active: + - accessing-array-values.js + run: + - node accessing-array-values.js + test: + - javascripting select accessing_array_values + - javascripting run accessing-array-values.js + - javascripting verify accessing-array-values.js + cmd: + - touch accessing-array-values.js + - javascripting select accessing_array_values + - bash + guide: | + 배열 요소는 인덱스 숫자로 접근 할 수 있습니다. + + 인덱스 숫자는 0에서 시작해 "배열의 프로퍼티 길이 - 1"까지 입니다. + + 여기 예제가 있습니다. + + + ```js + var pets = ['cat', 'dog', 'rat']; + + console.log(pets[0]); + ``` + + 위의 코드는 `pet`의 첫 번째 요소인 `cat` 문자열을 출력할 것입니다. + + 배열 요소는 각괄호 표기법을 사용해 접근해야만 합니다. + + `.` 표기법은 유효하지 않습니다. + + 유효한 표기법 + + ```js + console.log(pets[0]); + ``` + + 유효하지 않은 표기법 + ``` + console.log(pets.1); + ``` + + ## 도전 과제 + + `accessing-array-values.js`라는 이름의 파일에 `food`라는 배열을 정의합니다. + ```js + var food = ['apple', 'pizza', 'pear']; + ``` + + + `console.log()`를 사용해 배열의 `두 번째` 값을 터미널에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: 배열을 루프하기 + active: + - looping-through-arrays.js + run: + - node looping-through-arrays.js + test: + - javascripting select looping_through_arrays + - javascripting run looping-through-arrays.js + - javascripting verify looping-through-arrays.js + cmd: + - touch looping-through-arrays.js + - javascripting select looping_through_arrays + - bash + guide: | + 이 도전 과제에서는 **for 반복문**을 사용해 배열에 있는 값의 목록에 접근하고 조작하겠습니다. + + 배열 값에 접근하는 것은 정수를 사용해 할 수 있습니다. + + 배열 안의 각 아이템은 `0`으로 시작하는 숫자로 확인할 수 있습니다. + + 그래서 이 배열의 `hi`는 숫자 `1`로 확인할 수 있습니다. + + ```js + var greetings = ['hello', 'hi', 'good morning']; + ``` + + 이렇게 접근할 수 있습니다. + + ```js + greetings[1]; + ``` + + **for 반복문** 안에서는 숫자 그대로 사용하지 않고 `i` 변수를 각괄호 안에서 사용합니다. + + ## 도전 과제 + + `looping-through-arrays.js`라는 파일에 다음 배열을 참조하는 `pets`라는 이름의 변수를 선언합니다. + + ```js + ['cat', 'dog', 'rat']; + ``` + + for 반복문을 만들어 복수형이 되도록 각 문자열을 변경하세요. + + 루프 안에서 이런 구문을 사용하시면 됩니다. + + ```js + pets[i] = pets[i] + 's'; + ``` + + 루프 뒤에 `console.log()`로 `pets` 배열을 터미널에 출력하세요. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + section: 객체 + lecture: + - + subject: 객체 + active: + - objects.js + run: + - node objects.js + test: + - javascripting select objects + - javascripting run objects.js + - javascripting verify objects.js + cmd: + - touch objects.js + - javascripting select objects + - bash + guide: | + 객체는 배열과 비슷한 값의 목록입니다. 배열과 다른 점은 정수 대신 키를 사용해 값을 확인하는 점입니다. + + 예제를 보세요. + + ```js + var foodPreferences = { + pizza: 'yum', + salad: 'gross' + }; + ``` + + ## 도전 과제 + + `objects.js`라는 파일에 이렇게 `pizza`라는 변수를 정의합니다. + + ```js + var pizza = { + toppings: ['cheese', 'sauce', 'pepperoni'], + crust: 'deep dish', + serves: 2 + }; + ``` + + `console.log()`를 사용해 `pizza` 객체를 터미널에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: 객체 속성 + active: + - object-properties.js + run: + - node object-properties.js + test: + - javascripting select object_properties + - javascripting run object-properties.js + - javascripting verify object-properties.js + cmd: + - touch object-properties.js + - javascripting select object_properties + - bash + guide: | + 배열과 매우 비슷한 방법으로 객체의 속성(객체가 가지고 있는 키와 값)에 접근하고 그를 조작할 수 있습니다. + + **대괄호**를 사용하는 예제입니다. + + ```js + var example = { + pizza: 'yummy' + }; + + console.log(example['pizza']); + ``` + + 위의 코드는 문자열 `'yummy'`를 터미널에 출력합니다. + + 아니면, **점(.) 구문**으로 같은 결과를 얻을 수 있습니다. + + ```js + example.pizza; + + example['pizza']; + ``` + + 위에 있는 두 줄의 코드는 양쪽 다 `yummy`를 반환합니다. + + ## 도전 과제 + + `object-properties.js`라는 파일에 `food`라는 변수를 이렇게 정의합니다. + + ```js + var food = { + types: 'only pizza' + }; + ``` + + `console.log()`를 사용해 `food` 객체의 `types` 속성을 터미널에 출력합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + section: 함수 + lecture: + - + subject: 함수 + active: + - functions.js + run: + - node functions.js + test: + - javascripting select functions + - javascripting run functions.js + - javascripting verify functions.js + cmd: + - touch functions.js + - javascripting select functions + - bash + guide: | + 함수는 입력을 받는 코드의 블록입니다. 그 입력을 처리해서 출력을 만듭니다. + + 여기에 예제가 있습니다. + + ```js + function example (x) { + return x * 2; + } + ``` + + 이렇게 함수를 **호출**하면 숫자 10을 얻을 수 있습니다. + + ```js + example(5) + ``` + + 위의 예제는 `example` 함수가 숫자를 인자(입력)로 받아 그 숫자에 2를 곱한 값을 반환합니다. + + ## 도전 과제 + + `functions.js`라는 파일에 `food`를 인자로 받는 `eat` 함수를 선언합니다. `food`는 문자열이어야 합니다. + + 함수 안에서 `food` 인자를 이렇게 반환합니다. + + ```js + return food + ' tasted really good.'; + ``` + + `console.log()`의 괄호 안에서 문자열 `bananas`를 인자로 하는 `eat()` 함수를 호출합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: 함수 인자 + active: + - function-arguments.js + run: + - node function-arguments.js + test: + - javascripting select function_arguments + - javascripting run function-arguments.js + - javascripting verify function-arguments.js + cmd: + - touch function-arguments.js + - javascripting select function_arguments + - bash + guide: | + 함수는 몇 개의 인자도 받도록 선언할 수 있습니다. 인자는 어떤 타입도 사용 가능합니다. 인자는 문자열, 숫자, 배열, 객체이거나 심지어 다른 함수일 수도 있습니다. + + 여기 예제가 있습니다. + + ```js + function example (firstArg, secondArg) { + console.log(firstArg, secondArg); + } + ``` + + 우리는 두 개의 인자를 가지는 함수를 이렇게 **호출**할 수 있습니다. + + ```js + example('hello', 'world'); + ``` + + 위 예제는 터미널에 `hello world`를 출력할 것입니다. + + ## 도전 과제 + + `function-arguments.js`라는 이름의 파일에 3개의 인자를 받는 `math`라는 이름의 함수를 선언합니다. + + 인자 이름은 참조로만 사용한다는 것을 이해하는 것은 중요합니다. + + 인자들에는 편한 이름을 지으세요. + + `math` 함수는 두 번째와 세 번째 인자를 곱하고, 곱한 값에 첫 번째 인자를 더해 얻은 결과를 출력합니다. + + 그런 이후, `console.log()`의 괄호 안에서 첫 번째 인자로 `53`, 두 번째로 숫자 `61`, 세 번째 인자로 `67`을 받는 `math()`함수를 호출합니다. + + 파일을 저장하고 프로그램이 올바른지 실행하세요. + - + subject: 스코프 + active: + - scope.js + run: + - node scope.js + test: + - javascripting select scope + - javascripting run scope.js + - javascripting verify scope.js + cmd: + - touch scope.js + - javascripting select scope + - bash + guide: | + `스코프`는 접근할 수 있는 변수, 객체, 함수의 집합입니다. + + JavaScript에는 `전역`과 `지역` 두 개의 스코프가 있습니다. 함수 선언 밖에 선언된 변수는 `전역` 변수이고, 그 값은 프로그램 전체에서 접근하고 수정할 수 있습니다. 함수 선언 안에 선언된 변수는 `지역` 변수입니다. 지역 변수는 함수가 실행 될 때마다 만들어지고 파괴되고, 함수 밖의 코드에서 접근할 수 없습니다. + + 다른 함수 안에 선언된 함수(중첩 함수)는 부모 함수의 스코프에 접근 할 수 있습니다. + + 아래 코드의 주석을 잘 읽어보세요. + + ```js + var a = 4; // 전연 변수 아래에 있는 함수에서 접근 가능 + + function foo() { + var b = a * 3; // b는 foo 함수 밖에서 접근할 수 없지만, foo 함수 안에서 + // 선언된 함수에서는 접근 가능 + function bar(c) { + var b = 2; // bar 함수 스코프 안에서 생성한 다른 `b` 변수 + // 새로 만든 `b` 변수를 변경해도 오래된 `b` 변수에는 영향이 없음 + console.log( a, b, c ); + } + + bar(b * 4); + } + + foo(); // 4, 2, 48 + ``` + 즉시 실행하는 함수식(IIFE, Immediately Invoked Function Expression)은 지역 스코프를 만드는 일반적인 패턴입니다. + 예제: + ```js + (function(){ // 함수식은 괄호로 둘러 쌈 + // 변수 선언은 여기서 + // 밖에서 접근할 수 없음 + })(); // 함수는 즉시 실행됨 + ``` + ## 도전 과제: + + `scope.js`라는 파일에 다음 코드를 복사합니다. + ```js + var a = 1, b = 2, c = 3; + + (function firstFunction(){ + var b = 5, c = 6; + + (function secondFunction(){ + var b = 8; + + (function thirdFunction(){ + var a = 7, c = 9; + + (function fourthFunction(){ + var a = 1, c = 8; + + })(); + })(); + })(); + })(); + ``` + + 변수의 `스코프`에 관한 지식을 활용해 다음 코드를 `scope.js` 안의 함수 안에 넣어 `a: 1, b: 8,c: 6`를 출력하게 하세요. + ```js + console.log("a: "+a+", b: "+b+", c: "+c); + ``` + + 파일을 저장하고 프로그램이 올바른지 실행하세요.