본문 바로가기
국비 교육/프론트엔드

[자바스크립트] 함수 - 5 (BOM, DOM, DOM 예제)

by 육츠 2024. 3. 4.
Contents 접기

BOM 관련 처리

- Window 하위 객체들 중 document 객체를 제외한 객체(DOM)
- screen, window, history, lotation 등이 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript BOM 관련 처리</title>
    <script defer src="./script/A15_bom.js"></script>
</head>
<body>    
    <div>
       <input type="button" id="btn_01" value="경고창 출력">
       <input type="button" id="btn_02" value="Confirm창 출력">
       <input type="button" id="btn_03" value="Prompt창 출력"> <br>
       <h2 id="result"></h2>
    </div>

    <hr>
    <p>
        open(), close(), print() <br>
    </p>

    <div>
        <input type="button" id="btn_04" value="새창 열기(공지창)">
     </div>
</body>
</html>

해당 페이지

 

Window 객체가 제공해주는 메소드 : alter(), confirm(), prompt()

태그 내 아이디를 통해 가져온다.

let btn_01 = document.getElementById('btn_01');
let btn_02 = document.getElementById('btn_02');
let btn_03 = document.getElementById('btn_03');
let result = document.getElementById('result');

 

 

1) alert()

btn_01.addEventListener('click',function(){
    alert('경고창 입니다.');
    //result.innerHTML = '<span style="color:red">경고창을 눌렀습니다.</span>';
    // 
    result.innerText = '<span style="color:red">경고창을 눌렀습니다.</span>';
    // 
});

버튼을 누르면 해당 경고창이 뜬다.

 

2) confirm

액션 추가

btn_02.addEventListener('click',function(){
    let check = confirm('확인창을 클릭했습니다.');
    if (check)
        result.innerHTML = '<span style="color:red">확인을 클릭</span>';
    else
        result.innerHTML = '<span style="color:red">취소를 클릭</span>';
});

 

3) prompt

이름을 입력하면 아래와 같이 페이지에 글을 적을 수 있게 해 놓았다.

btn_03.addEventListener('click',function(){
    let data = prompt('이름을 입력하세요');

    result.innerHTML = `<span style="color:blue">당신의 이름은 ${data}이군요</span>`;
});

 

 

새 창 열기

새로운 창으로 'gogji.html'의 내용이 보이게 하였다.

let btn_04 = document.getElementById('btn_04');
btn_04.addEventListener('click', function(){
    window.open('gongji.html','win','height=6000x,left=100px,width=400px, menubar=no');
});

 

* gogji.html (내부 내용 삭제)

해당 형식으로 html 문서가 나오며 창닫기 버튼을 누름으로서 새로운 창이 꺼지고,
출력 버튼을 누르면 인쇄 설정으로 넘어가는 새로운 창이 나온다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>공지사항</title>
</head>
<body>
    <div class="container">
        <h2>Javascript 시험 공지</h2>
        
        <input type="button" id="close_w" value="창닫기">
        <input type="button" id="print_w" value="출력">
    </div>
    <script>
        document.getElementById('close_w').addEventListener('click', function(){
             window.close();
        });
        document.getElementById('print_w').addEventListener('click', function(){
            window.print();
        });

    </script>
</body>
</html>

 

DOM 관련 처리 - DOM 에 접근하여 객체를 받아오는 방법

1) getElementById('아이디')

let id = document.getElementById('writer');
console.log(id);

 

2) getElementByTagName()

배열로 반환 받는다.

let tags = document.getElementsByTagName('p');
console.log(tags.length);
console.log(tags);

 

3) getElementsByClassName()

let poem = document.getElementsByClassName('poem');
console.log(poem.length);
console.log(poem);

 

DOM 관련 처리 - CSS 선택자를 이용하여 객체를 가져오는 방법

1) querySelector('CSS선택자')

