개발하는개발자

Location 객체

현재 브라우저 창에 열려있는 문서의 URL을 알려주는 객체이다.

★ 이 포스터를 통해 보이는것 뿐만아니라 보이지않는 정보(URL) 또한 객체화 될 수 있다는 점을 알 수 있을것이다.

1. 현재 브라우저의 URL 알아내기 

개발자 도구의 콘솔창에  console.log(location.toString(), location.href);를 작성하고 실행시켜보자.

이처럼 두개의 결과가 나타나는데 같은 결과이지만 location.href를 사용하는 것이 좀 더 선호되는 방식이다.

마찬가지로 콘솔창에 alert(location);을 작성한다면

이러한 결과가 나타나게되는데 왜? 그런것일까?

alert함수는 문자로 인자값이 넘어가야하는데 객체를 넘겨준다면 객체를 문자화 시켜서 넘기게된다. 따라서 location 객체를 넘기게 된다면 location객체의 문자화 된 값인 현재 URL이 출력되는 것이다.

위의 내용은 alert(location.toString());과 같은 결과값을 출력한다.

2. 현재 웹페이지의 URL 변경하기

location객체는 URL을 알아낼 뿐만 아니라 현재 웹페이지의 URL 변경, 현재 페이지를 리로드도 제공한다.

콘솔 창에 location.href='http://olsh1108o.tistory.com/';를 작성해보자.

결과적으로 작성한 페이지로 이동하게된다. 이러한 경우는 사용자의 상황에 따라서 다른 URL로 넘어가야 하는 경우가 있을 것이다. 그렇다면 location객체를 사용해서 이동시키면 된다.

현재 웹 페이지를 리로드 시키고 싶은 경우에는 location.href=location.href라고 작성하거나 또는 location.reload(); 명령어를 통해서 리로드 시킬 수 있다.

이 글은 생활코딩 강의를 참고하여 작성된 글입니다.

[전역객체 Window]

window는 브라우저 객체의 최상위 객체이고 모든 객체가 소속되어있으면서 전역객체라고도 부른다.

Browser Object는 아래와 같이 계층적으로 구조가 나뉘어져 있다.

DOM객체에 속하는 document 객체(Document Object Model을 구현하는 객체이기 때문에 따로 카테고리를 묶어서 설명함..), BOM객체에 속하는 location객체, JavaScript에 속하는 Array객체 모두 등등.. window라는 객체에 소속되어 있다.

window객체에 접근하는 방법?

→ 콘솔창을 켜서 window를 적어주면 window객체에 접근할 수 있다.

window 객체에 속하는 document객체, navigator객체 등등.. 에 접근하고 싶을 때

window.document 

window.navigator → 현재 브라우저에 대한 정보를 알려주는 객체

입력해주면 접근이 가능하다.

window객체에서 아래와 같은 메서드를 사용할 수 있다.

1. alert()

흔히 경고창이라고 부른다. 사용자에게 정보를 제공하거나, 문제가 있을 때 경고를 하거나, 코딩을 할 때 변수에 담겨있는 값을 확인할 때 사용한다.

콘솔창을 켜고 alert('Hello World');를 작성해보자.

그렇다면 다음과 같이 경고창이 뜨는 것을 확인 할 수 있다.

alert() 특징은 실행하는 동안은 다음 코드가 실행되지 않는다.

개발자가 디버깅을 위해서 alert()를 사용하는 경우가 있지만 최근들어 개발자 도구를 사용할 수 있어서 alert()보다는 console.log()를 자주 사용한다.

2. confirm

확인하는 창을 띄워준다. 다른 창과 다르게 확인/취소 버튼이 있다.

콘솔창에서 confirm('ok');를 적어주자.

그럼 괄호 안에있는 인자가 창에서 나타나게된다.

확인 버튼을 누르면 return 값으로 true가 넘어오고 취소를 누르면 false가 넘어온다.

< return 값으로 true가 넘어온다. >

< return 값으로 false가 넘어온다. >

3. prompt

사용자가 입력한 값을 얻어내어 자바스크립트가 활용할 수 있다. 

console창에 prompt('id?'); 를 작성해보자

이처럼 입력할 수 있는 칸이 나오고 여기에 맞는 답변을 작성해주면 콘솔창에 답변이 나타난다.

생활코딩 강의를 참고하여 작성된 글입니다.

BOM 

Browser Object Model

웹 브라우저를 제어하기 위해서 브라우저가 제공해주는 객체들을 의미한다.

이를 이용하여..

1. 자바스크립트를 통해서 새 창을 연다.

2. 현재창의 URL을 알아낸다

3. 현재 동작하고 있는 웹브라우저의 제품명, 버전명을 알아낼 수 있다.

이러한 일을 수행할 수 있다.