LabEx
로그인무료 가입

JavaScript 논리 연산자 탐구

JavaScriptBeginner
지금 연습하기

소개

이 랩에서는 참가자들이 실습 웹 개발 연습을 통해 JavaScript 의 기본적인 논리 연산자를 탐구합니다. 이 랩은 학습자들이 HTML 파일을 생성하고 AND (&&), OR (||), NOT (!) 논리 연산자의 실질적인 데모를 구현하도록 안내하여, 이러한 연산자가 JavaScript 프로그래밍에서 어떻게 작동하는지에 대한 포괄적인 이해를 제공합니다.

단계별 접근 방식을 통해 학생들은 다양한 논리 연산의 결과를 표시하는 대화형 웹 페이지를 설정하여 이러한 연산자가 조건을 평가하고 부울 값을 반환하는 방식을 이해할 수 있습니다. 이 랩은 운전 자격 및 사용자 인증과 같은 실제 시나리오를 사용하여 JavaScript 에서 논리 연산자의 적용을 설명함으로써 실질적인 학습을 강조합니다.

논리 연산자 시연을 위한 HTML 파일 설정

이 단계에서는 JavaScript 논리 연산자를 시연하기 위한 기반이 될 기본 HTML 파일을 생성합니다. 논리 연산을 탐구할 스크립트 섹션이 있는 간단한 웹 페이지 구조를 설정합니다.

WebIDE 를 열고 ~/project 디렉토리로 이동합니다. WebIDE 인터페이스를 사용하여 logical-operators.html이라는 새 파일을 생성합니다.

다음은 사용할 초기 HTML 구조입니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
  </head>
  <body>
    <h1>Exploring Logical Operators in JavaScript</h1>

    <div id="output"></div>

    <script>
      // We'll add our JavaScript logical operator examples here
    </script>
  </body>
</html>

이 HTML 파일의 주요 구성 요소를 살펴보겠습니다.

  • <!DOCTYPE html> 선언은 이것이 HTML5 문서임을 지정합니다.
  • 페이지를 설명하기 위해 제목과 제목을 추가했습니다.
  • <div id="output">은 논리 연산자 결과를 표시하는 데 사용됩니다.
  • <script> 태그는 JavaScript 코드를 작성할 위치입니다.

이 파일을 브라우저에서 열 때의 예시 출력:

Exploring Logical Operators in JavaScript

AND (&&) 논리 연산 구현

이 단계에서는 JavaScript 의 AND (&&) 논리 연산자에 대해 배웁니다. AND 연산자는 두 피연산자 모두 true 일 경우에만 true를 반환하고, 그렇지 않으면 false를 반환합니다.

이전 단계에서 생성한 logical-operators.html 파일을 엽니다. <script> 태그 안에 다음 JavaScript 코드를 추가하여 AND 연산자를 시연합니다.

// AND (&&) Logical Operator Demonstration
function demonstrateAndOperator() {
  let output = document.getElementById("output");

  // Example 1: Simple boolean AND
  let isAdult = true;
  let hasLicense = true;
  let canDrive = isAdult && hasLicense;
  output.innerHTML += `Can drive? ${canDrive}<br>`;

  // Example 2: Comparison AND
  let age = 25;
  let hasValidLicense = age >= 18 && age <= 65;
  output.innerHTML += `Valid driving age? ${hasValidLicense}<br>`;

  // Example 3: Multiple conditions
  let isMember = true;
  let hasDiscount = true;
  let canGetSpecialOffer = isMember && hasDiscount;
  output.innerHTML += `Special offer available? ${canGetSpecialOffer}<br>`;
}

// Call the function when the page loads
demonstrateAndOperator();

AND (&&) 연산자를 자세히 살펴보겠습니다.

  • 두 조건이 모두 true인 경우에만 true를 반환합니다.
  • 첫 번째 예제에서 canDrive는 isAdult와 hasLicense가 모두 true인 경우에만 true입니다.
  • 두 번째 예제는 비교 연산자를 AND 와 함께 사용합니다.
  • 세 번째 예제는 AND 가 여러 부울 조건을 결합하는 방법을 보여줍니다.