문서 내의 CSS 선택자에 맞는 모든 데이터 중 첫 번째 데이터만 반환, 똑같은 데이터 중 하나밖에 못 가져온다.

console.log('------------ querySelector()')
let poem2 = document.querySelector('.poem');
console.log('length: ' + poem2.length);
console.log('poem2 :' + poem2);

 

2) querySelectorAll('CSS선택자')

문자 내의 CSS 선택자에 맞는 모든 데이터를 배열로 반환 

console.log('------------ querySelectorAll()')
let poem3 = document.querySelectorAll('.poem'); // 선택자의 모든 값을 가져옴
console.log('length: ' + poem3.length);
console.log('poem2 :' + poem3);

 

getElementsByClassName() 과의 차이점

getElementsByClassName() querySelectorAll()
HTMLCollections 타입으로 반환 nodelist 타입으로 반환

 

HTML 요소의 특정 속성을 조회하거나 치환하는 메소드

종류 내용
조회 HTMLObject.getAttribute(속성명)
변경(치환) HTMLObject.setAttribute(속성명, 값) 
document.getElementById('change').addEventListener('mouseenter', function() {
    let alt = document.getElementById('image'). getAttribute('alt');
    // alert(alt);
    //console.log(alt);
    document.getElementById('image'). setAttribute('src','../imges/pic2.jpg');

});

// mouseleave: 특정 위치를 떠나면
document.getElementById('change').addEventListener('mouseleave', function() {
    document.getElementById('image'). setAttribute('src','../imges/flower.jpeg');

});

 

html 본문

변경이라는 버튼에 마우스만 가져다 두는 것만으로도 사진이 변경된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 처리</title>
    <style>
        p img {
            width: 300px;
        }
    </style>
    <script defer src="./script/A16_dom.js"></script>
</head>
<body>
    <h1>꽃</h1>
    <h2 id="writer">김춘수</h2>
    <p>
        <input type="button" id="change" value="변경"> <br>
        <img id="image" src = "../imges/flower.jpeg" alt="원숭이꼬리선인장" width="300px"><br>
        내가 그의 이름을 불러 주기 전에는<br>
        그는 다만<br>
        하나의 몸짓에 지나지 않았다.
    </p>
    <p class="poem">
        내가 그의 이름을 불러주었을때<br>
        그는 나에게로 와서<br>
        꽃이 되었다.
    </p>
    ...
    </body>
</html>

 

DOM 예제

1) input 데이터를 읽어 결과 처리하기

    <h2>form에 접근하기</h2>
    <h3>(1) input 데이터를 읽어 결과 처리하기</h3>
    <div>
        키: <input type="text" id="height" placeholder="키"> &nbsp;
        몸무게: <input type="text" id="weight" placeholder="몸무게"> &nbsp;
        <input type="button" id="calc1" value="계산"> <br>
        <h3 id="target1"></h3>
    </div>
    <hr>

// 1) 키와 몸무게를 입력받아 BMI를 계산하는 코드
document.getElementById('calc1').addEventListener('click', calcBMI);
// calcBMI() 를 호출하겠다.

function calcBMI(){
    let height = document.getElementById('height');
    let weight = document.getElementById('weight');

    // 길이가 0이거나 isNaN이 true 이면 진행 안함
    if(height.value.trim().length == 0 || isNaN(height.value.trim())){
        alert("키를 입력해주세요.");
        height.select();
        return;
    }
    
    if(weight.value.trim().length == 0 || isNaN(weight.value.trim())){
        alert("몸무게를 입력해주세요.");
        weight.select();
        return;
    }

    let bmi = weight.value / ((height.value * 0.01)**2);
    bmi = Math.round(bmi*100)/100;
    let result = `당신의 키는 ${height.value}cm, 몸무게는 ${weight.value}kg, 
                    BMI는 ${bmi}입니다.`
    
    document.getElementById('target1').innerHTML = result;
    // 끝 태그가 있는 태그에는 InnerHTML 사용
}

 

