'JavaScript | TypeScript/Javascript 시작하기' 카테고리의 글 목록 (2 Page)

a Link를 사용해서 이동하기

<a href="이미지 주소" target="_blank">이미지 새창 띄우기</a>

window.open을 사용해서 이동하기

<button onClick={() => window.open(`이미지 주소`, '_blank')}>이미지 새창 띄우기</button>

현재 창에 띄우려면 _blank 대신 _self를 넣어줍니다.

저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] 구조 분해 할당에 대하여 (0)	2023.01.29
[ Javascript ] Axios 파일 다운로드 만들기 (0)	2023.01.05
[ Javascript ] readline 모듈 ( 콘솔에서 입력받기 ) (0)	2022.10.05
[ Javascript ] 이벤트 (0)	2022.07.05
[ Javascript ] 문서 객체 스타일 조작 (0)	2022.07.01

readline 모듈이란?

자바스크립트에서 내장모듈인 readline 모듈을 이용하면 콘솔을 통해서 값을 입력받을 수 있습니다.

index.js

// 모듈 불러오기
const readline = require("readline");

readline 인터페이스 객체 생성하기

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

변수 입력값

rl.question('answer ', (answer) => {
  
  console.log(`answer 내용: ${answer}`);
  // close를 해주지 않으면 무한히 입력을 받습니다.
  rl.close();
});

저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] Axios 파일 다운로드 만들기 (0)	2023.01.05
[ Javascript ] 클릭시 새로운 창에 이미지 띄우기 (0)	2023.01.04
[ Javascript ] 이벤트 (0)	2022.07.05
[ Javascript ] 문서 객체 스타일 조작 (0)	2022.07.01
[ Javascript ] 문서 객체 가져오기 (0)	2022.06.30

이벤트

웹 브라우저에서 사용자가 화면을 클릭 하거나, 키보드를 클릭하거나 하는 다양한 일들이 일어납니다. 이러한 일들을 이벤트(Event)라고 부릅니다.

용어

이벤트 이름 : 이벤트의 이름을 나타냅니다.
이벤트 속성 : 특정 요소(태그)에 이벤트를 직접 연결할 때 활용하는 속성을 나타냅니다.
이벤트 리스너 또는 핸들러 : 특정 요소(태그)의 이벤트 속성에 연결한 함수를 나타냅니다.
디폴트 이벤트 : 요소(태그)가 가지고 있는 기본적인 이벤트를 나타냅니다. 예로 'a 태그를 클릭하면 href 속성에 정의한 곳으로 이동한다.' 등이 있습니다.
이벤트 모델 : 이벤트를 연결하는 방법을 나타냅니다. 최신 웹 브라우저는 '표준 이벤트 모델', '인라인 이벤트 모델', '기본 이벤트 모델'을 지원하지만, 구버전의 인터넷 익스플로러는 '마이크로소프트 인터넷 익스플로러 이벤트 모델', '인라인 이벤트 모델', '기본 이벤트 모델'을 지원합니다. 따라서 모든 웹 브라우저에서 정상적으로 이벤트를 사용할 수 있게 하려면 구버전과 최신 버전의 차이를 보완하는 방법이 필요합니다.

이벤트 종류

이벤트는 키보드를 이용해 버튼을 입력하거나, 마우스 클릭과 같이 다른 것에 영향을 미치는 것을 의미합니다.

마우스 이벤트
키보드 이벤트
HTML 프레임 이벤트
HTML 입력 양식 이벤트
유저 인터페이스 이벤트
구조 변화 이벤트
터치 이벤트

이벤트 관련 용어 정리

window 객체의 load 이벤트

window.onload = function() {};

이렇게 window 객체의 onload 속성에 함수 자료형을 할당하는 것을 '이벤트를 연결한다'고 합니다.

이때 load를 이벤트 이름 또는 이벤트 타입(Event Type)이라고 하며 onload를 이벤트 속성이라고 합니다. 또한 이벤트 속성에 할당한 함수를 이벤트 리스너(Event Listener) 또는 이벤트 핸들러(Event Handler)라고 합니다.

이벤트 용어 연습 예

<h1 id="header">Header</h1>

window.onload = function() {
    var header = document.getElementById('header');

    function whenClick() {
        alert('click');
    }
    header.onclick = whenClick;
}

두 가지 이벤트를 연결했습니다. window 객체는 전과 같으며 header 객체의 이벤트 이름은 click, 이벤트 속성은 onclick, 이벤트 리스너는 whenClick() 함수 입니다.

header 객체

이벤트 이름 : click
이벤트 속성 : onclick
이벤트 리스너 : whenClick() 함수

문서 객체에 이벤트를 연결하는 방법을 이벤트 모델이라고 합니다. 이벤트 모델은 아래처럼 DOM Level 단계에 따라 두 가지로 분류할 수 있고, 다시 두 가지로 각각 나뉩니다. 따라서 총 네 가지 방법으로 이벤트를 연결할 수 있습니다.

DOM Level 0
- 인라인 이벤트 모델
- 기본 이벤트 모델
DOM Level 2
- 마이크로소프트 인터넷 익스플로러 이벤트 모델
- 표준 이벤트 모델

저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] 클릭시 새로운 창에 이미지 띄우기 (0)	2023.01.04
[ Javascript ] readline 모듈 ( 콘솔에서 입력받기 ) (0)	2022.10.05
[ Javascript ] 문서 객체 스타일 조작 (0)	2022.07.01
[ Javascript ] 문서 객체 가져오기 (0)	2022.06.30
[ Javascript ] 문서 객체 만들기 (0)	2022.06.29

문서 객체의 스타일 조작

