CLIEL LAB

저장소라는 기능은 마치 애플리케이션을 만들 때 데이터베이스를 이용하는 것처럼 사용자 브라우저의 저장소에 데이터를 저장하는 곳을 말합니다. 다른 일반적인 방법으로는 쿠키라는 것을 이용할 수 있지만 그것과는 좀 다른 것입니다. 참고로 이 기능은 HTML5부터 지원하는 기능이므로 웹브라우저가 HTML5를 지원해야 합니다. 웹 브라우저가 저장소를 지원하는지의 여부는 window객체를 통해 확인할 수 있습니다. 예제에서는 localStorage를 통해서 로컬저장소 지원 여부를 확인해 보았습니다. 저장소는 로컬 저장소와 세션 자장소는 2가지가 존재하는데 로컬 저장소는 명시적으로 데이터를 삭제하지 않는 이상 계속 남아있게 할 수 있으나 세션 저장소는 웹브라우저가 종료될 때까지만 데이터를 저장할 수 있는 특징이 있습니..

Web/Javascript 2020. 7. 16. 03:18

쿠키는 키와 값을 가질 수 있는 데이터로서 클라이언트 즉, 사용자의 웹브라우저에 저장 가능한 데이터입니다. 대부분의 경우 클라이언트 단에서 어떤 정보를 일정 시간 동안 저장하고자 하는 경우에 많이 사용됩니다. 예를 들어 어떤 웹사이트의 로그인에서는 사용자 아이디를 기억하는 기능이 있습니다. 사이트로 로그인할 때마다 매번 동일한 아이디를 입력해야 하는 불편함을 덜어주기 위해서입니다. 사이트마다 다를 수 있겠지만 이러한 기능을 구현하기에 쿠기가 많이 활용됩니다. 1. 쿠키 생성 쿠키는 다음과 같은 방법으로 생성할 수 있습니다. var date = new Date(); date.setDate(date.getDate() + 7); var _cookie = 'tmpdata=1234;expires=' + date...

Web/Javascript 2020. 7. 4. 02:58

웹브라우저는 보안을 위해 현재 도메인에서 다른 도메인으로의 요청을 원칙적으로 차단하고 있습니다. 따라서 다음과 같은 시도를 하게 되면 브라우저는 크로스 도메인 관련 오류를 내뿜게 됩니다. 위 문제를 해결하기 위한 방법으로는 대략 2가지 정도를 알아보고자 합니다. 1. JSONP JSONP(JSON with Padding)는 다른 도메인에 요청을 보낼 때 callback매개변수를 보내면 응답을 보낼 때 JSON형태의 결과를 callback매개변수로 보낸 함수명으로 감싸 반환받는 형태를 의미합니다. 우선 예제작성을 위해 JSONP형태의 응답을 반환하는 서버를 만듭니다. public class HomeController : Controller { // GET: Home public ActionResult In..

Web/Javascript 2020. 7. 3. 03:32

어떠한 이유로 프로그램 실행 중 오류가 발생할 수 있는데 이 오류를 위한 적절한 대책을 세우는 것을 '예외 처리'라고 합니다. 프로그램 실행 중에 발생하는 경우이므로 사용자를 생각해 적절히 대응할 수 있는 방안을 마련해 두는 것입니다. 참고로 예외와 오류는 다른데 오류는 잘못된 문법이나 오타 등으로 인해 아예 프로그램이 실행되지 않는 경우를 말합니다. javascript에서는 예외를 처리하는 방법으로 try ~ catch ~ finally를 사용할 수 있습니다. try 안에는 실행할 구문을 작성하며 catch안에는 예외발생시 실행할 구문을 작성합니다. cliel.com 위 예제에서는 id가 myspan이라는 요소를 가져와 click이벤트에 span_msg메서드를 연결하고자 하는 시도를 하고 있습니다. 하..

Web/Javascript 2020. 5. 30. 01:19

이벤트는 사용자의 특정 행위나 문서 안에서 발생하는 각종 변화를 말합니다. 버튼을 누르고 input박스에 입력하는 등 상호작용에 필요한 모든 동작은 물론 아래 예제와 같이 문서의 로드가 완료되는 것도 하나의 이벤트에 해당합니다. 위 예제는 window객체에서 문서의 로드완료를 알리는 onload라는 이벤트 속성에 function이라는 이벤트 리스너(또는 이벤트 핸들러) 메서드를 연결한 것입니다. 이 외에 특정 요소에 다음과 같이 임의의 메서드를 이벤트에 연결할 수도 있습니다. 예제는 span요소의 클릭이벤트(onclick 속성)에 span_msg라는 메서드를 연결한 것입니다. 물론 요소는 클릭 이외에도 다른 다양한 이벤트를 연결할 수 있습니다. cliel.com 위와 같이 javascript를 통해 이벤..

Web/Javascript 2020. 5. 29. 02:46

HTML 문서는 다수의 HTML 태그를 이용하고 구성됩니다. 이들 중 어떤 태그를 javascript상에서 다룰 수 있도록 요소로 가져오게 되면 그것을 '문서 객체'라고 할 수 있습니다. document 예제에서는 HTML문서의 span태그를 가져와 내부의 텍스트를 alert으로 표시하고 있습니다. getElementsByTagName은 요소를 배열로 반환하므로 myspan [0]처럼 가져올 요소의 인덱스를 지정해야 하는데 var myspan = document.getElementsByTagName('span'); 처럼 하게되면 이때부터 myspan을 하나의 문서 객체로서 취급하게 되는 것입니다. 참고로 위의 문서를 아래와 같이 도식화 하여 표현할 수 있으며 위와 같이 표현된 문서전체의 구조를 '문서 객..

Web/Javascript 2020. 5. 27. 02:51

1. window window객체는 브라우저의 최상위 객체를 의미하며 아래 설명된 객체를 포함하는 객체이기도 합니다. 수많은 속성과 메서드가 존재하는데 전체를 다 알 수도 없고 알아보기도 어려워서 몇 가지만 추려서 살펴보고자 합니다. 참고로 alert 같은 기본적인 것도 window의 메서드로 처리되며 var를 통해 생성한 변수도 window의 속성으로 처리됩니다. open 새로운 window객체를 생성합니다. moveBy 윈도우를 지정한 위치로 이동시킵니다. (상대위치) moveTo 윈도우를 지정한 위치로 이동시킵니다. (절대위치) resizeBy 윈도우의 크기를 지정합니다. (상대크기) resizeTo 윈도우의 크기를 지정합니다.(절대크기) scrollBy 윈도우의 스크롤 위치를 이동시킵니다. (상대..

Web/Javascript 2020. 5. 26. 01:32

자바스크립트(javascript)는 기본적으로 유용하게 사용할 수 있는 몇가지 객체를 내장하고 있습니다. 이들 객체를 '기본 또는 표준 내장 객체'라고 하며 그 중 참고할만한 몇가지를 알아보고자 합니다. 객체를 알아보기 전에 우선 우리가 알지 못하는 사이 객체가 아닌것이 객체로 변환되는 경우가 있다는 것을 말씀드리고자 합니다. 예를 들어 var myvalue = 1234; var myvalue2 = new Number(1234); alert(myvalue); alert(myvalue2); 예제에서 myvalue는 정수형 데이터이고 myvalue2는 Number에서 생성된 객체입니다. var myvalue = 1234; var myvalue2 = new Number(1234); alert(myvalue.t..

Web/Javascript 2020. 5. 26. 01:03