본문 바로가기

웹

[자바스크립트] 'focus', 엔터 누르고 이동하자! focus & blur 다들 당연하게 생각하셨는지 모르겠지만, 왜 그런거 있잖아요? 포털 사이트 네이버나 다음에 접속하면, 검색창에 커서가 깜박깜박여서 바로 입력을 할 수 있다던가, 기타 로그인시에 ID 입력 부분에 커서가 자동으로 위치하게 되는 경우 말이죠. 네 그렇습니다. 역시 그것또한 메소드를 통해서 구현이 된 것인데요. 이번에 소개시켜드릴 focus()와 blur()가 그 주인공입니다. 다음과 같은 기능을 지닙니다. focus() - 해당 요소에 포커스를 부여하여 1. 텍스트 창의 경우, 커서를 위치시켜 바로 입력이 가능합니다. 2. 버튼의 경우, 엔터 키를 눌렀을때 클릭 효과를 냅니다. blur() - focus와 반대의 기능을 하는 것으로 1. 창의 경우, 최소화 시켜 버립니다. 우선 대표적인.. 더보기
[자바스크립트] 'image', 클릭했을때 사진을 바꿔보자! Switching Image 이번글에서는 페이지내로 불러온 이미지를 클릭했을때 다른 그림으로 전환이 되도록 해볼게요. 알고 있으면 좋은 만한 것들을 정리해볼게요. 1. 태그 와 속성 중 src 2. Math 객체의 Random 함수와 round 함수 3. while 반복문4. onclick 이벤트 다음 파일은 소스 파일입니다. 숫자 이미지 5개와 html 파일이 있어요. 사용법은 이미지와 html파일이 동일한 경로, 즉, 같은 폴더내에 있으면 되겠습니다. 우선 소스는 다음과 같습니다. 우선 위에 보이는 페이지는 이미지를 클릭했을때 첨부한 5개의 이미지가 랜덤으로 보이게 끔 해놓았습니다. 그렇다면소스 설명 먼저 들어 갈게요 ^^ 1. 이미지 주소 저장 var arrImage=new Array("num1.p.. 더보기
[자바스크립트] 'alert', 메시지 창을 띄우자! alert 갑자기 메시지 창이 떠서 놀라셨죠! (ㅎㅎ 오바 하는 중입니다.) 제가 자바스크립트를 하면서 가장 많이 쓰는 메소드 중에 하나가 이번에 소개하게 될 alert() 인데요~ 주로 데이터가 제대로 저장되었고, 확인할 때 많이 씁니다. 물론 이런 용도는 아니지만 ^^; document.write() 형식으로도 할 수 있지만, 저는 이게 편해서 많이 씁니다. 서론이 길었네요 ^^ 우선! 다음과 같이 alert 메소드를 통해서 메시지 창을 띄울 수 있습니다. alert('text' 혹은 변수) or window.alert('text' 혹은 변수); alert()은 window 객체의 프로퍼티이기때문에 window에 대해서 생략이 가능합니다. window 객체에 대해서는 다른글에서 설명하겠구요, 여기서는.. 더보기
[자바스크립트] 'defaultStatus', 상태표시줄에 텍스트를 띄우자! defaultStatus 우선, 다들 브라우저의 상태 표시줄이 어디 있으신지 아시는지요~? 바로 다음과 같이 상태 표시줄이 존재합니다. 상태 표시줄(Status Bar)은 다음과 같이 정의되고 있습니다. 윈도 안에 표시되어 있는 내용에 따라 다양한 정보가 표시되는 부분 -출저 : 네이버 상위 버전의 익스플로러 같은 경우, 상태표시줄이 해제되어 있어서 확인이 안되는데요, 위의 사진처럼, 마우스 오른쪽을 클릭하셔서 상태표시줄을 표시해주시게 되면, 상태표시줄이 나타납니다. 여기에 저희가 메시지를 설정할 수 있는데요~ 그렇다면 한번 해보도록 합시다. 다음과 같이 설정할 수 있습니다. defaultStatus="text" or window.defaultStatus="text" defaultStatus 프로퍼티는 .. 더보기
[자바스크립트] 'Date' 개체, 날짜와 시간값을 얻어봅시다! Date 객체 자주 쓰이진 않지만 가끔 현재시간이나, 시간 정보를 담아둬야 할 필요가 있을 때가 있는데요? 그럴때!! 활용할 수 있는 Date 객체가 있습니다. 우선 Date 객체를 만드는 방법은 다음과 같습니다. 1. var 변수명 = new Date(); 2. var 변수명 = new Date(밀리초); 3. var 변수명 = new Date("1 January 2012");4. var 변수명 = new Date(2012, 0, 1, 12, 15, 10, 30); 첫번째 방법은, 빈 생성자 Date()를 불러오는 방법인데요, 이때 변수에 저장되는 값은 현재값입니다. 두번째 방법은, 밀리초를 생성자 인자로 넣는 방법으로, "1970년 1월 1일 00:00:00" 을 기준으로 밀리초 단위로 지나간 시간을.. 더보기
[자바스크립트] 'prompt', 프롬프트창을 띄워봅시다! Prompt 자바스크립트에서는 프롬프트(prompt)창을 활용한 데이터 입력이 가능합니다. 자잘한 설명보다는 예시를 들어서 한번 알아볼까해요 ^^ 간단한 구구단을 구현해 봅시다. 저는 다음과 같이 메소드를 만들고 구동하는 방식으로 할게요^^ 위의 소스이구요. 여기서 잠시 살펴보자면, prompt 함수를 사용해서 intInput이라는 변수에 값을 입력할 수 있도록 하였는데요. 보통 프롬프트를 통해서는 값을 입력을 받기 때문에, 그 받은 값을 활용할 수 있도록 변수에다 대입을 시키는 것입니다. 그리고 그 받은 값을 다시 multiply라는 제가 정의한 메소드에 따라서 구구단이 동작을 하고 화면에 출력할 수 있도록 하였습니다. prompt를 잘 활용한다면, 여러 용도로 구현할 수 있다고 생각해요 ^^ 궁금한게.. 더보기
[HTML] 버튼(button)을 만들어서 사용해 보자! JSP(Java Server Page) FORM 태그를 이용해서 페이지를 작성하다 보면 'INPUT' 타입이 'SUBMIT'이거나 'RESET' 인 것만 사용해봤을텐데요, 기존의 폼(FROM)태그를 이용한 방법에는 기능이 한정되어 있었기 때문에, 이런 생각을 다들 해보셨을 겁니다. '그냥 버튼에 자유롭게 기능을 넣어서 사용할 수 없을까?' 당연!! 존재합니다. 그것은 'INPUT'타입이 'BUTTON'인 것 인데요. 다음과 같이 작성 가능합니다. 참고로, 버튼을 만드는 방법은 태그를 제외한 몇가지 방법이 존재하는데요. 1. 태그의 의 타입으로 지정합니다. 2. 태그로 만듭니다.(1번과 유사합니다.) - 여기서 다루지 않습니다. 3. 이미지나 플래시 등등을 이용해서 버튼처럼 사용합니다. - 여기서 다루지 .. 더보기
[HTML] '툴팁', 부가적인 정보를 제공하자! HTML(Hyper Text Markup Language) 마우스 클릭없이 해당 이미지나 텍스트로 마우스 포인터가 이동했을때 자그마한 상자가 뜨면서 부가적인 정보를 제공하는 경우를 많이 보셨을거라 생각됩니다. 다음과 같이 표시 되겠습니다. [툴팁 테스트입니다. 마우스 포인터를 이 텍스트 위에 위치해 보세요.] 이것은 기 말했던대로, '툴팁' 이라고 하는데요. 사용법은 무척 간단합니다. 몇몇 태그에 속성만 추가해주면 되겠는데요. 보통 툴팁의 속성명은 'title' 또는 'alt'로 들어가게 됩니다. 적용될 수 있는 태그와 사용법은 다음과 같습니다. ... text뿐만 아니라 여러 타입에 적용됩니다. 그렇다면 한번 작성해 볼까요? 테스트1 테스트2 실행화면 입니다. 테스트1 테스트2 이상 툴팁이였습니다. 툴.. 더보기

티스토리툴바