Bon Voyage!

웹에서 자주 사용하는 기능 중 하나가 바로 엔터키 값 체크입니다. 텍스트 박스에서 뭔가를 입력하고 엔터키를 누르면 버튼을 클릭해야 실행되는 이벤트를 실행하는 경우가 상당히 많습니다. Javascript와 JQuery에서 엔터키 값 체크하는 방법을 예제를 통해 한 번 알아보겠습니다. 먼저 event.keyCode는 사용자가 키보드를 사용하여 키를 누를 때 발생하는 이벤트에서 눌린 키에 대한 정보를 나타내는 속성입니다. 이 속성값이 13인 경우 엔터키를 눌렀다고 인식하기 때문에 위 예제에서 Javascript와 JQuery 함수에 동일하게 사용했습니다, onkeydown은 JavaScript에서 사용되는 이벤트 속성 중 하나로, 키보드에서 키를 누를 때 발생하는 이벤트를 처리하기 위해 사용됩니다. 위 예제에..

웹에서 게시판을 개발하다보면 필수로 사용하는 기능 중에 하나가 체크박스 전체선택해제하는 기능입니다. 간단한 예제를 통해 전체선택해제에 대해 알아보겠습니다. Select All Name Age John 30 Jane 25 Michael 40 전체 선택 이름 나이 존 30 제인 25 마이클 40 동일한 테이블 두개를 가지고 Javascript와 JQuery로 체크박스 전체선택해제를 하는 예제입니다. 둘 다 동일하게 전체선택 체크박스의 id 값을 이용해 동일한 name 값을 가진 체크박스들을 전체선택하거나 해제할 수 있는 예제를 만들었습니다. 여러분 취향껏 Javascript와 JQuery 예제 중 하나를 선택해서 응용해 사용해보시기 바랍니다.

웹에서 가장 많이 필요로 하는 기능 중 하나가 체크박스 선택된 값 가져오는 기능입니다. 이번에는 Javascirpt와 JQuery로 체크박스 선택된 값을 가져오는 법에 대해 알아보겠습니다. 과일을 선택하세요: apple banana orange javascript로 선택 확인 jquery로 선택 확인 이 예제에서는 체크박스로 표현된 세 가지 과일 선택 여부를 확인할 수 있습니다. 먼저 javascript로 만들어진 '선택 확인' 버튼을 클릭하면 getSelectedFruits() 함수에서 체크박스 값을 모두 찾아 배열에 저장한 다음 반복문을 통해 선택된 과일만 별도로 저장해 알림 창으로 출력해줍니다. 체크박스가 체크되면 해당 체크박스 요소의 checked 속성이 true로 설정되기 때문에 if문에 이 속..

웹은 어느 기기에서나 인터넷이 연결되면 브라우저를 통해 접근할 수 있습니다. 그렇기 때문에 많은 웹퍼블리셔 들이 기기별 최적화를 위해 많이 노력하고 있는데요. 모바일 기기만 체크해도 많은 수고로움을 줄일 수 있습니다. 다음은 Javascirpt에서 모바일 장치를 체크할 수 있는 샘플 소스입니다. 모바일 체크 테스트 위 샘플 소스 중 navigator.userAgent는 웹 브라우저에서 현재 사용 중인 사용자 에이전트(User Agent) 문자열을 반환하는 JavaScript의 속성입니다. 사용자 에이전트는 브라우저나 장치 등의 클라이언트 소프트웨어가 서버에 요청할 때 전달하는 정보를 말합니다. navigator.userAgent는 일반적으로 브라우저 식별 및 버전 확인, 특정 기능의 지원 여부 등과 같은..

