이번 글에서는 자바스크립트 함수에 대해서 확인을 하여 보도록 하겠습니다. 함수는 몇 가지가 있지만 자주 이용을 하는 함수에 대해서 확인을 하여 보도록 하겠습니다.
목차
getElementById 함수에 대해서 알아보도록 하겠습니다. 해당 함수는 웹페이지의 엘리먼트에 접근을 해서 데이터를 가지고 올수도 있고 값을 넣을수도 있습니다.
특히 유효성 검사를 할때 document.getElementById 함수를 사용을 해서 검사를 하게 됩니다.
이런 유효성을 검사를 하기 위해서는 HTML 각 엘리먼트에 접근을 해야 합니다. 이때 접근을 할수 있도록 하여 주는 것이 HTML 태그의 id 속성 입니다.
id 속성을 이용을 해서 웹페이지에 있는 폼에 있는 필드에 접근을 할수가 있습니다.
여기서 document.getElementById (" id") 함수를 이용을 하여 웹 페이지의 엘리먼트의 ID를 가져올수가 있습니다. 여기서 각 필드의 value 프로퍼티를 이용을 해서 데이터에 접근을 할수가 있게 딥니다.
document.getElementById("Name") .value / / value 속성을 사용해서 데이터에 접근을 할수가 있게 됩니다.
위의 소스를 보시면 값을 입력을 받는 입력 박스와 버튼이 하나가 있고 document.getElementById ( )
을 이용을 해서 입력박스의 id : Text1 엘리먼트에 접근을 하고 있습니다. 그리고 value 프로퍼티를 이용을 해서 해당 엘리먼트에 값이 있는지 확인을 하는 함수를 만들었습니다.
해당 함수의 호출은 버튼을 클릭을 했을 일어나는 onclick 이벤트를 이용을 해서 check() 함수를 호출을 하고 있습니다.
check() 함수에서는 document.getElementById("Text1") .value 에 값이 있는지 확인을 하고 없다면 alert () 함수를 이용을 해서 값이 없다고 메세지를 알려주고 focus()을 이용하여 해당 엘리먼트로 포커스를 주게 됩니다.
이런식으로 유효성 검사를 할수가 있습니다. 다음편에는 document.getElementById ( ) 함수에 대해서 다양한 활용 방법에 대해서 알아보도록 하겠습니다.
자바스크립트 isNaN 함수
자바스크립트를 작성을 할때 폼에 필드에 들어오는 데이터가 필히 숫자만 입력이 되어야하는 경우가 있습니다.
이런 경우에 사용을 하면 좋은 빌트인 함수가 바로 isNaN( ) 함수 입니다.
유효성 검사를 할때 사용을 하면 좋은 함수 입니다.
isNaN ( ) 함수에 값을 받아서 해당 값이 숫자가 입력이 되면 false 를 반환을 하고 숫자가 아닌 값이 입력이 된다면 true 값을 반환을 하게 됩니다.
isNaN(document.getElemntById("Num").value ; 이런 식으로 사용을 하시면 됩니다.
위의 소스를 보시면 입력을 받는 필드 하나와 버튼이 하나가 있는 소스 입니다. 버튼을 클릭을 하게 되면 check() 사용자 정의 함수를 호출을 하는 onclick 이벤트를 만들었습니다.
check() 함수를 보시면 우선 Num 이라는 필드에 데이터 있는지 먼저 검사를 하여 줍니다. 없다면 alert 를 이용을 해서 사용자에게 알림 메세지를 보여주고 다시 입력을 하도록 해당 필드로 포커스를 주고 리턴을 하여 줍니다.
값이 입력이 되어 있다면 iisNaN 함수를 이용을 해서 해당 필드에 값이 숫자인지 아닌지를 검사를 하게 됩니다.
결과를 보면 의의 사진에서 처럼 필드에 숫자가 아닌 다른 값을 입력을 하게 되면 위의 사진 처럼 알림 창이 표시가 되는것을 확인을 할수가 있습니다.
자바스크립트 NaN 와 undefined
자바스크립트를 작성을 하고 나서 결과를 볼때undefined 나 NaN 라는 글자가 표시가 되는 경우가 있습니다.
이런 메세지가 왜 나타 날까요? 그리고 해당 글자는 무엇을 나타내는 것일까요? 이것에 대해서 알아보도록 하겠습니다.
우선 undefined 글자에 대해서 알아보도록 하겠습니다.
보통 이런 메세지는 계산식에서 나타나는 것을 볼 수가 있습니다.
var to ;
var a = 1 ;
var b=2
var c ;
이렇게 변수가 있다면 해당 변수를 통해서 계산을 하여 보겠습니다. to = (a + b) * c(?) ; 이렇게 계산식을 만든다면 어떤 결과를 표시를 하여 줄까여? 변수는 undefined 로 표시가 되고 결과는 NaN 이라고 표시를 하게 됩니다.
즉 undefined 는 값이 정의 되어 있지 않다는 것을 말하는 것입니다. 그리고 NaN 는 숫자가 들어가 하는 곳에 잘못된 값이 입력이 되면 NaN 이라는 문자가 출력이 되는 것입니다.
어떻게 설명을 해야 할지 모르겠지만 NaN는 계산을 할때 출력이 되기 때문에 숫자라고 생각을 할지 모르겠지만 숫자가 아닌 NaN는 하나의 값이라고 생각을 하시면 됩니다.
NaN(Not a Number) 즉 숫자가 아니다 라는 말을 뜻하는 것 처럼 계산식에 숫자가 오지를 않고 문자등의 값이 들어 오게 되면 이렇 문제가 발생을 하게 됩니다. 작성을 하는 사람이 문자열 데이터로 가지고 와서 계산을 할때 문제가 발생을 많이 합니다. 그렇기 때문에 문자열로 되어 있는 경우는 숫자로 변화를 해서 사용을 하는것이 이런 문제를 방지를 할수가 있습니다.
자바스크립트 parseInt () 와 parseFloat()
자바스크립트 계산식 코드를 작성을 할때 생각지 않은 결과가 나오는 경우가 있습니다.
예을 들어 1+ 2 는 당현히 3이 나와야 하지만 결과는 12 라는 결과 물이 나오는 경우가 있습니다.
이는 자바스크립트가 1 과 2 를 숫자형 데이터로인식을 해야 하는되 문자열 데이터로 인식을 하게 되어 발생을 하는 경우 입니다.
이렇게 문자열로 저장되 있는 데이터를 숫자형 데이터로 변환을 하여 주는 것이 parseint( ) 함수와 parseFloat() 함수 입니다.
이들 빌트인 함수가 하는 일은 알아보자면 parseFloat() : 함수는 해당 함수로 전달된 문자를 실수로 변환을 하여 줍니다.
parseint( ) : 함수는 전달된 문자를 정수로 변환을 하여 줍니다.
옆의 코드를 보시면 변수 A 와 B 가 있습니다.하나는 문자열 데이터고 하는 숫자형 데이터 입니다.
두개의 데이터를 더하기를 하여 주면 어떤 결과가 나올까요?
alert ( ) 함수를 이용을 해서 결과를 확인을 하여 보도록 하겠습니다.
결과를 확인을 하여 보면 사진 처럼 12 이라는 결과를 볼수가 있습니다.
저는 처음에 당현히 3 이라는 결과물이 표시가 될줄 알았습니다.
자바스크립트는 이 상황에서 두개의 변수를 모두 문자로 인식을 해서 문자열 함치기를 하였습니다.
이런 문제를 해결을 하기 위해서 parseint () 와 parseFloat() 함수를 이용을 하시면 됩니다.
다시 parseInt () 함수를 이용을 해서 다시 실행을하여 보도록 하겠습니다. 그러면 정상적으로 3 이라는 숫자가 출력이 되는것을 볼수가 있습니다.
하지만 parseInt () 함수에 아무런 문자를 입력을 하여도 숫자로 변환을 하여 주는 것은 아닙니다. 숫자에 해당하는 문자를 입력을 해야 정상적으로 출력이 되게 됩니다.
parseFloat("$47.50") = NaN 이렇게 입력을 하면 $ 가 문자이기 때문에 NaN 이라는 문자를 출력을 하게 됩니다.
javascript setTimeout 함수와 자바스크립트 setInterval
이번 글에서는 setTimeout() 함수와 setInterval()함수에 대해서 알아보도록 하겠습니다.
해당 함수들은 타이머 함수 입니다. 일정시간이 지나고 나서 특정 코드를 실행을 할수가 있는 함수입니다.
setTimeout() 과 setInterval() 차이는 반복적동작하는 것과 한번만 실행이 되는 차이가 있습니다.
사용 용도에 대해서 알아보도록 하겠습니다. 우선 setTimeout() 함수는 한번만 실행이 되고 소멸을 하기 때문에 특정 시간동안 방문자가 동작을하지 않을 경우에 사용을 하면 좋습니다.
응용하는 부분은 setTimeout() 의 함수를 이용을 하는 분들의 능력에 달려 있기 때문에 저의 기준으로 설명을 하는것이니 참고만 하시면 됩니다, 저는 방문자 페이지를 방문을 하고 나서 특정시간 동안 반응이 없다면 로그아웃을 시키는 용도로 많이 사용을 하고 있습니다. 또는 특정 시간이 지나고 나서 플로팅 광고를 보여주는 것에도 사용을 합니다.
사용방법은 setTimeout("실행될코드",타이머시간); 식으로 사용을 하시면 됩니다 실행될 코드에는 사용자정의 함수나 다수의 문장 빌트인 함수 모두를 사용을 할수가 있습니다.
반복적으로 사용하는 인터벌 타이머에 대해서 알아보도록 하겠습니다. setInterval( ) 함수를 이용을 해서 정의를 하시면 됩니다. setTimeout 과 틀린점은 반복적으로 실행이 된다는 것입니다.
var timerID = setInterval("alert('응답이 없군요');",10000); 이런 식으로 사용을 하시면 됩니다. 10초에 한번씩 알림창으로 형태로 "응답이 없군요" 라는 메세지를 보여 주여 주게 됩니다. 근대 이런 메세지나 특정 동작을 계속적으로 일어나게 되면 웹 사용자는 상당히 거부감을 나타낼수도 있고 기타 이유로 인해서 해당 기능을
사라지도록 해야 하는 경우가 있습니다.
이런 경우 clearInterval() 함수를 이용을 해서 정지를 시키면 됩니다. 위의 소스를 보시면 timeID 라는 변수에
setInterval() 함수를 반환을 합니다. 해당 변수를 clearInterval(timeID) 이렇게 입력을 하고 실행을 하면 해당
setInterval() 타이머를 제거를 하게 됩니다. 즉 정지가 됩니다.
javascript 창 크기 clientHeight 와 clientWidth
이번 글에서는 웹페이지를 제작을 할때 클라이언트의 해상도에 따라서 이미지나 보여주는 화면의 배치를 틀리게 표시를 해야 할때가 있습니다.
CSS를 이용해서 가능하지만 CSS가능하지 않은 부분을 자바스크립트를 이용을 해서 보안을 하여주어야 합니다.
사용자의 화면 해상도에 따라서 동적으로 변화는 페이지를 제작하기 위해서는 클라이언트의 해상도 넓이와 높이에 대한 정보를 가져와야 합니다.
이런 정보를 가져올수 있는 프로퍼티가 document객체의 body.clientHeight 와 body.clientWidth 입니다.
해당 프로퍼티는 높이와 넓이에 대한 정보를 가져 옵니다. 해당 프로퍼티는 클라이언트 브라우저의 실제 내부공간에 대한 정보를 가지고 오기 때문에 좀더 유용하다고 생각이 됩니다. 툴바나 스크롤바을 제외한 실질적인 브라우저의 내부 공간의 크기를 가져 오게 됩니다.
위의 코드를 작성을 하고 실행을 하여 보면 브라우저의 넓이에 해당하는 정보가 표시가 되는것을 확인을 할수가 있습니다. 그리고 나서 실행을 하여 보시면 브라우저의 크기에 따라서 넒이의 정보가 틀리게 가져오는것을 확인을 할수가 있습니다.
위의 사진처럼 결과 정보가 틀려지는 것을 확인을 할수 있습니다. 해당 정보를 가지고 응용하시면 각 해상도 마다 차별화된 페이지를 제작을 할수가 있습니다.
대화상자 javascript confirm 와 자바스크립트 prompt
자바스크립트에서는 세가지의 대화상자를 메서드를 제공을 하여 주고 있습니다.
가장 많이 사용을 하는 alert() 메서드 입니다. 사용자에게 알림 내역이나 기타 오류 메세지를 알림창 형태로 표시를 하여 줍니다.
하지만 웹페이지를 작성을 하다보면 사용자가 선택을 해야 하는 경우가 있습니다.
예을 들어서 특정 항목을 삭제를 할 때 Yes 또는 No을 선택을 하도록 하여 그에 맞는 코드를 작성을 하여야 하는 경우가 있습니다. 이런 경우에 사용하면 되는 것이 confirm() 메서드 입니다.
그리고 prompt() 메서드는 사용자에게 값을 입력을 받고자 할때 사용을 하는 메서드 입니다. 사용빈도는 그리 많지는 않습니다.
위의 세가지의 대화상자 모두 단순한 텍스트 형식으로만 출력이 됩니다. 해당 메서드에서 사용을 할 수 있는 HTML 코드는 줄바꿈 문자 와 공백문자 그리고 여러가지 구두 문자들만이 사용을 할 수가 있습니다.
javascript confirm() 메서드나 자바스크립트 prompt() 메서드를 만나게 되면 해당 코드는 대화상자 메서드에서 코드가 멈추게 됩니다. 해당 대화상자를 닫기 전까지는 코드가 실행이 되지를 않습니다.
간단히 confirm() 메서드 사용법과 prompt() 메서드 사용법에 대해서 알아보도록 하겠습니다.
<script>
function Del()
{
var message="데이터를 삭제를 하도록 하겠습니다"+"\n" + "삭제를 하면 복원되지 않습니다";
if(!confirm(message)) return;
//확인을 클릭을 하였을 때 실행되는 코드를 작성을 하면 됩니다.
}
</script>
해당 코드를 실행을 하면 아래와 같습니다.
다음으로 자바스크립트 prompt() 메서드 사용법에 대해서 알아보도록 하겠습니다.
<script type="text/javascript">
function age() {
var age = prompt("당신의나이를 입력하세요.","ex)18세");
if(age == null) {
alert("취소 하였습니다");
} else {
alert("당신의 나이는 : " + age + "이군요!");
}
}
</script>
위의 코드를 호출을 하면 아래와 같습니다.
입력박스에 17세를 입력을 하고 확인을 클릭을 하여 보도록 하겠습니다.
if(age == null) { // age 변수에 아무 값도 입력이 안되면 alert("취소 하였습니다") 라는 메세지를 표시를 합니다.
alert("취소 하였습니다");
} else { // 값이 입력이 되면 해당 값을 표시를 하여 줍니다.
alert("당신의 나이는 : " + age + "이군요!");
}
취소를 클릭을 하면
위의 형태로 표시가 됩니다. 확인과 취소를 클릭을 했을 때 실행되는 코드는 적절히 작성을 하여서 사용을 하시면 됩니다.