문서 객체의 style 속성을 사용하면 해당 문서 객체의 스타일을 변경할 수 있습니다.

body 태그 구성

<body>
    <h1 id="header">Header</h1>
</body>

문서 객체의 스타일 지정 예

window.onload = function() {
    var header = document.getElementById('header');

    header.style.border = '1px solid #DDD';
    header.style.color = 'orange';
    header.style.fontFamily = 'helvetica';
}

위 코드처럼 style을 지정해서 여러 스타일을 넣을 수 있습니다.

스타일 속성 이름

자바스크립트에서는 특수 기호 '-'를 식별자에 사용할 수 없으므로 입력하면 오류가 발생합니다.

스타일 식별자 변환

스타일 시트의 스타일 속성	자바스크립트의 스타일 식별자
background-image	backgroundImage
background-color	backgroundColor
box-sizing	boxSizing
list-style	listStyle

문자열로 접근하면 두가지 방법 모두 사용할 수 있습니다.

문자열로 문서 객체의 스타일 지정 예

document.body.style['backgroundColor'] = 'red';
document.body.style['background-color'] = 'red';

문서 객체 제거

문서 객체를 제거할 때는 문서 객체가 갖는 제거 메서드를 사용합니다.

문서 객체의 제거 메서드

메서드	설명
removeChild(child)	문서 객체의 자식 노드를 제거합니다.

body 태그 구성

<body>
    <h1 id="will-remove>Header</h1>
</body>

문서 객체의 제거

window.onload = function() {
    var willRemove = document.getElementById('will-remove');

    document.body.removeChild(willRemove);
}

위 코드는 body 문서 객체 바로 아래에 제거하고자 하는 문서 객체가 있으므로 사용 가능한 코드입니다.

일반적으로 문서 객체를 제거할 때는 아래와 같이 사용합니다.

window.onload = function() {
    var willRemove = document.getElementById('will-remove');

    willRemove.parentNode.removeChild(willRemove);
}

아래 그림처럼 h1 태그에서 부모 노드로 이동하고 부모 노드에서 자식 노드를 삭제한 것입니다.

parentNode와 childNode의 관계

문서 객체를 사용한 시계

body 태그 구성

<body>
    <h1 id="clock"></h1>
</body>

문서 객체 설정

window.onload = function() {
    var clock = document.getElementById('clock');
};

아래 코드처럼 setInterval() 함수로 1초마다 clock 문서 객체의 innerHTML 속성을 현재 시각으로 변경합니다.

현재 시각 표시

window.onload = function() {
    var clock = document.getElementById('clock');

    setInterval(() => {
        clock.innerHTML = new Date().toString();
    }, 1000);
};

setInterval() 함수를 사용했기 때문에 1초마다 시간이 바뀌게 됩니다.

문서 객체를 사용한 움직임 구현

body 태그 구성

<h1 id="sun">@</h1>
<h1 id="earth">0</h1>
<h1 id="moon">*</h1>

문서 객체

window.onload = function() {

    var sun = document.getElementById('sun');
    var earth = document.getElementById('earth');
    var moon = document.getElementById('moon');

    // 문서 객체의 스일 속성 변경
    sun.style.position = 'absolute';
    earth.style.position = 'absolute';
    moon.style.position = 'absolute';
    sun.style.left = 250 + 'px';
    sun.style.top = 200 + 'px';

    // 변수 선언
    var earthAngle = 0;
    var moonAngle = 0;

    // 애니메이션 시작 [ 30FPS(Frames Per Second) ]
    setInterval(function() {
        var earthLeft = 250 + 150 * Math.cos(earthAngle);
        var earthTop = 200 + 150 * Math.sin(earthAngle);
        var moonLeft = earthLeft + 50 * Math.cos(moonAngle);
        var moonTop = earthTop + 50 * Math.sin(moonAngle);

        // 위치 이동
        earth.style.left = earthLeft + 'px';
        earth.style.top = earthTop + 'px';
        moon.style.left = moonLeft + 'px';
        moon.style.top = moonTop + 'px';

        // 각도 변경
        earthAngle += 0.1;
        moonAngle += 0.3;
    }, 1000 / 30)
};

문서 객체와 객체지향을 사용한 움직임 구현

보조함수

// 랜덤한 정수를 생성
function nextRandomInteger(limit) {
    return Math.round(Math.random() * limit);
}

// 랜덤한 알파벳을 리턴하는 함수
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

function randomAlphabet() {
    return alphabet.charAt(nextRandomInteger(25));
}

// 양수와 음수로 랜덤한 속도를 생성하는 함수
function randomSpeed(maxSpeed) {
    return Math.random() * maxSpeed - Math.random() * maxSpeed;
}

생성자 함수

// MovingText의 생성자 함수
var canvasWidth = 700;
var canvasHeight = 400;

function movingText() {
    // 위치와 속도 속성
    this.x = nextRandomInteger(canvasWidth);
    this.y = nextRandomInteger(canvasHeight);
    this.vx = randomSpeed(5);
    this.vy = randomSpeed(5);

    // 문서 객체를 생성
    this.body = document.createElement('h1');
    this.body.innerHTML = randomAlphabet();
    this.body.style.position = 'absolute';

    // 문서 객체를 document.body에 추가
    document.body.appendChild(this.body);
}

movingText.prototype.move = function() {
    // 범위 검사
    if(this.x < 0 || this.x > canvasWidth) this.vx *= -1;
    if(this.y < 0 || this.y > canvasHeight) this.vy *= -1;

    // 이동
    this.x += this.vx;
    this.y += this.vy;

    // 화면에 이동 표시
    this.body.style.left = this.x + 'px';
    this.body.style.top = this.y + 'px';
};

