Javascript Framework Matrix
간단한 스크립트다. 사용자 입력상자 안에 제목이 들어 있고, 사용자가 입력상자를 선택(Focus) 했을 때는 제목이 사라지고, 입력상자를 벗어난 경우 본래대로 나타나 보이게 하는 스크립트다. 단 새로운 내용이 입력된 경우에는 제목이 나타나지 않고, 입력된 내용이 유지되어야 한다. 훌륭하게 작성된 스크립트가 많지만 가끔은 그런 스크립트가 초보자들 입장에서 가져와서 해석하는 것이 여간 어려운 일이 아닐 수 없다.
적어도 이 예제는 쉽지 않을까 싶다.
최근에 로그인 영역 등에 '로그인', '비밀번호'와 같은 제목을 입력상자 안에 넣는 디자인이 자주 등장하는데 위와 같은 방법으로 처리할 수 있을것 같다. 물론 디자인으로 처리된 경우는 위 방법은 어렵고 배경 이미지를 스타일시트로 호출하는 방식이 좋은것 같다.
이 글은 스프링노트에서 작성되었습니다.
사용자 입력 상자에 입력된 값이 나이인지 아닌지 그리고 적절한지를 판단하는 스크립트를 작성해 보았습니다.
HTML 펼치기..
CSS 보두기..
Java Script
1. form 영역안에서 타입이 submit인 input 요소를 찾아서 btn 변수에 정의한다.
// Submit
btn.onclick = function()
{
var block = this.parentNode;
var fields = block.getElementsByTagName("input");
for(var i=0; i<fields.length; i++)
{
var obj = fields[i];
if(chkBlank(obj) == false) return false; // Blank Value Check
if( (obj.type == "text") && (getClassName(obj.className) == true) ) // class Attribute is "numeral"
{
if(checkNumeral(obj.value) == false)
{
obj.focus();
obj.value = "";
return false;
}
if(obj.id == "age") // ID Attribute is "age"
{
var user_age = parseInt(fields[i].value); // Conversion
if(checkMan(user_age) == false)
{
fields[i].focus();
obj.value = "";
return false;
}
}
}
}
alert("전송 완료!");
return false;
}
}
2. btn(submit)을 클릭한 경우 타입이 ‘text’인 input 요소의 값의 유효성 체크를 시행하여 아무 이상이 없으면 ‘전송 완료!’메세지를 출력한다.
3. 사용자 입력 상자의 값이 빈 경우를 체크한다.
4. class 값을 가져와서 조건식(if)을 통해서 참/거짓만을 돌려주는 함수다.
5. getClassName 함수를 통해서 ‘numeral’ 이라는 class 가 포함된 경우(getClassName 함수가 true를 리턴한 경우) 숫자인지 아닌지를 확인한다.
6. 숫자는 정수형만을 선택하였고, 0부터 9까지의 숫자를 numeral 변수에 문자열로 담아둔다.
7. 반복문을 통해서 numeral 변수에 담겨진 숫자(문자형)가 담겨져 있는지 확인하여, 하나라도 숫자 아닌 것이 포함된 경우 경고창을 띄운다.
8. 전달 받은 값이 숫자인지 확인이 되었다면 마지막으로 적절한 나이인지 확인한다. 0세 이상, 100세 이하의 경우를 적절한 나이로 설정했다.
이 글은 스터디 과제로 작성된 코드를 정리한 것입니다.웹문서는 구조를 담은 HTML과 표현을 담당하는 CSS로 나뉘어진다. 그리고 동작을 담당하는 Script로 구분되는데, 이같은 분리는 구조와 표현 그리고 동작 영역이 서로의 영역으로 최대한 침범하지 않음으로써 유연함을 갖추면서 웹접근성을 확보하는데 도움을 줄 수 있다. 웹표준을 잘 따른 웹사이트가 CSS를 걷어 내었을 경우에도 HTML문서가 담고 있는 콘텐츠를 충분히 고객에게 전달할 수 있는 것과 같이 Script의 분리는 자바스크립트등 동적 기능이 제한적이거나 사용할 수 없는 경우에도 웹탐색을 지속시켜줄 수 있다.
HTML보기.
CSS보기.
bomnun_js_2.zip