브라우저의 예시 출력:

Can drive? true
Valid driving age? true
Special offer available? true

OR (||) 논리 연산 구현

이 단계에서는 JavaScript 의 OR (||) 논리 연산자에 대해 배웁니다. OR 연산자는 피연산자 중 적어도 하나가 true 이면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

logical-operators.html 파일을 열고 <script> 태그 내에 OR 연산자를 시연하는 새 함수를 추가합니다.

// OR (||) Logical Operator Demonstration
function demonstrateOrOperator() {
  let output = document.getElementById("output");

  // Example 1: Simple boolean OR
  let isWeekend = false;
  let isHoliday = true;
  let canRelax = isWeekend || isHoliday;
  output.innerHTML += `Can relax? ${canRelax}<br>`;

  // Example 2: Comparison OR
  let age = 16;
  let hasParentalConsent = true;
  let canAttendEvent = age >= 18 || hasParentalConsent;
  output.innerHTML += `Can attend event? ${canAttendEvent}<br>`;

  // Example 3: Multiple conditions
  let hasCoupon = false;
  let isNewCustomer = true;
  let canGetDiscount = hasCoupon || isNewCustomer;
  output.innerHTML += `Eligible for discount? ${canGetDiscount}<br>`;
}

// Call the function when the page loads
demonstrateOrOperator();

OR (||) 연산자를 자세히 살펴보겠습니다.

  • 적어도 하나의 조건이 true이면 true를 반환합니다.
  • 첫 번째 예제에서 canRelax는 isHoliday가 true이므로 true입니다.
  • 두 번째 예제는 OR 이 비교 및 부울 조건과 함께 사용될 수 있는 방법을 보여줍니다.
  • 세 번째 예제는 여러 조건을 결합하는 것을 보여줍니다.

브라우저의 예시 출력:

Can relax? true
Can attend event? true
Eligible for discount? true

NOT (!) 논리 연산 구현

이 단계에서는 JavaScript 의 NOT (!) 논리 연산자에 대해 배웁니다. NOT 연산자는 표현식의 부울 값을 반전시켜 true를 false로, false를 true로 바꿉니다.

logical-operators.html 파일을 열고 <script> 태그 내에 NOT 연산자를 시연하는 새 함수를 추가합니다.

// NOT (!) Logical Operator Demonstration
function demonstrateNotOperator() {
  let output = document.getElementById("output");

  // Example 1: Basic NOT operation
  let isRaining = false;
  let isSunny = !isRaining;
  output.innerHTML += `Is it sunny? ${isSunny}<br>`;

  // Example 2: NOT with comparison
  let age = 16;
  let isAdult = !(age < 18);
  output.innerHTML += `Is an adult? ${isAdult}<br>`;

  // Example 3: Negating a complex condition
  let hasTicket = true;
  let isCrowded = true;
  let canEnter = !(hasTicket && isCrowded);
  output.innerHTML += `Can enter? ${canEnter}<br>`;
}

// Call the function when the page loads
demonstrateNotOperator();

NOT (!) 연산자를 자세히 살펴보겠습니다.

  • 표현식의 부울 값을 반전시킵니다.
  • 첫 번째 예제에서 isSunny는 isRaining이 false이므로 true가 됩니다.
  • 두 번째 예제는 비교와 함께 사용되는 NOT 을 보여줍니다.
  • 세 번째 예제는 더 복잡한 조건과 함께 NOT 을 시연합니다.

브라우저의 예시 출력:

Is it sunny? true
Is an adult? false
Can enter? false

웹 페이지에 논리 연산 결과 표시

이 단계에서는 지금까지 배운 모든 논리 연산자를 결합하여 웹 페이지에 결과를 표시하는 포괄적인 시연을 만듭니다. HTML 파일을 수정하여 논리 연산자 결과를 표시하는 보다 구조화된 접근 방식을 포함합니다.

