본문 바로가기

html5

[자바스크립트] 'blur', 이미지 클릭시 테두리를 없애자! blur() ▶▷ 알아두면 좋은 것들 window-focus 관련글1. [자바스크립트] 'focus', 엔터 누르고 이동하자! 이미지를 클릭하고 나면 왜 다음과 같이 점선 테두리가 생겨나게 되잖아요? 간혹, 이런 것들을 제거하고 싶을 때가 있습니다. 이 점선은 포커스(focus)가 이미지에 생겼을때 생기는 것으로, focus를 없애줌으로써 가능합니다. 자세한 설명은 관련글 1번으로 미룰게요 ^^ 그럼 예제를 통해서 어떻게 없애는지 확인해 봅시다. 소스(Source) 1. 소스설명 1. onfocus 이벤트 핸들러 - onfocus 이벤트 핸들러 입니다. 이는 포커스가 지금 해당 이미지에 해당할 때, 정확히 말하면 태그죠? 포커스가 위치할때 blur() 함수를 호출하는 겁니다. 이렇게 되면 포커스를 얻자마.. 더보기
[자바스크립트] 'setTimeout', 타이머를 사용하자! setTimeout() clearTimeout() ▶▷ 알아두면 좋은 것들 BOM, HTML-image 관련글 1. [자바스크립트] 'image', 클릭했을때 사진을 바꿔보자! 2. [자바스크립트] 'focus', 엔터 누르고 이동하자! 3. [자바스크립트] 'blur', 이미지 클릭시 테두리를 없애자! 이번 글에서는 타이머를 가지고 이미지나 글을 담고 있는 배너를 일정 시간이 지난뒤에 계속해서 바꾸는 예제를 만들어 볼까합니다. image 태그에 대한 지식을 가지고 계셔야 예제를 이해할 수 있습니다. 우선 핵심기능인 setTimeout() 함수에 대해서 알아볼까요? setTimeout("실행할 메소드", 지연할 시간); setTimeout() 함수는 두개의 인자를 사용하게 됩니다. 첫번째는 "실행할 메소.. 더보기
[자바스크립트] 'opener', 부모창과 자식창의 텍스트를 교환하자! window- opener ▶▷ 알아두면 좋은 것들 BOM, window-open() 관련글 2012/06/25 - [프로그래밍/HTML/JSP/JavaScript] - [자바스크립트] 'open', 새창을 열어보자! 이번글에서는 부모창과 자식창을 연결해서 서로 제어할 수 있도록 해볼거에요. 특히, 'window' 객체 하위의 'opener' 객체를 활용해서 부모창과 자식창에 있는 텍스트 입력란이 서로 텍스트 데이터를 교환해서 출력해보도록 하겠습니다. 방식만 이해한다면, 쉽게 응용할 수 있겠죠? 저 같은 경우는 비록 편법이었지만 이것과 디비를 이용해서 웹에서 대화창을 구성해봤습니다. 다른 것도 알아야 하지만 이것이 핵심 중의 하나였죠 ^^ 다음과 같이 opener를 활용할 수 있습니다. window.op.. 더보기
[자바스크립트] 'open', 새창을 열어보자! window- open() ▶▷ 알아두면 좋은 것들 브라우저의 구성 관련글 자주는 아니지만 현재창을 유지한 채, 새창을 열어서 사이트를 연결시키거나, 새로운 정보를 표시해야 할 때 유용하게 쓰이는 새 창(또는 새 윈도우) 열기입니다. 이는 window 객체를 사용해서 표현되는데요, 다음과 같이 사용합니다. window.open("①열 페이지의 URL", "②새 창의 이름", "③새 창과 관련된 프로퍼티") ① 열 페이지의 URL입니다. 절대경로와 상대경로의 표현이 가능합니다. ② 새 창의 이름입니다. ③ 새창과 관련된 프로퍼티입니다. 여기서 기술할 수 있는 프로퍼티는 다음과 같습니다. Properties Description Value 비 고 height 픽셀 단위로, 새창의 높이를 설정합니다. 정수 w.. 더보기
[자바스크립트] 'checkbox', 체크박스 모두체크 그리고 모두해제! CheckBox- 모두체크,해제 ▶▷ 알아두면 좋은 것들 HTML-Form, BOM, event-onclick 이번글에서는 나열되어 있는 모든 체크박스를 체크하는 방법과 해제하는 방법에 대해서 알아볼까 합니다. 이를 제어하는 방법은 버튼을 통해서 이루어집니다. 우선, 다른말보다 소스를 보면서 설명토록 하겠습니다. 소스(Source) 소스다운 체크박스1 체크박스2 체크박스3 소스설명 소스다운 1. 모든 체크버튼 활성 function check_onclick(){ for(var i=0;i 더보기
[자바스크립트] 'button', 클릭한 횟수 알아내기! 버튼 클릭한 횟수 알아내기 ▶▷ 알아두면 좋은 것들 전역변수 버튼 클릭한 횟수 알아내기 입니다. 전역변수를 활용한 아주 간단한 예제입니다. 전역변수와 지역변수에 대한 이해가 있으시면 문제없이 구현 가능합니다. 소스(Source) 소스다운 소스설명 1. 전역변수 선언 var count = 0; - 전역변수 count를 선언하였습니다. 이 변수의 목적은 클릭한 횟수를 담기 위함입니다. 전역변수이기 때문에, 사용자 정의의 함수를 실행시킬때마다 변수가 초기화 되지 않고, 문서(HTML)내에서 변수값을 공유하게 됩니다. 그래서 목적에 맞게 사용가능 합니다. 2. 클릭한 횟수의 증가 count++; - 증가연산식인 ++를 이용해서 클릭할때마다, 클릭한 횟루를 위한 위의 전역변수가 1씩 늘어나게 하였습니다. 결과화면.. 더보기
[자바스크립트] 'forms', 폼을 배열로 접근하자! Forms ▶▷ 알아두면 좋은 것들 배열의 개념, BOM, HTML-Form 다들 폼을 배열로 접근할 수 있다는 것 알고 계신가요? 저도 이름은 통한 접근법이 아닌 배열로 폼에 접근하는 방법이 필요한 적이 있었는데요, 폼이 여러개인데, 반복문을 통해서 동일한 동작을 하고자 했을때였죠. 비슷한 것으로 images[] 배열이 있는데, 다음글에서 다루도록 하겠습니다. 우선, 폼에 접근하는 방식은 다음처럼 두가지가 있습니다. 1. document.폼의이름; 2. document.forms[index]; 첫번째 방식은, form의 name 프로퍼티를 이용해서 접근하는 방식입니다. 따로 설명을 부가하지 않겠습니다. 두번째 방식은, 이번글에서 소개하고자 하는 방식으로, forms 객체를 이용합니다. forms 객체는.. 더보기
[자바스크립트] 유효성 검사, 숫자만 입력 되도록 해보자! 유효성검사- 숫자만 입력 ▶▷ 알아두면 좋은 것들 BOM, 아스키코드, event.keyCode, isNan() 함수, select()함수, event.returnValue 프로퍼티 안녕하세요~ 이번글에서는 만들어놓은 폼에 숫자만 입력될 수 있도록 해볼거에요. 제가 가정해 놓은 유효성 검사 방법은 두가지인데요~ 첫번째는 isNaN 함수를 활용한 데이터 검증입니다. 입력이 끝난상태에서 다른 폼으로 이동할 때, 숫자가 아닌 값이 존재할 경우를 메시지를 보이구요, 두번째는 키 입력 방지 입니다. 입력을 하는 매 순간에, 숫자키가 아닌 다른 키를 조작했을때 메시지와 함께 입력이 되지않는 경우를 보이겠습니다. 이래저래 알아두어야 할것은 많지만 소스와 함께 시작해 볼게요 ^^ 소스(Source) 소스 다운 숫자 입.. 더보기
[자바스크립트] 유효성 검사, 모든 폼에 값이 입력되도록 해보자! 유효성 검사 -모든폼에 값 유무확인 ▶▷ 알아두면 좋은 것들 조건문, 조건문에서의 and와 or, alert 메소드 회원가입 폼을 만들고 나서 submit을 통한 자료 전송시에, 모든 폼이나 혹은 일부에 필수로 데이터가 입력되어야 할때, 사용가능한 유효성 검사 방법입니다. 그렇게 어려운 방법은 아니니 한번 보시고 이해 하시면 될듯 합니다 ^^. 이번에는 두가지 소스를 확인하면서 내용을 설명토록 할게요. 첫번째는 단순히 모든 폼에 값이 입력되었는지만 확인하는 소스구요. 두번째는 모든 폼에 값이 입력되었는지 확인하고, 그렇지 않은 폼에 이동을해서 바로 수정이 가능하도록 하겠습니다. 첫번째 소스(Source) 소스다운 필수 입력란1 : 필수 입력란2 : 필수 입력란3 : 보통 입력란4 : (생략가능) 소스설명.. 더보기
[자바스크립트] 'focus', 엔터 누르고 이동하자! focus & blur 다들 당연하게 생각하셨는지 모르겠지만, 왜 그런거 있잖아요? 포털 사이트 네이버나 다음에 접속하면, 검색창에 커서가 깜박깜박여서 바로 입력을 할 수 있다던가, 기타 로그인시에 ID 입력 부분에 커서가 자동으로 위치하게 되는 경우 말이죠. 네 그렇습니다. 역시 그것또한 메소드를 통해서 구현이 된 것인데요. 이번에 소개시켜드릴 focus()와 blur()가 그 주인공입니다. 다음과 같은 기능을 지닙니다. focus() - 해당 요소에 포커스를 부여하여 1. 텍스트 창의 경우, 커서를 위치시켜 바로 입력이 가능합니다. 2. 버튼의 경우, 엔터 키를 눌렀을때 클릭 효과를 냅니다. blur() - focus와 반대의 기능을 하는 것으로 1. 창의 경우, 최소화 시켜 버립니다. 우선 대표적인.. 더보기

티스토리툴바