window.onload 부분

// 변수 선언
var movingTexts = [];

// 배열에 movingText 객체를 100개 생성
for(var i = 0; i < 100; i++) {
    movingTexts.push(new movingText());
}

setInterval(() => {
    for(var i in movingTexts) {
        movingTexts[i].move();
    }
}, 1000 / 30);

클로저 활용하기

랜덤한 알파벳을 리턴하는 함수

// 랜덤한 알파벳을 리턴하는 함수
function randomAlphabet() {
    var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    
    return alphabet.charAt(nextRandomInteger(25));
}

여러 프로그램에 으용할 수 있는 내용이므로 복사해서 사용하기 좋지만 해당 코드에서 변수 alphabet을 재정의하면 안되기 때문에 위처럼 내부 변수로 만들어주는 것이 안전합니다.

하지만 이 함수를 100번 사용하면 변수 alphabet이 메모리에서 100번 생성되고 100번 제거되는 일이 발생합니다. 따라서 아래처럼 외부에는 공개되지 않는 변수를 생성하는 것이 좋습니다.

클로저 활용 예

var randomAlphabet = (function() {
    var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    
    return function() {
        return alphabet.charAt(nextRandomInteger(25));
    }
})();

저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] readline 모듈 ( 콘솔에서 입력받기 ) (0)	2022.10.05
[ Javascript ] 이벤트 (0)	2022.07.05
[ Javascript ] 문서 객체 가져오기 (0)	2022.06.30
[ Javascript ] 문서 객체 만들기 (0)	2022.06.29
[ Javascript ] 문서 객체 모델 ( DOM, Document Object Model ) (0)	2022.06.28

문서 객체 가져오기

웹 페이지에 이미 존재하는 HTML 태그를 자바스크립트로 가져오는 방법입니다.

document 객체의 문서 객체 선택 메서드 1

메서드	설명
getElementById(id)	태그의 id 속성이 id 매개변수와 일치하는 문서 객체를 가져옵니다.

body 태그 구성하기 예

<body>
    <h1 id="header1">Header</h1>
    <h1 id="header2">Header</h1>
</body>

document 객체의 getElementById() 메서드는 id 속성을 갖는 태그만 가져올 수 있으므로 id 속성을 입력했습니다.

getElementById() 메서드 예

window.onload = function() {
    var header1 = document.getElementById("header1");
    var header2 = document.getElementById("header2");
};

문서 객체의 innerHTML 속성 변경

window.onload = function() {
    var header1 = document.getElementById("header1");
    var header2 = document.getElementById("header2");

    header1.innerHTML = 'with getElementById()';
    header2.innerHTML = 'with2 getElementById()';
};

문서 객체 가져오기 2

document 객체의 getElementById() 메서드는 한 번에 한 가지 문서 객체만 가져올 수 있습니다. 반면에 document 객체가 갖는 아래 표에 있는 메서드를 사용하면 한 번에 여러 개의 문서 객체를 가져올 수 있습니다.

document 객체의 문서 객체 선택 메서드 2

메서드	설명
getElementsByName(name)	태그의 name 속성이 name 매개변수와 일치하는 문서 객체를 배열로 가져옵니다.
getElementsByTagName(tagName)	tagName 매개변수와 일치하는 문서 객체를 배열로 가져옵니다.

document.getElementByTagName() 메서드

window.onload = function() {
    var headers = document.getElementsByTagName('h1');
};

변수 headers는 문서 객체를 갖는 배열이며, HTML 페이지의 h1 태그가 순서대로 들어옵니다.

문서 객체 배열의 사용 예

window.onload = function() {
    var headers = document.getElementsByTagName('h1');
    for(var i = 0; i < headers.length; i++) {
        headers[i].innerHTML = `with${i + 1} getElementsByTagName()`;
    }
};

코드를 실행하면 문서 객체의 innerHTML 속성이 변경된 것을 확인할 수 있습니다.

문서 객체 배열에 for in 반복문을 사용하면 안되는 이유

for in 반복문을 사용하면 안되는 이유는 문서 객체 이외의 속성에도 접근하기 때문입니다.

잘못된 문서 객체 배열의 사용 예

window.onload = function() {
    var headers = document.getElementsByTagName('h1');

    output = '';
    for(var i in headers) {
        output += i + '\n';
    }
    console.log(output);
};

/*
0
1
length
item
namedItem
*/

위 코드를 실행하면 웹 브라우저마다 출력하는 속성과 메서드의 종류와 개수에 차이가 있을 수 있습니다.

따라서 getElementsByTagName() 메서드로 가져온 객체는 꼭 단순 for 반복문을 사용합니다.

getElementsByName() 메서드도 사용 방법이 같습니다.

문서 객체 가져오기 3

HTML5부터 document 객체에 아래와 같은 메서드가 추가되었습니다.

document 객체의 문서 객체 선택 메서드 3

메서드	설명
querySelector(선택자)	선택자로 가장 처음 선택되는 문서 객체를 가져옵니다.
querySelectorAll(선택자)	선택자를 통해 선택되는 문서 객체를 배열로 가져옵니다.

이는 CSS 선택자로 문서 객체를 선택하는 메서드입니다.

document.querySelector() 메서드 예

window.onload = function() {
    var header1 = document.querySelector('#header1');
    var header2 = document.querySelector('#header2');

    header1.innerHTML = 'width';
    header2.innerHTML = 'width2';
}

