'this' 키워드를 사용하여 자바스크립트 광고 배너 생성 방법

18 Sep 2023

javascript

자바스크립트를 사용하여 동적으로 광고 배너를 생성하기 위해 ‘this’ 키워드를 활용할 수 있습니다. ‘this’는 현재 실행 컨텍스트에서 호출된 메서드나 함수를 가리키는 특별한 키워드입니다.

아래는 ‘this’ 키워드를 사용하여 광고 배너를 생성하는 예제 코드입니다.

// 광고 배너 생성자 함수 선언
function Advertisement(width, height, url) {
  this.width = width;
  this.height = height;
  this.url = url;
  
  this.render = function() {
    const adContainer = document.getElementById('adContainer');
    
    const adBanner = document.createElement('a');
    adBanner.href = this.url;
    adBanner.style.width = this.width + 'px';
    adBanner.style.height = this.height + 'px';
    
    adContainer.appendChild(adBanner);
  }
}

// 광고 배너 객체 생성과 렌더링
const banner1 = new Advertisement(300, 250, 'https://example.com/banner1');
banner1.render();

const banner2 = new Advertisement(728, 90, 'https://example.com/banner2');
banner2.render();

위 코드는 Advertisement라는 생성자 함수로 광고 배너 객체를 생성하고, render 메서드를 통해 해당 광고 배너를 화면에 렌더링하는 예제입니다.

생성자 함수 내부에서 ‘this’를 사용하여 인스턴스의 속성인 width, height, url에 접근할 수 있습니다. render 메서드에서 ‘this’는 현재 생성된 인스턴스를 가리키며, 이를 통해 광고 배너의 속성값을 사용하여 동적으로 배너를 생성하고 화면에 추가합니다.

이와 같이 ‘this’ 키워드를 활용하여 자바스크립트에서 동적으로 광고 배너를 생성할 수 있습니다.

#javascript #광고배너 #this키워드