logical-operators.html 파일을 다음 전체 코드로 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Logical Operators Demo</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      .result {
        margin: 10px 0;
        padding: 10px;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1>JavaScript Logical Operators Exploration</h1>

    <div id="andResults" class="result">
      <h2>AND (&&) Operator Results</h2>
    </div>

    <div id="orResults" class="result">
      <h2>OR (||) Operator Results</h2>
    </div>

    <div id="notResults" class="result">
      <h2>NOT (!) Operator Results</h2>
    </div>

    <script>
      // Function to display results
      function displayResult(elementId, message) {
        const element = document.getElementById(elementId);
        const resultLine = document.createElement("p");
        resultLine.textContent = message;
        element.appendChild(resultLine);
      }

      // AND (&&) Operator Demonstration
      function demonstrateAndOperator() {
        let isAdult = true;
        let hasLicense = true;
        let canDrive = isAdult && hasLicense;
        displayResult("andResults", `Can drive? ${canDrive}`);

        let age = 25;
        let hasValidLicense = age >= 18 && age <= 65;
        displayResult("andResults", `Valid driving age? ${hasValidLicense}`);
      }

      // OR (||) Operator Demonstration
      function demonstrateOrOperator() {
        let isWeekend = false;
        let isHoliday = true;
        let canRelax = isWeekend || isHoliday;
        displayResult("orResults", `Can relax? ${canRelax}`);

        let age = 16;
        let hasParentalConsent = true;
        let canAttendEvent = age >= 18 || hasParentalConsent;
        displayResult("orResults", `Can attend event? ${canAttendEvent}`);
      }

      // NOT (!) Operator Demonstration
      function demonstrateNotOperator() {
        let isRaining = false;
        let isSunny = !isRaining;
        displayResult("notResults", `Is it sunny? ${isSunny}`);

        let age = 16;
        let isAdult = !(age < 18);
        displayResult("notResults", `Is an adult? ${isAdult}`);
      }

      // Run all demonstrations when page loads
      function runAllDemonstrations() {
        demonstrateAndOperator();
        demonstrateOrOperator();
        demonstrateNotOperator();
      }

      // Call the main function when the page loads
      window.onload = runAllDemonstrations;
    </script>
  </body>
</html>

이 버전의 주요 개선 사항:

  • 각 논리 연산자에 대한 스타일이 지정된 결과 섹션 추가
  • 결과를 표시하는 displayResult() 함수 생성
  • 모든 연산자 시연을 실행하는 runAllDemonstrations() 함수 구현
  • 가독성을 향상시키기 위해 기본 CSS 추가
  • 페이지가 로드된 후 모든 스크립트가 실행되도록 window.onload 사용

예시 브라우저 출력은 AND, OR 및 NOT 연산자의 결과를 별도의 스타일이 지정된 섹션으로 표시합니다.

요약

이 랩에서는 참가자들이 실습 웹 개발 연습을 통해 JavaScript 논리 연산자를 탐구했습니다. 랩은 논리 연산을 시연하기 위한 구조화된 환경을 설정하여 전용 출력 div 가 있는 HTML 파일을 생성하는 것으로 시작되었습니다. 참가자들은 AND (&&), OR (||), NOT (!) 연산자에 대해 배우고, 이러한 논리 연산자가 부울 표현식을 평가하고 프로그램 흐름을 제어하는 방법을 보여주는 실용적인 예제를 구현했습니다.

대화형 접근 방식을 통해 학습자는 HTML 파일 내에서 직접 JavaScript 코드를 작성하여 각 논리 연산자의 동작을 이해할 수 있었습니다. 부울 값을 조작하고 비교 기술을 사용하여 참가자들은 논리 연산자를 사용하여 조건부 결정을 내리고 JavaScript 프로그래밍에서 더 복잡한 논리 평가를 만드는 방법에 대한 통찰력을 얻었습니다.

관련 JavaScript 코스
초보자를 위한 JavaScript

초보자를 위한 JavaScript

javascriptweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

javascriptweb-development
두더지 잡기 웹 게임 만들기

두더지 잡기 웹 게임 만들기

javascriptweb-development