저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] 이벤트 (0)	2022.07.05
[ Javascript ] 문서 객체 스타일 조작 (0)	2022.07.01
[ Javascript ] 문서 객체 만들기 (0)	2022.06.29
[ Javascript ] 문서 객체 모델 ( DOM, Document Object Model ) (0)	2022.06.28
[ Javascript ] 웹 API (0)	2022.06.28

문서 객체

문서 객체는 가장 기본적으로 텍스트 노드를 갖는 문서 객체와 텍스트 노드를 갖지 않는 문서 객체로 구분할 수 있습니;다.

body 태그 구성

<body>

</body>

현재 body 태그에는 내용이 없으므로 아무것도 출력하지 않습니다.

텍스트 노드를 갖는 문서 객체를 생성하려면 요소 노드와 텍스트 노드를 생성하고 텍스트 노드를 요소 노드에 붙여줍니다.

document 객체의 노드 생성 메서드

메서드	설명
createElement(tagName)	요소 노드를 생성합니다.
createTextNode(text)	텍스트 노드를 생성합니다.

문서 객체 생성 예

window.onload = function() {
    var header = document.createElement('h1');
    var textNode = document.createTextNode('hello DOM');
};

위 코드 상황

화면에 문서 객체를 출력하려면 생성한 문서 객체를 body 문서 객체에 연결해야 합니다.

문서 객체의 연결 메서드

메서드	설명
appendChild(node)	객체에 노드를 연결합니다.

appendChild() 메서드로 body 문서 객체에 header 문서 객체를 추가합니다.

문서 객체 연결 예

window.onload = function() {
    var header = document.createElement('h1');
    var textNode = document.createTextNode('Hello DOM');

    // 노드 연결하기
    header.appendChild(textNode);
    document.body.appendChild(header);
};

코드를 실행하면 아래처럼 모델을 형성합니다.

HTML 페이지의 DOM 형태

문서 객체 2

텍스트 노드를 갖지 않는 노드 생성 방법. 텍스트 노드를 갖지 않는 대표적인 HTML 태그는 img로 텍스트 노드 대신에 많은 속성이 있습니다. 사실 자바스크립트의 문서 객체 모델은 속성도 하나의 노드로 갖습니다.

문서 객체 생성

window.onload = function() {
    var img = document.createElement('img');

    document.body.appendChild(img);
}

img 태그를 생성하고 body 문서 객체에 연결합니다.

img 태그에 이미지를 넣으려면 src 속성을 지정해야 합니다. 속성을 지정하는 방법은 아래 코드와 같습니다.

문서 객체의 속성 지정 예

window.onload = function() {
    var img = document.createElement('img');
    img.src = './img/test.png';
    img.width = 500;
    img.height = 300;

    document.body.appendChild(img);
}

이 방법은 웹 표준에서 정의하거나 웹 브라우저가 지원하는 태그의 속성에만 사용할 수 있습니다. 그렇지 않다면 이 방법을 사용할 수 없습니다. 예를 들어 SVG 태그는 웹 브라우저에서 이러한 방식을 지원하지 않기 때문에 이 방법을 사용할 수 없습니다. 웹 브라우저가 지원하지 않는 속성은 아래 표의 메서드를 사용해야 속성을 넣을 수 있습니다.

문서 객체의 속성 메서드

메서드	설명
setAttribute(name, value)	객체의 속성을 지정합니다.
getAttribute(name)	객체의 속성을 가져옵니다.

문서 객체의 속성 지정2 예

window.onload = function() {
    var img = document.createElement('img');
    img.setAttribute('src', './img/test.png');
    img.setAttribute('width', 500);
    img.setAttribute('height', 300);

    // setAttribute() 메서드를 사용하지 않으면 불가능합니다.
    img.setAttribute('data-property', 300);

    document.body.appendChild(img);
}

위 코드에 data-property 속성은 이전 코드 방식으로는 넣을 수 없습니다.

문서 객체 3

위 문서 객체 1, 2는 노드를 만들고 연결하는 방법입니다. 일반적으로는 위 코드보다 더 쉬운 방법을 사용합니다.

바로 문서 객체의 innerHTML 속성을 사용하는 것입니다.

문서 객체의 innerHTML 속성은 아래처럼 태그의 내부를 의미하는 속성입니다.

innerHTML 속성은 아래 코드처럼 사용합니다. 문자열을 선언하고 body 문서 객체의 innerHTML 속성에 넣기만 하면 문서 객체를 생성해줍니다.

문서 객체의 innerHTML 속성

window.onload = function() {
    var output = '';

    document.body.innerHTML = output;
};

innerHTML 속성을 사용한 문서 객체 생성 예

window.onload = function() {
    var output = '';
    output +=
    `
        <ul>
            <li>Javascript</li>
            <li>jQuery</li>
            <li>Ajax</li>
        </ul>
    `;

    document.body.innerHTML = output;
};

문서 객체에 내용을 추가하고 싶다면 innerHTML 속성에 아래처럼 복합 대입 연산자로 문자열을 추가합니다.

document.body.innerHTML += '<h1>document object model</h1>';

textContent 속성

만약 화면에 문자열 '<h1>document object model</h1>'을 화면에 그대로 출력하고 싶은 경우에는 innerHTML에 <h1>document object model</h1>를 적으면 되지만 복잡하고 귀찮기 때문에 textContent 속성을 사용합니다.

문서 객체의 textContent 속성 예

window.onload = function() {
    var output = '';
    output +=
    `
        <ul>
            <li>Javascript</li>
            <li>jQuery</li>
            <li>Ajax</li>
        </ul>
    `;

    document.body.textContent = output;
    document.body.textContent += '<h1>document object model</h1>';
};

단, textContent 속성은 인터넷 익스플로러 7 버전 이하에서는 지원하지 않습니다.

