LabEx
로그인무료 가입

JavaScript 에서 Browser Object Model (BOM) 메서드 탐구

JavaScriptBeginner
지금 연습하기

소개

이 랩에서는 참가자들이 포괄적인 데모 프로젝트를 생성하여 JavaScript 의 브라우저 객체 모델 (BOM, Browser Object Model) 메서드를 탐구합니다. 이 랩은 학습자들이 기본적인 HTML 및 JavaScript 환경을 설정하는 과정을 안내하고, alert(), prompt(), confirm() 및 window 조작 기술과 같은 주요 BOM 상호 작용 메서드를 체계적으로 소개합니다.

참가자들은 프로젝트 구조 생성, 사용자 알림 대화 상자 구현, window 제어 기능 실험을 시작으로 다양한 브라우저 상호 작용 메서드를 보여주는 실용적인 프로젝트를 점진적으로 구축할 것입니다. 단계별 지침을 따르면, 학생들은 대화 상자 유형 및 window 관리 기술을 통해 대화형 웹 경험을 만들고 사용자와 소통하는 데 JavaScript 의 브라우저 관련 메서드를 사용하는 실질적인 경험을 얻게 됩니다.

BOM 시연을 위한 HTML 프로젝트 설정

이 단계에서는 JavaScript 에서 브라우저 객체 모델 (BOM, Browser Object Model) 메서드를 시연하기 위한 기본적인 HTML 프로젝트를 설정합니다. 다양한 BOM 상호 작용을 탐구하기 위한 기반이 될 간단한 프로젝트 구조를 만들 것입니다.

먼저, 프로젝트 디렉토리로 이동합니다:

cd ~/project

BOM 데모 프로젝트를 위한 새 디렉토리를 생성합니다:

mkdir bom-demo
cd bom-demo

이제 WebIDE 를 사용하여 기본적인 HTML 구조를 가진 index.html 파일을 생성합니다:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>BOM Methods Demonstration</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

같은 디렉토리에 해당 JavaScript 파일 bom-methods.js를 생성합니다:

// This file will contain our BOM method demonstrations
console.log("BOM Methods Project Initialized");

파일이 올바르게 생성되었는지 확인합니다:

ls

예시 출력:

index.html
bom-methods.js

웹 브라우저에서 index.html 파일을 열어 모든 것이 올바르게 설정되었는지 확인합니다. 페이지 제목을 볼 수 있으며, 브라우저의 개발자 콘솔을 열어 초기 로그 메시지를 확인할 수 있습니다.

이 프로젝트 구조는 랩의 다음 단계에서 다양한 브라우저 객체 모델 (BOM) 메서드를 탐구하고 시연하기 위한 깨끗하고 간단한 환경을 제공합니다.

기본 사용자 알림을 위한 Alert 메서드 구현

이 단계에서는 사용자에게 간단한 알림 메시지를 표시하기 위한 기본적인 브라우저 객체 모델 (BOM, Browser Object Model) 메서드인 window.alert() 메서드에 대해 배우게 됩니다. alert 메서드는 스크립트 실행을 일시 중지하고 사용자 확인을 요구하는 팝업 대화 상자를 생성합니다.

프로젝트 디렉토리로 이동합니다:

cd ~/project/bom-demo

WebIDE 에서 bom-methods.js 파일을 열고 다음 JavaScript 코드를 추가합니다:

// Demonstrate window.alert() method
function showBasicAlert() {
  window.alert("Welcome to BOM Methods Demonstration!");
}

// Create a button to trigger the alert
function createAlertButton() {
  const button = document.createElement("button");
  button.textContent = "Show Alert";
  button.onclick = showBasicAlert;
  document.body.appendChild(button);
}

// Call the function to add button when page loads
createAlertButton();

JavaScript 가 제대로 연결되었는지 확인하기 위해 index.html 파일을 수정합니다:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>BOM Methods Demonstration</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

웹 브라우저에서 index.html 파일을 열면 "Show Alert" 버튼이 표시됩니다. 이 버튼을 클릭하면 "Welcome to BOM Methods Demonstration!" 메시지가 있는 팝업 alert 대화 상자가 트리거됩니다.

window.alert()에 대한 주요 사항:

  • window 객체의 메서드입니다.
  • 스크립트 실행을 일시 중지하는 블로킹 대화 상자를 생성합니다.
  • 계속하려면 사용자가 "OK"를 클릭해야 합니다.
  • 일반적으로 간단한 알림 또는 디버깅에 사용됩니다.

