윤민상 블로그

Geolocation Geolocation API는 잦바스크립트 프로그램이 사용자의 실제 위치를 브라우저에게 요청할 수 있도록 해준다. 브라우저에서는 물리적인 위치 정보에 접근하기 전에 자바스크립트 프로그래밍 항상 사용자의 허락을 받도록 하고 있다. navigator.geolocation.getCurrentPosition() 사용자의 현재 위치를 요청한다. navigator.geolocation.watchPosition() 현재 위치를 요청하는 것은 동일하지만, 지속적으로 확인하여 사용자의 위치가 변경될 때마다 지정된 콜백 함수를 호출 navigator.geolocation.clearWatch() 사용자의 위치 정보를 수집하는 작업을 중단한다. 이 메서드의 전달인자는 watchPosition()을 호출한..

이미지 스크립팅 HTML 문서에서 동적으로 하나의 이미지를 다른 이미지와 교체하는 기능은 몇 가지 특별한 효과를 가능하게 한다. 이미지 롤오버나 이와 유사한 동작이 유용하려면 즉각 반응해야 하므로 필요한 이미지가 브라우저 캐시에 이미 존재함을 보장할 필요가 있다. 이미지를 강제로 캐싱하기 위해, Image() 생성자를 사용하여 보이지 않는 화면 영역에 이미지 객체를 만들 수 있다. ex) 이미지 롤오버(CSS의 :hover로도 가능) ex) SVG이미지로 시간 출력하기 123 69 그래픽 문서 요소는 자체적인 외형은 없지만, 문서 내 드로잉 영역을 생성하고 클라이언트 측 자바스크립트에서 사용 가능한 강력한 드로잉 API를 포함하고 잇다. 문서 요소와 SVG 사이의 가장 중요한 차이점은, 캔버스는 메서드 ..

로컬 스토리지와 세션 스토리지 스토리지 생명 주기와 범위 로컬 스토리지를 통해 저장된 데이터는 만료기한이 없고, 웹 애플리케이션이 삭제되기 전이나 사용자가 브라우저의 특정 인터페이스를 통해 삭제하기 전까지는 사용자의 컴퓨터에 존재하므로 영구적으로 저장된다고 할 수 있다. 세션 스토리지를 통해 저장된 데이터는 최상위 창이나 해당 스크립트를 실행하는 브라우저의 탭과 생명 주기가 같다. 로컬 스토리지의 범위는 문서의 출처에 국한된다. 세션 스토리지의 범위도 문서의 출처에 국한된다. 한편, 세션 스토리지는 개별 창에 기반을 둔 범위를 가지기도 한다. 같은 출처의 문서를 보여주는 두 개의 브라우저 탭이 있다면, 다른 세션 스토리지가 존재한다. 스토리지 API localStorage.setItem("x",1); l..

HTTP(Hypertext Transfer Protocol)는 웹브라우저가 서버로부터 문서를 전송받거나 폼의 내용을 보내는 방법, 그리고 해당 요청의 내용에 대해 서버가 응답하는 방법을 명세한다. 웹브라우저는 매우 많은 양의 HTTP를 처리한다. 일반적으로 HTTP는 스크립트의 제어를 받지 않는 대신 사용자가 링크를 클릭하거나 폼을 전송하거나 URL을 직접 입력할 때 발생한다. Ajax는 HTTP를 조작하는데 특화된 웹 애플리케이션 설계 방식을 가리키는 용어다. Ajax 애플리케이션의 핵심적인 특징은 HTTP를 조작하여, 페이지를 다시 불러오지 않고도 웹 서버와 데이터를 교환할 수 있도록 하는 것이다. 웹 애플리케이션에 Ajax 기술을 활용하면 사용자 반응 데이터를 서버에 저장하거나, 처음에 간단한 페이..

이벤트 타입 오래된 이벤트 타입 폼 관련 이벤트 폼이 전송될때 submit, 초기화될때 reset 이벤트 버튼과 유사한 폼 요소는 사용자와 상호작용시에 click 이벤트 어떤 상태를 유지하는 폼 요소는 사용자가 상태를 바굴 때 change 이벤트 폼 요소가 포커스를 갖거나 잃을 때 focus, blur 이벤트 submit, reset 이벤트는 이벤트 핸들러에서 취소할 수 있는 기본 동작이 있고, 이는 몇 가지 클릭 관련 이벤트에서도 마찬가지다. focus, blur 이벤트에서는 버블링이 일어나지 않지만, 다른 폼 관련 이벤트는 발생한다. 사용자가 요소 안에 텍스트를 입력할 수 있는 모든텍스트 입력 폼 요소와에서 inut 이벤트가 발생한다. input 이벤트는 매 입력마다 발생한다. 하지만 input 이벤..

CSS 개요 HTML 문서를 시각적으로 표현하는 데에는 글꼴과 색상, 여백 등 매우 많은 요소들이 관여한다. CSS 표준에서는 이런 요소들을 style 속성으로써 나열한다. CSS 표준에서는 이런 요소들을 style 속성으로써 나열한다. CSS는 글꼴과 색상, 여백, 테두리, 배경 이미지, 문자 정렬, 요소 크기, 요소 위치 등에 대한 프로퍼티를 정의한다. HTML 요소의 시각적 모양을 정의하기 위해서는 CSS 프로퍼티의 값을 지정하면 된다. CSS 프로퍼티에 값을 지정하기 위해서는 다음과 같이 프로퍼티의 이름 뒤에 콜론을 붙인 후 값을 적는다. font-weight:bold; 1. 웹브라우저의 기본 스타일시트 2. 문서의 스타일시트 3. 개별 HTML 요소의 스타일 속성 주요 CSS 프로퍼티 ms386..

DOM 개요 문서 객체 모델(Document Object Model) 즉, DOM은 HTML과 XML 문서의 내용을 조작하고 나타내는 기반 API다. 노드의 종류는 세가지이다. 계층 구조의 가장 위쪽에는 문서 전체를 나타내는 Document 노드가 있고, 아래쪽으로는 HTML 요소를 나타내는 Element 노드와 텍스트를 나타내는 Text 노드가 있다. Document, Element, Text는 Node 객체의 서브 클래스이며, 각각 레퍼런스 부분에 설명되어 있다. Documnet 타입은 HTML 또는 XML 문서를 나타내며, Element 클래스는 그 문서의 요소를 나타낸다. 반면 제네릭 타입의 서브 클래스읜 HTMLDocument와 HTMLElement는 좀더 구체적으로 HTML의 문서와 요소만을 ..

타이머 setTimeout() 첫번째 인자에 함수, 두번째 인자에 delay시간, 그 다음인자에 파라미터를 전달할 수 있다. 이 파라미터는 첫번째 인자의 함수에 전달된다. delay 시간 후에 함수가 실행된다. var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]); var timeoutID = window.setTimeout(code[, delay]); window.setTimeout(function, milliseconds); 기본 예시 (함수뒤에 ()를 붙이지 않는다.) function hi() { alert('hi'); } setTimeout(hi, 1000); //1000이 1초 파라미터 전달 function hi(a, b) ..