저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] 문서 객체 스타일 조작 (0)	2022.07.01
[ Javascript ] 문서 객체 가져오기 (0)	2022.06.30
[ Javascript ] 문서 객체 모델 ( DOM, Document Object Model ) (0)	2022.06.28
[ Javascript ] 웹 API (0)	2022.06.28
[ Javascript ] window 객체의 기본 메서드 (0)	2022.06.27

문서 객체 모델 ( DOM, Document Object Model )

문서 객체 모델 ( DOM, Document Object Model )은 넓은 의미로 웹 브라우저가 HTML페이지를 인식하는 방식이고, 좁은 의미로는 document 객체와 관련된 객체의 집합입니다.

문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있습니다.

문서 객체를 선택할 때 사용하는 메서드

메서드	설명
document.getElementById(아이디)	아이디를 사용해 문서 객체를 선택합니다.
document.querySelector(선택자)	선택자를 사용해 문서 객체를 선택합니다.
document.getElementsByName(이름)	name속성으로 여러 개의 문서 객체를 선택합니다.
document.getElementsByClassName(클래스)	class속성으로 여러 개의 문서 객체를 선택합니다.
document.querySelectorAll(선택자)	선택자로 여러 개의 문서 객체를 선택합니다.

문서 객체의 내부 글자, 스타일, 속성을 조작할 때는 다음과 같은 것을 사용합니다. ( 웹 브라우저에서 지원한다면 속성 관련 메서드를 사용하지 않고도 곧바로 이름을 입력해서 사용할 수 있습니다. )

속성	설명
innerHTML	내부 글자를 조작합니다.
style	스타일을 조작합니다.

메서드	설명
setAttribute(<속성 이름>, <속성 값>)	속성을 지정합니다.
getAttribute(<속성 이름>)	속성을 추출합니다.

문서 객체 모델과 관련된 용어

HTML 페이지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제목</title>
    <script></script>
</head>
<body>
    <h1 id="header">제목</h1>
</body>
</html>

위 코드처럼 HTML 페이지에 존재하는 html이나 body태그를 '태그'라고 부릅니다. 이 태그를 자바스크립트에서 이용할 수 있는 객체로 만들면 '문서 객체'가 됩니다.

문서 객체 예

window.onload = function() {
    var header = document.getElementById('header');
};

이 때 위 코드를 '문서 객체'라고 부릅니다.

위 코드에 문서 객체 모델

위 HTML 코드는 위 그림처럼 트리 모양으로 나타낼 수 있습니다. 그림의 각 요소를 '노드'라고 부릅니다.

요소 노드와 텍스트 노드 예 [ 요소 노드( Element Node )와 텍스트 노드( Text Node ) 구분하기 ]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제목</title>
    <script></script>
</head>
<body>
    <h1 id="header">Text Node</h1>
    <img src="image.jpg" alt="" />
</body>
</html>

요소 노드란 HTML 태그를 의미하고, 텍스트 노드는 요소 노드 안에 들어 있는 글자를 의미합니다.

위 코드의 문서 객체 모델

웹 페이지가 처음 HTML 페이지에 적혀 있는 태그들을 읽으며 생성하는 것을 '정적으로 문서 객체를 생성한다'라고 표현합니다. 페이지에 적혀 있는 내용을 특별한 변화 없이 생성해 붙은 이름입니다. 반면에 자바스크립트로 원래 HTML 페이지에는 없던 문서 객체를 생성하는 것을 '동적으로 문서 객체를 생성한다'라고 표현합니다.

저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] 문서 객체 가져오기 (0)	2022.06.30
[ Javascript ] 문서 객체 만들기 (0)	2022.06.29
[ Javascript ] 웹 API (0)	2022.06.28
[ Javascript ] window 객체의 기본 메서드 (0)	2022.06.27
[ Javascript ] 브라우저 객체 모델 (0)	2022.06.27

WEB API

웹 브라우저는 음악을 재생하는 기능, 동영상을 재생하는 기능, 그림을 그리는 기능, 미디어를 제어하는 기능, 사용자 카메라를 다루는 기능, 게임 패드를 다루는 기능 등도 제공하며, 자바스크립트를 사용하면 이런 기능들을 모두 활용할 수 있습니다. 이러한 기능을 웹 API라고 부릅니다.

웹 API 문서 바로가기

Audio 객체

HTML5부터는 플래시와 같은 플러그인을 사용하지 않아도 audio 태그를 사용해서 음악을 재생할 수 있게 되었습니다. (단, 음악 재생은 HTML5를 지원하는 웹 브라우저에서만 사용할 수 있습니다. 따라서 인터넷 익스플로러 8 이하의 웹 브라우저에서는 사용할 수 없습니다. )

Audio 객체 생성 1

var audio = new Audio('test.mp3');

Audio 객체는 위 코드처럼 생성합니다. Audio의 매개변수에는 audio 태그의 src 속성에 대응하는 문자열을 입력합니다.

src 속성을 지정해줄 필요 없이 아래 코드처럼 별도로 지정해도 됩니다.

Audio 객체 생성 2

var audio = new Audio();
audio.src = 'test.mp3';

Audio 객체의 기본 속성

속성	설명
src	재생하려는 음악 파일 경로
volume	음악의 음량
currentTime	음악의 현재 위치 ( 초 단위 )

Audio 객체의 기본 메서드

메서드	설명
play()	음악을 재생합니다.
pause()	음악을 일시 정지합니다.

Audio 객체에는 stop() 메서드가 없습니다. 음악을 정지하고 처음의 위치로 이동하고 싶을 때는 pause() 메서드를 사용하고 currentTime속성을 0으로 바꿔야 합니다.