예시 alert 대화 상자 모양:

[Alert Dialog]
Welcome to BOM Methods Demonstration!
                [OK]

사용자 입력을 위한 Prompt 대화 상자 생성

이 단계에서는 대화 상자를 통해 대화형 사용자 입력을 허용하는 window.prompt() 메서드를 탐구합니다. 이 BOM 메서드를 사용하면 브라우저에서 직접 사용자의 간단한 텍스트 입력을 수집할 수 있습니다.

프로젝트 디렉토리로 이동합니다:

cd ~/project/bom-demo

WebIDE 에서 bom-methods.js 파일을 열고 다음 JavaScript 코드를 추가합니다:

// Demonstrate window.prompt() method
function showPromptDialog() {
  // Prompt user for their name with a default value
  let userName = window.prompt("What is your name?", "Guest");

  // Check if user entered a name
  if (userName !== null && userName !== "") {
    const outputDiv = document.getElementById("output");
    outputDiv.textContent = `Hello, ${userName}! Welcome to BOM Methods.`;
  } else {
    const outputDiv = document.getElementById("output");
    outputDiv.textContent = "No name entered.";
  }
}

// Create a button to trigger the prompt
function createPromptButton() {
  const button = document.createElement("button");
  button.textContent = "Enter Name";
  button.onclick = showPromptDialog;
  document.body.appendChild(button);
}

// Call the function to add button when page loads
createPromptButton();

출력 div 를 포함하도록 index.html 파일을 업데이트합니다:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>BOM Methods Demonstration</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

window.prompt()에 대한 주요 사항:

  • 사용자가 입력한 텍스트를 반환합니다.
  • 선택적 기본값을 허용합니다.
  • 사용자가 prompt 를 취소하면 null을 반환합니다.
  • 사용자가 응답할 때까지 스크립트 실행을 차단합니다.

예시 prompt 대화 상호 작용:

[Prompt Dialog]
What is your name? [Guest]
        [OK]   [Cancel]

웹 브라우저에서 index.html 파일을 열 때:

  1. "Enter Name" 버튼을 클릭합니다.
  2. 이름을 묻는 prompt 가 나타납니다.
  3. 이름을 입력하거나 기본값으로 OK 를 클릭합니다.
  4. 출력 div 에 개인화된 인사말이 표시됩니다.

사용자 의사 결정을 위한 Confirm 대화 상자 추가

이 단계에서는 "OK" 및 "Cancel" 옵션이 있는 대화 상자를 통해 사용자 확인을 얻는 간단한 방법을 제공하는 window.confirm() 메서드를 탐구합니다. 이 BOM 메서드는 웹 애플리케이션에서 대화형 의사 결정 시나리오를 만드는 데 유용합니다.

프로젝트 디렉토리로 이동합니다:

cd ~/project/bom-demo

WebIDE 에서 bom-methods.js 파일을 열고 다음 JavaScript 코드를 추가합니다:

// Demonstrate window.confirm() method
function showConfirmDialog() {
  const outputDiv = document.getElementById("output");

  // Display a confirmation dialog
  const userDecision = window.confirm("Do you want to continue?");

  // Check user's response
  if (userDecision) {
    outputDiv.textContent = "User clicked OK. Proceeding with the action.";
    outputDiv.style.color = "green";
  } else {
    outputDiv.textContent = "User clicked Cancel. Action aborted.";
    outputDiv.style.color = "red";
  }
}

// Create a button to trigger the confirm dialog
function createConfirmButton() {
  const button = document.createElement("button");
  button.textContent = "Show Confirm Dialog";
  button.onclick = showConfirmDialog;
  document.body.appendChild(button);
}

// Call the function to add button when page loads
createConfirmButton();

출력 div 가 있는지 확인하기 위해 index.html 파일을 업데이트합니다:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>BOM Methods Demonstration</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

window.confirm()에 대한 주요 사항:

  • 사용자가 "OK"를 클릭하면 true를 반환합니다.
  • 사용자가 "Cancel"을 클릭하면 false를 반환합니다.
  • 사용자가 선택할 때까지 스크립트 실행을 차단합니다.
  • 간단한 예/아니오 결정에 유용합니다.

예시 confirm 대화 상호 작용:

[Confirm Dialog]
Do you want to continue?
        [OK]   [Cancel]

