Web - Front end 23. 윈도우와 브라우저 관련 객체

 Web - Front end 23. 윈도우와 브라우저 관련 객체



1. 브라우저 관련 객체 개요


- BOM (Browser Object Model)

자바스크립트로 브라우저를 제어하기 위해 지원되는 객체들

HTML 페이지의 내용과는 관계 없는 순수 브라우저와 관련된 객체들



- 브라우저 공통 BOM 객체들과 기능

window : 브라우저 윈도우 모양 제어, 새 윈도우 열고 닫기

navigator : 브라우저에 대한 다양한 정보 제공

history : 브라우저 윈도우에 로드한 URL 리스트의 히스토리 관리

location : 브라우저 윈도에 로드된 HTML 페이지의 URL 관리

screen : 브라우저가 실행되고 있는 스크린 장치에 대한 정보 제공



- BOM 의 국제 표준은 없음

브라우저 마다 BOM 객체들이 조금씩 다름

객체의 이름이 같더라도 프로퍼티와 메소드들이 다를 수 있음






2. window 객체

열려있는 브라우저 윈도우나 탭 윈도우를 나타내는 객체

윈도우 마다 하나의 객체가 생성됨


- window 객체의 생성


* window 객체가 생성되는 3가지 경우

(1) 브라우저가 새로운 웹 페이지를 로드할 때

(2) <iframe> 태그당 하나의 window 객체 자동 생성

(3) 개발자가 자바스크립트 코드로 임의의 window 객체 생성

window.open("웹 페이지 URL", "윈도우이름", "윈도우속성")

window.open() 이 실행되면 새 윈도우가 열리고 웹 페이지가 출력됨



- window 객체의 프로퍼티와 메소드


* 프로퍼티 & 컬렉션






























* 메소드




















* 이벤트 리스너








- 윈도우 열기

window.open() 메소드 사용

window.open("URL", "윈도우이름", "윈도우속성")


* URL(웹 페이지 주소)

윈도우에 출력할 웹 페이지의 주소 전달

null을 사용할 수 없음


* 윈도우 이름

새로 여는 윈도우의 이름 전달

윈도우의 이름은 유일해야 함 - 현재 열린 윈도우와 동일한 이름을 주면 해당 윈도우 위에 웹 페이지를 로드

생략 가능

윈도우의 이름을 개발자가 임의로 지정하지만 특별한 4가지 경우가 있음

(1) _blank : 이름 없는 새 윈도우를 열어 출력

(2) _parent : 현재 윈도우의 부모 윈도우에 출력

(3) _self : 현재 웹페이지에 출력

(4) _top : 브라우저의 윈도우에 웹 페이지 출력


* 윈도우 속성

윈도우의 모양이나 크기등의 속성들을 전달

빈칸 없이 콤마(,) 로 구분

생략 가능


* 윈도우 속성 종류











(기본값 : no)




* 윈도우 열기 사례

- 'win' 이름에 툴바만 가지는 세 윈도우 열고 sample.html 출력

window.open("sample.html", "win", "toolbar=yes");

- 현재 윈도우에 sample.html 출력

window.open("sample.html", "_self");

- 이름 없는 새 윈도우를 열고 sample 출력

window.open("sample.html", "_blank");

- (10, 10) 위치에 300x400 크기의 'win' 이름의 윈도우 열고 네이버 출력

