코딩병원

Frontend/Javascript

[JavaScript] toFixed()와 toPrecision() 메소드

toFixed() 메소드 Number 인스턴스의 소수 자릿수를 문자열로 반환합니다. 아래 예제를 보시면 쉽게 이해하실 수 있으실 것입니다. toPrecision() 메소드 Number 인스턴스의 가수와 소수를 합친 자릿수(즉, 앞자리부터)를 문자열로 반환합니다. 마찬가지로 아래 예제를 보시면 쉽게 이해하실 수 있습니다. Number 관련 메소드 2020/06/28 - [1. 웹개발/1_1_1 JavaScript] - [JavaScript] 전달된 값이 정수인지를 확인하는 isInteger() 메소드 2020/06/08 - [1. 웹개발/1_1_1 JavaScript] - [JavaScript] NaN인지를 확인하는 isNaN() 함수 2020/04/17 - [1. 웹개발/1_1_1 JavaScript] ..

2020. 6. 30.

Frontend/Javascript

[JavaScript] isInteger() - 전달된 값이 정수인지를 확인하는 메소드

Number.isInteger() 메소드 Number.isInteger() 메소드는 인수의 값이 정수인지 아닌지를 반환해줍니다. 전달된 값이 정수이면 true를 아니라면 NaN, Infinity와 같은 값은 모두 false를 반환합니다. 아래 예제를 통하여 확인해보겠습니다. 정수인 값에는 true를, 그 외의 값에는 fasle가 출력된 것을 확인할 수 있습니다. 이해가 잘 되셨을 거라고 생각합니다! Number 관련 메소드 2020/06/30 - [1. 웹개발/1_1_1 JavaScript] - [JavaScript] toFixed()와 toPrecision() 메소드 2020/06/08 - [1. 웹개발/1_1_1 JavaScript] - [JavaScript] NaN인지를 확인하는 isNaN() 함수..

2020. 6. 28.

Frontend/jQuery

[Jquery] focusin(), focusout() - 키보드 이벤트

.focusin() 메소드와 .focusout() 메소드 focusin() 메소드 : focus가 들어갔을 때 이벤트 발생 focusout() 메소드 : focus가 빠져나왔을 때 이벤트 발생 저렇게 설명하면 무슨 소리인지 이해하기 어려우니 간단한 예제를 통하여 이해를 돕도록 하겠습니다. .keypress() 메소드 .focusin()과 .focusout() 메소드 아래 텍스트 필드를 마우스로 클릭해 보세요! 출력 결과 요소에 포커스가 맞춰져 있으면 노란색으로 배경이 바뀌고, 요소에 포커스가 맞춰져 있지 않으면 흰색으로 배경이 바뀌는 예제였습니다.

2020. 6. 16.

Frontend/jQuery

[Jquery] dbclick() - 마우스 더블클릭 이벤트 주는 방법

dblclick() 메소드 자바스크립트의 "dblclick()" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 더블클릭 이벤트를 발생시킵니다. 아래 예제를 통해 자세히 살펴보도록 하겠습니다. 출력 결과 button을 더블 클릭하면 위의 텍스트에서 '더블 클릭' 부분이 빨갛게 변경되는 예제였습니다. 사용하기 쉽고 간단한 메소드입니다.

2020. 6. 13.

Frontend/jQuery

[Jquery] off() - 이벤트 제거하는 방법

off() 메소드 더 이상 사용하지 않는 이벤트와 연결을 제거합니다. 아래 예제를 통해 자세히 살펴보도록 하겠습니다. .off() 메소드 마우스를 클릭해 보세요! 클릭 이벤트를 제거합니다! 출력 결과 'clickBtn' 이라는 id를 가진 button을 클릭하면 '버튼을 클릭했어요'라는 메소드가 나옵니다. (이때, 우리가 배운 off() 메소드를 통하여 클릭 이벤트를 제거할 수 있습니다.) 'removeBtn' 이라는 id를 가진 button을 클릭하면 'click' 이벤트 연결을 제거하는 예제였네요.

2020. 6. 12.

Frontend/jQuery

[Jquery] remove(), detach() - 요소 삭제하는 방법