2) select 값을 읽어 결과 처리하기

    <h3>(2) select 값을 읽어 결과 처리하기</h3>
    <div>
        <select name="" id="language">
            <option value="Java">자바언어</option>
            <option value="Python">파이썬</option>
            <option value="Data Analysis">데이터분석</option>
            <option value="Full stack">백엔드 개발</option>
        </select>
        <input type="button" id="calc2" value="자신있는 기술은?"> &nbsp;
        <h3 id="target2"></h3>
    </div>

 

select 상자에 걸린 change 이벤트는 값이 변경되는 것만으로도 밑에 글이 바뀌는 이벤트를 건 것이다.

// (2) select 상자값 읽어오기
let language = document.getElementById('language'); // select box
let calc2 = document.getElementById('calc2'); // 버튼
let target2 = document.getElementById('target2');

// 버튼에 걸린 클릭 이벤트
calc2.addEventListener('click', function(){
    let value = language.value;
    let result = `선택한 기술은 ${value} 입니다.`;
    target2.innerHTML = result;
});

// select 상자에 걸린 change 이벤트
language.addEventListener('change',function(){
    let value = this.value; // this = 이벤트가 걸려있는 주체
    let data = `선택한 기술은 ${value} 입니다.`;
    target2.innerHTML = result;
});

 

3) 연습문제

    <h3>(3) 연습문제: </h3>
    <div>
        <input type="text" id="num1" placeholder="값1">
        <select name="" id="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" id="num2" placeholder="값2">
        <input type="button" id="calc3" value="="> 
        <input type="text" id="target3" disabled>
        <!-- readonly : 읽어내기만 , disabled : 아예 사용 못 하게--> 
        <input type="button" id="clear" value="clear">
    </div>
    <hr>

 

// (3) 연습문제
document.getElementById('calc3').addEventListener('click', function(){
    let num1 = document.getElementById('num1');
    let num2 = document.getElementById('num2');
    let operator = document.getElementById('operator');
    let target3 = document.getElementById('target3');

    // 길이가 0이거나 문자가 포함되어있는지 체크 
    if(num1.value.trim().length == 0 || isNaN(num1.value.trim())){
        num1.select();
        return;
    }

    if(num2.value.trim().length == 0 || isNaN(num2.value.trim())){
        num1.select();
        return;
    }

    let result = 0;
    let oper = operator.value;
    let value1 = parseInt(num1.value.trim());
    let value2 = parseInt(num2.value.trim());

    switch(oper){
        case '+' : result = value1 + value2; break;
        case '-' : result = value1 - value2; break;
        case '*' : result = value1 * value2; break;
        case '/' : result = value1 / value2; break;
    }

    target3.value = result;
});
코드  내용
if(num1.value.trim().length == 0 || isNaN(num1.value.trim())){
        num1.select();
        return;
    }		 길이가 0이거나 문자가 포함되어있는지 체크 

 

+ clear 버튼을 누르면 입력상자 데이터 삭제하는 이벤트

document.getElementById('clear').addEventListener('click', function(){
    let num1 = document.getElementById('num1');
    let num2 = document.getElementById('num2');
    let target3 = document.getElementById('target3');

    num1.value = '';
    num2.value = '';
    target3.value = '';

});

 

4) radio 버튼의 값을 읽어 결과 처리하기

   <h3>(4) radio 버튼의 값을 읽어 결과 처리하기</h3>
    <div>
        <input type="radio" name="gender" class="gender" value="남자"> 남성 &nbsp;
        <input type="radio" name="gender" class="gender" value="여자"> 여성 &nbsp;
        <input type="button" id="calc4" value="Click">
        <h3 id="target4"></h3>
    </div>
    <hr>

