프로그래밍
-
[HTML5] 웹워커 Web Worker 기초 상식과 개요프로그래밍/HTML5 Web 2016. 7. 13. 15:46
HTML5에 추가된 기능은 기존의 기능을 응용하여 대부분 구현할수 있는데 저번에 다룬 해시 변경 이벤트도 타이머로 구현할수 있으며 드래그와 드롭 기능도 jQuery와 같은 라이브러리로 구현이 가능합니다. 하지만 아무리 대체하려해도 기존의 기능으로는 구현할수 없는 것이 있는데 이것이 웹 워커(Web Worker) 입니다. 코드 진행에 있어서 작은 실행 흐름 단위를 스레드라고 부르는데, 스레드를 여러개생성하면 동시에 여러 개의 코드를 병렬로 실행이 가능합니다. 하지만 자바스크립트의 경우에는 스레드를 별도로 생성할수 없으므로 한번에 하나의 코드만 실행합니다. 이것을 보완하기 위해 비동기 입출력과 이벤트로 동시에 여러 가지 일을 하는 것처럼 개발을 할수 있습니다.다음의 코드는 XMLHttpRequest 객체로 ..
-
[HTML5] HashChange Event 해쉬 변경 이벤트 처리 PushState와 popState 메서드프로그래밍/HTML5 Web 2016. 7. 11. 21:46
Sammy.js 라이브러리를 통해 히스토리를 관리하여 해시를 사용하여 뒤로가기 버튼을 활용해보았습니다. 다만 Sammy.js 라이브러리를 사용하지 않고 해시 이벤트를 구현해보도록하겠습니다. HTML5에서 hashchange 이벤트로 해시 변경을 검사합니다. 12345678910111213141516171819 Hash Change //Connect Event window.addEventListener('hashchange', function () { //Show alert(location.hash); }); Move To Point_A Move To Point_BColored by Color Scriptercs 코드를 실행하고 a 태그를 각자 클릭하면 해시가 변경되면서 이벤트 리스너가 실행됩니다. 이후에..
-
[HTML5] Sammy.js 라이브러리에서 요청 매개변수 처리프로그래밍/HTML5 Web 2016. 7. 10. 18:15
Sammy.js 라이브러리를 사용하면 요청 매개변수를 처리할수 있는데 여기서 말하는 요청 매개변수는 입력양식을 뜻하는것입니다.Sammy.js 라이브러리를 사용하면 웹 페이지 입력양식과 같은 데이터 요청을 모두 처리할수 있습니다. 아래 코드는 글자를 입력하면 그 글자를 HTML 상으로 띄워주고 5초후에 다시 메인페이지로 돌아가는 기능을 가진 코드입니다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 Sammy.js Basic var app = Sammy(function () { this.get('#/form', function () { // 템플릿을 추출합니다. var templat..
-
[HTML5] Sammy.js 라이브러리로 히스토리 기능 사용 및 페이지 라우트프로그래밍/HTML5 Web 2016. 7. 10. 16:57
Ajax로 페이지를 전환하는 웹앱에서 뒤로가기 버튼을 어떻게 처리해야하는지에 대한 문제를 직면하는 경우가 있는데요. 웹브라우저에서 뒤로가기 버튼을 이용한다는것은 웹 브라우저의 기록을 관리하여야한다는 뜻입니다. 그리고 이러한 기록들을 관리하려면 히스토리 객체를 사용하여야합니다. 이를 위해서 Sammy.js라는 라이브러리를 사용하여야하는데 이 라이브러리는 웹 페이지 라우터 모듈입니다. 라우터 모듈이란 페이지 라우팅을 구현하는 모듈로 클라이언트 요청에 따라 적절한 페이지를 제공하게 합니다. 기존에는 서버에서만 할수 있는 일이었지만 HTML5에서는 클라이언트에서도 사용가능합니다. Sammy.JS 라이브러리의 공식홈페이지에 방문하여 관련 문서를 확인합시다. [링크] http://www.sammyjs.org/ 참고..
-
[HTML5] 벤더 프리픽스 제거 메서드 removePrefix() Method프로그래밍/HTML5 Web 2016. 7. 10. 16:05
현재 HTML5의 표준은 계속 제정중인데요. 확정된 기능이 아닐경우에는 벤더 프리픽스를 사용하여 범용성을 높여줍니다. 하지만 벤더 프리픽스가 바뀌었을 경우에를 대비해서 보완하는 코드를 작성합니다. removePrefix() 함수는 벤더 프리픽스를 제거합니다. 12345678910111213141516171819202122232425262728 removePrefix() //Set Variable var prefixes = ['webkit', 'ms', 'moz', 'o']; //Upper Function var capitalize = function (name) { return name.substr(0, 1).toUpperCase() + nmae.substr(1); }; //Remove Prefix fu..
-
[HTML5] 기본 기능과 벤더 프리픽스 제거프로그래밍/HTML5 Web 2016. 7. 9. 22:43
기존의 웹페이지는 document.getElementById() 메서드로 문서 객체를 선택하였으나 HTML5 부터는 document.querySelector로 문서 객체를 선택할수 있습니다. 12345678910111213141516171819202122 querySelector() Method window.addEventListener('load', function () { // Set Variable var header = document.querySelector('h1'); // Change style Properties header.style.color = 'white'; header.style.backgroundColor = 'black'; }); Header HeaderColored by Co..
-
MongoDB 데이터 검색, 정렬, 수정, 삭제기능으로 CRUD 앱 구현프로그래밍/HTML5 Web 2016. 7. 7. 17:52
본 게시글은 http://writingdeveloper.tistory.com/205 의 사전지식이 있어야 구현이 가능하므로 미숙한 부분에 대해선 링크를 참조하시길바랍니다. 데이터 검색데이터를 검색할때에는 find() 메서드를 이용하는데 find()메서드를 이용하면 데이터를 배열의 형태로 추출이 가능합니다. 원하는 속성을 추출하지 않고 싶을 때에는 find() 메서드의 두 번째 매개변수에 속성을 선택하고 불을 입력하면됩니다._id 속성을 false값으로 지정하였으므로 _id값을 출력하지 않습니다. 하지만 일반적으로 find()메서드를 사용할때 _id 속성은반드시 추출하므로 대부분 _id 속성이외의 속성에 true또는 false값을 입력하는데 true와 false중 하나만 사용해서 값을 추출하는것이 코드의 ..
-
MongoDB 기본 명령어와 조작법프로그래밍/HTML5 Web 2016. 7. 6. 15:53
이 강의는 기본적으로 컴퓨터에 MongoDB 서비스가 설치되어있다는 것을 전제로 진행합니다. 설치되어있지 않은 분들은 http://writingdeveloper.tistory.com/204 글을 참고하여 MongoDB를 설치한 후에 진행하시길 바랍니다. 기본 명령어MongoDB는 자바스크립트 코드를 이용하여 데이터베이스를 관리하므로 MongoDB는 모든 자바스크립트 코드를 입력 가능합니다. 예로 아래와 같은 코드의 사용이 가능합니다. 1273+52cs 당연히 결과값은 325가 나오겠지요. 또한 자바스크립트의 변수 선언문과 반복문도 그대로 사용가능합니다. 123456789var a=0;for(var i=0; i