간단한 음악 재생 프로그램 예

JS

var audio = new Audio('./pages/test.mp3');

HTML

<button onclick="audio.play()">Play</button>
<button onclick="audio.pause()">Pause</button>
<input type="number" onchange="audio.currentTime=this.value" />
<input type="number" onchange="audio.volume=this.value" />

코드를 실행하면 위치럼 위치와 음량을 입력하고 play를 누르면, 간단한 음악 재생 프로그램이 완성됩니다.

모바일 장치 구분

핸드폰으로 naver.com에 접속하면 자동으로 m.naver.com으로 이동됩니다. 네이버 페이지가 접속한 기기를 확인해서 핸드폰이면 m.naver.com으로 이동시켜주기 때문입니다.

핸드폰을 확인하는 방법은 크게 '서버에서 확인하는 방법'과 '클라이언트에서 확인하는 방법'이 있습니다. 두 가지 모두 userAgent를 확인하면 됩니다. userAgent 속성은 현재 웹 페이지를 실행하는 웹 브라우저의 정보를 나타냅니다.

userAgent 속성 확인

var userAgent = navigator.userAgent;
console.log(userAgent); // Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

웹 브라우저의 userAgent 속성에는 브라우저를 구분할 수 있는 고유 문자열이 있습니다. 안드로이드는 Android, 아이폰이라면 iPhone을 쓰고 있다는 것을 알 수 있습니다.

키워드를 사용하면 모바일 장치를 구분할 수 있습니다.

iPhone: 아이폰
iPod: 아이팟
iPad: 아이패드
Android: 안드로이드
WebOS: 웹 OS

:: 카카오톡, 페이스북에서 링크를 클릭하면 KAKAOTALK등의 글자가 찍힙니다.

스마트폰 구분 예

var smartPhones = ['iphone', 'ipod', 'android'];

for(var i in smartPhones) {
    if(navigator.userAgent.toLowerCase().match(new RegExp(smartPhones[i]))) {
        console.log('스파트폰 페이지로 이동');
        location = 'http://m.naver.com';
    }
}

window.orientation 속성 ( 모바일 장치의 방향 )

window.orientation 속성은 모바일 장치에만 있는 속성으로 현재 모바일 장치의 방향을 나타냅니다.

:: 0과 180일 때는 세로방향, 90과 -90일 때는 가로방향

모바일 장치 방향 확인 예

if(window.orientation == 0 || window.orientation == 180) {
    console.log('세로 방향');
} else if(window.orientation == 90 || window.orientation == -90) {
    console.log('가로 방향');
}

저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] 문서 객체 만들기 (0)	2022.06.29
[ Javascript ] 문서 객체 모델 ( DOM, Document Object Model ) (0)	2022.06.28
[ Javascript ] window 객체의 기본 메서드 (0)	2022.06.27
[ Javascript ] 브라우저 객체 모델 (0)	2022.06.27
[ Javascript ] underscore 라이브러리 (0)	2022.06.23

window 객체의 기본 메서드

window 객체는 자신의 형태와 위치를 변경할 수 있게 아래와 같은 메서드를 제공합니다.

window 객체의 메서드

메서드	설명
moveBy(x, y)	윈도우 위치를 상대적으로 이동합니다.
moveTo(x, y)	윈도우 위치를 절대적으로 이동합니다.
resizeBy(x, y)	윈도우의 크기를 상대적으로 지정합니다.
resizeTo(x, y)	윈도우 크기를 절대적으로 지정합니다.
scrollBy(x, y)	윈도우 스크롤의 위치를 상대적으로 이동합니다.
scrollTo(x, y)	윈도우 스크롤의 위치를 절대적으로 이동합니다.
focus()	윈도우에 초점을 맞춥니다.
blur()	윈도우에 맞춘 초점을 제거합니다.
close()	윈도우를 닫습니다.

...By() 형태의 메서드는 현재 윈도우를 기준으로 상대적으로 속성을 변화하는 메서드이며, ...To() 형태의 메서드는 절대적인 기준으로 속성을 변화하는 메서드입니다.

상대 이동과 절대 이동의 차이 예

var output = '';

for(var key in screen) {
    output += 'ㅁ ' + key + ': ' + screen[key] + '\n';
}
console.log(output);

/*
Chrome *******

ㅁ availWidth: 1080
ㅁ availHeight: 1895
ㅁ width: 1080
ㅁ height: 1920
ㅁ colorDepth: 24
ㅁ pixelDepth: 24
ㅁ availLeft: 0
ㅁ availTop: 25
ㅁ orientation: [object ScreenOrientation]
ㅁ addEventListener: function addEventListener() { [native code] }
ㅁ dispatchEvent: function dispatchEvent() { [native code] }
ㅁ removeEventListener: function removeEventListener() { [native code] }
*/

코드를 실행하면 결과가 웹 브라우저마다 다릅니다.

screen 객체의 속성

속성	설명
width	화면의 너비
height	화면의 높이
availWidth	실제 화면에서 사용 가능한 너비
availHeight	실제 화면에서 사용 가능한 높이
colorDepth	사용 가능한 색상 수
pixelDepth	한 픽셀당 비트 수

가장 많이 사용하는 screen 객체의 속성은 width 속성과 height 속성입니다. 이 속성을 사용하면 쉽게 window 객체를 화면에 꽉 차게 만들 수 있습니다.

브라우저의 크기를 화면에 일치시키는 방법 예

var child = window.open('', '', 'width=300, height=200');
var width = screen.width;
var height = screen.height;

child.moveTo(0, 0);
child.resizeTo(width, height);

