html에서 javascript 로드 방식 / Object Model( BOM <사용자 커뮤니케이션 / Location 객체> )에 대해서 정리한다.
웹브라우저 자바스크립트
- HTML은 정보, CSS는 디자인, JavaScript는 웹브라우저,html을 프로그래밍적으로 제어하는 역할을 한다.
HTML에서 JavaScript 로드하기
1. inline 방식
- 태그에 직접 자바스크립트를 기술하는 방식
- 태그에 연관된 스크립트가 분명하게 드러난다는 장점이지만
정보(html)와 제어(javascript)가 섞여 있기 때문에 웹 브라우저가 문서를 불러오기 조금 까다롭다.
( 코드의 양이 많아지면 나중에 유지보수 또한 어려울 수 있다... )
( html 태그에 직접 script 코드를 기술하는 방식의 inline 방식이다 )
2. script 방식
- <script></script> 태그안에 자바스크립트 코드를 사용하는 방식
- html과 javascript 코드의 분리가 가능해서 inline 방식보다 유지보수를 하기에도 좋다.
( <script> 태그를 이용한 방식은 inline 방식보다 유지보수 하기에 좋다고 하지만
상황에 맞는 방식을 사용하는게 제일 좋은것 같다... )
3. 외부 파일로 분리하는 방식
- <script> 태그안에 src 속성을 이용해서 외부 파일을 가져온다.
- 외부 파일로 빼낸 자바스크립트 파일 안에는 자바스크립트 코드만 들어가있어야 한다.
- 모든 웹 페이지에서 해당 자바스크립트 코드의 중복을 제거해서 유지보수의 편의성을 올린다.
( script 코드를 외부파일로 빼내서 사용하기 때문에 오른쪽 코드는 모두 html 코드라는걸 알 수 있다.. )
( script.js 파일 안에는 자바스크립트 코드만이 들어가야한다는점을 주의해줘야 한다!! )
* script 파일의 위치
- body 태그가 끝나는 지점에 script 태그를 위치 시키는데 조금더 바람직하다.
( <head> 태그안에 위치시키는것보다 성능의 문제에서 조금더 좋다 )
- <head> 태그 안에 <script> 코드를 위치 시킬 경우에는 window.onload = function {}을
이용해서 해당 문서 전체를 다 읽어온후에 해당 코드를 읽어올수 있도록 작성해줘야 한다.
- onload는 웹페이지에 대한 모든 정보가 완성이 되었을때 실행이 되는 이벤트
( <head> 태그에서 <script> 코드를 정의한후에 코드를 작성하거나 외부파일을 가져온다면
위와 같은 상황에서는 에러가 발생하게 된다...
그러므로 이런 상황에서는 window.onload를 이용해서 에러를 해결해줘야 한다... )
Object Model
출처:http://learn.javascript.ru/browser-environment
* 브라우저, 웹페이지(문서), ...를 제어할 수 있도록 여러구성 요소들을 객체로 만들어서 제공해주는 것
* window( 전역객체 ), document(DOM), navigator / screen / location / ...(BOM), JavaScript Core
* DOM과 BOM, JavaScript Core는 window 객체에 대한 property
- window: 전역객체, 아래 3가지 객체는 모두 window 객체에 소속되어있다.
- document(DOM): 웹 페이지에 있는 문서를 제어하는데 사용이 되는 객체
- BOM: 브라우저 자체를 제어하는데 사용하는 객체
- JavaScript Core: 호스트 환경이 무엇이건간에 javascript를 통해서 제어가 된다면 가지고 있는 객체
BOM( Browser Object Model )
- 웹 브라우저를 제어하기 위해서 브라우저가 제공해주는 객체들
전역객체 window
- 전역함수, 전역변수를 만든다는 것은 window라는 객체의 property, method를 만드는것
( 자바스크립트에서 전역변수나 함수를 만든다는것은 window에 소속된 변수나 함수를 만든다는 말과 같다... )
사용자와 커뮤니케이션 하기
- alert
* 사용자에게 정보를 제공하거나 디버깅 용도로 많이 사용
( 최근에는 개발자 도구에서 console.log를 이용해서 디버깅을 많이 한다 )
* 해당 경고창이 끝나기전에는 뒤에 있는 코드는 실행이 되지 않는다.
( alert 외에도 이러한 특성을 가진것들이 있다 )
( alert()는 사용자에게 경고창을 띄워주고 해당 창이 종료되기 이전까지는 다음 코드를 실행하지 않는 특성이 있다.. )
- confirm
* 확인창을 띄우고 확인과 취소 버튼을 사용자로부터 입력받아 true 혹은 false 값으로 반환한다.
( confirm()을 이용하면 사용자에게 확인 혹은 취소 입력을 받아 그 값을 true 혹은 false로 반환준다... )
( 이전 그림에 오른쪽 코드를 보면 if문을 통해서 작성 되었는데 true 값을 받았으므로
alert('ok')가 실행이 되는걸 확인할 수 있다 )
- prompt
* 사용자가 입력한 값을 받아서 자바스크립트가 해당 입력을 얻어낼수 있는 기능
( prompt()를 이용해서 사용자에게 입력값을 받을 수 있고 if문을 이용하면 그 값을 이용해서 분기문을 실행할 수 있다.. )
( 사용자의 입력값과 값이 일치했기 때문에 alert('welcome')이 실행되는걸 확인 할 수 있다 )
Location 객체
- 현재 창에 열려있는 url의 주소에 대한 객체
- 현재 윈도우의 url 주소 알아내기
location.href를 이용하면 현재 윈도우의 url 주소를 알아낼수 있다.
( location 객체는 현재 url 주소에 대한 객체인데 location.href나 location.toString()을 이용해서
현재 url에 대한 주소를 알 수 있다.. )
- url parsing
현재 문서의 프로토콜: location.protocol
현재 문서의 호스트: location.host
웹서버의 서비스 포트: location.port,
웹서버의 구체적 경로: location.pathname
웹서버에게 전달한 값: location.search
( location 객체를 이용해서 url parsing을 할 수 있고 위 그림을 보면
location에 대한 해당 프로퍼티들의 사용방법을 알 수 있다.. )
- url 변경하기
location.href에 입력값을 넣어서 주소를 변경할 수 있다.
( location의 값을 변경해도 위와 같이 주소 변경 효과가 난다 )
* location.href는 읽기 기능도 가능하기 때문에 주소 변경에도 이용할 수 있다.
location.reload()를 이용해서 웹페이지를 refresh 할 수 있다.
댓글