📝 JavaScript
🖥️ 브라우저 객체
브라우저에 내장된 객체를 '브라우저 객체'라고 합니다. window는 브라우저 객체의 최상위 객체이고, window 객체에는 하위 객체가 포함되어 있습니다. 즉, 계층적 구조로 이루어져 있으며 이것을 브라우저 객체 모델(BOM, Browser Object Model)이라고 합니다.
✅ window 객체의 메서드 한눈에 보기
|
종류
|
기능
|
| open("URL", "새 창 이름", "새 창 옵션") | URL 페이지를 새 창으로 나타내기 |
| alert(data) | 경고 창을 나타내고 데이터를 보여주기 사용자가 [확인] 누르면 alert() 사용한 다음 위치 코드 수행 |
| prompt("질문", "답변") | 질문과 답변으로 질의응답 창을 나타내기 |
| confirm("질문 내용") | 질문으로 확인이나 취소 창 띄우기 [확인] 버튼 클릭시 true반환, [취소] 클릭시 false 반환 |
| moveTo(x,y) | 지정한 새 창의 위치 이동 |
| resizeTo(width, height) | 지정한 새 창의 크기를 변경 |
| setInterval(function() { 자바스크립트 코드 }, 시간 간격) | 지속적으로 일정한 시간 간격으로 함수를 호출하여 코드 실행 |
| setTimeout(function() { 자바스크립트 코드 }, 시간 간격) | 단 한 번 일정한 시간 간격으로 함수를 호출하여 코드 실행 |
출처: (이지스퍼블리싱) 자바스크립트 + 제이쿼리 입문( p.113)
1-1. open()
팝업창을 띄우는 메서드 : open("URL", "새 창 이름", "새 창 옵션")
open() 메서드를 이용하면 지정한 URL 페이지를 새 브라우저창에 나타낼 수 있다. 예전에는 이 메서드로 광고에 자주 사용되는 팝업창을 만들기도 했다. 하지만 최근에는 사용자가 팝업창을 차단할 수 있기 때문에 팝업창을 활용한 광고 효과가 많이 떨어져서 거의 사용되지 않는다.
*새창 옵션
- width: 새 창의 너비
- height: 새 창의 높이
- left : 새 창의 수평(X축) 위치
- top : 새 창의 수직(Y축) 위치
- scrollbars: 스크롤바의 숨김/노출(숨김=no, 노출=yes)- location: 새 창의 URL 주소 입력 영역 숨김/노출- status: 새창의 상태표시줄 숨김/노출 - toolbars: 새 창의 도구 상자 영역 숨김/노출
window.open("http://www.easyspub.com/", "easyspub", "width=350, height=400, left=50, top=10, scrollbars=no");
1-2. alert()
질의 응답 창을 띄우는 메서드 : prompt("질의 내용", "기본 답변")
prompt("당신의 연령은?", "0");
1-3. confirm()
확인/취소창을 나타내는 메서드 : confirm("질의 내용" )
confirm("정말로 삭제하시겠습니까?");
1-4. setInterval() / clearInterval()
일정한 시간 간격으로 코드를 반복 실행하는 메서드 : setInterval()
setInterval()메서드를 취소하는 메서드 :clearInterval()
* setInterval()과 setTimeout()의 차이
일단 setInterval()의 경우 일정 시간 간격으로 코드를 반복 실행한다면, setTimeout() 메서드는 설정한 시간 후에 코드를 한 번만 실행하고 종료하는 차이점이 있다.
setInterval() 메서드의 시간 간격은 1/1,000초 단위(ms)로 작성. 만약 3초 간격으로 실행하려면 3,000으로 설정해야 함(3,000 * 1/1000). clearnInterval() 메서드에는 참조 변수가 사용된다.
기본형
1. var 참조변수 = setInterval(function() { 코드 }, 시간간격(ms));
2. var 참조변수 = setInterval("코드", 시간간격(ms));
3초(3,000) 간격으로 변수 i값을 1씩 증가시키는 코드▼
var intv = setInterval(function() { i++; }, 3000);
var intv = setInterval(" i++ ", 3000);clearInterval(intv) //참조변수
3초(3,000) 간격으로 변수 i값을 1씩 증가/감소시켜 콘솔 창에 출력하는 코드▼
<body>
<script>
var addNum = 0;
var subNum = 1000;
var auto_1 = setInterval(function() {
addNum++;
console.log("addNum: " + addNum);
}, 3000);
var auto_2 = setInterval(function() {
subNum--;
console.log("subNum: " + subNum);
}, 3000);
</script>
<button onclick="clearInterval(auto_1)">증가 정지</button>
<button onclick="clearInterval(auto_2)">감소 정지</button>
</body>
1-5. setTimeout() / clearTimeout()
setTimeout() : 일정 시간이 지나면 코드를 실행하고 종료하는 메서드
setTimeout() : setTimeout() 메서드를 제거하는 메서드
setTimeout() 메서드를 조금만 응용하여 재귀 호출하면 setInterval() 메서드처럼 사용 할 수도 있다.
기본형
1. var 참조변수 = setTimeout(function() { 코드 }, 시간간격(msc));
2. var 참조변수 = setTimeout("코드", 시간간격(msc));
5초(3,000) 간격으로 변수 i값을 1씩 증가시키는 코드▼
var tim = setTimeout(function() { i++; }, 5000);
var tim = setTimeout(" i++ ", 5000);clearTimeout(tim) // 참조 변수
5초(5,000) 간격으로 단 한 번 실행되어 변수 i에 값을 1만큼 증가시킨 후 콘솔 패널에 i 값을 출력하는 코드 ▼
<script>
var addNum = 0;
var auto = setTimeout(function() {
addNum++;
console.log(addNum);
}, 5000);
</script>
'JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 비동기 처리 promise then vs async await 차이점 (1) | 2024.05.23 |
|---|---|
| [Javascript] screen, location, history, navigator 객체와 속성 (+메서드) (0) | 2024.04.29 |
| [JavaScript] 소수점 둘째자리에서 반올림 toFixed() , truncateToFixed() 메서드 (1) | 2024.03.29 |
| [JavaScript] 자바스크립트 배열 2 : 배열 객체 메서드 총정리 (0) | 2024.03.25 |
| [JavaScript] 자바스크립트 배열 1 : 배열 생성 & 저장된 데이터 출력하기 (0) | 2024.03.25 |