setInterval(function() {
    child.resizeBy(-20, -20);
    child.moveBy(10, 10);
}, 1000);

location 객체

location 객체는 웹 브라우저의 주소 표시줄과 관련된 객체입니다. location 객체는 프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보가 있습니다.

location 객체의 속성 예

var output = '';
for(var key in location) {
    output += 'ㅁ ' + key + ': ' + location[key] + '\n';
}
console.log(output);

/*
Chrome *****

ㅁ ancestorOrigins: [object DOMStringList]
ㅁ href: http://192.166.60.3/myweb/?page=test
ㅁ origin: http://192.166.60.3
ㅁ protocol: http:
ㅁ host: 192.166.60.3
ㅁ hostname: 192.166.60.3
ㅁ port: 
ㅁ pathname: /myweb/
ㅁ search: ?page=test
ㅁ hash: 
ㅁ assign: function assign() { [native code] }
ㅁ reload: function reload() { [native code] }
ㅁ replace: function replace() { [native code] }
ㅁ toString: function toString() { [native code] }
*/

위 코드를 실행하면 웹 브라우저마다 실행 결과가 조금씩 다릅니다. 속성만 출력하는 브라우저가 있고, 메서드까지 출력하는 브라우저가 있습니다.

location 객체의 속성

속성	설명	예
href	문서의 URL 주소
host	호스트 이름과 포트 번호	localhost:12345
hostname	호스트 이름	localhost
port	포트 번호	12345
pathname	디렉토리 경로	/myweb/
hash	앵커 이름(#~)	#beta
search	요청 매개변수	?page=test
protocol	프로토콜 종류	http:

location 객체의 메서드

속성	설명
assign(link)	현재 위치를 이동합니다.
reload()	새로고침합니다.
replace(link)	현재 위치를 이동합니다.

location 객체는 페이지를 이동할 때 많이 사용합니다. 아래 네 가지 방법으로 페이지를 이동할 수 있습니다. assign() 메서드와 replace() 메서드 모두 페이지를 이동하지만, replace() 메서드는 assign() 메서드와 다르게 뒤로 가기 버튼을 사용할 수 없다는 차이가 있습니다.

location 페이지 이동 예

<div id="click">click</div>
<div onClick="btnClick()">click2</div>

console.log(location); // location 정보
console.log(location.href); // http://192.166.60.3/myweb/?page=test ( 현재 주소창 )

document.getElementById('click').addEventListener('click', function() {
    location.assign(location);
});
function btnClick() {
    location.replace(location);
}

위와 같은 방법으로 현재 페이지를 새로고침할 수 있습니다.

navigator 객체

navigator 객체는 웹 페이지를 실행하고 있는 브라우저에 대한 정보가 있습니다. 일반적으로 아래 속성을 많이 사용합니다.

navigator 객체의 속성

속성	설명
appCodeName	브라우저의 코드 이름
appName	브라우저의 이름
appVersion	브라우저의 버전
platform	사용 중인 운영체제의 시스템 환경
userAgent	웹 브라우저의 전체 정보

navigator 객체의 속성 예

var output = '';
for(var key in navigator) {
    output += 'ㅁ ' + key + ': ' + navigator[key] + '\n';
}
console.log(output);

/*
ㅁ vendorSub: 
ㅁ productSub: 20030107
ㅁ vendor: Google Inc.
ㅁ maxTouchPoints: 0
ㅁ userActivation: [object UserActivation]
ㅁ doNotTrack: null
ㅁ geolocation: [object Geolocation]
ㅁ connection: [object NetworkInformation]
ㅁ plugins: [object PluginArray]
ㅁ mimeTypes: [object MimeTypeArray]
ㅁ pdfViewerEnabled: true
ㅁ webkitTemporaryStorage: [object DeprecatedStorageQuota]
ㅁ webkitPersistentStorage: [object DeprecatedStorageQuota]
ㅁ hardwareConcurrency: 4
ㅁ cookieEnabled: true
ㅁ appCodeName: Mozilla
ㅁ appName: Netscape
ㅁ appVersion: 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
ㅁ platform: MacIntel
ㅁ product: Gecko
ㅁ userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36
ㅁ language: ko-KR
ㅁ languages: ko-KR,ko,en-US,en
ㅁ onLine: true
ㅁ webdriver: false
ㅁ getBattery: function getBattery() { [native code] }
ㅁ getGamepads: function getGamepads() { [native code] }
ㅁ javaEnabled: function javaEnabled() { [native code] }
ㅁ sendBeacon: function sendBeacon() { [native code] }
ㅁ vibrate: function vibrate() { [native code] }
ㅁ scheduling: [object Scheduling]
ㅁ ink: [object Ink]
ㅁ mediaCapabilities: [object MediaCapabilities]
ㅁ mediaSession: [object MediaSession]
ㅁ permissions: [object Permissions]
*/

브라우저마다 다른 결과가 나옵니다.

window 객체의 onload 이벤트 속성

onload 이벤트 속성

window.onload = function() {

};

window 객체의 onload 속성을 사용하는 것입니다. 문서 객체의 속성 중 'on'으로 시작하는 속성을 이벤트 속성이라고 부르며, 이 이벤트 속성은 함수를 할당해야 합니다.

위 코드는 window 객체 로드가 완료되고 자동으로 할당한 함수를 실행합니다.

:: window 객체 로드가 완료되는 시점은 HTML 페이지에 존재하는 모든 태그가 화면에 올라가는 순간입니다.

저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] 문서 객체 모델 ( DOM, Document Object Model ) (0)	2022.06.28
[ Javascript ] 웹 API (0)	2022.06.28
[ Javascript ] 브라우저 객체 모델 (0)	2022.06.27
[ Javascript ] underscore 라이브러리 (0)	2022.06.23
[ Javascript ] 화살표 함수를 사용한 Array 객체의 메서드 활용 (1)	2022.06.23