window.open("https://www.naver.com", "win", "left=10,top=10,
             width=300,height=400");

- 이름과 속성이 없는 새 윈도우 열기

window.open("sample.html");
window.open("sample.html", null, "");

- 새로운 빈 윈도우 열기

window.open();
window.open("");
window.open("", "", "");
window.open("", null, null);


* 이름 있는 윈도우와 없는 윈도우의 차이

이름 있는 윈도우는 여러개를 열어도 하나의 윈도우에만 열리고 이름이 없는 윈도우는 열 때마다 새로운 윈도우를 생성


* window.open(). & open()

그냥 open() 을 호출하면 document.open() 으로 인식하기 때문에 반드시 window 를 붙여서 작성





* 예시 - 윈도우 열기

<head>
<script>
function load(url){
window.open(url,"win","left=300,top=300,width=400,height=300");
}
</script>
</head>
<body>
<h2>window.open() 사용해 보기</h2>
<hr>
<a href="javascript:load('https://namu.wiki/w/%EC%86%90%ED%9D%A5
    %EB%AF%BC')">
손흥민 홈페이지</a><br>
<a href="javascript:load('https://www.universalorlando.com/
    web/en/us')">
유니버셜스튜디오 홈페이지</a><br>
<a href="javascript:load('https://disneyworld.disney.go.com/')">
디즈니월드 홈페이지</a><br>
</body>












- 윈도우 닫기

윈도우가 닫히면 윈도우는 웹 페이지와 함께 사라짐


* 윈도우 닫는 코드

window.close();
self.close();

브라우저에 따라 보안의 이유로 작동되지 않을 수 있음



* 예시 - 윈도우 열고 닫기

<head>
<script>
let newWin = null;
function load(url){
    newWin=window.open(url,"Win","left=300,top=300,
    width=400,height=300");
}
function winClose(){
    if (newWin == null || newWin.closed){
        return; // 윈도우가 열리지 않았거나 닫혔다면 함수를 종료
    }
    newWin.close();
}
</script>
</head>
<body>
<h2>window.open() 사용해 보기</h2>
<hr>
<a href="javascript:load('https://namu.wiki/w/%EC%86%90%ED%9D%A5
    %EB%AF%BC')">
손흥민 홈페이지</a><br>
<a href="javascript:load('https://www.universalorlando.com/
    web/en/us')">
유니버셜스튜디오 홈페이지</a><br>
<a href="javascript:load('https://disneyworld.disney.go.com/')">
디즈니월드 홈페이지</a><br>  
    <a href="javascript:winClose()">새 윈도우 창 닫기</a><br>
</body>













3 . window의 타이머 활용

 window에는 타이머를 작동시키는 메소드 2개가 있어 시간에 따라 웹 페이지에 동적인 변화를 줄 수 있음


- setTimeout() & clearTimeout()

밀리초 단위의 타임아웃  지연 시간 과 타임아웃 코드를 지정해서 타임아웃 지연 시간 후 타임아웃 코드를 실행

타임아웃 코드는 1회만 실행됨

setTimeout() : 인수로 타임아웃 코드와 지연 시간을 밀리초 단위로 넘겨주면 지정한 시간 이후에 타임아웃 코드가 1회 실행되고 타이머 ID 를 반환

clearTimeout() : 인수로 setTimeout() 이 반환한 ID를 넘겨주면 해당 타이머를 해제함


예)

let timerId = setTimeout("alert(3)", 3000); // 3초 후 알림 표시
clearTimeout(timerId); // 타이머 종료


* 예시 - 이미지에 마우스를 올리면 3초 뒤에 해당 웹사이트로 이동. 중간에 마우스를 치우면 타이머 종료

<head>
<script>
let timerId = null;
function startTimer(title, time, img){
// 3초후 load() 함수 실행
timerId = setTimeout("load('https://www.google.com/')",time);
img.title = title; // 툴팁 설정
}
function stopTimer(){
if (timerId != null){
clearTimeout(timerId); // 타이머 종료
}
}
function load(url){
window.location = url;
}
</script>
</head>
<body>
<h2>setTimeout() & clearTimeout()</h2>
<hr>
<img src="media/googleLogo.png"
onmouseover="startTimer('구글 페이지로 이동', 3000, this)"
onmouseout='stopTimer()'>
</body>
















- setInterval() & clearInterval()

타임아웃 시간 주기로 타임아웃 코드를 무한 반복 실행

setInterval() : 인수로 타임아웃 코드와 반복 시간은 밀리초 단위로 주면 해당 시간 마다 타임아웃 코드를 계속 실행하고 타이머 ID 를 반환

clearInterval() : 인수로 타이머 ID를 주면 해당 타이머를 종료


예)