웹 브라우저에서 index.html 파일을 열 때:

  1. "Show Confirm Dialog" 버튼을 클릭합니다.
  2. 확인 대화 상자가 나타납니다.
  3. "OK" 또는 "Cancel"을 선택합니다.
  4. 출력 div 에 선택 결과가 표시됩니다.

Window Open 및 Close 메서드 실험

이 단계에서는 window.open() 및 window.close() 메서드를 탐구합니다. 이 메서드를 사용하면 프로그래밍 방식으로 새 브라우저 창 또는 탭을 생성하고 관리할 수 있습니다.

프로젝트 디렉토리로 이동합니다:

cd ~/project/bom-demo

먼저 popup.html이라는 새 HTML 파일을 생성합니다:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Popup Window</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>This is a Popup Window</h1>
    <p>Opened using window.open() method</p>
    <button onclick="window.close()">Close Window</button>
  </body>
</html>

이제 bom-methods.js 파일을 창 조작 메서드로 업데이트합니다:

// Function to open a new window
function openNewWindow() {
  const outputDiv = document.getElementById("output");

  // Open a new window with specific dimensions
  const newWindow = window.open(
    "popup.html",
    "PopupWindow",
    "width=400,height=300,resizable=yes"
  );

  // Check if window was successfully opened
  if (newWindow) {
    outputDiv.textContent = "New window opened successfully!";
  } else {
    outputDiv.textContent = "Popup blocked. Please allow popups.";
  }
}

// Function to close the most recently opened window
function closeLastWindow() {
  const outputDiv = document.getElementById("output");

  try {
    // Attempt to close the last opened window
    const lastWindow = window.open("", "_blank");
    if (lastWindow) {
      lastWindow.close();
      outputDiv.textContent = "Last opened window closed.";
    } else {
      outputDiv.textContent = "No window to close.";
    }
  } catch (error) {
    outputDiv.textContent = "Error closing window.";
  }
}

// Create buttons for window operations
function createWindowButtons() {
  const openButton = document.createElement("button");
  openButton.textContent = "Open New Window";
  openButton.onclick = openNewWindow;

  const closeButton = document.createElement("button");
  closeButton.textContent = "Close Last Window";
  closeButton.onclick = closeLastWindow;

  document.body.appendChild(openButton);
  document.body.appendChild(closeButton);
}

// Call the function to add buttons when page loads
createWindowButtons();

호환성을 위해 index.html 파일을 업데이트합니다:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>BOM Methods Demonstration</title>
  </head>
  <body>
    <h1>Browser Object Model (BOM) Methods</h1>
    <div id="output"></div>

    <script src="bom-methods.js"></script>
  </body>
</html>

window.open() 및 window.close()에 대한 주요 사항:

  • window.open()은 새 브라우저 창 또는 탭을 생성합니다.
  • URL, 창 이름 및 기능을 지정할 수 있습니다.
  • window.close()는 현재 또는 지정된 창을 닫습니다.
  • 팝업 차단기는 창 열기를 방지할 수 있습니다.

웹 브라우저에서 index.html 파일을 열 때:

  1. "Open New Window"를 클릭하여 새 팝업 창을 생성합니다.
  2. "Close Last Window"를 클릭하여 최근에 열린 창을 닫습니다.
  3. 출력 div 에 창 작업 상태가 표시됩니다.

요약

이 랩에서는 참가자들이 실습 JavaScript 프로젝트를 통해 Browser Object Model (BOM) 메서드를 탐구했습니다. 랩은 구조화된 HTML 및 JavaScript 환경을 설정하는 것으로 시작하여 다양한 브라우저 상호 작용 기술을 시연하기 위한 기반을 마련했습니다. 참가자들은 프로젝트 파일을 생성하고, 기본 HTML 구조를 구성하며, 메서드 시연을 위한 JavaScript 파일을 준비하는 방법을 배웠습니다.

초기 단계에서는 사용자 알림을 위한 window.alert() 메서드부터 시작하여 기본적인 BOM 메서드를 이해하는 데 중점을 두었습니다. 프롬프트, 확인 및 창 조작과 같은 다양한 브라우저 상호 작용 메서드를 점진적으로 구현함으로써 학습자들은 대화형 웹 경험을 만들고 브라우저 창 동작을 관리하기 위해 JavaScript 의 브라우저 수준 API 를 사용하는 실질적인 경험을 얻었습니다.

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

초보자를 위한 JavaScript

javascriptweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

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

두더지 잡기 웹 게임 만들기

javascriptweb-development