DAY_029[국비] 자바 웹프로그래밍 과정

Bona의 블로그 입니다.·2022년 11월 8일

JavaScript getElementById

국비과정

목록 보기

30/99

🌞 Day 029

document.getElementById

🌌 브라우저 객체 모델 (BOM : Browser Object Model)

웹브라우저를 대상으로 하여 외관으로 보이는 외형이나 내부에 저장된 각종 속성들을 조정하고 싶다면 자바스크립트가 제공하는 그에 관련된 객체들을 이용하여 조정하고 컨트롤 한다.
자바스크립트에서는 윈도우나 웹브라우저 등을 객체로 정의해서 그 안에 여러 구성요소들을 멤버변수나 멤버 메서드로 접근하고 조정할 수 있게 각종 객체를 제공한다.
BOM이란 자바스크립트 내에 내장되어 있는 웹브라우저와 관련된 객체들의 집합을 의미
window, screen, location, navigator, history, document 등

🪐 window 객체

브라우저 기반 자바스크립트 최상위 객체
alert(), prompt(), confirm() 함수 모두 window 객체의 메서드(함수)
원래의 사용은 window.alert() window.prompt() 라고 써야 하지만 편의상 또는 현재 위치가 window객체 내부이기때문에 window. 을 생략하고 사용

🌟 window.open()

window.open() 팝업창 생성 메서드
: window 내의 사용빈도 수가 높은 메서드 중 대표적
명령형식
: window.open(팝업창에 표시될 페이지 또는 주소, 팝업창이름, 옵션)
팝업창에 표시될 페이지이름(경로포함) 또는 사이트의 주소
: '04_Loop.html' , 'https://www.naver.com' 등
팝업창 이름
: 스크립트내부에서 팝업창끼리 구분할 이름 - 'child' 같은 별칭
옵션
: 'width=600, hight=480'과 같은 팝업창 속성들. 가로 세로 크기 등
: " " 또는 ' ' 안에 여러 요소들 (,)컴마로 구분하여 설정하고자 하는 요소를 모두 넣는다
- width : 팝업창 가로길이
- height : 팝업창 세로길이
- toolbar=no : 단축도구창(툴바) 표시안함
- menubar=no : 메뉴창(메뉴바) 표시안함
- location=no : 주소창 표시안함
- scrollbars=no : 스크롤바 표시안함
- status=no : 아래 상태바창 표시안함
- resizable=no : 창변형 하지 않음
- fullscreen=no : 전체화면 하지 않음
- channelmode=no : F11키 기능과 같음 (전체 화면 모드)
- left=0 : 왼쪽에 창을 고정 (ex. left=30 이런식으로 조정)
- top=0 : 위쪽에 창을 고정 (ex. top=100 이런식으로 조정)
- 브라우저들이 많아지면서 옵션이 이름이 달라지고 안 되는 옵션도 있음
실제 팝업창 메서드 실행 예
window.open('https://www.daum.net', 'child1', 'width=600, height=480, left=100, top=100');

🌟 window.setInterval()

window.setInterval()
: 일정 시간 간격으로 지정한 동작 또는 함수를 호출 실행
window.setInterval( 동작을 담고 있는 익명함수 또는 선언적 함수 이름, 시간 간격 );
시간간격 : 1000 -> 1초
사용 예)
window.setInterval( function(){ child.moveBy(50, 50); }, 1000 );
작성순서

🌟 window객체 안의 모든 멤버 변수

객체 안의 모든 멤버 변수 화면에 출력해보기

    var output = ' ';
    for(var key in window){ 
    // 객체 내의 속성 key 값을 객체에 적용하여 반복실행
        output += '<h2>※  ' + key + ' : ' + window[key] + '</h2>' ;
     // window['변수이름']이라고도 쓴다. key는 String데이터를 담는 변수이고, 
     // window 내 멤버변수들의 이름들이 key변수에 하나씩 담기면서 반복 실행
    }
    // 객체 안의 모든 멤버 변수(key)가 담고 있는 값(window[key])들을 
    // 모두 출력할 때 이와 같은 반복실행을 사용한다.
    document.write(output);

🪐 screen 객체

웹브라우저의 화면이 아니라 운영체제 화면의 속성을 가지는 객체

🪐 location 객체

브라우저의 주소 표시줄과 관련된 객체
프로토콜의 종류, 호스트 이름, 문서 위치 등의 정보를 가짐
페이지를 링크나 주소창을 이용하지 않고 이동할 때 많이 사용

<body>
    <input type="button" value="다음으로 이동" 
	       onclick="location.href = 'https://www.daum.net'">
    <input type="button" value="네이버로 이동" onclick="moveNaver();">
</body>

🌌 Tag Controll

태그에 설정된 마우스 또는 그 외 이벤트에 자바스크립트 함수를 연결해서 원하는 동작이 실행되게 한다.
자바스크립트에서 body 내의 태그 하나를 id값을 이용해서 콕집어내는(selector) 명령 ➡️ document.getElementById("아이디값")
css에서 #img1한 것처럼 자바스크립트에서 id가 'img1'인 태그를 선택하는 명령이다.
이벤트
- onmouseover : 마우스가 위에 있을 때
- onmouseout : 태그위에 있던 마우스가 빠져나갔을 때
  (onMouseout을 설정하지 않고 onMouseover만 설정한 경우 마우스가 빠져나가도 onMouse 이벤트로 인한 결과로 변한 상태 그대로 있음)
- onclick : 클릭 했을 때

🪐 Tag Controll 연습

🌟 예제 1

💠 그림을 클릭하면 숫자 하나를 입력받아서 '숫자.jpg' 파일로 그림을 바꾸는 코드 완성

주어진 코드
<img src="images/1.jpg" id="target">
changeImg 함수 만들기

🌟 예제 2 : 클릭할 때마다 이미지파일 10개(1~10.jpg)가 차례로 계속 바뀜

img태그의 onclick이벤트 속성에 changeImg2() 함수 호출하기
changeImg2() 코드 🔽

🌟 예제 3 : 화면이 켜지면 함수가 바로 실행

body태그에 onload이벤트 속성에 함수(앞에 예제에서 만든 것과 같은 함수) 호출하기

🌟 예제 4 : 예제3에서 마우스를 올리면 stop되도록

<body onload="start();">
    <img src="images/1.jpg" id="target" 
         onmouseout="start();" onmouseover="stop();">
</body>

body 태그의 onload이벤트에서 start()함수를 호출해서 로딩되자마자 바로 이미지 변경이 시작되게 하기
onmouseover="stop();를 타겟되는 이미지에 속성추가해서 마우스가 태그 위에 있을 때는 이미지 변경이 멈추도록 하기

window.clearInter(setInterval을 담은 변수);를 사용

onmouseout="start();"를 이용해서 마우스가 태그위에서 빠져나가면 이미지 변경이 다시 시작되도록 하기

🌟 예제 5 : 0.5초 마다 회전하는 이미지

한 개의 타이머는 시계방향으로 0.5초마다 20도씩 회전하는 동작을
또 한 개의 타이머는 반시계방향으로 0.5초마다 20도씩 회전하는 동작을
onMouseOver와 onMouseOut 이벤트에 연결하여 코딩
자바스크립트에서 사용하는 css의 rotate 명령 사용법
document.getElementById("id값").style.webkitTransform = 'rotate(회전각도deg)';