let timerID = setInterval('alert("3초")', 3000); // 3초마다 알림
clearInterval(timerID); // 타이머 종료




* 예시 - 회전하는 텍스트. 클릭하면 회전 종료

<head>
<script>
let span = null;
let timerId = null;
function init(){
span = document.getElementById('span');
// 0.1초 간격으로 doRotate() 함수 실행
timerId = setInterval("doRotate()", 100);
span.onclick = function(){ // onclick 이벤트리스너 지정
clearInterval(timerId); // 클릭하면 타이머 종료
}
}
function doRotate(){ // 글자 회전 함수
let str = span.innerHTML;
let firstChar = str.substr(0, 1);
let remate = str.substr(1, str.length-1);
str = remate + firstChar;
span.innerHTML = str;
}
</script>
</head>
<body onload="init()">
<h2>setInterval() & clearInterval()</h2>
<h4>움직이는 문자열을 클릭하면 회전이 중단</h4>
<hr>
<div>
<span id="span" style="background-color: lavender;">
자동 회전하는 텍스트 입니다. </span>
</div>
</body>











4. window 객체 활용



- 윈도우 위치 및 크기 조절

moveBy() : 윈도우를 상대값으로 위치 조절

moveTo() : 윈도우를 절대값으로 위치 조절

resizeBy() : 윈도우를 상대값으로 크기 조절

resizeTo() : 윈도우를 절대값으로 크기조절

window 생략 가능

브라우저에서 바로 로딩 된 웹 페이지에서는 보안상의 이유로 크기와 위치 조절이 안됨

- >window.open()으로 생성된 윈도우에서는 잘 작동 - 단 윈도우를 열 때 속성으로 ㅇ뒤치와 크기를 정해줘서 독립된 위치에서 열리에 해줘야 함


예)

moveBy(5, -10); // 오른쪽으로 5픽셀, 위로 10픽셀 이동
moveTo(20, 10); // 스크린의 (20, 10)위치로 이동
// 크기를 5픽셀 좁게 10픽셀 길게 변경
resizeBy(-5, 10);
resizeTo(self.outerWidth - 5, self.height + 10);
// 크기를 300*200으로 지정
resizeTo(300, 200)



* 예시 - 버튼을 누르면 윈도우의 위치와 크기가 변경되는 웹 페이지를 여는 웹페이지

<body>
<h2>위도우 크기 및 위치를 조정할 수 있는 새 창 열기</h2>
<hr>
<button onclick="window.open('move_resize.html', 'win1',
'left=100,up=100,width=500,height=400')">열기</button>
</body>


<body>
<h2>현재 윈도우의 위치와 크기를 상대적으로 조정</h2>
<hr>
<button onclick="moveBy(-10, 0)">left</button>
<button onclick="moveBy(10, 0)">right</button>
<button onclick="moveBy(0, -10)">up</button>
<button onclick="moveBy(0, 10)">down</button>
<button onclick="resizeBy(10, 10)">+</button>
<button onclick="resizeBy(-10, -10)">-</button>
</body>










- 웹 페이지 스크롤

scrollBy()와 scrollTo() 함수를 이용해서 웹 페이지를 상하 좌우로 스크롤 할 수 있음

scorellBy() : 상하 좌우로 상대값으로 스크롤 

scrollTo() : 상하 좌우로 절대값으로 스크롤(전해진 위치로 스크롤)


예)

scrollBy(0, 10); // 위로 10픽셀 스크롤
scrollBy(10, -15); // 왼쪽으로 10픽셀, 아래쪽으로 15픽셀 스크롤
scrollTo(0, 200); // (0, 200) 위치로 스크롤



* 예시 - 자동으로 아래로 스크롤 되는 웹 페이

<head>
<script>
function startScrollDown(time){
setInterval("autoScroll()", time);
}
function autoScroll(){
window.scrollBy(0, 10);
}
</script>
</head>
<body onload="startScrollDown(1000)">
<h2>1초 간격으로 자동으로 10픽셀 스크롤 다운</h2>
<hr>
<h2>애국가</h2>
<pre>
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세.