이번에는 요소를 삭제하는 메소드에 대해 알아보겠습니다. 요소를 삭제하는 메소드는 여러가지가 있습니다. 하지만, 이번 글에는 remove()와 detach()만을 다루고 다음에 시간이 되면 empty() 메소드에 대하여 글을 작성해보겠습니다. 아래 메소드를 사용하면 선택한 요소나 콘텐츠를 삭제할 수 있습니다. 1. .remove() 2. .detach() .remove() 메소드 선택한 요소를 DOM에서 삭제합니다. 이때 삭제되는 요소와 연관된 제이쿼리나 이벤트 모두 함께 삭제됩니다. 아래 예제를 통하여 잘 삭제되었는지 확인해 보도록 하겠습니다. .remove() 메소드 첫 번째 컨텐츠에요! 두 번째 컨텐츠에요! 세 번째 컨텐츠에요! div 요소 삭제 출력 결과 button을 클릭하면 content 클래스..

2020. 5. 22.

Frontend/jQuery

[Jquery] parentsUntil() - 상위요소 가져오는 방법

parentsUntil() 메소드 선택한 요소의 조상 요소 중 전달받은 선택자(인수)에 해당하는 요소 바로 이전까지의 요소만을 모두 선택합니다. 이때 선택자를 인수로 전달하지 않으면, .parent() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택하게 됩니다. 아래 예제를 통하여 자세히 알아보도록 하겠습니다. .parents() 메소드 div 요소 ul 요소 li 요소 li 요소 p 요소 (기준) span 요소 li 요소 p 요소의 부모 요소 출력 결과 button을 클릭하면 요소의 조상 요소 중에서 첫 번째 요소의 바로 이전까지의 요소를 모두 선택하여 빨간색 테두리를 씌우는 예제였습니다. 요소의 부모인 요소를 씌우고, 요소의 부모인 요소를 선택합니다.

2020. 5. 21.

Frontend/Debug Log

