이 랩에서는 참가자들이 JavaScript 의 기본적인 산술 연산을 탐구하며, 다양한 수학 연산자를 사용하여 숫자를 조작하는 방법을 배우게 됩니다. 이 랩은 HTML 환경 설정, 덧셈, 뺄셈, 곱셈, 나눗셈과 같은 기본적인 산술 연산 구현, 그리고 모듈로 (modulo) 및 증가/감소 연산자와 같은 더 진보된 개념 이해를 포함하는 포괄적인 여정을 제공합니다.
참가자들은 임베디드 JavaScript 섹션이 있는 HTML 파일을 생성하는 것으로 시작하여, 다양한 산술 기법을 연습하면서 점진적으로 기술을 쌓아갈 것입니다. 실습 코딩 연습을 통해 학습자들은 수학적 계산 수행, 연산자 우선순위 이해, 그리고 JavaScript 프로그래밍에 필수적인 기술인 전위 및 후위 증가/감소 연산을 탐구하는 실질적인 경험을 얻게 될 것입니다.
이 단계에서는 JavaScript 산술 연산을 수행하기 위한 기반이 될 기본적인 HTML 파일을 생성합니다. 간단한 HTML 구조를 설정하고 기본적인 산술 기능을 시연하기 위해 임베디드 JavaScript 섹션을 포함할 것입니다.
먼저, WebIDE 를 열고 ~/project 디렉토리로 이동합니다. 파일 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "New File"을 선택하여 arithmetic.html이라는 새 파일을 생성합니다.
다음 HTML 코드를 복사하여 arithmetic.html 파일에 붙여넣습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JavaScript Arithmetic Operations</title>
</head>
<body>
<h1>JavaScript Arithmetic Operations</h1>
<script>
// We'll add our JavaScript code here in this section
console.log("HTML file is ready for arithmetic operations!");
</script>
</body>
</html>이 HTML 파일의 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것이 HTML5 문서임을 선언합니다.<head> 섹션에는 문서에 대한 메타데이터가 포함되어 있습니다.<body>에는 보이는 내용이 포함되어 있습니다.<script> 태그는 JavaScript 코드를 작성할 위치입니다.파일이 올바르게 생성되었는지 확인하려면 브라우저의 개발자 콘솔에서 파일을 열 수 있습니다. 초기 console.log()는 파일이 제대로 설정되었는지 확인하는 데 도움이 됩니다.
이 단계에서는 기본적인 수학 연산자: 덧셈 (+), 뺄셈 (-), 곱셈 (*), 나눗셈 (/) 을 사용하여 JavaScript 에서 기본적인 산술 연산을 수행하는 방법을 배우게 됩니다.
이전 단계에서 생성한 arithmetic.html 파일을 열고 <script> 섹션을 수정하여 다음 코드를 포함합니다.
<script>
// Addition Operator (+)
let sum = 10 + 5;
console.log("Addition: 10 + 5 =", sum);
// Subtraction Operator (-)
let difference = 20 - 7;
console.log("Subtraction: 20 - 7 =", difference);
// Multiplication Operator (*)
let product = 6 * 4;
console.log("Multiplication: 6 * 4 =", product);
// Division Operator (/)
let quotient = 25 / 5;
console.log("Division: 25 / 5 =", quotient);
</script>이 HTML 파일을 웹 브라우저에서 열고 브라우저의 개발자 콘솔을 확인하면 다음과 같은 예시 출력을 볼 수 있습니다.
Addition: 10 + 5 = 15
Subtraction: 20 - 7 = 13
Multiplication: 6 * 4 = 24
Division: 25 / 5 = 5이해해야 할 주요 사항:
+ 연산자는 두 숫자를 더합니다.- 연산자는 왼쪽 피연산자에서 오른쪽 피연산자를 뺍니다.* 연산자는 두 숫자를 곱합니다./ 연산자는 왼쪽 피연산자를 오른쪽 피연산자로 나눕니다.변수를 사용하여 연산을 수행하고 정수 및 부동 소수점 숫자를 포함하여 다양한 유형의 숫자를 혼합할 수도 있습니다.
이 단계에서는 두 가지 중요한 JavaScript 산술 연산자, 즉 나머지 연산자 (%) 와 증가/감소 연산자 (++, --) 에 대해 배우게 됩니다.
arithmetic.html 파일을 열고 <script> 섹션을 다음 코드로 업데이트합니다.
<script>
// Modulo Operator (%)
// Returns the remainder of a division
let remainder = 17 % 5;
console.log("Modulo: 17 % 5 =", remainder);
// Increment Operator (++)
let x = 10;
x++; // Increases x by 1
console.log("Increment: x++ =", x);
// Decrement Operator (--)
let y = 20;
y--; // Decreases y by 1
console.log("Decrement: y-- =", y);
// More modulo examples
console.log("Even/Odd Check: 15 % 2 =", 15 % 2);
console.log("Even/Odd Check: 16 % 2 =", 16 % 2);
</script>이 HTML 파일을 웹 브라우저에서 열고 개발자 콘솔을 확인하면 다음과 같은 예시 출력을 볼 수 있습니다.
Modulo: 17 % 5 = 2
Increment: x++ = 11
Decrement: y-- = 19
Even/Odd Check: 15 % 2 = 1
Even/Odd Check: 16 % 2 = 0이해해야 할 주요 사항:
%는 나눗셈 후 나머지를 반환합니다.++는 변수를 1 씩 증가시킵니다.--는 변수를 1 씩 감소시킵니다.나머지 연산자는 특히 다음과 같은 경우에 유용합니다.
이 단계에서는 JavaScript 에서 접두사 및 접미사 증가/감소 연산자의 차이점을 배우게 됩니다. 이러한 연산자는 비슷해 보일 수 있지만, 표현식에서 사용될 때 다르게 동작합니다.
arithmetic.html 파일을 열고 <script> 섹션을 다음 코드로 업데이트합니다.
<script>
// Postfix Increment (x++)
let a = 5;
let b = a++;
console.log("Postfix Increment:");
console.log("a =", a); // a is incremented after the value is assigned
console.log("b =", b); // b gets the original value of a
// Prefix Increment (++x)
let x = 5;
let y = ++x;
console.log("\nPrefix Increment:");
console.log("x =", x); // x is incremented before the value is assigned
console.log("y =", y); // y gets the incremented value of x
// Similar concept applies to decrement operators
let p = 10;
let q = p--;
console.log("\nPostfix Decrement:");
console.log("p =", p); // p is decremented after the value is assigned
console.log("q =", q); // q gets the original value of p
let m = 10;
let n = --m;
console.log("\nPrefix Decrement:");
console.log("m =", m); // m is decremented before the value is assigned
console.log("n =", n); // n gets the decremented value of m
</script>이 HTML 파일을 웹 브라우저에서 열고 개발자 콘솔을 확인하면 다음과 같은 예시 출력을 볼 수 있습니다.
Postfix Increment:
a = 6
b = 5
Prefix Increment:
x = 6
y = 6
Postfix Decrement:
p = 9
q = 10
Prefix Decrement:
m = 9
n = 9이해해야 할 주요 사항:
x++: 원래 값을 반환한 다음 증가시킵니다.++x: 먼저 증가시킨 다음 새 값을 반환합니다.x-- 및 --x에도 적용됩니다.이 단계에서는 여러 산술 연산을 결합하여 더 복잡한 계산을 만드는 방법을 배우게 됩니다. 연산자를 결합하는 다양한 방법을 살펴보고 JavaScript 가 연산 순서를 처리하는 방식을 보여줍니다.
arithmetic.html 파일을 열고 <script> 섹션을 다음 코드로 업데이트합니다.
<script>
// Combining multiple arithmetic operations
let result1 = 10 + 5 * 2;
console.log("Result 1 (10 + 5 * 2):", result1);
// Using parentheses to change order of operations
let result2 = (10 + 5) * 2;
console.log("Result 2 ((10 + 5) * 2):", result2);
// Complex calculation with multiple operators
let x = 15;
let y = 7;
let complexCalc = (x % 4) + y * 2 - x++ / 3;
console.log("Complex Calculation:", complexCalc);
// Combining increment/decrement with other operations
let a = 5;
let b = 3;
let mixedCalc = ++a + b-- * 2;
console.log("Mixed Calculation (++a + b-- * 2):", mixedCalc);
console.log("a after calculation:", a);
console.log("b after calculation:", b);
// Practical example: Calculating average
let score1 = 85;
let score2 = 92;
let score3 = 78;
let averageScore = (score1 + score2 + score3) / 3;
console.log("Average Score:", averageScore);
</script>이 HTML 파일을 웹 브라우저에서 열고 개발자 콘솔을 확인하면 다음과 같은 예시 출력을 볼 수 있습니다.
Result 1 (10 + 5 * 2): 20
Result 2 ((10 + 5) * 2): 30
Complex Calculation: 9
Mixed Calculation (++a + b-- * 2): 11
a after calculation: 6
b after calculation: 2
Average Score: 85이해해야 할 주요 사항:
이 랩에서는 참가자들이 JavaScript 산술 연산을 위한 기본적인 HTML 파일을 설정하고 기본적인 수학적 계산을 탐구하는 방법을 배웠습니다. 이 랩은 학습자들이 임베디드 JavaScript 섹션이 있는 HTML 문서를 만들도록 안내하여 더하기 (+), 빼기 (-), 곱하기 (*), 나누기 (/) 와 같은 연산자를 사용하여 필수적인 산술 기술을 연습할 수 있도록 했습니다.
학습 과정은 기본적인 HTML 구조를 설정하는 것부터 모듈로 (modulo), 증가 (increment), 감소 (decrement) 연산자를 탐구하는 것을 포함한 다양한 산술 연산을 구현하는 것으로 진행되었습니다. 참가자들은 다양한 연산자 변형을 직접 경험하고, JavaScript 에서 산술 연산을 결합하고 숫자 값을 효과적으로 조작하는 방법을 이해했습니다.
