티스토리 툴바

Daum
Tistory
로그인

'개발/javascript'에 해당되는 글 4건

  1. 2012/03/19 Knowout.js
  2. 2012/03/06 [jQuery] - v 1.3.2 $('img').height()를 하면 0이 나올때
  3. 2012/02/22 아무것도 안하는 a 태그 걸기
  4. 2011/10/07 입력 폼 체크

Knowout.js

크리에이티브 커먼즈 라이선스
Creative Commons License
이름도 신기한 자바스크립트.

우선 링크들만 남겨두자.

http://knockoutjs.com/ 

http://frends.kr/topics/knockout-js-%EC%86%8C%EA%B0%9C/
저작자 표시 비영리 변경 금지

'개발 > javascript' 카테고리의 다른 글

Knowout.js  (0) 2012/03/19
[jQuery] - v 1.3.2 $('img').height()를 하면 0이 나올때  (0) 2012/03/06
아무것도 안하는 a 태그 걸기  (0) 2012/02/22
입력 폼 체크  (0) 2011/10/07
트랙백0개 댓글0개

[jQuery] - v 1.3.2 $('img').height()를 하면 0이 나올때

크리에이티브 커먼즈 라이선스
Creative Commons License
 img 태그의 height() 메소드가 크롬브라우저에서는 정상적인 값이 아닌 0을 출력하는 문제를 발견하였다.

$('img').height() = 0 ???

이 문제를 해결하기 위해서는

$(document).ready(function(){...});

에서 호출하는 대신

$(window).load(function(){..});

에서  호출하는 형태로 고치면 된다.
저작자 표시 비영리 변경 금지

'개발 > javascript' 카테고리의 다른 글

Knowout.js  (0) 2012/03/19
[jQuery] - v 1.3.2 $('img').height()를 하면 0이 나올때  (0) 2012/03/06
아무것도 안하는 a 태그 걸기  (0) 2012/02/22
입력 폼 체크  (0) 2011/10/07
트랙백0개 댓글0개

아무것도 안하는 a 태그 걸기

크리에이티브 커먼즈 라이선스
Creative Commons License
jQuery를 자주 이용하는 저는 click할때 이벤트를 불러오기위해 a태그를 걸고 링크를 걸지 않는 상황을 많이 맞이합니다.
보통 a태그로 아무것도 안할때 아래와 같이 쓰죠. 

<a href="#">클릭하세요</a>


문제는 클릭했을시 페이지 맨 위로 올라간다는 겁니다. 이를 막기 위해서. 아에 a태그를 아래와 같이 써줄 수 있습니다.

<a href="javascript:void(0);">클릭하세요</a>


잘 되는것 같지만, 또 문제는 익스플로러를 사용할시 이미지 링크에 문제가 있습니다.
고로 아래와 같이 써주는게 가장 좋습니다.

<a href="#" onclick="return false;">클릭하세요</a>
저작자 표시 비영리 변경 금지

'개발 > javascript' 카테고리의 다른 글

Knowout.js  (0) 2012/03/19
[jQuery] - v 1.3.2 $('img').height()를 하면 0이 나올때  (0) 2012/03/06
아무것도 안하는 a 태그 걸기  (0) 2012/02/22
입력 폼 체크  (0) 2011/10/07
트랙백1개 댓글0개

입력 폼 체크

크리에이티브 커먼즈 라이선스
Creative Commons License
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> 입력 폼 체크 </TITLE>
</HEAD>
<BODY>
<h1>입력 폼 체크</h1>
<form method="post" onsubmit="return validForm(this);">
	<legend>기본정보</legend>
	<label>이름 <input type="text" name="username" id="username" /></label>
	<label>비밀번호 <input type="password" name="userpw" id="userpw" /></label>
	<label>비밀번호 확인 <input type="password" name="userpw_confirm" id="userpw_confirm" /></label>
	<label>e-mail <input type="text" name="email" id="email" /></label>
	<input type="submit" value="입력완료" />
</form>

<script type="text/javascript">
/**
 * 입력을 완료하고자 할 때 값의 유효성을 확인한다.
 * 만약, 조건에 부합하지 않으면 계속 진행 할 수 없다.
 * @param {Object} form 입력폼 객체
 * @return 정상진행 여부
 * @type Boolean
 */
function validForm(form){
	// '이름' 항목 입력 여부 검사
	if(form.username.value == ""){
		alert("이름을 입력하세요!");
		form.username.focus();	//이름 입력란으로 마우스 포커스를 이동
		return false;			// 폼 전송을 계속 진행할 수 없음
	}
	
	// '이름' 항목 길이 제한
	var namelength = getByteLength(form.username.value);
	if( namelength < 2 || namelength > 20){
		alert("이름은 한글 1~10자 영문 대소문자 2~20자 최대 20 bytes 사용이 가능합니다.");
		form.username.focus();
		return false;
	}

	// '비밀번호' 항목 입력 여부 검사
	if(form.userpw.value == ""){
		alert("비밀번호를 입력하세요!");
		form.userpw.focus();
		return false;
	}

	// '비밀번호 확인' 항목 입력 여부 검사
	if(form.userpw_confirm.value == ""){
		alert("비밀번호 확인을 입력하세요!");
		form.userpw_confirm.focus();
		return false;
	}
	
	// '비밀번호' & '비밀번호 확인'의 동일 여부 검사
	if(form.userpw.value != form.userpw_confirm.value){
		alert("비밀번호와 비밀번호 확인 값이 동일해야 합니다.");
		form.userpw.focus();
		return false;
	}

	// 'e-mail' 입력값 형식 검사
	var regExp = /^[0-9a-zA-Z][0-9a-zA-Z_\-\.]*@[0-9a-zA-Z_\-\.]+[0-9a-zA-Z_\-\.]{2,}$/;
	if(!regExp.test(form.email.value)){
		alert("이메일 형식이 유효하지 않습니다. 예) abc@abc.com");
		form.email.focus();
		return false;
	}

	alert("모든 입력이 정상적으로 완료 되었습니다.");
	return true; // 폼 전송 정상 진행
}

/**
 * 한글 2byte, 그외의 문자 1byte로 계산하여 문자열의 길이를 반환
 * @param str 문자열
 * @return 주어진 문자열의 byte단위 길이
 * @type number
 */
function getByteLength(str) {
    var byteLength = 0;
    for (var inx = 0; inx < str.length; inx++) {
        var oneChar = escape(str.charAt(inx));
        if ( oneChar.length == 1 ) {
            byteLength ++;
        } else if (oneChar.indexOf("%u") != -1) {
            byteLength += 2;
        } else if (oneChar.indexOf("%") != -1) {
            byteLength += oneChar.length/3;
        }
    }
    return byteLength;
}
</script>
</BODY>
</HTML>
저작자 표시 비영리 변경 금지

'개발 > javascript' 카테고리의 다른 글

Knowout.js  (0) 2012/03/19
[jQuery] - v 1.3.2 $('img').height()를 하면 0이 나올때  (0) 2012/03/06
아무것도 안하는 a 태그 걸기  (0) 2012/02/22
입력 폼 체크  (0) 2011/10/07
트랙백0개 댓글0개