Unexpected token o in JSON at position 1 해결 방법

Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse() 에러 해결 방법에 대하여 알아보겠습니다. 이 에러코드의 발생 원인은 다음과 같습니다. 1. json 형식의 문자열이 맞는지? 2. json 형식의 문자열로 작성하였는데 오타가 있는 것이 아닌지? 해결 방법 1. json 형식의 문자열이 아니라면 json 형식의 문자열로 지정해주시면 됩니다. 2. 작은따옴표('), 큰따옴표(")를 주의하시고 잘 확인해주셔서 오타를 수정하시기 바랍니다. 예제를 통하여 에러가 발생한 이유와 해결 방법에 대하여 알아 보도록 하겠습니다. 위 코드를 실행하니 Unexpected token o in JSON at position 1 에러가 발생..

2020. 5. 4.

Frontend/Debug Log

[개발자 꿀팁] 크롬 개발자도구 알아보기

이번에는 크롬에서 개발자 도구를 알아보겠습니다. 단축키 F12를 이용하여 개발자 도구를 열어줍니다. 그러면 개발자 도구가 열리고 주요 패널들을 볼 수 있습니다. 주요 패널로는 Elements, Console, Sources, Network 패널이 있습니다. [ Elements ] 주로 디자인을 수정하는 용도로 사용하고 html 문을 확인할 수 있습니다. [ Console ] 로그를 확인할 수 있고, 스크립트 명령어를 입력하는 패널입니다. 브레이크 포인트를 건 시점을 기준으로 변수를 확인할 수 있고, 값도 바꿀 수 있습니다. [ Source ] 자바스크립트 디버깅을 주로 하는 곳입니다. 디버깅은 다음 글에서 자세하게 다루겠습니다. [ Network ] 현 페이지의 HTTP 요청과 응답 리스트와 타임라인 토..

2020. 5. 2.

Frontend/jQuery

[Jquery] $.each() - 요소 각각에 대하여 함수 실행

이번 글에서는 반복함수를 실행시키는 메소드라고 불리는 each() 메소드에 대하여 알아보도록 하겠습니다. $.each() 메소드 객체나 배열에서 모두 사용할 수 있는 반복 함수(iterator function)입니다. length 속성이 있는 배열 혹은 그 배열과 같은 객체를 전달받아, 그 길이만큼 반복해서 콜백함수를 실행합니다. 만약, 객체인 경우 객체가 갖고 있는 프로퍼티의 개수만큼 반복해서 콜백함수를 실행합니다. 글만 봐서는 이해가 잘 안되실 수 있으니 예제를 통하여 확인해보도록 하겠습니다. 아래 소스는 $.each() 메소드에 인수값을 배열로 전달하여 각 배열의 요소를 출력하는 예제입니다. 이번에는 배열이 아닌 객체를 인수로 전달한 예제를 확인해보도록 하겠습니다. 출력 결과가 어떻게 나올까요? 아..

2020. 4. 19.

Frontend/jQuery

[Jquery] animate() - 애니메이션 효과 만드는 방법

animate() 메소드 animate() 메소드는 여러개의 CSS 속성을 이용하여 새로운 이펙트 효과를 만들 수 있습니다. 프로퍼티 파라미터는 필수로 받고, 이펙트 효과를 구성할 CSS 속성을 적어줍니다. 지속 시간으로는 이펙트 효과가 지속될 시간을 말합니다. 시간당 속도 함수는 이펙트 효과의 시간당 속도를 말합니다. 콜백 함수는 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의하면 됩니다. 아래 예제를 통하여 확인해 보도록 하겠습니다. .animate() 메소드 이펙트 효과 시작! 이펙트 효과가 모두 끝나면 이 텍스트는 변경될 거에요! 출력 결과 왼쪽으로 0.5초만에 이동됨과 동시에 투명도가 살짝 설정된 예제입니다.

2020. 4. 19.

Frontend/jQuery

[Jquery] delay(), stop(), finish() - 효과 정지하는 방법

이번 글에서는 이펙트 효과를 지연시키거나, 정지시키거나, 끝내는 방법에 대하여 알아보려고 합니다. 이러한 방법을 해결해주는 메소드로는 delay(), stop(), finish()가 있습니다. 각각의 메소드에 대하여 알아보도록 합시다. delay() 메소드 이펙트 효과 사이의 지연 시간을 설정하여 효과를 지연시키는 메소드입니다. 예제를 통하여 확인해보도록 하겠습니다. 아래 소스는 fadeOut() 효과와 fadeIn() 효과 사이에 1초의 지연시간을 설정하는 예제입니다. 이펙트 효과의 지연 설정 이펙트 효과 시작! 이번에는 이펙트 효과를 중지시키는 방법과 종료하는 방법에 대한 메소드들에 대하여 알아보겠습니다. stop() 메소드 - 선택한 요소에서 실행 중인 모든 이펙트 효과를 중지시킵니다. finish..

2020. 4. 18.

Frontend/jQuery

[Jquery] slideUp(), slideDown() - 슬라이드 효과 내는 방법

이번 글에서는 슬라이드 효과를 내는 방법에 대하여 알아보도록 하겠습니다. 슬라이드(slide) 관련 메소드는 대표적으로 3가지입니다. 1. slideUp() 2. slideDown() 3. slideToggle() slideUp()과 slideDown() .slideUp() 메소드는 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여주고 .slideDown() 메소드는 선택한 요소가 서서히 내려오면서 나타나는 효과를 보여줍니다. 아래 예제를 보시면 쉽게 이해하실 수 있으실 겁니다. 슬라이드 업과 슬라이드 다운 슬라이드 업 슬라이드 다운 출력 결과 출력 결과는 사진 이미지이기 때문에 애니메이션 효과인 슬라이드를 보여주지는 않네요.. 결과가 궁금하신 분은 직접 코딩 해보시기 바랍니다! 또한, 사라지거나 나..

2020. 4. 18.

Frontend/Javascript

[Javascript] setRequestHeader() - HTTP 요청 헤더 값 설정하는 방법

Ajax에서는 setRequestHeader() 메소드를 사용하여 HTTP 요청 헤더의 값을 설정할 수 있습니다.setRequestHeader()XMLHttpRequest객체.setRequestHeader(헤더이름, 헤더값); 헤더 이름은 HTTP 요청 헤더에 포함하고자 하는 헤더의 이름이며, 그 값도 같이 전달합니다.하지만 다루기 전에 반드시 open()을 setRequestHeader 전에 호출해야하고 그 이후에는 send() 메소드를 적어주시면 됩니다.예제 코드아래 예제를 통하여 직접 한 번 HTTP 요청 헤더를 작성해보겠습니다. 위의 예제에서 setRequestHeader() 메소드를 추가하기 전에 open() 메소드를 이용하고그 이후에 setRequestHeader()가 사용되어서 'hayan'..

2020. 4. 18.

Frontend/jQuery

[Jquery] fadeIn(), fadeOut() - 페이드 효과 내는 방법

이번 글에서는 애니메이션 기능인 페이드에 대하여 알아보도록 하겠습니다. 페이드(fade) 관련 메소드는 대표적으로 4가지입니다. 1. fadeIn() 2. fadeOut() 3. fadeToggle() 4. fadeTo() 하지만, 이번 글에서는 fadeIn(), fadeOut(), fadeToggle()만 다루어 보겠습니다. 페이드 인(fade in)과 페이드 아웃(fade out) .fadeIn() 메소드는 선택자로 정한 요소를 서서히 사라지게 하고, .fadeOut() 메소드는 서서히 나타나게 합니다. 아래 예제를 통하여 확인해보도록 하겠습니다. 출력 결과 출력 결과는 사진이기 때문에 서서히 사라지고, 서서히 나타나는 것이 보이지 않네요.. 직접 코딩하고 확인해보시는 것을 강력히 추천드립니다. 위의..

2020. 4. 12.

Frontend/jQuery

[Jquery] serialize() - 직렬화 방법

이번 글에서는 직렬화하는 방법에 대하여 알아보겠습니다. 먼저 직렬화란 무엇일까요? Ajax에서는 서버와 비동기 통신을 위해 입력받은 데이터를 직렬화하여 전송합니다. 이때, 직렬화란 입력받은 여러 데이터를 하나의 쿼리 문자열로 만들어 주는 것을 의미합니다. 이렇게 직렬화함으로써 입력받은 데이터를 한 번에 서버로 보낼 수 있게됩니다. 직렬화(serialization) 제이쿼리에서는 태그의 요소를 통해 입력된 데이터의 직렬화를 아주 간단하게 수행할 수 있습니다. .serialize() 메소드와 .serializeArray() 메소드를 이용하면 되는데 이 두 가지 메소드에 대하여 알아보겠습니다. .serialize() 메소드는 태그의 요소를 통해 입력된 데이터를 쿼리 문자열로 변환합니다. .serializeAr..

2020. 4. 12.

Frontend/jQuery

[Jquery] $.ajax() - 사용 방법

이번 글에서는 $.ajax() 메소드에 대하여 알아보도록 하겠습니다. 다음 예제를 통하여 $.ajax() 메소드에서 사용할 수 있는 대표적인 옵션을 살펴봅시다. url 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소 data HTTP 요청과 함께 서버로 보낼 데이터 method HTTP 요청 방식(GET, POST) dataType HTTP 요청 방식(GET, POST) ajax() 메소드 이후에 실행되는 .done(), .fail(), .always()에 대하여 알아볼까요? .done() HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨. .fail() HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨. .always() HTTP 요청이 성공하거나..

2020. 4. 12.

Frontend/jQuery

[Jquery] $.GET(), $.POST() - 서버에 요청하는 방법

이번 글에서는 AJAX와 관련된 메소드 $.GET() 과 $.POST() 메소드에 대하여 알아보도록 하겠습니다. 이 두가지 방식은 클라이언트에서 서버로 HTTP 요청을 보낼 때 사용되는 방식입니다. $.get() 메소드 $.get(URL주소[,콜백함수]); URL 주소는 클라이언트가 서버에 요청을 보낼 주소입니다. 콜백함수는 HTTP 요청이 성공했을 때 실행할 함수를 나타냅니다. $.get() 메소드 GET 방식으로 데이터 불러오기! $.post() 메소드 $.post(URL 주소[,데이터][,콜백함수]); 이 메소드를 통해 어렵지 않게 서버에 요청을 간단하게 할 수 있습니다.

2020. 4. 12.