레퍼런스 마이닝

//16방위각 이름 초기화 /*var azimuthName = ['북', '북북동', '북동', '동북동', '동', '동남동', '남동', '남남동', '남', '남남서', '남서', '서남서', '서', '서북서', '북서', '북북서'];*/ //32방위각 이름 초기화 var azimuthName = ['북', '북북북동', '북북동', '동북북동', '북동', '북동북동', '동북동', '동동북동', '동', '동동남동', '동남동', '남동남동', '남동', '동남남동', '남남동', '남남남동', '남', '남남남서', '남남서', '서남남서', '남서', '남서남서', '서남서', '서서남서', '서', '서서북서', '서북서', '북서북서', '북서', '서북북서', '북북서', '북북북서..

http://beneposto.pl/jqueryrotate/ jQueryRotate - rotate image in browser by any angle OpenSource Cross-browser jQuery plugin to rotate image by any-angle with an animation support. beneposto.pl jQuery를 통해 이미지 회전이 필요할 때 관련 라이브러리를 추가하여 기능 구현을 하면 된다. 아래와 같이 다양한 예제들이 소개되어 있다. $("#img").rotate(45); $('#img').rotate({ angle:45 }); $('#img').rotate({ angle: 0, animateTo:180 }); $('#img').rotate({ angle..

css() 메서드는 선택한 요소에 대해 하나 이상의 스타일 속성을 설정하거나 반환한다. //지정된 CSS 속성의 값을 반환 css('propertyname', 'value'); //일치하는 모든 요소에 대한 배경색 값 설정 $('#elementId').css('background-color', 'yellow'); //멀티 속성 css({'propertyname': 'value', 'propertyname': 'value', ...}); //일치하는 모든 요소에 대한 배경색과 글꼴 크기 설정 $('#elementId').css({'background-color': 'yellow', "font-size": '100%'}); //속성 제거 css('propertyname', ''); //일치하는 모든 요소에 ..

//전체 삭제 $('#elementId option').remove(); //특정 옵션 삭제 $('#elementId option[value=값]').remove(); //특정 인덱스 옵션 삭제 $('#elementId option:eq(2)').remove(); //첫번째 옵션 삭제 $("#elementId option:first").remove(); //마지막 옵션 삭제 $("#elementId option:last").remove(); //끝부분에 옵션 추가 $('#elementId').append('옵션'); //시작부분에 옵션 추가 $('#elementId').preppend('옵션'); //특정 인덱스 옵션 대체 $('#elementId option:eq(2)').replaceWith('옵션'..

지난 포스팅에서 자바스크립트 배열에 대한 고찰이라는 주제로 내용을 다루었었다. 이번에는 배열 전반적인 부분을 보도록 하자. 배열 즉, Array 객체는 자바스크립트에서 가장 많이 사용되는 객체이면서도 잘 모르는 사실들이 많이 숨어 있는 객체 이기도 하다. 배열뿐만이 아니다. 자바스크립트의 영역은 상상 그 이상이다. 배열 선언 arr1, arr2는 빈 배열을 선언한 것이고 arr3, arr4는 배열을 선언과 동시에 인자를 할당한 모습이다. 주목해야 할 점은 arr5, arr6 배열 객체이다. arr5는 인자가 하나 있는 배열 선언이 아니고 길이가 5인 배열을 선언한 것이다. 하지만 arr6은 인자가 하나인 배열이다. 배열 선언 방법에 따른 차이로 인해 나타난 현상이다. Array 생성자를 통해 배열을 선언..

자바스크립트 배열의 길이는 동적으로 변한다. 그렇다면 배열 변수 선언과 요소의 정의, 삭제 등의 조작으로 인한 값의 변화를 살펴보자. 다음은 크롬 브라우저의 콘솔 창을 활용하려 배열을 선언하고 요소를 추가하는 과정이다. 위에서 보면 배열 변수 x를 선언하고 x 배열 10번째 요소에 123 값을 추가하였다. 그 후 x 배열의 length 값이 0에서 11로 바뀌는 것을 확인할 수 있다. 배열의 길이는 11개이지만 x[0] ~ x[9] 요소의 값은 'undefined' 이므로 메모리는 1개의 요소만 할당된다. 다음으로 배열 요소를 삭제해보자. delete로 배열 요소를 삭제할때는 값만 사라지고 배열의 길이는 줄어들지 않는 것을 볼 수 있다. 하지만 splice 함수로 배열 요소를 잘라내면 배열 길이가 줄어든..

자바스크립트 비동기 포스팅에서 비동기 처리에서 나타날 수 있는 문제점을 다루어 봤다. 이러한 문제점을 해결할 수 있는 콜백 함수에 대해 알아보도록 하자. 첫 번째 사례 개선 function getData(callBackFn) { $.get('https://domain.com/system/users/PTN001112', function (response) { callBackFn(response); }); } getData(function (tableData){ console.log(tableData); }); 두 번째 사례 개선 repeatConsoleLog = function(i, callBackFn) { setTimeout(function() { console.log(i); if (i >= 9) { c..

비동기? 자바스크립트에서 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행이 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트 특성을 의미한다. 첫 번째 사례 비동기 처리의 가장 흔한 사례는 ajax이다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax통신은 모든 요소에서 빠지지 않고 등장한다. 화면에 렌더링 할 이미지나 데이터를 서버에 호출하여 표시하게 되는데 이때 ajax통신을 사용한다. function getData() { var tableData; $.get('https://domain.com/system/users/PTN001112', function (response) { tableData = response; }); return tableData; } console.log(getD..

Event Bubbling 자바스크립트에는 Event Bubbling이라는 개념이 있다. 이것은 한 자식 요소에서 이벤트가 발생했을 때 부모 요소에 이벤트를 전파하는 것을 의미하여 Event Bubbling이라고 말한다. 다음 예제 코드를 보자. HTML Click me to check JavaScript $('.parent').on('click', function() { ('#checkbox').prop('checked', false); }); $('.child').on('click', function() { $('#checkbox').prop('checked', true); }); .parent 클래스가 .child 클래스 버튼을 가지고 있으며 부모와 자식 요소에 같은 click 이벤트가 바인딩 되었..

JavaScript 동치 비교 == , === 차이점 JavaScript에는 다른 언어와는 다르게 === 연산이 존재한다. 다른 언어들을 먼저 접하고 실무를 하게 된다면 자연스럽게 JavaScript에서도 == 연산을 대부분 먼저 사용하게 된다. 이런 이유로 대부분의 개발자 들이 무심코 == 연산으로 주로 비교 조건절을 사용하는 경우가 많다. 동치 비교 차이점을 파악해서 일치 연산자를 사용하도록 하자. == 동등 연산자(Equal Operator) 동등 연산자는 피연산자들이 서로 타입이 다르면 같은 타입으로 변환을 한다. 그다음 strict 비교를 적용한다. 두 피연사자가 둘 다 객체라면, 자바스크립트가 메모리의 같은 객체를 참조할 때 내부 내용을 비교하며, 메모리의 같은 객체를 가르킨다면 두 객체를 같..