최근에 설계된 사이트들에서는 대부분 일어나지 않을 일이지만 오래된 사이트의 경우 문자열 저장 시 DB 컬럼 타입 문제로 특수문자가 제대로 저장되지 않는 경우가 있습니다. 윈도우 이모지도 그 중 하나인데 사용자가 입력하는 게시판이나 페이지 같은 경우 별도 체크를 하지 않으면 문자열이 깨진 상태로 저장되기도 합니다. 보통 특수문자의 경우 정규식이나 기타 방법을 사용해 입력할 수 없도록 체크하고 있지만 윈도우 이모지의 경우는 일반적으로 체크하지 않는 경우가 많은 것 같습니다. 가장 좋은 방법은 입력란에 맞는 특정 문자열 말고는 입력을 못하도록 막는 방법일 수 있겠지만 그렇지 않은 경우 javascript로 이모지를 체크하는 방법에 대해 알아보겠습니다. function containsWindowsEmoji(te..

Javascript 와 JQuery에서 iframe 내부 함수 접근 방법에 대해 알아보겠습니다. Javascript를 사용해서 iframe 함수를 제어할 수 있습니다. 아래에 예제를 보면서 확인해보겠습니다. - sample.html test1 test2 - frame.html iframe id인 iframe_id 로 contentWindow 객체를 이용해 함수를 접근할 수 있습니다. sample.html에서 먼저 iframe 을 접근하고 document.getElementById("iframe_id") 뒤에 contentWindow 객체를 사용한 뒤 frame.html 의 inputTxt() 함수를 호출하면 실행할 수 있습니다. JQuery의 경우는 $("#iframe_id").get(0) 뒤에 동일하게..

웹페이지에서 스크립트 실행 시 특정 포커스로 이동해야할 경우가 있습니다. 기본적으로 Html을 브라우저에서 구현하면 탭키를 이용해 위치를 이동할 수 있습니다. 일반적으로 탭키를 누르면 코딩 순서대로 이동하게 되는데 레이어 팝업을 호출할 경우 레이어 디자인이 하단에 있으면 레이어 창이 뜬 후에도 바로 레이어로 이동할 수 없는 경우가 생깁니다. 이런 상황에서 각각 Javascript와 JQuery를 사용해 포커스 이동하는 방법을 확인해보겠습니다. [Javascript] 테스트 레이어 테스트. 디자인은 무시합니다. 닫기 [JQuery] 테스트 레이어 테스트. 디자인은 무시합니다. 닫기 위 샘플을 이용해 확인해보시면 쉽게 이해하시고 응용까지 하실 수 있을 것 같습니다.

웹개발 하면서 그동안 html title 까지는 변경해줄 일이 없었는데 웹접근성에 맞는 홈페이지를 제작하면서 사용하게 되어 별도로 정리하게 됐습니다. html title이란 웹브라우저에서 탭에 나타나는 텍스트로 티스토리 사이트로 들어가면 다음과 같이 TISTORY로 텍스트가 뜨고 있습니다. 위와 같이 나오는 텍스트 내용을 수정하시려면 document.title = "변경하려는 텍스트"; 를 사용해 간단히 수정하실 수 있습니다. 다음 예제를 통해 확인해보겠습니다. 위와 같이 간단한 페이지를 만들어 테스트해보면 금방 확인하실 수 있습니다. db에서 값을 받아와 사용해야 하는 경우에도 document.title을 응용해 동적으로 타이틀을 수정하시면 될 것 같습니다.

Javascript에서 자주 사용하는 기능 중 하나인 문자열 자르는 함수에 대해 알아보겠습니다. substr(), substring(), slice() 이 3가지 함수 모두 문자열 자르는 역할을 하지만 기능이 조금씩 다릅니다. 1. substr() substr(시작위치, 길이) substr() 함수는 위와 같은 파라미터를 입력받습니다. 첫번째 파라미터에 문자열을 자르기 시작하는 인텍스 위치를 지정하고 두번째 파라미터에 문자열을 자를 길이를 입력해 사용합니다. 문자열의 최초 인덱스 번호는 0부터 시작됩니다. 위 예제를 보면서 자세한 사용법을 알아보겠습니다. 첫번째 예제를 보시면 문자열을 첫번째 인덱스부터 1번째 문자열까지 출력하기 위해 작성한 코드입니다. 당연히 맨 첫번째 문자열인 'B'만 출력이 됩니다...

Javascript에서 소수점 정리할 수 있는 함수에 대해 알아보겠습니다. 간단히 사용할 수 있는 함수는 Math 객체에 있는 ceil(), floor(), round() 메서드와 toFixed() 함수가 있습니다. 1. Math 객체 메서드 Math.ceil() : 올림 Math.floor() : 버림 Math.round() : 반올림 이 메서드들은 소수점 첫째 자리에서 올림이나 버림, 반올림을 해서 정수로 값을 나타내주는 역할을 합니다. 다음 예제를 보면서 실제 변환되는 값을 확인해보겠습니다. 위 예제를 보면 3가지 메서드 모두 소수점 자리수와 상관없이 소수점 첫째 자리를 기준으로 값을 처리하는 것을 확인하실 수 있습니다. ceil()의 경우 값이 양수이면 소수점 첫째자리 수가 1이상이면 무조건 값을..