html
-
[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] 벤더 프리픽스 제거 메서드 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..