무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세

남산 위에 저 소나무, 철갑을 두른 듯
바람서리 불변함은 우리 기상일세.

무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세

가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세

무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세

이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라 사랑하세

무궁화 삼천리 화려강산
대한 사람 대한으로 길이 보전하세
</pre>
</body>














- 웹 페이지 프린트

window.print() (window 생략가능) 함수를 사용해서 현재 페이지 인쇄 가능


* 예시 - 현재 페이지 프린트

<body>
<h2>window.print()</h2>
<hr>
<button onclick="window.print()">PRINT</button>
</body>












- onbeforeprint & onafterprint 이벤트 리스너

각각 웹 페이지가 프린트 되기 직전과 프린트 된 후에 발생

(onbeforeprint이벤트 발생 ->  print() 실행 ->  onafterprint 이벤트 발생)

위의 이벤트들을 이용하면 웹 페이지가 출력되기전에 웹 페이지를 수정할 수 있음

주로 웹 페이지가 출력될 때 바탕화면에 회사 로고등을 워터마크로 출력할 때 사용



* 예시 - 프린트 할 때만 배경에 워터마크 출력

<head>
    <style>
#logodiv{
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
<script>
window.onbeforeprint = function(){
let logodiv = document.getElementById('logodiv');
logodiv.style.display = 'block'; // 워터마크 보이게
}
window.onafterprint = function(){
let logodiv = document.getElementById('logodiv');
logodiv.style.display = 'none'; // 워터마크 다시 안보이게
}
</script>
</head>
<body>
<h2>onbeforeprint & onafterprint Listener</h2>
<hr>
<div id="logodiv">
<img src="media/secret.jpg">
</div>
<p>브라우저의 페이지에서는 이미지가 나타나지 않지만<br>
프린트 창에서는 이미지가 보인다<br>
아래의 버튼을 클릭해서 확인해 보시오
</p>
<button onclick="window.print()">PRINT</button>
</body>















5. location 객체

윈도우에 로드 된 웹 페이지의 URL정보를 나타내는 객체

윈도우가 열릴 때 자동 생성

URL의 정보는 window 의 location 프로퍼티로 확인할 수 있음


* location 객체의 프로퍼티와 메소드


                                                                                                                                                                                                                                                                                                                                                                                                                                  









* location 객체로 웹 페이지 로드

// 윈도우의 새로운 웹 페이지에 로드
window.location = 'https://www.naver.com';
window.location.href = 'https://www.naver.com';
// location 객체의 메소드를 이용해서 재작성
window.location.assign('https://www.naver.com');
window.location.replace('https://www.naver.com');



* 예시 - 선택한 웹 페이지를 출력

<head>
<script>
function load(){
let sel = document.getElementById('sel');
// 선택된 옵션의 value를 웹페이지에 출력
window.location = sel.options[sel.selectedIndex].value;
}
</script>
</head>
<body>
<h2>location</h2>
<hr>
<select id="sel">
<option value="https:www.naver.com">네이버</option>
<option value="https:www.google.com">구글</option>
<option value="https:www.daum.net">다음</option>
</select>
<button onclick="load()">웹사이트 이동</button>
</body>












6. navigator 객체

현재 작동중인 브라우저에 대한 다양한 정보를 나타내는 객체










7. screen 객체

브라우저가 실행되는 스크린 장치에 관한 정보를 담고 있는 객체











8. history 객체

사용자가 방문한 웹 페이지의 리스트(히스토리) 정보를 담고 있는 객체

length : 히스토리에 있는 엔트리 수



* history 메소드

back() : 히스토리의 이전 페이지로 이동

forward() : 히스토리의 다음 페이지로 이동

go() : 인수로 이동할 양을 넣어주면 그만큼 상대적으로 이동






댓글

댓글 쓰기

이 블로그의 인기 게시물

Spring Boot 6. 계시판 프로젝트