document.getElementById('calc4').addEventListener('click', function(){
    //let gender = document.querySelector('input[type="radio"]:checked');
    // 현재 페이지에 라디오 버튼이 여러 그룹이 있다면 .. 잘 못 불러올수도 있다.
    let gender = document.querySelector('.gender:checked');
    // 전체 중에 딱 하나만 읽을 수 있다. 
    // input[type="radio"]:checked - 체크된 데이터를 읽어온다
    let genderTemp = gender.value;

    document.getElementById('target4').innerHTML = genderTemp;
});

 

5) checkbox 값을 읽어 결과 처리하기(넷플릭스 인기 드라마 선택)

    <h3>(5) checkbox 값을 읽어 결과 처리하기(넷플릭스 인기 드라마 선택)</h3>
    <div>
        <input type="checkbox" name="netflix" class="netflix" value="오징어게임" checked> 오징어게임 &nbsp;
        <input type="checkbox" name="netflix" class="netflix" value="더글로리"> 더글로리 &nbsp;
        <input type="checkbox" name="netflix" class="netflix" value="프렌즈"> 프렌즈 &nbsp;
        <input type="checkbox" name="netflix" class="netflix" value="인간수업"> 인간수업 &nbsp;
        <input type="checkbox" name="netflix" class="netflix" value="워킹데드"> 워킹데드 &nbsp;
        <input type="button" id="calc5" value="Click">
        <h3 id="target5"></h3>
    </div>
    <hr>

 

배열로 반환되기 때문에 값을 읽으려면 반복문을 돌려야 한다.

document.getElementById('calc5').addEventListener('click', function(){
    let dramas = document.querySelectorAll('.netflix:checked'); // 배열
    let dramaTemp = '';

    for(let i = 0; i < dramas.length; ++i){
        dramaTemp += dramas[i].value + ' ';
    }
    document.getElementById('target5').innerHTML = dramaTemp;
});

 

6) Textarea에 입력된 글자 처리하기

    <h3>(6) Textarea에 입력된 글자 처리하기</h3>
    <div>
        <textarea name="" id="textbox" cols="30" rows="10"></textarea> <br>
        <span id="count" style="color:darkred;">글자수 : 0</span> <br><!--글자수 세기-->
        <input type="button" id="calc6" value="Click"> <!--글자 복사하기-->
        <h3 id="target6"></h3>
    </div>
    <hr>

 

- 글자수 세는 이벤트 : keyup = mouseenter 와 같은 역할이다.

// (6) Textarea 에 입력된 글자 처리하기
document.getElementById('textbox').addEventListener('keyup', function(){
    let count = this.value.length; // 글자수 저장
    // console.log(this.value); 확인
    document.getElementById('count').innerText = '글자수 : '+ count;
});

 

- textarea 내의 글자를 읽어와 target6 위치에 복사하는코드

document.getElementById('calc6').addEventListener('click', function(){
    let data = document.getElementById('textbox');
    document.getElementById('target6').innerText = data.value;
});

 

7) 기타 입력상자 처리(color, date)

    <h3>(7) 기타 입력상자 처리(color, date)</h3>
    <div>
        <input type="color" name="" id="color"> <br>
        <input type="date" name="" id="date"> <br>
        <input type="button" id="calc7" value="Click"> 
        <h3 id="target7"></h3>
    </div>

//(7) 기타 입력상자 처리(color, date)
document.getElementById('calc7').addEventListener('click', function(){
    let color = document.getElementById('color');
    let date = document.getElementById('date');
    let result = ` 선택한 색상 : ${color.value}, <br>
                    선택한 날짜: ${date.value}`;
    document.getElementById('target7').innerHTML = result;
})

 

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

'국비 교육 > 프론트엔드' 카테고리의 다른 글

[자바스크립트] 회원가입 검증 예제  (0) 2024.03.09
[자바스크립트] 함수 - 4 (수학관련 함수)  (0) 2024.03.09
[자바스크립트] 함수 -3 (배열처리, 문자열처리)  (0) 2024.03.02
[자바스크립트] 함수 - 2 (화살표 함수)  (0) 2024.03.02

관련글

티스토리툴바