브라우저 객체 모델

브라우저 객체 모델은 웹 브라우저와 관련된 객체의 집합( window, navigator, history, screen, document )으로 웹 브라우저 기능 요소를 직접 관리 / 제어할 수 있는 특별한 객체 모읍입니다.

:: 자바스크립트 프로그래밍 언어를 작동하게 하는 웹 브라우저라는 플랫폼이 제공하는 기능

참고자료

모질라 웹 API 문서 -> 바로가기
파이어폭스 웹 브라우저를 만든 모질라에서 제공하는 참고 자료입니다.
Dev Docs -> 바로가기
웹 브라우저에서 확인할 수 있는 참고 자료입니다. 자바스크립트를 포함한 모든 웹 개발과 관련된 문서를 제공합니다.
Zeal Docs -> 바로가기
오프라인 상태에서도 사용할 수 있는 윈도우, 리눅스 전용 참고 자료입니다. 자바스크립트를 포함해 대부분의 프로그래밍 언어, 프레임워크, 라이브러리와 관련된 문서를 제공합니다.
Kapeli -> 바로가기
오프라인 상태에서도 사용할 수 있는 맥 전용 참고 자료입니다. 자바스크립트를 포함한 모든 웹 개발과 관련된 문서를 제공합니다.

브라우저 관련 객체

브라우저 객체 모델( BOM, Browser Object Model )은 웹 브라우저와 관련된 객체의 집합을 의미합니다. 대표적인 브라우저 객체 모델로는 아래와 같으며, window,location, navigator, history, screen, document 객체가 있습니다.

간단하게 문서 객체 모델 ( DOM, Document Object Model )이라 통해서 부릅니다.

window 객체

window 객체의 속성 예

    var output = '';
    for(let key in window) {
        output += 'ㅁ' + key + ': ' + window[key] + '\n';
    }
    console.log(output);

수많은 속성들이 줄줄이 나타납니다.

:: window 객체는 자바스크립트의 브라우저 기반 최상위 객체입니다. alert(), prompt() 함수 모두 window 객체의 메서드입니다.

기본 변수와 window 객체

var 키워드로 선언한 일반 변수는 모두 window 객체의 속성이 됩니다.

기본 변수와 window 객체 예

var test = 273;
console.log(window.test); // 273

새로운 window 객체 생성

window 객체의 윈도우 생성 메서드

메서드	설명
open(URL, name, features, replace)	새로운 window 객체를 생성합니다.

window 객체의 open() 메서드는 네 개의 매개변수가 있습니다. 입력해도 되고 하지 않아도 되는 매개변수를 옵션이라고 하는데, open() 메서드의 모든 매개변수는 옵션입니다.

open() 메서드 예

window.open()

위 코드를 실행하면 새로운 웹 브라우저 윈도우가 만들어집니다.

open() 메서드의 옵션 사용 예

window.open('http://shiro21.tistory.com', 'child', 'width=600, height=300', true);

코드를 실행시키면 자동으로 주소창에 해당하는 팝업창이 뜹니다.

open() 메서드의 매개변수

첫 번째 매개변수 : 열고자 하는 HTML 페이지의 URL
두 번째 매개변수 : 윈도우 간 통신하는 데 사용하는 윈도우 이름
세 번째 매개변수 : 윈도우를 어떤 모양으로 출력하지 지정하는 옵션

윈도우 형태 옵션 ( 세 번째 매개변수에 사용하는 옵션 )

옵션	설명	입력 값
width	새 윈도우의 너비	픽셀 값
height	새 윈도우의 높이	픽셀 값
location	주소 입력창의 유무	yes, no, 1, 0
menubar	메뉴의 유무	yes, no, 1, 0
resizable	화면 크기 조절 가능 여부	yes, no, 1, 0
status	상태 표시줄의 유무	yes, no, 1, 0
toolbar	상태 표시줄의 유무	yes, no, 1, 0

open() 메서드는 새로운 window 객체를 생성하는 객체입니다. 단지 팝업창을 여는 것에서 끝나지 않고 윈도우 객체를 리턴합니다.

따라서 아래 코드처럼 새로운 윈도우 객체에 접근해 속성과 메서드를 사용할 수 있습니다.

open() 메서드의 리턴 값 예

var child = window.open('', '', 'width=300, height=200');

child.document.write('<h1>window</h1>');

팝업차단

일부 웹 브라우저에서 실행할 때 웹 페이지 오류가 발생하면 팝업창 허용을 누르고 다시 실행합니다.

아래 코드처럼 처리하면 오류 메시지를 제거할 수 있습니다.

인터넷 익스플로러 8 이하의 팝업 차단 검사

var child = window.open('', '', 'width=300, height=200');

if(child) {
    child.document.write('window');
} else {
    alert('팝업 차단을 해제해주세요');
}

저작자표시 비영리 변경금지 (새창열림)

'JavaScript | TypeScript > Javascript 시작하기' 카테고리의 다른 글

[ Javascript ] 웹 API (0)	2022.06.28
[ Javascript ] window 객체의 기본 메서드 (0)	2022.06.27
[ Javascript ] underscore 라이브러리 (0)	2022.06.23
[ Javascript ] 화살표 함수를 사용한 Array 객체의 메서드 활용 (1)	2022.06.23
[ Javascript ] JSON 객체 (1)	2022.06.23

코린이[코딩 어린이]