이미지
 Spring Boot 6. 계시판 프로젝트 1. 프로젝트 구조 1:N 관계 하나의 유저는 여러개의 글을 작성할 수 있음 하나의 글에는 여러 댓글이 달릴 수 있음 3개의 테이블이 서로 참조함(user, board, reply) 2. 프로젝트 생성 - 추가 라이브러리 Spring Boot DevTools, Lombok, Spring Web, Thymeleaf, Spring Data JPA - DB 및 Thymeleaf 설정 build.gradle dependencies 안에 mariadb 드라이버 추가 dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' annotationProcessor 'org.projectlombok:lombok' providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat' testImplementation 'org.springframework.boot:spring-boot-starter-test' // 추가 implementation group : 'org.mariadb.jdbc' , name : 'mariadb-java-client' , ...
자세한 내용 보기

Spring Boot 2. Maria 데이터베이스 & Spring Data JPA

이미지
 Spring Boot 2. Maria 데이터베이스 & Spring Data JPA 1. Maria DB 설치와 데이터베이스 생성 1) Maria DB 설치 맥에서는 홈브류를 이용해서 설치 brew install mariadb 2) DB 생성 워크벤치를 이용해서 DB 생성 - 새로운 연결 생성 username : root pw : 1234 - DB 생성 Schemas ->우클릭 create schema.. -> 이름 :bootex, Character set : utf8 -> apply - 사용자 생성 Administration -> Users and Privileges -> Add Account  -> Login Name : bootuser, Limit to Hosts Matching : %(모든 곳에서 접근 가능), pw : bootuser -> Schema Privileges -> Add Entry -> Selected schema -> bootex 선택 -> Select All -> Apply   2. Spring Data JPA 를 이용하는 프로젝트 생성 1) 프로젝트 생성 기존 프로젝트 생성방식과 동일. 단 Dependencies를 선택하는 부분에서 기존에 선택한 라이브러리에서 추가로 SQL 탭의 Spring Data JPA 선택 2) DB를 위한 Spring Boot 설정 Spring Boot에서는 특정한 라이브러리가 있다면 관련된 설정들을 자동으로 추가해줌 그러나 지금 상태에서 실행을 하면 에러가 발생하는데 이는 Spring Data JPA 라이브러리가 추가되면서 자동으로 이에 관련된 설정도 추가되었지만 구체적인 값이 지정되지 않았기 때문 -> 두 가지 설정 필요 - Maria DB를 위한 JDBC 드라이버 https://mvnrepository.com/artifact/org.mariadb.jdbc  접속 -> 1. MariaDB J...
자세한 내용 보기

Django 10. DB 연동

이미지
 Django 10. DB 연동 1. 테이블 생성 settings.py 파일의 DATABASE 딕셔너리에 DB 관련 정보 작성 기본적으로 SQLite로 되어있고 다른 DB를 사용할 수도 있음 models.py 파일에 클래스를 이용해서 모델 생성 models.Model 을 상속받아서 작성 클래스 명은 테이블 명으로 작성 멤버 변수로 테이블의 컬럼 지정 models.[데이터 타입](옵션) * 데이터 타입  integer, char, boolean, date, decimal(float), text, file 등 * 옵션 null, blank, choice, default, primary_key, unique 등 PK 컬럼은 따로 지정하지 않으면 자동으로 생성됨 * 예시 class Question ( models . Model ): question_text = models.CharField( max_length = 200 ) pub_date = models.DateField( "date published" ) class Choice ( models . Model ): question = models.ForeignKey(Question, on_delete = models. CASCADE ) choice_text = models.CharField( max_length = 200 ) votes = models.IntegerField( default = 0 ) python3 manage.py makemigrations : magrations 폴더 안에 마이그래이션 파일(py) 생성 python3 manage.py migrate : 마이그래이션 파일을 DB에 적용해서 테이블 생성 * 데이터 표시 테이블의 해당 컬럼에 대한 정보를 지정하려면 모델 클래스에 __str__ 맴버함수를 정의해소 표시할 문자열을 반환 * 예시 class Question ( models . Model ): question_text...
자세한 내용 보기