javascript
-
JavaScript 배열 숫자 오름차순 내림차순 정렬프로그래밍/JavaScript 2020. 2. 3. 00:55
전에 React.js로 개발한 가상화폐 시세 테이블을 개발하면서 테이블 정렬이 왜 제대로 작동하지 않았는지 오늘 자바스크립트 배열을 건들여볼 일이 생겨서 알게되었습니다. 그때 발생하였던 문제는 아래와 같았습니다. let array = [30, 2, 20, 1, 1111]; let result = array.sort(); console.log(result) // [1, 1111, 2, 20, 30] 제대로 사용하였다면 1, 2, 20, 30, 1111 이 출력되어야하는데 결과는 그렇지 못합니다. 이는 비교함수를 전달하지 않았을때는 숫자 데이터는 문자열로 변환된 후 Unicode 기준으로 정렬되기 때문입니다. 이를 제대로 정렬하기 위해서는 비교함수를 전달하여 숫자의 크기에 따라 정렬이 가능합니다. 오름차순 ..
-
[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..
-
JavaScript 표준 내장 객체의 확장MOOC/생활코딩 2016. 4. 24. 12:13
2016.04.24. - 표준 내장 객체의 확장 표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문에다. 결국 프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다. 자바스크립트는 아래와 같은 내장 객체를 가지고 있다. ObjectFunctionArrayStringBooleanNumberMathDateRegExp 123456var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukub..